Rich Text Editor (Moonlight)

A powerful Rich Text Editor using Tiptap and Mantine, powered by Moonlight as well.

Installation

npm i @mongez/react-rte

OR

yarn add @mongez/react-rte

OR

pnpm install @mongez/react-rte

The package requires peer dependencies, so you need to install them as well:

yarn add @mongez/moonlight

Usage

import { RichTextEditor } from '@mongez/react-rte';
import { useState } from 'react';

export function App() {
    const [value, setValue] = useState('');

    return (    
        <RichTextEditor
            value={value}
            onChange={setValue}
            placeholder="Type here..."
            label="Content"
            required
        />
    );
}

The Component by default uses the following:

• Color Selector
• Text Highlighter
• Text Aligner
• Youtube Embedder
• Image Uploader (Drag & Drop)
• Link
• Font Style
• Lists

Available Props

The following table shows all available props:

| Name | Type | Default | Description | | --- | --- | --- | --- | | value | string | '' | The value of the editor, used for controlled value | | onChange | (value: string) => void | () => {} | The function to be called when the value changes | | placeholder | string | '' | The placeholder of the editor | | label | string | '' | The label of the editor | | required | boolean | false | Whether the editor is required or not | | defaultValue | string | '' | The default value of the editor, used for uncontrolled value | | hint | string | '' | Display a hint message below the label | | toolbarProps | ToolbarProps | {} | The props of the toolbar, see Mantine ToolbarProps |

Using as reactive form component

Simply use richTextInput function to get the Rich Text Editor as a form component.

import { richTextInput } from '@mongez/react-rte';
import { createReactiveForm, textInput } from "@mongez/moonlight";

createReactiveForm(reactiveForm => {
    reactiveForm.setInputs([
        textInput('title'),
        richTextInput('content'),
    ]);
})

TODO

• Expose toolbar configurations per component or globally.
• Expose extensions.