# @mongez/react-rte > A wrapper for Rich Text Editor React Component. Latest version **2.0.0** (published 2023-11-30) · MIT license · 0 weekly downloads ## Install ```sh npm install @mongez/react-rte pnpm add @mongez/react-rte yarn add @mongez/react-rte bun add @mongez/react-rte ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2023-11-30 | | First published | 2023-03-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 26 | | Unpacked size | 5.1 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | hassanzohdy | | Maintainers | hassanzohdy | | Keywords | rich-text-editor, WYSIWYG, react-component, react-rich-text-editor, moonlight | ## Links - npm: https://www.npmjs.com/package/@mongez/react-rte - npm.io page: https://npm.io/package/@mongez/react-rte ## Dependencies (26) - [@tiptap/pm](https://npm.io/package/@tiptap/pm.md) ^2.1.12 - [@tiptap/react](https://npm.io/package/@tiptap/react.md) ^2.1.12 - [@mantine/tiptap](https://npm.io/package/@mantine/tiptap.md) ^7.2.2 - [prosemirror-keymap](https://npm.io/package/prosemirror-keymap.md) ^1.2.2 - [@tiptap/starter-kit](https://npm.io/package/@tiptap/starter-kit.md) ^2.1.12 - [prosemirror-history](https://npm.io/package/prosemirror-history.md) ^1.3.2 - [prosemirror-commands](https://npm.io/package/prosemirror-commands.md) ^1.5.2 - [prosemirror-gapcursor](https://npm.io/package/prosemirror-gapcursor.md) ^1.3.2 - [@tiptap/extension-link](https://npm.io/package/@tiptap/extension-link.md) ^2.1.12 - [prosemirror-dropcursor](https://npm.io/package/prosemirror-dropcursor.md) 1.8.1 - [@tiptap/extension-color](https://npm.io/package/@tiptap/extension-color.md) ^2.1.12 - [@tiptap/extension-image](https://npm.io/package/@tiptap/extension-image.md) ^2.1.12 - [@tiptap/extension-table](https://npm.io/package/@tiptap/extension-table.md) ^2.1.12 - [prosemirror-schema-list](https://npm.io/package/prosemirror-schema-list.md) ^1.3.0 - [@tiptap/extension-youtube](https://npm.io/package/@tiptap/extension-youtube.md) ^2.1.12 - [@tiptap/extension-highlight](https://npm.io/package/@tiptap/extension-highlight.md) ^2.1.12 - [@tiptap/extension-subscript](https://npm.io/package/@tiptap/extension-subscript.md) ^2.1.12 - [@tiptap/extension-table-row](https://npm.io/package/@tiptap/extension-table-row.md) ^2.1.12 - [@tiptap/extension-underline](https://npm.io/package/@tiptap/extension-underline.md) ^2.1.12 - [@tiptap/extension-table-cell](https://npm.io/package/@tiptap/extension-table-cell.md) ^2.1.12 - [@tiptap/extension-text-align](https://npm.io/package/@tiptap/extension-text-align.md) ^2.1.12 - [@tiptap/extension-text-style](https://npm.io/package/@tiptap/extension-text-style.md) ^2.1.12 - [@tiptap/extension-font-family](https://npm.io/package/@tiptap/extension-font-family.md) ^2.1.12 - [@tiptap/extension-placeholder](https://npm.io/package/@tiptap/extension-placeholder.md) ^2.1.12 - [@tiptap/extension-superscript](https://npm.io/package/@tiptap/extension-superscript.md) ^2.1.12 - [@tiptap/extension-table-header](https://npm.io/package/@tiptap/extension-table-header.md) ^2.1.12 ## Alternatives - [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads - [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads - [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads - [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads - [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads ## Recent versions - 2.0.0 (latest) — 2023-11-30 - 1.0.16 — 2023-07-17 - 1.0.15 — 2023-07-17 - 1.0.14 — 2023-07-10 - 1.0.13 — 2023-07-04 - 1.0.12 — 2023-06-23 - 1.0.11 — 2023-06-23 - 1.0.10 — 2023-05-14 - 1.0.9 — 2023-04-19 - 1.0.8 — 2023-04-18 - 1.0.7 — 2023-04-06 - 1.0.6 — 2023-04-06 - 1.0.5 — 2023-03-09 - 1.0.4 — 2023-03-09 - 1.0.3 — 2023-03-07 - … 2 more at https://npm.io/package/@mongez/react-rte/versions ## README # 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 ```tsx import { RichTextEditor } from '@mongez/react-rte'; import { useState } from 'react'; export function App() { const [value, setValue] = useState(''); return ( ); } ``` 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](https://mantine.dev/others/tiptap/#sticky-toolbar) | ## Using as reactive form component Simply use `richTextInput` function to get the Rich Text Editor as a form component. ```tsx 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. --- _Source: https://npm.io/package/@mongez/react-rte · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._