D-Quill

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

Try demo here.

Installation

npm install @dossier/d-quill

Usage

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

<RichTextEditor
  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