open-index/open-npm huggingface dataset:
npm package: @musaaj/simpleeditor
Description: SimpleEditor ships two web components powered by Quill:
Latest version: 0.0.6

# 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

```bash
yarn add @musaaj/simpleeditor
```

## Usage

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

```html
<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:

```tsx
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:

```css
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:

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

System dark mode:

```css
@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

```bash
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

```bash
npm run dev
```

## Test and Typecheck

```bash
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`