A powerful React rich text editor
A powerful React rich text editor with Mithra UI styles built based on quill.js.
Try demo here.
``bash`
npm install @dossier/d-quill
`tsx
import { RichTextEditor, Tools } from "@dossier/d-quill";
import "@dossier/d-quill/dist/dquill.css";
Tools.HEADER_2,
Tools.BOLD,
Tools.ITALIC,
Tools.BULLET_LIST,
Tools.LINK,
]}
onChange={(delta, html) => console.log(html)}
uploadFileHandler={uploadHandler}
warningHandler={warningHandler}
/>;
`
Configure which tools appear in the toolbar via the tools prop:
| Tool | Description |
| ------------------------ | ------------------------------------ |
| Tools.HEADER_1 | Heading 1 |Tools.HEADER_2
| | Heading 2 |Tools.HEADER_3
| | Heading 3 |Tools.HEADER_4
| | Heading 4 |Tools.HEADER_5
| | Heading 5 |Tools.HEADER_6
| | Heading 6 |Tools.BOLD
| | Bold text |Tools.ITALIC
| | Italic text |Tools.UNDERLINE
| | Underlined text |Tools.STRIKETHROUGH
| | Strikethrough text |Tools.BULLET_LIST
| | Unordered (bullet) list |Tools.ORDERED_LIST
| | Ordered (numbered) list |Tools.LINK
| | Hyperlink |Tools.IMAGE
| | Image upload |Tools.VIDEO
| | Embedded video (YouTube/Vimeo) |Tools.CLEAR_FORMATTING
| | Remove all formatting from selection |
Two toolbar themes are available via the theme prop:
- "float" (default) - Toolbar appears on focus, positioned at top-right"block"` - Toolbar is always visible above the editor
-