D-Quill

A powerful React rich text editor with Mithra UI styles built based on quill.js.

Try demo here.

Installation

``bash
npm install @dossier/d-quill
`

Usage

`tsx
import { RichTextEditor, Tools } from "@dossier/d-quill";
import "@dossier/d-quill/dist/dquill.css";

tools={[
Tools.HEADER_2,
Tools.BOLD,
Tools.ITALIC,
Tools.BULLET_LIST,
Tools.LINK,
]}
onChange={(delta, html) => console.log(html)}
uploadFileHandler={uploadHandler}
warningHandler={warningHandler}
/>;
`

Available Tools

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 |

Themes

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