@mongez/react-rte
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

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.

Package Sidebar

Install

npm i @mongez/react-rte

Weekly Downloads

17

Version

2.0.0

License

MIT

Unpacked Size

5.34 MB

Total Files

4367

Last publish

Collaborators

  • hassanzohdy