@musaaj/simpleeditor 0.0.1

package/README.md

@@ -0,0 +1,148 @@
+# 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 simpleeditor
+```
+
+## Usage
+
+```ts
+import "simpleeditor";
+import "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 "simpleeditor";
+import "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
+yarn build
+```
+
+Build output:
+
+- `dist/simpleeditor.js`
+- `dist/style.css`
+- `dist/types/*.d.ts`
+
+`npm publish` will run build automatically via `prepublishOnly`.
+
+## Development
+
+```bash
+yarn dev
+```
+
+## Docs
+
+- `docs/overview.md`
+- `docs/web-components.md`
+- `docs/quill-api.md`
+- `docs/blots.md`
+- `docs/export-format.md`
+- `docs/faq.md`