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.