@mongez/react-rte

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.