stilo-editor 0.2.0 → 0.3.0

package/README.md

@@ -5,144 +5,43 @@
   </picture>
 </p>
 
+<h3 align="center">A complete rich text editor. Everything included, ready in minutes.</h3>
+
+<p align="center">
+  Free and open source (MIT) · clean HTML in and out · built on ProseMirror
+</p>
+
 <p align="center">
   <a href="https://www.npmjs.com/package/stilo-editor"><img src="https://img.shields.io/npm/v/stilo-editor" alt="npm version"></a>
-  <a href="LICENSE"><img src="https://img.shields.io/npm/l/stilo-editor" alt="MIT license"></a>
+  <a href="https://github.com/kojak8791/stilo-editor/actions/workflows/ci.yml"><img src="https://github.com/kojak8791/stilo-editor/actions/workflows/ci.yml/badge.svg" alt="CI status"></a>
   <img src="https://img.shields.io/npm/types/stilo-editor" alt="TypeScript types included">
+  <a href="LICENSE"><img src="https://img.shields.io/npm/l/stilo-editor" alt="MIT license"></a>
 </p>
 
-Open-source HTML5 WYSIWYG editor built on [ProseMirror](https://prosemirror.net).
-Clean HTML in and out, headless core, no paid tiers.
+<p align="center">
+  <a href="https://kojak8791.github.io/stilo-editor/"><strong>Live demo</strong></a> ·
+  <a href="docs/frameworks/react.md"><strong>React</strong></a> ·
+  <a href="docs/frameworks/vue.md"><strong>Vue</strong></a> ·
+  <a href="docs/frameworks/svelte.md"><strong>Svelte</strong></a> ·
+  <a href="docs/API.md"><strong>API</strong></a> ·
+  <a href="docs/FEATURES.md"><strong>All features</strong></a>
+</p>
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/kojak8791/stilo-editor/main/assets/screenshot.png" alt="Stilo with the default toolbar: formatted text, a checklist, a table and the link popover open" width="800">
 </p>
 
-<h2 align="center">
-  <a href="https://kojak8791.github.io/stilo-editor/">See it in action: try the live demo →</a>
-</h2>
-
-> [!WARNING]
-> **Preview release.** Versions `0.x` are early previews: the editor works, but APIs may change
-> in any minor version until `1.0.0`. Read the release notes before updating.
-
-## Why Stilo
-
-- **Built for very large documents.** Typing stays immediate in a document longer than most
-  novels (see [Large documents](https://github.com/kojak8791/stilo-editor#large-documents)).
-  Measured in a real browser, checked against budgets, not assumed.
-- **Entirely open source (MIT).** Aiming at the feature level of the established rich text
-  editors, with no paid tiers and no closed "pro" extensions.
-- **HTML is the public format.** Content goes in as HTML and comes out as clean, semantic,
-  self-contained HTML, with a strict allowlist for tags, attributes and inline styles.
-- **Headless core, optional UI.** The core works without any UI; the default toolbar and menus are
-  a separate, replaceable module.
-- **Extensible by design.** Every feature is an extension with the same shape.
-- **Framework-agnostic.** Vanilla TypeScript first; React/Vue wrappers later as thin layers.
-
-## Large documents
-
-Stilo is made for long documents: contracts, manuals, books, reports. Typing feels immediate in
-a document of 10,000 paragraphs — about 400,000 words, longer than most novels — and the editor
-stays usable at five times that size, without pagination tricks and without splitting the
-content. Formatting, search and selection keep up with the size of the text.
-
-This is measured, not promised. A benchmark drives the editor in a real browser on generated
-documents and times everything from loading and exporting the HTML down to the milliseconds
-between a key press and the character on screen; every change is checked against performance
-budgets. What it means in practice, the numbers and the limits:
-[Performance](docs/PERFORMANCE.md).
-
-## Features
-
-What the editor does today, with `defaultExtensions` and the default toolbar. On macOS, use
-<kbd>⌘</kbd> for <kbd>Ctrl</kbd> and <kbd>Option</kbd> for <kbd>Alt</kbd>. The *Markdown*
-column is what you type to get the format as you write.
-
-| Feature | Keyboard | Markdown | Notes |
-|---|---|---|---|
-| **Text** | | | |
-| Bold | <kbd>Ctrl</kbd>+<kbd>B</kbd> | `**text**` | |
-| Italic | <kbd>Ctrl</kbd>+<kbd>I</kbd> | `*text*` `_text_` | |
-| Underline | <kbd>Ctrl</kbd>+<kbd>U</kbd> | | |
-| Strikethrough | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>S</kbd> | `~~text~~` | |
-| Inline code | <kbd>Ctrl</kbd>+<kbd>E</kbd> | `` `text` `` | |
-| Subscript | <kbd>Ctrl</kbd>+<kbd>,</kbd> | | Subscript and superscript exclude each other |
-| Superscript | <kbd>Ctrl</kbd>+<kbd>.</kbd> | | |
-| Font family | | | Toolbar dropdown: generic families (sans serif, serif, monospace) and common fonts, each shown in its own font; a font that is not in the list (e.g. pasted from Word) is still shown |
-| Font size | | | − and + change the size by one point; the field between them shows the size, takes a typed one and opens a list. Unit pt by default (px or rem as an option) |
-| Text color | | | The button applies the last color; its arrow opens a palette, "No color" and a custom color |
-| Highlight | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>H</kbd> | `==text==` | Same button as text color; the shortcut applies the default highlight |
-| Clear formatting | <kbd>Ctrl</kbd>+<kbd>\\</kbd> | | Links stay |
-| Text case | | | A menu: UPPERCASE, lowercase, Title Case, Sentence case, tOGGLE cASE; the letters change, the formatting stays |
-| **Links** | | | |
-| Link | <kbd>Ctrl</kbd>+<kbd>K</kbd> | | A popover sets the URL and "open in new tab"; on a link, a small bubble offers open, edit and remove |
-| **Blocks** | | | |
-| Paragraph | <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>0</kbd> | | |
-| Headings 1–6 | <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>1</kbd>…<kbd>6</kbd> | `# ` … `###### ` | Also in the toolbar dropdown |
-| Quote | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>B</kbd> | `> ` | |
-| Code block | <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>C</kbd> | ```` ``` ```` + space, ```` ```js ```` + space for a language | Plain text in a monospace font, no formatting; the selected paragraphs become one block, a line each, and back. <kbd>Enter</kbd> on an empty last line, or <kbd>Ctrl</kbd>+<kbd>Enter</kbd>, leaves it. The language is written as `class="language-js"` for syntax highlighters |
-| Horizontal line | | `---` | |
-| Line break | <kbd>Shift</kbd>+<kbd>Enter</kbd> | | New line in the same paragraph |
-| Align left / center / right / justify | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>L</kbd> / <kbd>E</kbd> / <kbd>R</kbd> / <kbd>J</kbd> | | Paragraphs and headings; the toolbar button opens the four alignments; changing the block type (also with `# `) keeps the alignment |
-| Line spacing | | | Paragraphs and headings; the toolbar menu offers Default, 1, 1.15, 1.5 and 2; changing the block type keeps it |
-| Move block up / down | <kbd>Alt</kbd>+<kbd>↑</kbd> / <kbd>Alt</kbd>+<kbd>↓</kbd> | | The block or list item at the cursor, or all the selected ones; sub-items move along |
-| **Lists** | | | |
-| Bulleted list | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>8</kbd> | `- ` `* ` `+ ` | |
-| Numbered list | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>7</kbd> | `1. ` | Starts from the number you type |
-| Checklist | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>9</kbd> | `[ ] ` `[x] ` | Click a checkbox, or press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> to check the selected items; checked items are struck through |
-| Indent / outdent item | <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> | | |
-| **Tables** | | | |
-| Insert a table | | | Toolbar grid up to 10 × 8, with or without a header row |
-| Rows, columns, cells | | | With the cursor in a table, the same button opens: insert or delete rows and columns, merge and split cells, header row and column, delete table |
-| Table handles | | | Handles on the row and column under the mouse select them and open their menu (insert, delete); a corner handle opens merge, split and delete table |
-| Move between cells | <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> | | <kbd>Tab</kbd> in the last cell adds a row |
-| Select cells | | | Drag across cells |
-| Resize a column | | | Drag the border of a column; the width is kept in the HTML |
-| **Images** | | | |
-| Paste an image | <kbd>Ctrl</kbd>+<kbd>V</kbd> | | A copied image or screenshot is embedded in the HTML (PNG, JPEG, GIF, WebP, up to 5 MB by default); an image copied from a web page keeps its address |
-| Resize an image | | | Select it and drag one of its side handles; the proportions stay |
-| **Insert** | | | |
-| Special characters and emoji | | | A popover with search, symbols and emoji; it stays open to insert several in a row |
-| **Editing** | | | |
-| Undo | <kbd>Ctrl</kbd>+<kbd>Z</kbd> | | <kbd>Backspace</kbd> right after a Markdown shortcut undoes it |
-| Redo | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or <kbd>Ctrl</kbd>+<kbd>Y</kbd> | | |
-| Paste | <kbd>Ctrl</kbd>+<kbd>V</kbd> | | HTML is cleaned up; plain text lines become paragraphs. From Word and Google Docs the body font, size and color are dropped (text that differs keeps them) and Word lists become real lists; tables keep their column widths |
-| Paste as plain text | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> | | Only the text, without formatting |
-| Find and replace | <kbd>Ctrl</kbd>+<kbd>F</kbd> | | A bar under the toolbar: match case, whole word, previous and next match, replace one or all; the matches are counted exactly and the first 1,000 are highlighted; <kbd>Enter</kbd> / <kbd>Shift</kbd>+<kbd>Enter</kbd> go to the next / previous match, <kbd>Esc</kbd> closes it |
-| Word and character count | | | Optional status bar under the editor; also `getWordCount()` in the API |
-
-<table>
-  <tr>
-    <td width="50%"><img src="https://raw.githubusercontent.com/kojak8791/stilo-editor/main/assets/screenshot-find.png" alt="The find bar under the toolbar: five matches of espresso highlighted, the current one in orange, and ristretto in the replace field" width="400"></td>
-    <td width="50%"><img src="https://raw.githubusercontent.com/kojak8791/stilo-editor/main/assets/screenshot-table.png" alt="A coffee menu table with a row selected by its handle and the row menu open: insert row above, insert row below, delete row" width="400"></td>
-  </tr>
-  <tr>
-    <td>Find and replace: match case, whole word, an exact count of the matches.</td>
-    <td>Tables: handles on rows and columns open their menu.</td>
-  </tr>
-  <tr>
-    <td width="50%"><img src="https://raw.githubusercontent.com/kojak8791/stilo-editor/main/assets/screenshot-fonts.png" alt="The font dropdown open on a Times New Roman text, each font drawn in its own font" width="400"></td>
-    <td width="50%"><img src="https://raw.githubusercontent.com/kojak8791/stilo-editor/main/assets/screenshot-color.png" alt="The text color palette open, with No color, the color grid and a custom color field" width="400"></td>
-  </tr>
-  <tr>
-    <td>Fonts and sizes: the toolbar shows the font and the size at the cursor.</td>
-    <td>Text color and highlight: a palette, the last color one click away, a custom color.</td>
-  </tr>
-</table>
-
-**Keyboard and accessibility.** Most shortcuts are the ones of Google Docs; the others follow
-the usual conventions of web editors, and every toolbar tooltip shows its shortcut. The toolbar
-follows the WAI-ARIA *Toolbar* pattern: <kbd>Alt</kbd>+<kbd>F10</kbd> moves the focus from the
-text to the toolbar, the arrow keys move between buttons, <kbd>Esc</kbd> goes back to the text.
-Every popover works with the keyboard alone and <kbd>Esc</kbd> closes it.
-
-## Usage
+## Quick start
 
 ```sh
 npm install stilo-editor
 ```
 
+```html
+<div id="toolbar"></div>
+<div id="editor"></div>
+```
+
 ```ts
 import 'stilo-editor/style.css';
 import { Editor, defaultExtensions } from 'stilo-editor';
@@ -159,69 +58,108 @@ createToolbar(editor, { container: document.querySelector<HTMLElement>('#toolbar
 editor.getHTML(); // '<p>Hello <strong>world</strong></p>'
 ```
 
-Options, commands, events, extensions and the toolbar: **[API reference](docs/API.md)**.
-Without the default toolbar, import `stilo-editor/content.css` instead of `style.css` and build
-your own controls on the same API.
+✅ That is the whole setup.
+
+### Want your own UI?
+
+Skip the toolbar: the core is headless.
+
+```ts
+import 'stilo-editor/content.css';
+import { Editor, defaultExtensions } from 'stilo-editor';
+
+const editor = new Editor({
+  element: document.querySelector<HTMLElement>('#editor')!,
+  extensions: [defaultExtensions()],
+});
+
+document.querySelector('#bold')!.addEventListener('click', () => editor.commands.toggleBold());
+document.querySelector('#undo')!.addEventListener('click', () => editor.commands.undo());
+```
 
-## Support
+Commands, button states and events: [API reference](docs/API.md).
 
-- **Bugs and feature requests:** open an
-  [issue](https://github.com/kojak8791/stilo-editor/issues/new/choose); the forms ask for what
-  is needed to reproduce a bug (steps, Stilo version, browser).
-- **Questions:** open an issue too, with a short title that says what you are trying to do.
-- **Security vulnerabilities:** never in a public issue; report them privately as described in
-  [SECURITY.md](SECURITY.md).
+### React
 
-Contributions are welcome: start from [CONTRIBUTING.md](CONTRIBUTING.md).
+```tsx
+import 'stilo-editor/style.css';
+import { StiloEditor } from 'stilo-editor/react';
 
-## Roadmap
+<StiloEditor content="<p>Hello</p>" onInput={({ editor }) => save(editor.getHTML())} />;
+```
 
-| Milestone | Content | Status |
-|---|---|---|
-| M0 — Foundations | Docs, scaffolding, core contracts, HTML pipeline, test helpers, `Bold` reference extension | Done |
-| M1 — MVP | Core editing, history, basic marks and blocks, lists, paste cleanup, default toolbar, demo, benchmarks | Done |
-| M2 — v1.0 | Preview releases `0.x` on npm, then tables, images, fonts and colors, productivity tools up to `1.0.0` | In progress |
-| M3 — Later | Real-time collaboration (Yjs), framework wrappers, embeds | Planned |
+React 18 and 19, server-side rendering included; `useStiloEditor` for your own UI:
+[React guide](docs/frameworks/react.md).
 
-Full feature list and priorities in [docs/SPEC.md](docs/SPEC.md).
+### Vue
 
-## How it is built
+```vue
+<script setup>
+import 'stilo-editor/style.css';
+import { StiloEditor } from 'stilo-editor/vue';
+</script>
 
-Stilo is designed and owned by Alessio Coggiola and developed with AI assistance
-([Claude](https://claude.com/claude-code)). Every decision is written down before the code
-([docs/](docs/), [ADRs](docs/decisions/)), every change goes through the quality gate
-(typecheck, lint, about 950 unit tests including XSS vectors) and is tried in the demo before
-it is merged, and performance is measured against explicit budgets (`npm run bench`).
+<template>
+  <StiloEditor content="<p>Hello</p>" @input="({ editor }) => save(editor.getHTML())" />
+</template>
+```
 
-| Document | Content |
-|---|---|
-| [API.md](docs/API.md) | API reference for applications |
-| [VISION.md](docs/VISION.md) | Why and what |
-| [SPEC.md](docs/SPEC.md) | Features, non-functional requirements, roadmap |
-| [ARCHITECTURE.md](docs/ARCHITECTURE.md) | Stack, file layout, extension API, HTML contract |
-| [UI.md](docs/UI.md) | Design of the default UI |
-| [PERFORMANCE.md](docs/PERFORMANCE.md) | Performance in practice, how it is measured, limits |
-| [BACKLOG.md](docs/BACKLOG.md) | Tasks done and planned |
-| [AGENTS.md](AGENTS.md) | Rules for contributors and coding agents |
-| [CONTRIBUTING.md](CONTRIBUTING.md) | How to report bugs and propose changes |
-| [SECURITY.md](SECURITY.md) | How to report a vulnerability |
+Vue 3.4 and later, server-side rendering included; `useStiloEditor` for your own UI:
+[Vue guide](docs/frameworks/vue.md).
 
-## Development
+### Svelte
 
-Requires Node.js 22 or later.
+```svelte
+<script>
+  import 'stilo-editor/style.css';
+  import { StiloEditor } from 'stilo-editor/svelte';
+</script>
 
-```sh
-npm install
-npm run check   # typecheck + lint + unit tests
-npm run dev     # demo page
-npm run site    # public site (published on GitHub Pages from main)
-npm run bench   # performance benchmarks (needs: npx playwright install chromium)
-npm run test:e2e # E2E tests in Chromium, Firefox and WebKit (needs: npx playwright install)
+<StiloEditor content="<p>Hello</p>" oninput={({ editor }) => save(editor.getHTML())} />
 ```
 
-## License
+A component for Svelte 5, actions for Svelte 4 and 5, server-side rendering included:
+[Svelte guide](docs/frameworks/svelte.md).
+
+## What's included
 
-[MIT](LICENSE) © 2026 Alessio Coggiola
+- **Text:** bold, italic, underline, strikethrough, code, sub/superscript, fonts, sizes,
+  colors, highlight, text case
+- **Blocks:** headings, quotes, code blocks, alignment, line spacing, move up/down
+- **Lists:** bulleted, numbered, checklists
+- **Tables:** insert, merge and split, row and column handles, resizable columns
+- **Images:** paste and resize
+- **Tools:** links, find and replace, special characters and emoji, word count
+
+Markdown shortcuts as you type, a keyboard shortcut for everything, a toolbar you can drive
+from the keyboard alone. Every feature, shortcut and option: [All features](docs/FEATURES.md).
+
+## Why Stilo
+
+- **Clean, safe HTML.** HTML in, semantic HTML out, through a strict allowlist of tags,
+  attributes and styles.
+- **Paste from Word and Google Docs.** Real lists, kept tables, no stray fonts and colors.
+- **Big documents welcome.** Typing stays instant at 10,000 paragraphs
+  ([numbers](docs/PERFORMANCE.md)).
+- **Tested in Chromium, Firefox and WebKit**, with TypeScript types included.
+- **Nothing behind a paywall.** Tables, paste from Word, find and replace: all in the free,
+  MIT-licensed package.
+
+## Status
+
+`0.x` preview: it works, but APIs may change in minor versions until `1.0.0`.
+Read the [changelog](CHANGELOG.md) before updating.
+Next: real-time collaboration ([roadmap](docs/SPEC.md)).
+
+## Contributing
+
+Bugs, ideas and questions: [issues](https://github.com/kojak8791/stilo-editor/issues/new/choose).
+Code: [CONTRIBUTING.md](CONTRIBUTING.md). Vulnerabilities: [SECURITY.md](SECURITY.md).
+
+Designed by Alessio Coggiola and built with [Claude](https://claude.com/claude-code), from a
+written [architecture](docs/ARCHITECTURE.md) and [decision records](docs/decisions/).
+
+## License
 
-The logo wordmark is drawn from [IBM Plex](https://github.com/IBM/plex), licensed under the
-[SIL Open Font License 1.1](https://openfontlicense.org).
+[MIT](LICENSE) © 2026 Alessio Coggiola. Logo wordmark from
+[IBM Plex](https://github.com/IBM/plex) ([OFL 1.1](https://openfontlicense.org)).

package/dist/action-lB2jnYNO.js

@@ -0,0 +1,66 @@
+import { Q as e, t } from "./src-DxTXpULc.js";
+import { h as n, t as r } from "./ui-WFNvrkbM.js";
+//#region src/svelte/editor-action.ts
+function i(t, n) {
+	let { onready: r, ...i } = n, o = new e({
+		...i,
+		element: t
+	});
+	return r?.(o), {
+		update: (e) => a(o, e.editable),
+		destroy: () => o.destroy()
+	};
+}
+function a(e, t) {
+	let n = t ?? !0;
+	e.isEditable !== n && e.setEditable(n);
+}
+//#endregion
+//#region src/svelte/editor-with-ui-action.ts
+var o = {
+	input: "oninput",
+	selectionchange: "onselectionchange",
+	transaction: "ontransaction",
+	focus: "onfocus",
+	blur: "onblur"
+};
+function s(i, s = {}) {
+	let u = s, { extensions: d = [t()], toolbar: f = !0, statusBar: p = !1, messages: m, onready: h, ...g } = s, _ = f ? c(i) : null, v = c(i), y = p ? c(i) : null, b = new e({
+		...g,
+		extensions: d,
+		element: v
+	});
+	_ && r(b, {
+		...f === !0 ? {} : f,
+		container: _,
+		messages: m
+	}), y && n(b, {
+		container: y,
+		messages: m
+	});
+	for (let e of Object.keys(o)) l(b, e, () => u);
+	return h?.(b), {
+		update: (e) => {
+			u = e, a(b, e.editable);
+		},
+		destroy: () => {
+			b.destroy();
+			for (let e of [
+				_,
+				v,
+				y
+			]) e?.remove();
+		}
+	};
+}
+function c(e) {
+	return e.appendChild(document.createElement("div"));
+}
+function l(e, t, n) {
+	e.on(t, (e) => {
+		let r = n()[o[t]];
+		r?.(e);
+	});
+}
+//#endregion
+export { i as n, s as t };

package/dist/content.css

@@ -152,6 +152,15 @@ li.ProseMirror-selectednode:after {
 
 /* Stilo content defaults */
 
+/*
+ * The editable area gets some room around the text and a visible height when empty.
+ * `:where()` has no specificity, so any rule of the page replaces these values.
+ */
+:where(.stilo-content.ProseMirror) {
+  min-height: 6em;
+  padding: 12px 16px;
+}
+
 /* Lists: list items hold paragraphs, which must not add their own margins. */
 .stilo-content ul,
 .stilo-content ol {

package/dist/core/editor.d.ts

@@ -94,7 +94,10 @@ export declare class Editor {
      * the name is unknown.
      */
     getAttributes(name: string): Record<string, unknown>;
-    /** Switches read-only mode on/off. */
+    /**
+     * Switches read-only mode on/off. A change dispatches an empty transaction, so the UIs that
+     * refresh on `transaction` follow it.
+     */
     setEditable(editable: boolean): void;
     /** Focuses the editor; optionally moves the cursor to the start or end of the document. */
     focus(position?: 'start' | 'end'): void;
@@ -107,8 +110,15 @@ export declare class Editor {
     /** Emits `destroy`, destroys the view, removes all handlers. Calling it twice is a no-op. */
     destroy(): void;
     private createState;
-    /** Builds `commands` from the extension commands; `can` runs without `dispatch`. */
+    /** Builds `commands` from the extension commands; `can` does not apply them. */
     private createRunners;
+    /**
+     * Runs `command`, or only tells whether it would apply. In read-only mode a command that
+     * changes the document or the stored marks does not apply and returns `false`; the others
+     * (selection, search) do. To know, the command builds its transaction: `can` costs as much
+     * as a run there.
+     */
+    private runCommand;
     private setContent;
     /**
      * Removes the DOM selection when it lies inside the editor. Replacing many nodes while the

package/dist/index.js

@@ -1 +1 @@
-export { B as Blockquote, z as Bold, R as BulletList, L as ClearFormatting, I as Code, F as CodeBlock, X as DEFAULT_PRIORITY, P as Document, N as DropCursor, Q as Editor, M as GapCursor, j as HardBreak, A as Heading, k as Highlight, O as History, D as HorizontalRule, E as Image, T as Italic, w as LineHeight, C as Link, S as ListItem, x as MoveBlock, b as OrderedList, y as Paragraph, v as Placeholder, g as Search, nt as StiloError, h as Strike, m as Subscript, p as Superscript, d as Table, u as TaskItem, l as TaskList, c as Text, s as TextAlign, o as TextCase, r as TextStyle, n as Underline, $ as attrsMatch, t as defaultExtensions, Z as defineExtension, i as getFontSize, _ as getSearchResults, f as getTableHeaders, V as getWordCount, U as insertBlock, W as insertBlockNode, et as isMarkActive, tt as isNodeActive, Y as markInputRule, G as setMark, H as textDecorationRules, a as toFontSize, J as toggleList, K as toggleMark, q as unsetMark } from "./src-CV6pgfTS.js";
+export { B as Blockquote, z as Bold, R as BulletList, L as ClearFormatting, I as Code, F as CodeBlock, X as DEFAULT_PRIORITY, P as Document, N as DropCursor, Q as Editor, M as GapCursor, j as HardBreak, A as Heading, k as Highlight, O as History, D as HorizontalRule, E as Image, T as Italic, w as LineHeight, C as Link, S as ListItem, x as MoveBlock, b as OrderedList, y as Paragraph, v as Placeholder, g as Search, nt as StiloError, h as Strike, m as Subscript, p as Superscript, d as Table, u as TaskItem, l as TaskList, c as Text, s as TextAlign, o as TextCase, r as TextStyle, n as Underline, $ as attrsMatch, t as defaultExtensions, Z as defineExtension, i as getFontSize, _ as getSearchResults, f as getTableHeaders, V as getWordCount, U as insertBlock, W as insertBlockNode, et as isMarkActive, tt as isNodeActive, Y as markInputRule, G as setMark, H as textDecorationRules, a as toFontSize, J as toggleList, K as toggleMark, q as unsetMark } from "./src-DxTXpULc.js";

package/dist/react/index.d.ts

@@ -0,0 +1,5 @@
+/** Public API of the Stilo React wrapper. */
+/** The editor with the default UI. */
+export { StiloEditor, type StiloEditorEventProps, type StiloEditorProps } from './stilo-editor';
+/** The editor alone, for a custom UI. */
+export { type UseStiloEditorOptions, type UseStiloEditorResult, useStiloEditor, } from './use-stilo-editor';

package/dist/react/stilo-editor.d.ts

@@ -0,0 +1,37 @@
+import { type ReactElement } from 'react';
+import { type Editor, type EditorEvents, type EditorOptions, type EventHandler } from '../index';
+import { type Messages, type ToolbarOptions } from '../ui/index';
+/** Editor events forwarded to the props of {@link StiloEditor}. */
+declare const EVENT_PROPS: {
+    readonly input: 'onInput';
+    readonly selectionchange: 'onSelectionChange';
+    readonly transaction: 'onTransaction';
+    readonly focus: 'onFocus';
+    readonly blur: 'onBlur';
+};
+type ForwardedEvent = keyof typeof EVENT_PROPS;
+/** Event props of {@link StiloEditor}: `onInput` for `input`, and so on. */
+export type StiloEditorEventProps = {
+    [E in ForwardedEvent as (typeof EVENT_PROPS)[E]]?: EventHandler<EditorEvents[E]>;
+};
+/** Props of {@link StiloEditor}. */
+export interface StiloEditorProps extends Omit<EditorOptions, 'element' | 'extensions'>, StiloEditorEventProps {
+    /** Extensions to load. Default: `[defaultExtensions()]`. */
+    extensions?: EditorOptions['extensions'];
+    /** The default toolbar: `true` (default), `false`, or its options without `container`. */
+    toolbar?: boolean | Omit<ToolbarOptions, 'container' | 'messages'>;
+    /** The status bar with the word and character count, under the editor. Default: `false`. */
+    statusBar?: boolean;
+    /** Strings of the toolbar and the status bar. Default: `en`. */
+    messages?: Messages;
+    /** Class of the element that holds the toolbar, the editor and the status bar. */
+    className?: string;
+    /** Called once the editor is created, with the editor. */
+    onReady?: (editor: Editor) => void;
+}
+/**
+ * The editor with the default UI. The props are read once, when the editor is created, except
+ * `editable` and the event handlers, which follow their changes.
+ */
+export declare function StiloEditor(props: StiloEditorProps): ReactElement;
+export {};

package/dist/react/use-stilo-editor.d.ts

@@ -0,0 +1,15 @@
+import { Editor, type EditorOptions } from '../index';
+/** Options of {@link useStiloEditor}: the editor options without `element`. */
+export type UseStiloEditorOptions = Omit<EditorOptions, 'element'>;
+/** What {@link useStiloEditor} returns. */
+export interface UseStiloEditorResult {
+    /** Ref of the element that holds the editor. */
+    ref: (element: HTMLElement | null) => void;
+    /** The editor; `null` before the element is mounted, on the server and after unmount. */
+    editor: Editor | null;
+}
+/**
+ * Creates an editor inside the element that gets `ref` and destroys it when the element goes.
+ * The options are read once, when the editor is created; only `editable` follows its changes.
+ */
+export declare function useStiloEditor(options: UseStiloEditorOptions): UseStiloEditorResult;

package/dist/react.js

@@ -0,0 +1,75 @@
+"use client";
+import { Q as e, t } from "./src-DxTXpULc.js";
+import { h as n, t as r } from "./ui-WFNvrkbM.js";
+import { createElement as i, useEffect as a, useRef as o, useState as s } from "react";
+//#region src/react/use-stilo-editor.ts
+function c(t) {
+	let [n, r] = s(null), [i, c] = s(null), l = o(t);
+	a(() => {
+		if (!n) return;
+		let t = new e({
+			...l.current,
+			element: n
+		});
+		return c(t), () => {
+			t.destroy(), c(null);
+		};
+	}, [n]);
+	let u = t.editable ?? !0;
+	return a(() => {
+		i && !i.isDestroyed && i.isEditable !== u && i.setEditable(u);
+	}, [i, u]), {
+		ref: r,
+		editor: i
+	};
+}
+//#endregion
+//#region src/react/stilo-editor.ts
+var l = {
+	input: "onInput",
+	selectionchange: "onSelectionChange",
+	transaction: "onTransaction",
+	focus: "onFocus",
+	blur: "onBlur"
+};
+function u(e) {
+	let [u] = s(() => ({
+		extensions: e.extensions ?? [t()],
+		toolbar: e.toolbar ?? !0,
+		statusBar: e.statusBar ?? !1,
+		messages: e.messages
+	})), { ref: f, editor: p } = c({
+		...e,
+		extensions: u.extensions
+	}), m = o(null), h = o(null), g = o(e);
+	return a(() => {
+		g.current = e;
+	}), a(() => {
+		if (!p || p.isDestroyed) return;
+		let { toolbar: e, statusBar: t, messages: i } = u, a, o;
+		e && m.current && (a = r(p, {
+			...e === !0 ? {} : e,
+			container: m.current,
+			messages: i
+		})), t && h.current && (o = n(p, {
+			container: h.current,
+			messages: i
+		}));
+		let s = Object.keys(l).map((e) => d(p, e, g));
+		return g.current.onReady?.(p), () => {
+			if (!p.isDestroyed) {
+				a?.destroy(), o?.destroy();
+				for (let e of s) e();
+			}
+		};
+	}, [p, u]), i("div", { className: e.className }, u.toolbar ? i("div", { ref: m }) : null, i("div", { ref: f }), u.statusBar ? i("div", { ref: h }) : null);
+}
+function d(e, t, n) {
+	let r = (e) => {
+		let r = n.current[l[t]];
+		r?.(e);
+	};
+	return e.on(t, r), () => e.off(t, r);
+}
+//#endregion
+export { u as StiloEditor, c as useStiloEditor };