SimpleEditor

SimpleEditor ships two web components powered by Quill:

• <quill-textarea>: editable rich-text surface with toolbar
• <quill-div>: read-only renderer for exported HTML

Install

yarn add @musaaj/simpleeditor

Usage

import "@musaaj/simpleeditor";
import "@musaaj/simpleeditor/style.css";

<quill-textarea value="<p>Hello world</p>" placeholder="Write..."></quill-textarea>
<quill-div value="<p>Read only preview</p>"></quill-div>

API

quill-textarea

Attributes:

• value
• placeholder
• name
• disabled
• readonly

Properties:

• value: string (clean exported HTML)
• textValue: string (plain text)

Events:

• valuechange (bubbles)

quill-div

Attributes / properties:

• value

Behavior:

• Sanitizes input HTML
• Renders math/chem/table output

React wrapper

Use the wrapper components in examples/react/quill-components.tsx to avoid handling custom element refs/events in every screen.

Example:

import "@musaaj/simpleeditor";
import "@musaaj/simpleeditor/style.css";
import { QuillTextareaReact, QuillDivReact } from "./quill-components";
import { useState } from "react";

export function EditorDemo() {
  const [html, setHtml] = useState("<p>Hello world</p>");

  return (
    <>
      <QuillTextareaReact value={html} onChange={setHtml} placeholder="Write..." />
      <QuillDivReact value={html} />
    </>
  );
}

Theming

All component styles live in src/style.css and are exposed via CSS variables (--qt-*).

Global override:

quill-textarea.quill-textarea {
  --qt-toolbar-bg: #101828;
  --qt-toolbar-border: #1f2937;
  --qt-button-bg: #111827;
  --qt-button-color: #e5e7eb;
  --qt-editor-bg: #0b1220;
  --qt-editor-border: #1f2937;
  --qt-text-color: #e2e8f0;
}

Per-instance override:

<quill-textarea
  style="--qt-editor-bg:#fff; --qt-toolbar-bg:#f8fafc; --qt-button-color:#1f2937;"
></quill-textarea>

System dark mode:

@media (prefers-color-scheme: dark) {
  quill-textarea.quill-textarea {
    --qt-modal-bg: #0f172a;
    --qt-modal-text: #e2e8f0;
    --qt-table-ui-bg: #0b1220;
    --qt-table-ui-color: #f1f5f9;
  }
}

Build and Publish

npm run build

Build output:

• dist/simpleeditor.js
• dist/simpleeditor.css
• dist/types/main.d.ts

npm publish will run build automatically via prepublishOnly.

Development

npm run dev

Test and Typecheck

npm run test
npm run test:run
npm run typecheck

Docs

• docs/overview.md
• docs/web-components.md
• docs/quill-api.md
• docs/blots.md
• docs/export-format.md
• docs/faq.md