quoin-editor 1.8.0 → 2.0.1

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 # Changelog
 
-Every release of `quoin-editor` is listed here, newest first, in the spirit of [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). From 1.0.0 the package follows [semantic versioning](https://semver.org/): a breaking change waits for the next major version. Until then, Quoin was 0.x and a minor version could contain breaking changes; those known at release were marked "Breaking". The 0.x sections are kept as they were released, "Docs" headings included. Moving from 0.4 to 1.0 is covered step by step in [MIGRATION.md](MIGRATION.md). Review finding ids such as F-17 are those of the 0.4.0 review in [#73](https://github.com/AmineSeboui/quoin-editor/issues/73).
+Every release of `quoin-editor` is listed here, newest first, in the spirit of [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). From 1.0.0 the package follows [semantic versioning](https://semver.org/): a breaking change waits for the next major version. Until then, Quoin was 0.x and a minor version could contain breaking changes; those known at release were marked "Breaking". The 0.x sections are kept as they were released, "Docs" headings included. Moving from 0.4 to 1.0, and from 1.x to 2.0, is covered step by step in [MIGRATION.md](MIGRATION.md). Review finding ids such as F-17 are those of the 0.4.0 review in [#73](https://github.com/AmineSeboui/quoin-editor/issues/73).
+
+## 2.0.1 (2026-11-07)
+
+### Added
+- The playground also switches comments, AI actions and a second collaborator on and off. Comments anchor a thread to a range and keep it in a store of the page’s own, AI streams canned text where a host would pass its model, and collaboration draws a second canvas with a Yjs document of its own that reconciles with the first over a BroadcastChannel. The settings are in two groups now, those a canvas reads as it mounts and those it answers to at once, because the three new ones are extensions and remount it where highlighting and read only do not.
+- A playground page on the site switches the editor between English and the seven locale packs, turns syntax colouring and the markdown source pane on and off, and draws the canvas read only, with the tsx for whatever is set beside it to copy. Picking a language downloads that pack and remounts the canvas, since a canvas reads its extensions once, and the other three take effect where they are. The home page links it from the hero, and two cards there name the code block colouring and the markdown pane, which shipped in 1.5.0 and 1.6.0 and the page had never mentioned. Nothing in the package changes.
+- The FAQ answers how to upgrade from 1.x to 2.0 beside the 0.4 answer it already carried, naming all seven removed exports and pointing at the section of the migration guide that covers them.
+
+## 2.0.0 (2026-11-06)
+
+### Removed
+- Seven names the view layer only ever calls itself leave `quoin-editor/view`, and with it `quoin-editor/headless` and `quoin-editor`. `BlockShell` and `SelectionSink`, with the `BlockShellProps` and `SelectionSinkProps` that typed them, are drawn by `EditorView` itself and register themselves with the controller, so a second copy of either takes the registration from the first. `VoidBlockFallback` is what a block shell already falls back to when no renderer draws a block type, so a renderer table that names it changes nothing. `defaultRenderers` held the three renderers a canvas already reaches for on its own; a renderer of your own draws its text with `EditableRegion`, which is what those three do. `isCrossSelection` answers whether a text selection spans blocks or regions, which is what painting and the arrow keys ask; a host that wants the answer reads `anchor` and `head` of the public `Selection`, and were it to earn a place it belongs beside `textSelection` in `quoin-editor/engine` rather than in the React entry. `BlockRenderProps` and `BlockRenderer` stay, so a renderer table still types. The five values among the seven were marked deprecated in 1.8.0. Removing a published name is breaking, so this lands in 2.0.0; [MIGRATION.md](MIGRATION.md) covers the move.
+
+### Fixed
+- A menu no longer throws where `Element.prototype.scrollIntoView` is absent, which is jsdom with no stub and any webview that omits it. Ten calls guarded the element they had queried but not the method on it, so an element that existed without the method was called anyway and threw a `TypeError` that left Quoin for the host's tree, replacing the page wherever an error boundary caught it. The calls are in the slash and language menus, the code block's caret reveal, a block link's target, a table cell, a heading jumped to from the table of contents and vertical caret movement. Keeping the highlighted entry in view is the whole of what a host without the method now loses. Two `scrollTo` calls that restore a scroll position after a change carried the same shape and are guarded with them.
+- An editable canvas warns in development when a definition of `CODE`, `IMAGE` or `FILE` replaces the preview that edits it and brings no editor of its own. Quoin edits those three in their preview rather than through an `editor`, so such a definition left a block the canvas drew and nobody could write in: no editable node, no language picker, and for an image or a file no toolbar and no way to fill the empty state. Nothing was logged, and the warning that would have caught it covered `MARKDOWN`, `CALLOUT` and `TOGGLE` only, whose consequence is milder since the canvas keeps drawing and typing into those. The migration guide said as much by naming only that first set, and now names both. Nothing about what the canvas draws changes.
 
 ## 1.8.0 (2026-11-05)
 

package/MIGRATION.md

@@ -1,4 +1,8 @@
-# Migrating from 0.4 to 1.0
+# Migrating Quoin
+
+Two upgrades are written up here. [0.4 to 1.0](#migrating-from-04-to-10) is the rewrite; [1.x to 2.0](#migrating-from-1x-to-20) takes seven names the view layer only ever called itself out of the public entries.
+
+## Migrating from 0.4 to 1.0
 
 Quoin 1.0 keeps the 0.4 document format and the `BlockCanvas` contract, and replaces everything under them: the card and textarea of each block give way to an editor of Quoin's own that types into the page in place. Most hosts upgrade by changing the version and reading the list below; the [checklist](#checklist) at the end sums it up. Every change is listed in the [changelog](CHANGELOG.md).
 
@@ -8,13 +12,13 @@ npm install quoin-editor@^1
 
 React 18.2 or 19 and TypeScript 5.4 or later, as in 0.4.
 
-## Data
+### Data
 
-### No migration is needed
+#### No migration is needed
 
 A document is still a `QuoinBlock[]` of `{ id, type, data }`, and every key of the five 0.4 block types keeps its name and meaning (`MarkdownBlockData`, `CalloutBlockData`, `CodeBlockData`, `ImageBlockData` and `FileBlockData`). Store and load the same arrays. 1.0 adds optional keys, listed [below](#new-optional-keys). Blocks nobody edits are handed back by `onChange` as the very objects you supplied, so a stored 0.4 document is never rewritten by being opened. The one exception is a block whose id repeats another's: it gets a fresh id.
 
-### Multi-paragraph markdown blocks split on their first edit
+#### Multi-paragraph markdown blocks split on their first edit
 
 A 0.4 `MARKDOWN` block could hold a whole page: several paragraphs, a list, a table. A 1.0 text block holds one line: a paragraph, a heading, a list item, a task or a quote. A 0.4 block of several lines is drawn line by line and kept as it is until someone edits it. On that first edit it is split: the first line keeps the block's id, the others take ids derived from it (`<id>-2`, `<id>-3` and on, skipping any id the document already has), a table becomes a `TABLE` block and an image alone on its line an `IMAGE` block. Each piece is written back as the canonical markdown of its line, so a host that diffs stored strings sees those blocks change once.
 
@@ -33,11 +37,11 @@ export const edited: QuoinBlock[] = [
 ];
 ```
 
-### The `indent` field
+#### The `indent` field
 
 `QuoinBlock` gains an optional `indent`, the nesting depth shared by every block type: a nested list item, or a block inside a toggle. It is written only when it is above 0. Code that copies, validates or stores blocks should keep it.
 
-### New optional keys
+#### New optional keys
 
 1.0 writes keys that 0.4 never wrote, each only once a writer uses what it holds:
 
@@ -50,21 +54,21 @@ export const edited: QuoinBlock[] = [
 
 The block itself may carry `indent`, and documents may hold the new block types `DIVIDER`, `TOGGLE`, `TABLE`, `EMBED`, `BOOKMARK`, `MATH` and `TOC`. A host whose schema rejects unknown keys or types would reject a paragraph that was aligned, or an image that was resized. Add the keys above as optional, or let unknown keys through: in zod, `.passthrough()` (zod 3) or `.loose()` (zod 4) on the `data` schema; in JSON Schema, `"additionalProperties": true`.
 
-### Captions and callout bodies are inline markdown
+#### Captions and callout bodies are inline markdown
 
 An image's `caption` and a callout's `body` were plain text in 0.4. In 1.0 they are typed in place and stored as inline markdown, like a paragraph. A 0.4 caption such as `A **sleepy** cat` now shows "sleepy" in bold, and `&amp;` shows as `&`. To keep a character literal in stored data, escape it with a backslash (`\*\*`); text typed in the canvas is escaped for you.
 
-### Named HTML entities
+#### Named HTML entities
 
 Numeric character references (`&#233;`, `&#xE9;`) are always decoded. Of the named entities, only the 23 most common are: `&amp;`, `&lt;`, `&gt;`, `&quot;`, `&apos;`, `&nbsp;`, `&copy;`, `&reg;`, `&trade;`, `&hellip;`, `&mdash;`, `&ndash;`, `&lsquo;`, `&rsquo;`, `&ldquo;`, `&rdquo;`, `&laquo;`, `&raquo;`, `&times;`, `&divide;`, `&deg;`, `&middot;` and `&bull;`. Any other, such as `&eacute;`, stays literal text, and is written back escaped (`\&eacute;`) once its block is edited. The full HTML5 table would add about 10 KB gzip to the engine. Workaround: replace other named entities with the character itself or its numeric reference before you import the markdown.
 
-### Inline images in imported markdown
+#### Inline images in imported markdown
 
 An image alone on its line becomes an `IMAGE` block. An image inside a paragraph, such as `see ![chart](chart.png) below`, stays literal text, since 1.0 has no inline image. Workaround: put each image on a line of its own before you import the markdown, or write an extension that adds an inline image atom.
 
-## API
+### API
 
-### `BlockCanvas`
+#### `BlockCanvas`
 
 Every 0.4 prop keeps its name, and its meaning except as the changes below say: `blocks`, `onChange`, `onDelete`, `blockTypes`, `upload`, `resolveAssetUrl`, `onError`, `readOnly`, `className`, `id` and `aria-label`. New ones are optional:
 
@@ -83,11 +87,11 @@ Two behaviours changed:
 - **`onDelete` reports more.** Besides the block menu's Delete, it reports whole blocks removed by typing over a selected block or by pasting over selected blocks. A line that Backspace or Delete merges into its neighbour is still not reported. To restore a block, splice it back into `blocks` once they no longer hold it, as on a later click of an Undo toast, not inside the callback.
 - **A collaborative canvas is uncontrolled.** A canvas given `collaborationExtension` from `quoin-editor/yjs` takes its content from the shared document. Pass the starting blocks once and keep echoing `onChange`; while the shared document is connected, any other array handed to `blocks` is ignored, with a warning in development.
 
-### `defineBlock`
+#### `defineBlock`
 
 `defineBlock` takes the same definition. `icon` now accepts any component that takes a `className` and `aria-hidden`, not only a lucide one. A custom block shows its `preview` at rest, and its `editor` opens on a double click, its Edit button or Enter on the selected block; Escape closes it.
 
-A definition of a type the canvas types into in place, `MARKDOWN`, `CALLOUT` or `TOGGLE`, now draws only on a read-only canvas, and an editable canvas warns in development. To change how one of them looks while it is edited, give an extension a renderer for the type in `ui.renderers`:
+A definition of a type the canvas types into in place, `MARKDOWN`, `CALLOUT` or `TOGGLE`, now draws only on a read-only canvas, and an editable canvas warns in development. `CODE`, `IMAGE` and `FILE` are edited in their `preview` rather than through an `editor`, so a definition that replaces the preview and brings no editor of its own leaves a block an editable canvas draws and nobody can write in; that warns in development too. To draw one of those three your own way on a read-only canvas and keep Quoin's editing where the canvas is editable, register your definition only while `readOnly` is set. To change how one of them looks while it is edited, give an extension a renderer for the type in `ui.renderers`:
 
 ```tsx
 import { BlockCanvas, EditableRegion, type BlockRenderer, type ExtensionUI, type QuoinBlock } from 'quoin-editor';
@@ -107,17 +111,17 @@ export function Editor({ blocks, onChange }: { blocks: QuoinBlock[]; onChange: (
 }
 ```
 
-### `useQuoin`
+#### `useQuoin`
 
 `QuoinConfig`, which `useQuoin()` returns to a custom block, gains `highlight` and the required `controller` and `labels`. `QuoinProvider` fills them in, so only a `QuoinConfig` built by hand, such as a test double for a custom block, needs `controller: null` and `labels: englishLabels` added.
 
-### Entries
+#### Entries
 
 - `quoin-editor/headless` now exports the view and the engine (`useQuoinEditor`, `EditorView`, `createEditor` and the rest), and none of the 0.4 helpers. The main entry re-exports all of it.
 - `formatShortcut` is exported from `quoin-editor` only. Import it from there instead of `quoin-editor/headless`.
 - `quoin-editor/engine` is the engine alone, with no React and no `'use client'` banner: import `toMarkdown`, `toHTML` and the other pure functions from it in a server component.
 
-### Removed helpers
+#### Removed helpers
 
 The 0.4 helpers worked on the text of a textarea. In 1.0 each is an engine command, run through the canvas's ref (`handle.current?.editor.commands.<name>(...)`) or a headless editor, or is no longer needed.
 
@@ -163,11 +167,11 @@ export function Editor({ blocks, onChange }: { blocks: QuoinBlock[]; onChange: (
 }
 ```
 
-### Command names of the design spec
+#### Command names of the design spec
 
 The 1.0 design spec named `mergeBackward`, `mergeForward` and `insertBlocks` as commands. They are not commands: `deleteBackward` at the start of a block joins it to the one before, `deleteForward` at its end joins the next one to it, and `insertBlockAfter` and `insertSlice` insert blocks. Use those names.
 
-### Labels
+#### Labels
 
 Strings come from `labels`. Two keys are functions rather than strings: `blockDeleted(n)` and `undoHint(shortcut)`. English callout tone names are written in lower case in the tone chip and its menu; give `calloutTones` to write them otherwise:
 
@@ -185,7 +189,7 @@ export function Editor({ blocks, onChange }: { blocks: QuoinBlock[]; onChange: (
 }
 ```
 
-## Features that now need an import
+### Features that now need an import
 
 In 0.4 the slash palette's Table command wrote a markdown table into the block. In 1.0 a table is a `TABLE` block, drawn and edited by `quoin-editor/table`, which a page loads only when it imports it. Without it, a table, including one split out of a 0.4 block, is drawn as an unsupported block and its data is kept as it was. The one-line change is to pass the extension:
 
@@ -202,22 +206,22 @@ export function Editor({ blocks, onChange }: { blocks: QuoinBlock[]; onChange: (
 
 `catalogue()` from `quoin-editor/catalogue` adds every opt-in feature at once: tables, embeds, math, a table of contents, mentions, emoji, find and replace and stats.
 
-## Styling
+### Styling
 
 - Every 0.4 `--quoin-` token keeps its name, and the stylesheet still sits in the one `quoin` cascade layer.
 - New tokens: `--quoin-selection`, the writer's text and background colours `--quoin-color-*` and `--quoin-bg-*`, `--quoin-comment`, `--quoin-comment-active` and `--quoin-comment-edge`, `--quoin-diff-inserted` and `--quoin-diff-deleted`, and `--quoin-link`. Each has a light and a dark default; a host that maps its own tokens onto Quoin's can map these too.
 - `color-scheme` is declared for light and dark.
 - The DOM and the class names inside the canvas are new. CSS that targeted 0.4 internals, such as a block card or its textarea, no longer matches; style through the tokens.
 
-## React 18
+### React 18
 
 React 18.2 and 19 are both supported, as 0.4.1 made them. CI typechecks the packed package against both majors and renders the server entries in plain Node on each, and `BlockCanvas` forwards its ref, so a `QuoinEditorHandle` reaches you on React 18 too.
 
-## The package
+### The package
 
 The tarball ships ESM and CommonJS builds of every entry, with their sourcemaps. The sourcemaps leave out `sourcesContent`: a debugger maps to the original file names and lines, but shows their text only where it can read the sources, such as from the repository at the release tag.
 
-## Checklist
+### Checklist
 
 - [ ] Install `quoin-editor@^1`.
 - [ ] Keep `indent` and the new optional keys when you copy, validate or store blocks, and let a strict schema accept them.
@@ -231,3 +235,113 @@ The tarball ships ESM and CommonJS builds of every entry, with their sourcemaps.
 - [ ] Pass `tableExtension()` (or `catalogue()`) if your documents hold tables.
 - [ ] Map the new tokens if you map Quoin's tokens to your own, and drop CSS that targeted 0.4 internals.
 - [ ] Treat a canvas with a collaboration extension as uncontrolled.
+
+## Migrating from 1.x to 2.0
+
+Quoin 2.0 keeps the document format, the props of every component and every command of 1.x. What changes is the published surface: seven names that only the view layer ever called itself stop being exported from `quoin-editor/view`, and so from `quoin-editor/headless` and `quoin-editor` with it. Five of them have carried a deprecation notice since 1.8.0, shown by an editor on hover and on the [headless reference](https://amineseboui.github.io/quoin-editor/docs/headless-reference/); the other two are the prop types of the two components, and go with them. Nothing else is removed and nothing behaves differently, so a host that imports none of the seven upgrades by changing the version.
+
+```bash
+npm install quoin-editor@^2
+```
+
+React 18.2 or 19 and TypeScript 5.4 or later, as in 1.x.
+
+### Exports that are gone
+
+| 1.x | 2.0 | Notes |
+| --- | --- | --- |
+| `defaultRenderers` | `EditableRegion` | The one removal with a cost, [below](#defaultrenderers). |
+| `BlockShell`, `BlockShellProps` | Nothing | [`EditorView` draws a shell for every block already.](#blockshell-and-selectionsink) |
+| `SelectionSink`, `SelectionSinkProps` | Nothing | [`EditorView` draws one already.](#blockshell-and-selectionsink) |
+| `VoidBlockFallback` | Nothing | [A block shell falls back to it on its own.](#voidblockfallback) |
+| `isCrossSelection` | `Selection` | [Four lines over `anchor` and `head`.](#iscrossselection) |
+
+`BlockRenderProps` and `BlockRenderer` stay public, so a renderer table still types.
+
+#### `defaultRenderers`
+
+A paragraph, a heading, a bullet, a numbered item, a task and a quote are all `MARKDOWN` blocks drawn by one renderer. A host that wanted its own quote therefore had to name `MARKDOWN` in its table, and could hand every other kind back to the default:
+
+```jsx
+import { defaultRenderers, EditableRegion } from 'quoin-editor';
+
+const Markdown = defaultRenderers.MARKDOWN;
+
+export const renderers = {
+  MARKDOWN: (props) =>
+    props.block.attrs.kind === 'quote' ? (
+      <figure className="pull-quote">
+        <EditableRegion block={props.block.id} region="text" label="Quote" />
+      </figure>
+    ) : (
+      <Markdown {...props} />
+    ),
+};
+```
+
+In 2.0 that renderer owns every kind, and draws each one's text with `EditableRegion`, which is what the default renderer does inside:
+
+```tsx
+import { EditableRegion, type BlockRenderer } from 'quoin-editor';
+
+const LABELS: Record<string, string> = {
+  heading: 'Heading',
+  bullet: 'Bullet list item',
+  ordered: 'Numbered list item',
+  task: 'Task',
+  quote: 'Quote',
+};
+
+export const renderers: Record<string, BlockRenderer> = {
+  MARKDOWN: ({ block }) => {
+    const kind = typeof block.attrs.kind === 'string' ? block.attrs.kind : '';
+    const text = <EditableRegion block={block.id} region="text" label={LABELS[kind] ?? 'Paragraph'} />;
+    if (kind === 'quote') return <figure className="pull-quote">{text}</figure>;
+    if (kind === 'heading') {
+      const level = typeof block.attrs.level === 'number' ? block.attrs.level : 1;
+      return <div role="heading" aria-level={level} className="quoin-heading">{text}</div>;
+    }
+    if (kind === 'bullet') {
+      return (
+        <div className="quoin-list-item" data-list="bullet">
+          <span className="quoin-marker" aria-hidden="true">{'•'}</span>
+          {text}
+        </div>
+      );
+    }
+    return text;
+  },
+};
+```
+
+`EditableRegion` takes the block's id, the name of the region to draw (`text` for every markdown kind) and an accessible name, and is the same editable host the default renderer mounts, so the caret, the selection and the decorations keep working.
+
+Two kinds ask for more than markup, and the sample above leaves both drawn as plain text. A numbered item shows its running number, which counts the ordered blocks above it at the same indent; a task shows a checkbox that runs the `toggleTask` command against its own block. Neither the counter nor the checkbox is public, so a host that overrides `MARKDOWN` and still wants those two drawn the way Quoin draws them writes them itself. A host that only wants to restyle a kind has a cheaper way out: leave `MARKDOWN` out of the renderer table and style the markup the default renderer already writes, which carries `data-kind` on the block and the `quoin-heading`, `quoin-list-item`, `quoin-task` and `quoin-quote` class names.
+
+#### `BlockShell` and `SelectionSink`
+
+Neither was ever something to render. `EditorView` draws one `SelectionSink` and one `BlockShell` per block, and each registers itself with the `ViewController` on mount (`controller.registerSink`, `controller.registerBlockElement`). A second copy takes that registration from the first, so a host that rendered either lost the selection or the block it meant to help. Drop the import; the editor already draws both. `BlockShellProps` and `SelectionSinkProps` named their props and go with them.
+
+#### `VoidBlockFallback`
+
+A block shell falls back to it already when no renderer in the table draws a block's type, so a table that named it only restated the default. Drop the entry and the import.
+
+#### `isCrossSelection`
+
+It asked whether a text selection spans blocks or regions, which is what painting and the arrow keys ask. It reads `anchor` and `head` of the public `Selection`, so a host that wants the answer writes it:
+
+```ts
+import type { Selection } from 'quoin-editor/engine';
+
+export const spansBlocks = (selection: Selection | null): boolean =>
+  selection?.kind === 'text' &&
+  (selection.anchor.block !== selection.head.block || selection.anchor.region !== selection.head.region);
+```
+
+### 2.0 checklist
+
+- [ ] Install `quoin-editor@^2`.
+- [ ] Drop any `BlockShell` or `SelectionSink` you render, and the `BlockShellProps` and `SelectionSinkProps` that typed them.
+- [ ] Drop any `VoidBlockFallback` entry from a renderer table.
+- [ ] Replace `isCrossSelection` with the predicate above.
+- [ ] Draw every `MARKDOWN` kind yourself if your table names `MARKDOWN`, or leave `MARKDOWN` out and style the default markup instead.

package/README.md

@@ -76,7 +76,7 @@ What `onChange` hands you, and what you store:
 
 Each competitor cell links to the page that shows it; the Tiptap UI cell also draws on the review in [#73](https://github.com/AmineSeboui/quoin-editor/issues/73) (2026-10-12).
 
-| Feature | Quoin 1.8 | Tiptap 3 | BlockNote | Editor.js | Lexical | Plate |
+| Feature | Quoin 2.0 | Tiptap 3 | BlockNote | Editor.js | Lexical | Plate |
 | --- | --- | --- | --- | --- | --- | --- |
 | Stored document | Block array, markdown per text block | [JSON, or HTML][tt-store] | [Block JSON][bn-formats] | [JSON][ej-repo] | [Editor state, as JSON][lx-intro] | [Slate JSON][pl-docs] |
 | Markdown | The storage format | [`@tiptap/markdown`, an early release][tt-md] | [Export and import, documented as lossy][bn-formats] | [Community plugin][ej-awesome] | [`@lexical/markdown`, in and out][lx-md] | [`@platejs/markdown`, in and out][pl-md] |
@@ -131,7 +131,13 @@ Sources, checked on 2026-11-05: Tiptap [persistence][tt-store], [markdown][tt-md
 - [Collaboration](https://amineseboui.github.io/quoin-editor/docs/collaboration/), [comments](https://amineseboui.github.io/quoin-editor/docs/comments/) and [AI](https://amineseboui.github.io/quoin-editor/docs/ai/)
 - [Server rendering](https://amineseboui.github.io/quoin-editor/docs/server-rendering/): read-only, `QuoinView`, `QuoinDiff`, `toDocx`
 - [Accessibility](https://amineseboui.github.io/quoin-editor/docs/accessibility/): what each test suite checks, and what it does not yet
-- [FAQ](https://amineseboui.github.io/quoin-editor/docs/faq/): the package name, stability, React versions, and [upgrading from 0.4](MIGRATION.md)
+- [FAQ](https://amineseboui.github.io/quoin-editor/docs/faq/): the package name, stability, React versions, and [upgrading to 2.0](MIGRATION.md#migrating-from-1x-to-20)
+
+## Sponsors
+
+Quoin is MIT, with no paid tier and nothing held back behind a licence. It is built and maintained by one person. [Sponsoring it](https://github.com/sponsors/AmineSeboui) pays for the time that keeps issues answered and releases going out.
+
+No sponsors yet. Yours would be the first name here.
 
 ## The name
 

package/dist/ai.cjs

@@ -2,9 +2,9 @@
 'use strict';
 
 var chunkLE5XMIFJ_cjs = require('./chunk-LE5XMIFJ.cjs');
-var chunk4MCYQHFL_cjs = require('./chunk-4MCYQHFL.cjs');
-var chunkBA5WXBGE_cjs = require('./chunk-BA5WXBGE.cjs');
-var chunkP6HC7RUN_cjs = require('./chunk-P6HC7RUN.cjs');
+var chunkBYYCD54G_cjs = require('./chunk-BYYCD54G.cjs');
+var chunkCJVJNMOB_cjs = require('./chunk-CJVJNMOB.cjs');
+var chunkZ6LAARPB_cjs = require('./chunk-Z6LAARPB.cjs');
 var chunkZWTIRGY5_cjs = require('./chunk-ZWTIRGY5.cjs');
 require('./chunk-A6PGQVTR.cjs');
 var chunkFK7EBZPX_cjs = require('./chunk-FK7EBZPX.cjs');
@@ -377,7 +377,7 @@ async function read(editor, link, run, stream, request) {
   } catch (error) {
     if (!live()) return;
     end("error");
-    link.report(chunkBA5WXBGE_cjs.toError(error));
+    link.report(chunkCJVJNMOB_cjs.toError(error));
   }
 }
 function startStream(editor, link, stream, request, replace) {
@@ -474,7 +474,7 @@ function aiSlashItems(labels, stream) {
       title: labels.askAi,
       description: labels.askAiDescription,
       group: "ai",
-      icon: chunkBA5WXBGE_cjs.Sparkles,
+      icon: chunkCJVJNMOB_cjs.Sparkles,
       keywords: KEYWORDS,
       run: ({ controller }) => void openFor(controller)
     },
@@ -482,7 +482,7 @@ function aiSlashItems(labels, stream) {
       id: "ai-continue",
       title: labels.actions.continue,
       group: "ai",
-      icon: chunkBA5WXBGE_cjs.PenLine,
+      icon: chunkCJVJNMOB_cjs.PenLine,
       keywords: [...KEYWORDS, "continue"],
       run: ({ controller }) => {
         if (openFor(controller)) askFrom({ controller, stream}, "continue");
@@ -493,14 +493,14 @@ function aiSlashItems(labels, stream) {
 var aiBubbleItem = (labels) => ({
   id: "ai",
   title: labels.askAi,
-  icon: chunkBA5WXBGE_cjs.Sparkles,
+  icon: chunkCJVJNMOB_cjs.Sparkles,
   available: (state) => aiState(state).ghost === null,
   run: (controller) => void openFor(controller)
 });
 var aiBlockMenuItem = (labels) => ({
   id: "ai",
   label: labels.askAi,
-  icon: chunkBA5WXBGE_cjs.Sparkles,
+  icon: chunkCJVJNMOB_cjs.Sparkles,
   available: (state, blockIds) => targetOfBlocks(state, blockIds) !== null,
   run: (controller, blockIds) => {
     const target = targetOfBlocks(controller.editor.state, blockIds);
@@ -605,12 +605,12 @@ function AiBar({ env, ghost, gone, barId }) {
   const [next, setNext] = react.useState("");
   const { phase } = ghost;
   const focusPrimary = () => content.current?.querySelector(`[${PRIMARY}]`)?.focus();
-  chunkP6HC7RUN_cjs.useIsomorphicLayoutEffect(() => {
+  chunkZ6LAARPB_cjs.useIsomorphicLayoutEffect(() => {
     const active = content.current?.ownerDocument.activeElement;
     inside.current = active == null || active === active.ownerDocument.body;
     if (inside.current) focusPrimary();
   }, []);
-  chunkP6HC7RUN_cjs.useIsomorphicLayoutEffect(() => {
+  chunkZ6LAARPB_cjs.useIsomorphicLayoutEffect(() => {
     const active = content.current?.ownerDocument.activeElement;
     if (inside.current && !content.current?.contains(active ?? null)) focusPrimary();
   }, [phase, ghost.key]);
@@ -658,21 +658,21 @@ function AiBar({ env, ghost, gone, barId }) {
       children: [
         phase === "streaming" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: labels.writing }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkBA5WXBGE_cjs.Button, { ...primary, size: "sm", variant: "outline", onClick: () => stop(editor), children: labels.stop })
+          /* @__PURE__ */ jsxRuntime.jsx(chunkCJVJNMOB_cjs.Button, { ...primary, size: "sm", variant: "outline", onClick: () => stop(editor), children: labels.stop })
         ] }),
         phase === "error" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: labels.failed }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkBA5WXBGE_cjs.Button, { ...primary, size: "sm", onClick: () => retry(editor, stream), children: labels.retry }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkBA5WXBGE_cjs.Button, { size: "sm", variant: "ghost", onClick: onDiscard, children: labels.discard })
+          /* @__PURE__ */ jsxRuntime.jsx(chunkCJVJNMOB_cjs.Button, { ...primary, size: "sm", onClick: () => retry(editor, stream), children: labels.retry }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkCJVJNMOB_cjs.Button, { size: "sm", variant: "ghost", onClick: onDiscard, children: labels.discard })
         ] }),
         (phase === "done" || phase === "stopped") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           phase === "stopped" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: labels.stopped }),
           gone && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "w-full text-xs text-muted-foreground", children: labels.targetGone }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkBA5WXBGE_cjs.Button, { ...primary, size: "sm", onClick: onAccept, children: labels.accept }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkBA5WXBGE_cjs.Button, { size: "sm", variant: "ghost", onClick: onDiscard, children: labels.discard }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkBA5WXBGE_cjs.Button, { size: "sm", variant: "ghost", onClick: () => retry(editor, stream), children: labels.retry }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkCJVJNMOB_cjs.Button, { ...primary, size: "sm", onClick: onAccept, children: labels.accept }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkCJVJNMOB_cjs.Button, { size: "sm", variant: "ghost", onClick: onDiscard, children: labels.discard }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkCJVJNMOB_cjs.Button, { size: "sm", variant: "ghost", onClick: () => retry(editor, stream), children: labels.retry }),
           /* @__PURE__ */ jsxRuntime.jsx("form", { className: "w-full", onSubmit: onFollowUp, children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkBA5WXBGE_cjs.Input,
+            chunkCJVJNMOB_cjs.Input,
             {
               "aria-label": labels.followUp,
               placeholder: labels.followUp,
@@ -711,7 +711,7 @@ function fillGhost(ghost, markdown) {
       if (piece.indent > 0) element.style.setProperty("--quoin-ai-indent", String(piece.indent));
       const region = chunkFK7EBZPX_cjs.primaryRegion(schema, piece);
       if (region === null) element.textContent = chunkFK7EBZPX_cjs.toPlainText([codec.toQuoin(piece)], { schema });
-      else chunkP6HC7RUN_cjs.renderInline(element, piece.regions[region], []);
+      else chunkZ6LAARPB_cjs.renderInline(element, piece.regions[region], []);
       drawn2.push(element);
     }
   }
@@ -788,7 +788,7 @@ function clipAside(layer, text, areas, scale) {
 function useGhostPlace(controller, layer, block, region) {
   const placeNow = react.useRef(() => {
   });
-  chunkP6HC7RUN_cjs.useIsomorphicLayoutEffect(() => {
+  chunkZ6LAARPB_cjs.useIsomorphicLayoutEffect(() => {
     const root = controller.root;
     const element = layer.current;
     const view = root?.ownerDocument.defaultView;
@@ -827,7 +827,7 @@ function AiGhost({ env, ghost, target, gone, barId }) {
   const layer = react.useRef(null);
   const drawn2 = react.useRef(null);
   const place2 = useGhostPlace(env.controller, layer, target.to.block, target.to.region);
-  chunkP6HC7RUN_cjs.useIsomorphicLayoutEffect(() => {
+  chunkZ6LAARPB_cjs.useIsomorphicLayoutEffect(() => {
     const element = drawn2.current;
     if (element === null) return;
     element.setAttribute("inert", "");
@@ -841,7 +841,7 @@ function AiGhost({ env, ghost, target, gone, barId }) {
 }
 function useTargetAnchor(controller, target) {
   const latest = react.useRef(target);
-  chunkP6HC7RUN_cjs.useIsomorphicLayoutEffect(() => {
+  chunkZ6LAARPB_cjs.useIsomorphicLayoutEffect(() => {
     latest.current = target;
   });
   return react.useMemo(() => {
@@ -850,8 +850,8 @@ function useTargetAnchor(controller, target) {
       return { block: to.block, region: to.region, from: to.offset, to: to.offset };
     };
     return {
-      current: chunkBA5WXBGE_cjs.virtualAnchor(
-        () => chunkBA5WXBGE_cjs.rangeRect(controller, end()),
+      current: chunkCJVJNMOB_cjs.virtualAnchor(
+        () => chunkCJVJNMOB_cjs.rangeRect(controller, end()),
         () => controller.registry.get(end().block, end().region)
       )
     };
@@ -905,7 +905,7 @@ function AiMenu({ env, target, fromSpace }) {
   };
   const fieldLabel = asking === "tone" ? labels.tonePrompt : asking === "translate" ? labels.translatePrompt : labels.prompt;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkBA5WXBGE_cjs.Popover,
+    chunkCJVJNMOB_cjs.Popover,
     {
       open: true,
       modal: false,
@@ -913,9 +913,9 @@ function AiMenu({ env, target, fromSpace }) {
         if (!next) closeMenu(controller.editor);
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBA5WXBGE_cjs.PopoverAnchor, { virtualRef: anchor }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkCJVJNMOB_cjs.PopoverAnchor, { virtualRef: anchor }),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          chunkBA5WXBGE_cjs.PopoverContent,
+          chunkCJVJNMOB_cjs.PopoverContent,
           {
             "aria-label": labels.askAi,
             side: "bottom",
@@ -932,7 +932,7 @@ function AiMenu({ env, target, fromSpace }) {
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkBA5WXBGE_cjs.Input,
+                chunkCJVJNMOB_cjs.Input,
                 {
                   ref: field,
                   role: "combobox",
@@ -956,7 +956,7 @@ function AiMenu({ env, target, fromSpace }) {
                   id: optionId(index),
                   role: "option",
                   "aria-selected": index === current,
-                  className: chunkBA5WXBGE_cjs.cn(chunkBA5WXBGE_cjs.MENU_ITEM, index === current && "bg-accent text-accent-foreground"),
+                  className: chunkCJVJNMOB_cjs.cn(chunkCJVJNMOB_cjs.MENU_ITEM, index === current && "bg-accent text-accent-foreground"),
                   onMouseDown: (event) => event.preventDefault(),
                   onClick: () => choose(choice),
                   children: choice.label
@@ -976,15 +976,15 @@ var goneOf = (state) => {
 };
 var plainText = (markdown) => chunkFK7EBZPX_cjs.toPlainText(chunkI7X7B3WD_cjs.fromMarkdown(markdown));
 function AiOverlay({ controller, stream, labels }) {
-  const { onError } = chunkBA5WXBGE_cjs.useQuoin();
+  const { onError } = chunkCJVJNMOB_cjs.useQuoin();
   const link = linkOf(controller.editor);
-  chunkP6HC7RUN_cjs.useIsomorphicLayoutEffect(() => {
+  chunkZ6LAARPB_cjs.useIsomorphicLayoutEffect(() => {
     link.report = onError;
     link.ended = (phase, output) => controller.announce((phase === "done" ? labels.written : labels.halted)(plainText(output)));
   }, [link, onError, controller, labels]);
-  const value = chunkP6HC7RUN_cjs.useEditorState(controller, aiState);
-  const gone = chunkP6HC7RUN_cjs.useEditorState(controller, goneOf);
-  const readOnly = chunkP6HC7RUN_cjs.useReadOnly(controller);
+  const value = chunkZ6LAARPB_cjs.useEditorState(controller, aiState);
+  const gone = chunkZ6LAARPB_cjs.useEditorState(controller, goneOf);
+  const readOnly = chunkZ6LAARPB_cjs.useReadOnly(controller);
   const env = react.useMemo(() => ({ controller, stream, labels }), [controller, stream, labels]);
   const barId = react.useId();
   const showing = value.ghost !== null;
@@ -1003,7 +1003,7 @@ function AiOverlay({ controller, stream, labels }) {
     const root = controller.root;
     if (!root) return;
     let away = true;
-    return chunk4MCYQHFL_cjs.watchCanvasFocus(controller, root.ownerDocument, (inside, node) => {
+    return chunkBYYCD54G_cjs.watchCanvasFocus(controller, root.ownerDocument, (inside, node) => {
       if (!inside) away = true;
       else if (root.contains(node)) {
         if (away) noteFocus(controller.editor);

package/dist/ai.js

@@ -1,8 +1,8 @@
 'use client';
 import { clipBoxes } from './chunk-MQUCCSWG.js';
-import { watchCanvasFocus } from './chunk-D4L5FINK.js';
-import { Sparkles, PenLine, useQuoin, Popover, PopoverAnchor, PopoverContent, Input, cn, MENU_ITEM, virtualAnchor, rangeRect, Button, toError } from './chunk-Y4EJ6UBV.js';
-import { useIsomorphicLayoutEffect, useEditorState, useReadOnly, renderInline } from './chunk-MSWA5ZZM.js';
+import { watchCanvasFocus } from './chunk-IW4TMECB.js';
+import { Sparkles, PenLine, useQuoin, Popover, PopoverAnchor, PopoverContent, Input, cn, MENU_ITEM, virtualAnchor, rangeRect, Button, toError } from './chunk-ZN5DHNSL.js';
+import { useIsomorphicLayoutEffect, useEditorState, useReadOnly, renderInline } from './chunk-NL5J77VD.js';
 import { mergeLabels } from './chunk-DLQCTGC3.js';
 import './chunk-HDJ653LM.js';
 import { createPluginKey, defineExtension, isCollapsed, regionLength, primaryRegion, getPluginState, Transaction, toPlainText, selectedBlockIds, orderedRange, comparePos, sliceFromSelection, textSelection, deleteRange, pasteAtCaret, toMarkdown, descendantsEnd, freshBlocks, insertBlocksStep, capIndents, endOf } from './chunk-5RBMZGKV.js';

package/dist/catalogue.cjs

@@ -1,21 +1,21 @@
 'use client';
 'use strict';
 
-var chunkPVFSJXYQ_cjs = require('./chunk-PVFSJXYQ.cjs');
-var chunk7X3T7VXV_cjs = require('./chunk-7X3T7VXV.cjs');
-var chunkEZWJRBQT_cjs = require('./chunk-EZWJRBQT.cjs');
-var chunkYVPZDTVZ_cjs = require('./chunk-YVPZDTVZ.cjs');
+var chunk5YAJZSTI_cjs = require('./chunk-5YAJZSTI.cjs');
+var chunkHOSDMHK6_cjs = require('./chunk-HOSDMHK6.cjs');
+var chunkNFO3W644_cjs = require('./chunk-NFO3W644.cjs');
+var chunkLEICOZYK_cjs = require('./chunk-LEICOZYK.cjs');
 require('./chunk-2SWLD6R5.cjs');
-var chunk53FJFYBR_cjs = require('./chunk-53FJFYBR.cjs');
-var chunk53CNYRVQ_cjs = require('./chunk-53CNYRVQ.cjs');
-var chunkTQHFGSTT_cjs = require('./chunk-TQHFGSTT.cjs');
-require('./chunk-XKYNINUX.cjs');
+var chunkV4WQG7FR_cjs = require('./chunk-V4WQG7FR.cjs');
+var chunk66OPHDFA_cjs = require('./chunk-66OPHDFA.cjs');
+var chunkD6CIIWCU_cjs = require('./chunk-D6CIIWCU.cjs');
+require('./chunk-IKZSCTRF.cjs');
 require('./chunk-YEDPBYO5.cjs');
-var chunkMMS4D4MK_cjs = require('./chunk-MMS4D4MK.cjs');
-var chunkB3OBM6I4_cjs = require('./chunk-B3OBM6I4.cjs');
+var chunk77CNOLHY_cjs = require('./chunk-77CNOLHY.cjs');
+var chunk4PIJC4FD_cjs = require('./chunk-4PIJC4FD.cjs');
 require('./chunk-LM3DHROX.cjs');
-require('./chunk-BA5WXBGE.cjs');
-require('./chunk-P6HC7RUN.cjs');
+require('./chunk-CJVJNMOB.cjs');
+require('./chunk-Z6LAARPB.cjs');
 require('./chunk-ZWTIRGY5.cjs');
 require('./chunk-A6PGQVTR.cjs');
 require('./chunk-FK7EBZPX.cjs');
@@ -32,15 +32,15 @@ function createCatalogue(features2) {
 
 // src/catalogue.ts
 var features = {
-  table: chunk53FJFYBR_cjs.tableExtension,
-  embed: chunk53CNYRVQ_cjs.embedExtension,
-  math: chunkTQHFGSTT_cjs.mathExtension,
-  diagram: chunkMMS4D4MK_cjs.diagramExtension,
-  toc: chunkB3OBM6I4_cjs.tocExtension,
-  mention: chunkPVFSJXYQ_cjs.mentionExtension,
-  emoji: chunk7X3T7VXV_cjs.emojiExtension,
-  find: chunkEZWJRBQT_cjs.findExtension,
-  stats: chunkYVPZDTVZ_cjs.statsExtension
+  table: chunkV4WQG7FR_cjs.tableExtension,
+  embed: chunk66OPHDFA_cjs.embedExtension,
+  math: chunkD6CIIWCU_cjs.mathExtension,
+  diagram: chunk77CNOLHY_cjs.diagramExtension,
+  toc: chunk4PIJC4FD_cjs.tocExtension,
+  mention: chunk5YAJZSTI_cjs.mentionExtension,
+  emoji: chunkHOSDMHK6_cjs.emojiExtension,
+  find: chunkNFO3W644_cjs.findExtension,
+  stats: chunkLEICOZYK_cjs.statsExtension
 };
 var catalogue = createCatalogue(features);