edytor 1.0.0 → 3.0.0

package/README.md

@@ -17,11 +17,11 @@
 
 Edytor aims to be for Svelte what Slate.js is for React: a heavily customizable editor with an API to build any kind of collaborative rich text editor.
 
-> **1.0.** Edytor `1.0.0` is on npm as `edytor`: its API follows semantic versioning, and every change is listed in the changelog. It has no production track record yet: read the [limitations](https://edytor.dev/docs/reference/limitations) before you build on it. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
+> **3.0.** Edytor `3.0.0` is on npm as `edytor`: its API follows semantic versioning, and every change is listed in the changelog. It has no production track record yet: read the [limitations](https://edytor.dev/docs/reference/limitations) before you build on it. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
 
 ## Features
 
-- **Notion-style editing out of the box.** `<Edytor />` alone is a rich text editor with images and block handles: headings, toggle headings, lists, to-dos, toggles, callouts, quotes, dividers, ten marks and Notion's hotkeys. Add the Notion theme, a block menu (block colours; drag one block, or every block the selection covers), a slash menu, a selection toolbar, markdown shortcuts (`createMarkdownShortcutsPlugin()`) and code blocks.
+- **Notion-style editing out of the box.** `<Edytor />` alone is a rich text editor: headings, toggle headings, lists, to-dos, toggles, callouts, quotes, dividers, ten marks and Notion's hotkeys. Add the Notion theme and the plugins you want: block handles and a block menu (block colours; drag one block, or every block the selection covers), a slash menu, a selection toolbar, markdown shortcuts (`createMarkdownShortcutsPlugin()`), code blocks and images (`createImagePlugin({ upload })`). The package draws no chrome: each handle and menu is your snippet, or the ready-made registry item.
 - **Pages and a table of contents, opt-in.** `createPagePlugin` links a block to another document (a page per room, opened and named by your app), and `createTocPlugin()` lists the headings live ([Page](https://edytor.dev/docs/plugins/page), [Table of contents](https://edytor.dev/docs/plugins/table-of-contents)).
 - **Columns, opt-in.** List `createColumnsPlugin()` for Notion's multi-column layouts: drag a block to the edge of another to put them side by side, or pick "2 columns" to "5 columns"; drag the gap to resize. Layouts converge across collaborators and the room ([Columns](https://edytor.dev/docs/plugins/columns)).
 - **Tables, opt-in.** List `createTablePlugin()` for Notion's simple table: cells of text, <kbd>Tab</kbd> between them, rows and columns added, moved and deleted from the table's edges and grips, resizable columns, header row and column, HTML tables pasted and copied. Concurrent row and column edits converge on every replica ([Table](https://edytor.dev/docs/plugins/table)).
@@ -29,17 +29,18 @@ Edytor aims to be for Svelte what Slate.js is for React: a heavily customizable
 - **Comments, opt-in.** `createCommentsPlugin` adds Notion's comment threads: select text, press Comment, and the thread shows in a sidebar beside it with replies, Resolve and Re-open. The room keeps the threads beside the document and sends each change live; the anchor follows the text through edits and is not copied ([Comments](https://edytor.dev/docs/plugins/comments)).
 - **Your markup.** Blocks, marks and inline atoms render through your Svelte snippets; the slash menu, toolbar, block menu and handles take a snippet and keep their behavior.
 - **Your language.** Every word the package shows or says, slash keywords included, comes from one labels dictionary the view takes (`<Edytor labels>`); your chrome's words are your markup's; English by default ([Localization](https://edytor.dev/docs/customization/localization)).
-- **Synced properties.** `block.data`, `atom.data` and `edytor.data` read like plain objects, and `edytor.patchData(id, [{ path, value }])` writes them; each property and each array item syncs on its own, so concurrent edits of different properties, or of different items of one array, merge.
+- **Synced properties.** `block.data`, `atom.data` and `edytor.data` are plain Svelte state at any depth (`block.data.meta.author = 'Ada'`, `block.data.tags.push('x')`, `delete block.data.draft`), each write an undoable operation; each property and each array item syncs on its own, so concurrent edits of different properties, or of different items of one array, merge.
 - **AI suggestions.** `edytor.suggestions.add(position, content)` proposes text, paragraphs, lists, to-dos or images after, before or inside a block, at the end of its text, or in place of the selection; it streams in, shows only on your screen, and becomes one undo step when accepted ([Suggestions](https://edytor.dev/docs/editor/suggestions)).
 - **Plugins that can veto anything.** Every command is prepared before it writes; plugins see the command and each planned step and can refuse or replace it.
 - **Real-time collaboration.** One `EdytorDocument` shared by any number of views, or none (headless). Presence cursors, identity-preserving moves, splits and merges, and undo that only takes back your own edits.
 - **Offline first.** A local IndexedDB copy and cross-tab sync; offline edits survive reloads and reach the server on reconnect.
 - **A Cloudflare Durable Object room.** `edytor/cloudflare` stores in SQLite, acknowledges after the write, binds identity to the socket and hibernates.
+- **Import and export.** `edytor/export` turns a document into HTML or Markdown and back (`toHTML`, `toMarkdown`, `fromHTML`, `textToBlocks`), by each kind's own forms, in the browser, Node or a Worker; HTML import is sanitized ([Import and export](https://edytor.dev/docs/editor/import-export)).
 - **Headless and Worker-safe.** `edytor/crdt/edytor` runs in Node and Workers without Svelte.
 
 ## Install
 
-The pre-release is on npm under the `next` tag. Name the tag: a bare `edytor` is the old, incompatible `0.0.11`.
+Edytor `3.0.0` is on npm under `latest`:
 
 ```bash
 pnpm add edytor
@@ -49,83 +50,39 @@ pnpm add edytor
 
 ## Quick start
 
-The package draws no menu, toolbar or block handle: each is a snippet you pass its plugin. Without them the editor works but shows none. The demo's ready-made, Notion-style ones are one copy away: copy [`src/routes/chrome`](https://github.com/beynar/edytor/tree/master/src/routes/chrome) into your app, make its imports name the package, and pass its plugins ([quick start](https://edytor.dev/docs/getting-started/quick-start#the-ready-made-menus-and-handles)):
-
-```bash
-npx degit beynar/edytor/src/routes/chrome src/lib/chrome
-sed -i.bak 's#\$lib/index\.js#edytor#' src/lib/chrome/*.ts src/lib/chrome/*.svelte && rm src/lib/chrome/*.bak
-```
-
-Take the folder of the version you install, by its tag (`beynar/edytor/src/routes/chrome#v1.0.0`): without one you get `master`'s, which follows the next release.
-
 ```svelte
 <script lang="ts">
-	import { Edytor } from 'edytor';
-	import 'edytor/themes/notion.css';
-	import {
-		slashMenuPlugin,
-		toolbarPlugin,
-		blockHandlesPlugin,
-		blockMenuPlugin,
-		codePlugin
-	} from '$lib/chrome/plugins';
+	import { Edytor, createCodePlugin, type JSONDoc } from 'edytor';
+
+	let value = $state<JSONDoc>({
+		children: [{ type: 'paragraph', content: [{ text: 'Hello, World!' }] }]
+	});
 </script>
 
-<div class="edytor-notion">
-	<Edytor
-		plugins={[slashMenuPlugin, toolbarPlugin, blockHandlesPlugin, blockMenuPlugin, codePlugin]}
-	/>
-</div>
+<Edytor {value} plugins={[createCodePlugin()]} onChange={(next) => (value = next)} />
+
+<p>{value.children?.length ?? 0} blocks</p>
 ```
 
-Or draw a menu yourself: your snippet draws it, the plugin gives it its keys and ARIA.
+`<Edytor>` renders on the server and hydrates, so it works in any route. It includes rich text; each other block kind, block moves from the keyboard (`createArrowMovePlugin()`), and file drops (a media plugin given an `upload`) is a plugin you add, here code blocks; nesting blocks (<kbd>Tab</kbd>, drops inside a block) is the `allowNesting` option, off by default. `onChange` hands you the document after every change ([quick start](https://edytor.dev/docs/getting-started/quick-start)).
+
+The package draws no menu, toolbar or block handle: each is a snippet you pass its plugin ([menus and handles](https://edytor.dev/docs/customization/menus)). Notion-style ones, in shadcn-svelte, are a registry item you add to your app (`npx shadcn-svelte@latest add https://edytor.dev/r/edytor-chrome.json`), as plugins for your `<Edytor>` ([ready-made menus](https://edytor.dev/docs/customization/ready-made-menus)).
+
+The fastest way to a full editor is the starter, a [shadcn-svelte](https://www.shadcn-svelte.com) registry item: every plugin, the ready-made menus and handles, comments, and a page with a cover, an icon, a title and typed properties, in one component copied into your app (Tailwind v4 and `shadcn-svelte init` first; [starter editor](https://edytor.dev/docs/starter)):
+
+```sh
+npx shadcn-svelte@latest add https://edytor.dev/r/starter.json
+```
 
 ```svelte
-<script lang="ts">
-	import {
-		Edytor,
-		createCodePlugin,
-		createSlashMenuPlugin,
-		createMarkdownShortcutsPlugin,
-		richTextPlaceholder,
-		type JSONDoc,
-		type SlashMenuController
-	} from 'edytor';
-	import 'edytor/themes/notion.css';
-
-	const value: JSONDoc = {
-		children: [{ type: 'paragraph', content: [{ text: 'Hello, World!' }] }]
-	};
-	const plugins = [
-		// Notion's hints in empty blocks.
-		() => ({ placeholder: richTextPlaceholder }),
-		createCodePlugin(),
-		createMarkdownShortcutsPlugin(),
-		createSlashMenuPlugin({ menu })
-	];
+<script>
+	import { StarterEditor } from '$lib/components/edytor/starter/index.js';
 </script>
 
-<!-- Your snippet draws the menu; the plugin's attachments give it its keys and ARIA. -->
-{#snippet menu(slash: SlashMenuController)}
-	<ul {@attach slash.popup}>
-		{#each slash.commands as command, index (command.id)}
-			<li
-				data-selected={slash.index === index}
-				{@attach slash.option(index)}
-				onclick={() => void slash.run(command)}
-			>
-				{command.label}
-			</li>
-		{/each}
-	</ul>
-{/snippet}
-
-<div class="edytor-notion">
-	<Edytor {value} {plugins} onChange={(root) => console.log(root)} />
-</div>
+<StarterEditor />
 ```
 
-An editable editor is client-only: in SvelteKit, mount it once the page has hydrated ([quick start](https://edytor.dev/docs/getting-started/quick-start#mount-it-in-a-page)). `<Edytor>` adds the rich text, image, arrow-move and suggestions plugins after yours. Every menu, toolbar, handle and panel is drawn by a snippet, yours or the demo's ([menus and handles](https://edytor.dev/docs/customization/menus)). To collaborate, name a room and a server running the [`edytor/cloudflare` room](https://edytor.dev/docs/server/quick-start):
+To collaborate, name a room and a server running the [`edytor/cloudflare` room](https://edytor.dev/docs/server/quick-start):
 
 ```svelte
 <Edytor

package/dist/block/block.svelte.d.ts

@@ -31,11 +31,13 @@ export declare class Block {
     get content(): (Text | InlineBlock)[];
     get type(): string;
     /**
-     * The block's `data`, read-your-writes; a reactive reader depends on the
-     * block's cell. The root's is the document's data (`edytor.data`). Write
-     * it with `edytor.patchData(block.id, patches)`.
+     * The block's `data` as plain state: reactive at any depth (through the
+     * block's cell), and writable (`block.data.color = 'red'`,
+     * `block.data.tags.push('x')`, `delete block.data.color`). Each write is
+     * the `patchData` operation, dispatched (`session/props`). The root's is
+     * the document's data (`edytor.data`).
      */
-    get data(): Readonly<Record<string, any>>;
+    get data(): Record<string, any>;
     get definition(): BlockDefinition;
     get selected(): boolean;
     get focused(): boolean;

package/dist/block/block.svelte.js

@@ -1,3 +1,4 @@
+import { cleanups } from '../utils.js';
 import { Text } from '../text/text.svelte.js';
 /** Mark an element inside a block's markup as non-editable chrome (`block.void`, a preview's too). */
 export const voidChrome = (node) => {
@@ -76,14 +77,20 @@ export class Block {
         return this.edytor.facade.blockTypeOf(this.id) ?? '';
     }
     #data;
+    #props;
     /**
-     * The block's `data`, read-your-writes; a reactive reader depends on the
-     * block's cell. The root's is the document's data (`edytor.data`). Write
-     * it with `edytor.patchData(block.id, patches)`.
+     * The block's `data` as plain state: reactive at any depth (through the
+     * block's cell), and writable (`block.data.color = 'red'`,
+     * `block.data.tags.push('x')`, `delete block.data.color`). Each write is
+     * the `patchData` operation, dispatched (`session/props`). The root's is
+     * the document's data (`edytor.data`).
      */
     get data() {
         if (this.isRoot)
-            return this.edytor.docData();
+            return this.edytor.data;
+        return (this.#props ??= this.edytor.dataWrites.proxy(this.id, () => this.#current()));
+    }
+    #current() {
         const { facade, cells } = this.edytor;
         cells?.get(this.id);
         const version = facade.version;
@@ -330,10 +337,7 @@ export class Block {
         this.edytor.selection.keep(this);
         // A block laid out again with no commit moves the chrome beside it (the overlay measures).
         const unobserve = this.edytor.overlay.observe(node);
-        const onDestroy = this.edytor.plugins.flatMap((plugin) => {
-            const action = plugin.onBlockAttached?.({ node, block: this });
-            return typeof action === 'function' ? [action] : [];
-        });
+        const onDestroy = cleanups(this.edytor.plugins, (plugin) => plugin.onBlockAttached?.({ node, block: this }));
         return {
             destroy: () => {
                 this.#viewState = read(node);

package/dist/block/inlineBlock.svelte.d.ts

@@ -22,8 +22,12 @@ export declare class InlineBlock {
     get parent(): Block;
     get selected(): boolean;
     get type(): string;
-    /** The atom's `data`; a reactive reader depends on its block's cell. */
-    get data(): Readonly<Record<string, any>>;
+    /**
+     * The atom's `data` as plain state: reactive at any depth (through its
+     * block's cell), and writable; each write is its `patchData` operation
+     * (`session/props`).
+     */
+    get data(): Record<string, any>;
     get definition(): InlineBlockDefinition;
     /** Position among the block's content parts. */
     get index(): number;

package/dist/block/inlineBlock.svelte.js

@@ -37,9 +37,14 @@ export class InlineBlock {
     get type() {
         return this.#item?.type ?? '';
     }
-    /** The atom's `data`; a reactive reader depends on its block's cell. */
+    #props;
+    /**
+     * The atom's `data` as plain state: reactive at any depth (through its
+     * block's cell), and writable; each write is its `patchData` operation
+     * (`session/props`).
+     */
     get data() {
-        return this.#item?.data ?? {};
+        return (this.#props ??= this.edytor.dataWrites.proxy({ block: this.blockId, atom: this.id }, () => this.#item?.data ?? {}));
     }
     get definition() {
         return this.edytor.inlineBlocks.get(this.type) ?? {};

package/dist/clipboard/htmlFlow.d.ts

@@ -1,10 +1,20 @@
-import type { Edytor } from '../edytor.svelte.js';
 import type { Flow } from '../crdt/flow.js';
-import type { BlockDefinition } from '../plugins.js';
-import { type SerializableContent } from '../utils/json.js';
+import { type JSONBlock, type SerializableContent } from '../utils/json.js';
+import type { AtomForms, BlockForms, MarkForms } from './serializeClipboardFragment.js';
 /** What HTML import reads: the kind, mark and atom records, and the document's default child. */
-export type ImportKinds = Pick<Edytor, 'blocks' | 'marks'> & Partial<Pick<Edytor, 'inlineBlocks'>> & {
-    document: Pick<Edytor['document'], 'defaultChild'>;
+export type ImportKinds = {
+    readonly blocks: ReadonlyMap<string, BlockForms>;
+    readonly marks: ReadonlyMap<string, MarkForms>;
+    readonly inlineBlocks?: ReadonlyMap<string, AtomForms>;
+    readonly document: {
+        defaultChild: (parent: string | null) => string;
+    };
+};
+/** A `DOMParser` constructor: the browser's, or a server's (`linkedom`, `jsdom`, `happy-dom`). */
+export type HtmlParser = new () => {
+    parseFromString(html: string, type: 'text/html'): {
+        body: Node | null;
+    };
 };
 type Values = Record<string, SerializableContent>;
 /**
@@ -13,9 +23,10 @@ type Values = Record<string, SerializableContent>;
  * none: an export form written as one (a callout's `<div data-edytor-callout>`)
  * is found by its `parse` hook only.
  */
-export declare const tagOf: (type: string, kind: BlockDefinition, data: Values) => string | undefined;
+export declare const tagOf: (type: string, kind: BlockForms, data: Values) => string | undefined;
 /**
- * External HTML as a flow: the browser parses (inert: no script
+ * External HTML as lines (JSON blocks; a line without a `type` is its
+ * parent's default child): `parser` parses (inert: no script
  * runs, nothing loads), and the tag tables are the records inverted — a
  * catalogue kind's tag per preset (a content-less container takes its
  * default child's tag, one child per text line), a value-less mark's
@@ -27,5 +38,7 @@ export declare const tagOf: (type: string, kind: BlockDefinition, data: Values)
  * atom, never its text. Unknown
  * elements degrade to text runs; whitespace collapses as HTML renders it. `null` when the HTML carries nothing (`flow.shape`).
  */
+export declare const linesOfHtml: (kinds: ImportKinds, html: string | undefined, parser?: HtmlParser | undefined) => JSONBlock[] | null;
+/** External HTML as a flow (the paste's): {@link linesOfHtml}, with the browser's parser. */
 export declare const flowOfHtml: (kinds: ImportKinds, html: string | undefined) => Flow | null;
 export {};

package/dist/clipboard/htmlFlow.js

@@ -1,6 +1,8 @@
 import { colorsOfClasses } from '../block/colors.js';
 import { isTextPart } from '../block/contentRange.js';
 import { jsonBlockToSpec } from '../utils/json.js';
+/** Element and text nodes by their type, not their realm: a server parser's nodes are not this global's. */
+const isElement = (node) => node?.nodeType === 1;
 /** Never content: their text is code, metadata or form state. */
 const SKIP = /^(script|style|template|noscript|svg|math|iframe|object|embed|canvas|video|audio|img|input|button|select|textarea|head|title|meta|link|base)$/;
 /** HTML's block-level elements: they start a line (a kind's tag does too). */
@@ -21,7 +23,7 @@ const sizeOf = (img, side) => {
  * email's tracking pixel). It is text, its `alt`, never a block.
  */
 const isGlyph = (node) => {
-    if (!(node instanceof HTMLElement) || node.localName !== 'img')
+    if (!isElement(node) || node.localName !== 'img')
         return false;
     const alt = node.getAttribute('alt')?.trim() ?? '';
     if (alt && EMOJI_ALT.test(alt) && /[\p{Extended_Pictographic}\p{Regional_Indicator}]/u.test(alt))
@@ -61,7 +63,8 @@ export const tagOf = (type, kind, data) => {
     return undefined;
 };
 /**
- * External HTML as a flow: the browser parses (inert: no script
+ * External HTML as lines (JSON blocks; a line without a `type` is its
+ * parent's default child): `parser` parses (inert: no script
  * runs, nothing loads), and the tag tables are the records inverted — a
  * catalogue kind's tag per preset (a content-less container takes its
  * default child's tag, one child per text line), a value-less mark's
@@ -73,8 +76,8 @@ export const tagOf = (type, kind, data) => {
  * atom, never its text. Unknown
  * elements degrade to text runs; whitespace collapses as HTML renders it. `null` when the HTML carries nothing (`flow.shape`).
  */
-export const flowOfHtml = (kinds, html) => {
-    if (!html || html.length > 8 * 1024 * 1024 || typeof DOMParser === 'undefined')
+export const linesOfHtml = (kinds, html, parser = globalThis.DOMParser) => {
+    if (!html || html.length > 8 * 1024 * 1024 || !parser)
         return null;
     const { blocks, marks } = kinds;
     const atoms = kinds.inlineBlocks ?? new Map();
@@ -99,8 +102,9 @@ export const flowOfHtml = (kinds, html) => {
             return undefined;
         for (const [type, kind] of blocks) {
             const data = kind.parse?.(element);
+            // A kind of lines (a code block) takes its element's text, one child per line.
             if (data)
-                return { type, kind, data };
+                return { type, kind, data, lines: kind.lines ? kind.defaultChild : undefined };
         }
         return byTag.get(element.localName);
     };
@@ -124,11 +128,10 @@ export const flowOfHtml = (kinds, html) => {
         return found;
     };
     // A kind's hook may claim an element of another namespace (an equation's MathML `<math>`).
-    const isBlock = (node) => (node instanceof HTMLElement && BLOCK.test(node.localName)) ||
-        (node instanceof Element && kindOf(node) !== undefined);
+    const isBlock = (node) => isElement(node) && (BLOCK.test(node.localName) || kindOf(node) !== undefined);
     /** A void kind's element (an image): it shows no text, so a line it is met in ends there. */
     const isVoid = (node) => {
-        const claim = node instanceof Element ? kindOf(node) : undefined;
+        const claim = isElement(node) ? kindOf(node) : undefined;
         return claim?.kind.void === true;
     };
     const text = (line, value, marks, pre) => {
@@ -148,16 +151,16 @@ export const flowOfHtml = (kinds, html) => {
             line.content.push(Object.keys(marks).length ? { text: value, marks } : { text: value });
     };
     const inline = (node, at, marks, pre) => {
-        if (node.nodeType === Node.TEXT_NODE)
+        if (node.nodeType === 3)
             return text(at.line(), node.textContent ?? '', marks, pre);
         if (isGlyph(node))
             return text(at.line(), node.getAttribute('alt') ?? '', marks, pre);
         if (isVoid(node))
             return at.apart(node);
-        const atom = node instanceof Element ? atomOf(node) : undefined;
+        const atom = isElement(node) ? atomOf(node) : undefined;
         if (atom)
             return void at.line().content.push(atom);
-        if (!(node instanceof HTMLElement) || SKIP.test(node.localName))
+        if (!isElement(node) || SKIP.test(node.localName))
             return;
         if (node.localName === 'br')
             return text(at.line(), '\n', marks, true);
@@ -286,12 +289,17 @@ export const flowOfHtml = (kinds, html) => {
         // Split: a text line left empty around a void element is not kept.
         return parts.filter((part) => !texts.has(part) || end(part).content.length > 0 || part.children !== undefined);
     };
-    const body = new DOMParser().parseFromString(html, 'text/html').body;
+    const body = new parser().parseFromString(html, 'text/html').body;
+    if (!body)
+        return null;
     const lines = linesOf(body, undefined);
     const carries = (line) => line.content.length > 0 ||
         Boolean(line.children?.some(carries)) ||
         Boolean(line.type && blocks.get(line.type)?.void);
-    return lines.some(carries)
-        ? { lines: lines.map((line) => jsonBlockToSpec(line, true)) }
-        : null;
+    return lines.some(carries) ? lines : null;
+};
+/** External HTML as a flow (the paste's): {@link linesOfHtml}, with the browser's parser. */
+export const flowOfHtml = (kinds, html) => {
+    const lines = linesOfHtml(kinds, html);
+    return lines ? { lines: lines.map((line) => jsonBlockToSpec(line, true)) } : null;
 };

package/dist/clipboard/serializeClipboardFragment.d.ts

@@ -1,9 +1,42 @@
-import type { Edytor } from '../edytor.svelte.js';
-import type { EdytorClipboardFragment } from './types.js';
-/** The records the export reads: each kind, mark and atom declares its own forms. */
-export type ExportKinds = Pick<Edytor, 'blocks' | 'marks' | 'inlineBlocks'>;
+/**
+ * The document's export forms, one reading for the clipboard and for
+ * `toHTML` / `toMarkdown` (`edytor/export`): each kind, mark and atom
+ * declares its own forms (`html`, `plain`, `markdown`; a mark's `tag` and
+ * `attributes`), and this module only walks the blocks. Pure: no view, no
+ * DOM, no Svelte.
+ */
+import type { JSONBlock, SerializableContent } from '../utils/json.js';
+import type { BlockDefinition, InlineBlockDefinition, MarkDefinition } from '../plugins.js';
+import type { EdytorClipboardFragment, JSONContentPart } from './types.js';
+/** A kind's export and import forms: the fields of its record the export and HTML import read. */
+export type BlockForms = Pick<BlockDefinition, 'html' | 'plain' | 'markdown' | 'parse' | 'element' | 'contentElement' | 'void' | 'island' | 'lines' | 'rendersContent' | 'defaultChild' | 'itemKind'> & {
+    /** The data of each way to create the kind: HTML import finds a preset's tag. */
+    presets?: {
+        data?: Record<string, SerializableContent>;
+    }[];
+};
+/** A mark's export and import forms. */
+export type MarkForms = Pick<MarkDefinition, 'tag' | 'attributes' | 'parse' | 'markdown'>;
+/** An atom's export and import forms. */
+export type AtomForms = Pick<InlineBlockDefinition, 'html' | 'plain' | 'markdown' | 'parse'>;
+/** The records the export reads: each kind, mark and atom declares its own forms (a view is one). */
+export type ExportKinds = {
+    readonly blocks: ReadonlyMap<string, BlockForms>;
+    readonly marks: ReadonlyMap<string, MarkForms>;
+    readonly inlineBlocks: ReadonlyMap<string, AtomForms>;
+};
 export declare const encodeClipboardJson: (value: unknown) => string;
 /** `value` escaped for an HTML text or a double-quoted attribute: every kind's export reads it. */
 export declare const escapeHtml: (value: string) => string;
+/** The content as HTML, or as plain text: an atom by its kind's form (`html`, `plain`). */
+export declare const contentOf: (content: JSONContentPart[] | undefined, kinds: ExportKinds, html: boolean) => string;
+/**
+ * How sibling blocks' HTML joins (`edytor/export` wraps a run of list items
+ * in its list): the blocks, their HTML, and their parent's `html` form.
+ * Without one, one after another (the clipboard's).
+ */
+export type SiblingsHtml = (blocks: JSONBlock[], html: string[], parent?: BlockForms['html']) => string;
+/** Blocks as HTML: the clipboard's and `toHTML`'s one reading of the kinds' forms. */
+export declare const blocksToHtml: (blocks: JSONBlock[], kinds: ExportKinds, wrap: SiblingsHtml) => string;
 export declare const serializeClipboardFragmentToPlainText: (fragment: EdytorClipboardFragment, kinds: ExportKinds) => string;
 export declare const serializeClipboardFragmentToHtml: (fragment: EdytorClipboardFragment, kinds: ExportKinds) => string;

package/dist/clipboard/serializeClipboardFragment.js

@@ -19,7 +19,7 @@ const textHtml = (part, kinds) => {
     return html;
 };
 /** The content as HTML, or as plain text: an atom by its kind's form (`html`, `plain`). */
-const contentOf = (content = [], kinds, html) => content
+export const contentOf = (content = [], kinds, html) => content
     .map((part) => {
     if (isTextPart(part))
         return html ? textHtml(part, kinds) : part.text;
@@ -41,9 +41,9 @@ const withClasses = (html, classes) => classes
     })
     : html;
 /** A block and its subtree as HTML (its colours as Notion's classes), or as plain text. */
-const blockOf = (block, kinds, html) => {
+const blockOf = (block, kinds, html, wrap) => {
     const content = contentOf(block.content, kinds, html);
-    const kids = block.children?.map((child) => blockOf(child, kinds, html)) ?? [];
+    const kids = block.children?.map((child) => blockOf(child, kinds, html, wrap)) ?? [];
     const kind = kinds.blocks.get(block.type);
     if (!html) {
         const children = kids.filter(Boolean).join('\n');
@@ -51,8 +51,8 @@ const blockOf = (block, kinds, html) => {
             ? kind.plain(block, content, children)
             : [content, children].filter(Boolean).join('\n');
     }
-    const children = kids.join('');
     const form = kind?.html;
+    const children = wrap ? wrap(block.children ?? [], kids, form) : kids.join('');
     const out = !form
         ? `<p>${content}</p>${children}`
         : typeof form === 'string'
@@ -61,6 +61,8 @@ const blockOf = (block, kinds, html) => {
     // A block's colours as Notion's export names them (`block-color-red`).
     return withClasses(out, colorClasses(block.data));
 };
+/** Blocks as HTML: the clipboard's and `toHTML`'s one reading of the kinds' forms. */
+export const blocksToHtml = (blocks, kinds, wrap) => wrap(blocks, blocks.map((block) => blockOf(block, kinds, true, wrap)));
 export const serializeClipboardFragmentToPlainText = (fragment, kinds) => fragment.kind === 'blocks'
     ? fragment.blocks.map((block) => blockOf(block, kinds, false)).join('\n')
     : contentOf(fragment.content, kinds, false);

package/dist/clipboard/textBlocks.d.ts

@@ -21,5 +21,13 @@ export type TextToBlocksOptions = {
 };
 /** Whether `text` holds block markdown (one line of it is enough), as a paste reads it. */
 export declare const hasBlockMarkdown: (text: string) => boolean;
+/**
+ * One line's kind, data and text, or `null` for a paragraph line: the one
+ * reading of a markdown line's block marker (`edytor/export`'s full reader
+ * reads its lines with it too).
+ */
+export declare const lineKind: (line: string) => (Omit<JSONBlock, "content"> & {
+    text: string;
+}) | null;
 /** `text` as blocks (see the module comment). */
 export declare const textToBlocks: (text: string, { markdown, type }?: TextToBlocksOptions) => JSONBlock[];

package/dist/clipboard/textBlocks.js

@@ -25,8 +25,12 @@ const runs = (text) => {
 const BLOCK_LINE = /^\s*(?:#{1,6}\s|[-*+]\s|\d+[.)]\s|>|```|(?:-{3,}|\*{3,}|_{3,})\s*$)/;
 /** Whether `text` holds block markdown (one line of it is enough), as a paste reads it. */
 export const hasBlockMarkdown = (text) => text.split(/\r?\n/).some((line) => BLOCK_LINE.test(line));
-/** One line's kind, data and text, or `null` for a paragraph line. */
-const lineKind = (line) => {
+/**
+ * One line's kind, data and text, or `null` for a paragraph line: the one
+ * reading of a markdown line's block marker (`edytor/export`'s full reader
+ * reads its lines with it too).
+ */
+export const lineKind = (line) => {
     let m = /^(#{1,6})\s+(.*)$/.exec(line);
     if (m)
         return { type: 'heading', data: { level: `h${Math.min(3, m[1].length)}` }, text: m[2] };

package/dist/cloudflare/room/admission.js

@@ -11,7 +11,7 @@
  */
 import { Y } from '../../crdt/engine.js';
 import * as E from '../../crdt/protocol.js';
-import { ChunkLimitError, ChunkSequenceError, CLOSE } from '../../crdt/providers/room.js';
+import { ChunkError, CLOSE } from '../../crdt/providers/room.js';
 import { MAX_WAITING_DELETES, noTimers } from './shared.js';
 import { STORAGE_FAILURE, now, sync, tally } from './context.js';
 import { attributionWrites, BINDING_PREFIX, forgedAttributionDeletes, forgedDeletes, forgedWriters } from './forged.js';
@@ -168,7 +168,7 @@ export class Admission {
         }
         catch (error) {
             this.#chunkReaders.delete(ws);
-            if (error instanceof ChunkLimitError) {
+            if (error instanceof ChunkError && error.limit !== undefined) {
                 return this.#overQuota(ws, attachment.user, 'frame', {
                     bytes: error.total,
                     limit: error.limit
@@ -187,7 +187,7 @@ export class Admission {
                 room.presence.depart(ws);
                 return room.close(ws, CLOSE.fault, 'room busy');
             }
-            if (error instanceof ChunkSequenceError) {
+            if (error instanceof ChunkError) {
                 room.note({ reason: 'internal', detail: `chunks: ${error.message}` });
                 room.presence.depart(ws);
                 return room.close(ws, CLOSE.fault, 'chunk sequence lost');

package/dist/cloudflare/room/context.d.ts

@@ -233,6 +233,12 @@ export declare const crdt: {
             blockDataOf: (id: string) => Record<string, unknown> | undefined;
             docData: () => import("../../crdt/doc/types.js").JsonObj;
             dataItemIds: (target: import("../../index.js").DataTarget, path: readonly string[]) => string[];
+            dataPreview: (target: import("../../index.js").DataTarget, pending: readonly import("../../index.js").DataPatch[]) => {
+                data: {
+                    [x: string]: unknown;
+                };
+                ids: (path: readonly string[]) => string[];
+            } | null;
             blockAttribution: (id: string) => import("../../index.js").BlockAttribution | undefined;
             crdtId: (id: string) => string | null;
             resolveBlock: (id: string) => E.EngineNode | null;
@@ -530,7 +536,7 @@ export declare const crdt: {
                 off<NAME extends "refused" | "status" | "failed" | "schema-mismatch" | "message-error" | "protocol-mismatch" | "synced" | "connection-close" | "connection-error" | "saved" | "permission-denied" | "expired" | "unreachable">(name: NAME, f: E.WebsocketProviderEvents[NAME]): void;
             };
         };
-        watchComments: (server: string, roomName: string, listener: (message: E.CommentMessage) => void) => (() => void);
+        watchComments: (server: string | null, roomName: string, listener: (message: E.CommentMessage) => void) => (() => void);
         storeState: (idbPersistence: {
             db: IDBDatabase | null;
             name: string;

package/dist/cloudflare/routeDocumentSocket.d.ts

@@ -50,6 +50,23 @@ export type RouteDocumentOptions = {
      * your page from another site's. Omitted: every origin passes.
      */
     allowedOrigins?: readonly string[] | ((origin: string) => boolean);
+    /**
+     * Answer a page on another origin (the app on `app.example.com`, the
+     * room on `rooms.example.com`): `OPTIONS` preflights are answered `204`
+     * (`GET, POST`, the headers the page asked for), and every HTTP answer
+     * (comments, history, the probes) carries `Access-Control-Allow-Origin`.
+     * The origins are `allowedOrigins`: with a list or a predicate, the
+     * request's `Origin` is echoed (`Vary: Origin`) and `credentials: true`
+     * lets the page send its cookies (`fetch(…, { credentials: 'include' })`);
+     * without one, every origin gets `*` and no credentials. A preflight from
+     * an origin `allowedOrigins` refuses is answered `403`. `maxAge`: how long
+     * a browser keeps a preflight, in seconds (default 600). A WebSocket dial
+     * needs none of it. Omitted: no CORS headers, and `OPTIONS` answers `405`.
+     */
+    cors?: boolean | {
+        credentials?: boolean;
+        maxAge?: number;
+    };
 };
 /** The replica a client asked for in `?replica=<doc.clientID>` (or `param`), or `null`. */
 export declare const requestedReplica: (request: Request, param?: string) => number | null;