edytor 1.0.0-rc.3 → 2.0.0

package/README.md

@@ -17,19 +17,19 @@
 
 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.
 
-> **Release candidate.** Edytor `1.0.0-rc.3` is the 1.0 release candidate (`edytor` on npm): its API is frozen, and a change to it before 1.0 is a listed breaking change. 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.
+> **2.0.** Edytor `2.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 (`markdownShortcutsPlugin`) and code blocks.
-- **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 `tocPlugin` 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 `columnsPlugin` 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 `tablePlugin` 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)).
+- **Notion-style editing out of the box.** `<Edytor />` alone is a rich text editor with 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()`) code blocks and images (`createImagePlugin({ upload })`).
+- **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)).
 - **Mentions, page links and your own triggers.** `createMentionPlugin` (`@` people) and `createPageLinkPlugin` (`[[` pages) take your app's search; a plugin's `inputRules` (`:smile:` → 😄) and `triggers` (a menu on a typed character) declare the rest ([Input rules and triggers](https://edytor.dev/docs/plugins/input-rules)).
 - **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 chrome shows or says, slash keywords included, comes from a labels dictionary each plugin takes; English by default ([Localization](https://edytor.dev/docs/customization/localization)).
-- **Synced properties.** `block.data`, `atom.data` and `edytor.data` read and write like plain objects (`bind:value={block.data.title}`); each property and each array item syncs on its own, so concurrent edits of different properties, or of different items of one array, merge.
+- **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` 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.
@@ -45,47 +45,29 @@ The pre-release is on npm under the `next` tag. Name the tag: a bare `edytor` is
 pnpm add edytor
 ```
 
-`svelte@^5` is a peer dependency. Do not install `yjs`: the v14 engine is vendored (`edytor/crdt`). See [installation](https://edytor.dev/docs/getting-started) and [platform support](https://edytor.dev/docs/reference/platform-support) (Chrome, Edge, Firefox and Safari; real phones are not tested yet).
+`svelte@^5` is a peer dependency. Do not install `yjs`: the v14 engine is vendored (`edytor/crdt`). See [installation](https://edytor.dev/docs/getting-started) and [platform support](https://edytor.dev/docs/reference/platform-support) (Baseline 2024: Chrome and Edge 120, Firefox 125, Safari 17.4 and later; real phones are not tested yet).
 
 ## Quick start
 
 ```svelte
 <script lang="ts">
-	import {
-		Edytor,
-		codePlugin,
-		markdownShortcutsPlugin,
-		slashMenuPlugin,
-		toolbarPlugin,
-		blockMenuPlugin,
-		richTextPlaceholder,
-		type JSONDoc
-	} from 'edytor';
-	import 'edytor/themes/notion.css';
-
-	const value: JSONDoc = {
+	import { Edytor, createCodePlugin, type JSONDoc } from 'edytor';
+
+	let value = $state<JSONDoc>({
 		children: [{ type: 'paragraph', content: [{ text: 'Hello, World!' }] }]
-	};
-	const plugins = [
-		codePlugin,
-		markdownShortcutsPlugin,
-		slashMenuPlugin,
-		toolbarPlugin,
-		blockMenuPlugin
-	];
+	});
 </script>
 
-<div class="edytor-notion">
-	<Edytor
-		{value}
-		{plugins}
-		placeholder={richTextPlaceholder}
-		onChange={(root) => console.log(root)}
-	/>
-</div>
+<Edytor {value} plugins={[createCodePlugin()]} onChange={(next) => (value = next)} />
+
+<p>{value.children?.length ?? 0} blocks</p>
 ```
 
-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, and block handles. To collaborate, name a room and a server running the [`edytor/cloudflare` room](https://edytor.dev/docs/server/quick-start):
+`<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)). The demo's Notion-style ones are in [`src/routes/chrome`](https://github.com/beynar/edytor/tree/master/src/routes/chrome), ready to copy into your app ([ready-made menus](https://edytor.dev/docs/customization/ready-made-menus)).
+
+To collaborate, name a room and a server running the [`edytor/cloudflare` room](https://edytor.dev/docs/server/quick-start):
 
 ```svelte
 <Edytor
@@ -105,7 +87,7 @@ The [documentation site](https://edytor.dev/docs) is the single source for the A
 - [Editor](https://edytor.dev/docs/editor/edytor-component): the component, commands, selection, history, clipboard, readonly
 - [Plugins](https://edytor.dev/docs/plugins) and [customization](https://edytor.dev/docs/customization/blocks): bundled plugins, custom blocks and marks, [hotkeys and editing behavior](https://edytor.dev/docs/customization/hotkeys)
 - [Collaboration](https://edytor.dev/docs/collaboration) and [server](https://edytor.dev/docs/server/quick-start): documents, providers, presence, the Durable Object room and its protocol
-- [Reference](https://edytor.dev/docs/reference/document-api): the document API, [troubleshooting](https://edytor.dev/docs/reference/troubleshooting), the [changelog](https://edytor.dev/docs/reference/migration) (with [migration from 0.0.11](https://edytor.dev/docs/reference/migration#upgrading-from-0011)), [importing v13 documents](https://edytor.dev/docs/reference/v13-import), limitations, [platform support](https://edytor.dev/docs/reference/platform-support)
+- [Reference](https://edytor.dev/docs/reference/document-api): the document API, [troubleshooting](https://edytor.dev/docs/reference/troubleshooting), the [changelog](https://edytor.dev/docs/reference/migration) (with [migration from 0.0.11](https://edytor.dev/docs/reference/migration#upgrading-from-0011)), limitations, [platform support](https://edytor.dev/docs/reference/platform-support)
 
 ## Contributing
 

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

@@ -1,16 +1,15 @@
 import { Text } from '../text/text.svelte.js';
 import type { Edytor } from '../edytor.svelte.js';
-import type { JSONBlock, JSONInlineBlock } from '../utils/json.js';
-import { type BlockOperations } from './block.utils.js';
+import type { JSONBlock } from '../utils/json.js';
 import type { BlockDefinition } from '../plugins.js';
-import { InlineBlock } from './inlineBlock.svelte.js';
-import type { DocBlock } from '../crdt/index.js';
+import type { InlineBlock } from './inlineBlock.svelte.js';
 /** Mark an element inside a block's markup as non-editable chrome (`block.void`, a preview's too). */
 export declare const voidChrome: (node: HTMLElement) => void;
 /**
- * An id-only block handle: every getter reads the document index
- * (transaction-aware), every mutator issues a command. The view keeps one per
- * id (`edytor.idToBlock`); `node` is the element the core renders for it.
+ * An id-only, read-only block handle: every getter reads the document index
+ * (transaction-aware). Writes are the view's operations, with the block's id
+ * (`edytor.splitBlock(block.id, …)`). The view keeps one handle per id
+ * (`edytor.idToBlock`); `node` is the element the core renders for it.
  *
  * A reactive reader (a template, a `$derived`, an `$effect`) of a getter
  * depends on the cells the answer comes from (this block's, its parent's,
@@ -25,28 +24,21 @@ export declare class Block {
     node?: HTMLElement;
     constructor(edytor: Edytor, id: string);
     get isRoot(): boolean;
-    /** The typed document node — `null` for the root. */
-    get model(): DocBlock | null;
     /** The display parent (the root for a top-level block); none for the root or a dead block. */
     get parent(): Block | undefined;
     get children(): Block[];
     /** Text segments and inline atoms, alternating, starting and ending with a text. */
     get content(): (Text | InlineBlock)[];
     get type(): string;
-    /** Retype the block — the `setBlock` command (readonly, hooks, `dispatcher.last`). */
-    set type(value: string);
     /**
-     * The block's `data` as a live proxy (`session/props.ts`): reads follow the
-     * document (reactive through the block's cell), writes are `patchData`
-     * commands. The root's is the document's data (`edytor.data`).
+     * 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(): Record<string, any>;
     get definition(): BlockDefinition;
-    /**
-     * Replace the block's `data` — a `patchData` command of its root (readonly,
-     * hooks, `dispatcher.last`); `block.model.setData` is the raw document write.
-     */
-    setData: (data: Record<string, unknown>) => void;
     get selected(): boolean;
     get focused(): boolean;
     /** May this block move at all: `canPlace` without a destination (drag handles). */
@@ -109,71 +101,6 @@ export declare class Block {
     get firstText(): Text | undefined;
     /** The last text of this block's own content (see {@link firstText}). */
     get lastText(): Text | undefined;
-    addChildBlock: (payload: {
-        block: JSONBlock;
-        index: number;
-    }) => Block;
-    addChildBlocks: (payload: {
-        blocks: JSONBlock[];
-        index: number;
-    }) => Block[];
-    insertBlockAfter: (payload: {
-        block: JSONBlock;
-    }) => Block | null | undefined;
-    insertBlockBefore: (payload: {
-        block: JSONBlock;
-    }) => Block | null | undefined;
-    splitBlock: (payload: {
-        index: number;
-        text: Text;
-    }) => Block | null | undefined;
-    duplicateBlock: (payload?: {} | undefined) => Block | null | undefined;
-    removeBlock: (payload?: {
-        keepChildren?: boolean;
-    } | undefined) => void;
-    unNestBlock: (this: Block, payload?: {} | undefined) => Block | null;
-    mergeBlockBackward: (payload?: {} | undefined) => Block | null | undefined;
-    mergeBlockForward: (payload?: {} | undefined) => Block | null | undefined;
-    nestBlock: (this: Block, payload?: {} | undefined) => Block | null;
-    setBlock: (payload: {
-        value: Partial<JSONBlock>;
-    }) => void;
-    moveBlock: (this: Block, payload: {
-        path: number[];
-        beside?: import("./block.utils.js").BlockBeside;
-    }) => Block | null;
-    moveBlocks: (this: Block, payload: {
-        blocks: Block[];
-        path: number[];
-        beside?: import("./block.utils.js").BlockBeside;
-    }) => Block[];
-    pushContentIntoBlock: (payload: {
-        value: (Text | InlineBlock)[];
-    }) => void;
-    removeInlineBlock: (payload: {
-        index: number;
-    }) => void;
-    patchData: (payload: {
-        ops: import("../crdt/index.js").DataPatch[];
-        atom?: string;
-    }) => void;
-    /**
-     * Insert an inline atom: at `offset` of the block's content (block
-     * offsets, an inline atom counting 1; a caret's), or at `index` of the
-     * text segment `text`. One `addInlineBlock` operation (its payload names
-     * the segment). Answers the text segment right after the atom, where a
-     * caret goes (`null` when it was not written, `undefined` when refused).
-     */
-    addInlineBlock: (payload: BlockOperations["addInlineBlock"] | {
-        offset: number;
-        block: JSONInlineBlock;
-    }) => Text | null | undefined;
-    normalizeContent: () => void;
-    normalizeChildren: () => void;
-    deleteContentAtRange: (payload: {
-        start: [number, number];
-        end: [number, number];
-    }) => void;
     /** Mark an element inside the block's markup as non-editable chrome (a header, a caption bar). */
     void: (node: HTMLElement) => void;
     /**

package/dist/block/block.svelte.js

@@ -1,9 +1,4 @@
 import { Text } from '../text/text.svelte.js';
-import { batch, removeInlineBlock, addChildBlock, insertBlockAfter, insertBlockBefore, mergeBlockBackward, mergeBlockForward, nestBlock, removeBlock, setBlock, splitBlock, prepareSplit, duplicateBlock, prepareDuplicate, prepareSet, prepareMove, prepareMoves, prepareInsertAfter, prepareInsertBefore, prepareRemove, prepareMergeBackward, prepareMergeForward, prepareUnNest, prepareNest, prepareRemoveInline, preparePatch, patchData, prepareDeleteRange, addChildBlocks, pushContentIntoBlock, unNestBlock, moveBlock, moveBlocks, normalizeContent, addInlineBlock, textAfterAtom, blockOf, deleteContentAtRange, normalizeChildren } from './block.utils.js';
-import { jsonBlockToSpec, jsonContentToItems } from '../utils/json.js';
-import { InlineBlock } from './inlineBlock.svelte.js';
-import { revealed } from '../selection/replaceSelection.js';
-import { propsProxy } from '../session/props.js';
 /** Mark an element inside a block's markup as non-editable chrome (`block.void`, a preview's too). */
 export const voidChrome = (node) => {
     node.setAttribute('data-edytor-void', `true`);
@@ -11,9 +6,10 @@ export const voidChrome = (node) => {
     node.setAttribute('contenteditable', 'false');
 };
 /**
- * An id-only block handle: every getter reads the document index
- * (transaction-aware), every mutator issues a command. The view keeps one per
- * id (`edytor.idToBlock`); `node` is the element the core renders for it.
+ * An id-only, read-only block handle: every getter reads the document index
+ * (transaction-aware). Writes are the view's operations, with the block's id
+ * (`edytor.splitBlock(block.id, …)`). The view keeps one handle per id
+ * (`edytor.idToBlock`); `node` is the element the core renders for it.
  *
  * A reactive reader (a template, a `$derived`, an `$effect`) of a getter
  * depends on the cells the answer comes from (this block's, its parent's,
@@ -46,10 +42,6 @@ export class Block {
         else
             cells?.get(id);
     }
-    /** The typed document node — `null` for the root. */
-    get model() {
-        return this.isRoot ? null : this.edytor.facade.block(this.id);
-    }
     /** The display parent (the root for a top-level block); none for the root or a dead block. */
     get parent() {
         if (this.isRoot)
@@ -83,19 +75,19 @@ export class Block {
         this.#track();
         return this.edytor.facade.blockTypeOf(this.id) ?? '';
     }
-    /** Retype the block — the `setBlock` command (readonly, hooks, `dispatcher.last`). */
-    set type(value) {
-        this.setBlock({ value: { type: value } });
-    }
     #data;
     #props;
     /**
-     * The block's `data` as a live proxy (`session/props.ts`): reads follow the
-     * document (reactive through the block's cell), writes are `patchData`
-     * commands. The root's is the document's data (`edytor.data`).
+     * 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() {
-        return (this.#props ??= propsProxy(() => (this.isRoot ? this.edytor.docData() : this.#current()), (ops) => this.patchData({ ops }), (path) => this.edytor.facade.dataItemIds(this.isRoot ? null : this.id, path)));
+        if (this.isRoot)
+            return this.edytor.data;
+        return (this.#props ??= this.edytor.dataWrites.proxy(this.id, () => this.#current()));
     }
     #current() {
         const { facade, cells } = this.edytor;
@@ -108,14 +100,6 @@ export class Block {
     get definition() {
         return this.edytor.definitionOf(this.type);
     }
-    /**
-     * Replace the block's `data` — a `patchData` command of its root (readonly,
-     * hooks, `dispatcher.last`); `block.model.setData` is the raw document write.
-     */
-    setData = (data) => {
-        // Non-JSON values are coerced at the document boundary (`sanitizeWireJson`).
-        this.patchData({ ops: [{ path: [], value: data }] });
-    };
     get selected() {
         return this.edytor.selection.isSelected(this);
     }
@@ -140,27 +124,27 @@ export class Block {
     }
     /** @internal */
     get firstEditableText() {
-        // Only a RENDERED text part is editable — a container's phantom
-        // content slot holds a Text with no `node`. Scan ALL children: the
-        // first child can be noneditable (a void divider) while a later
-        // child owns the text the caret must land in.
-        const own = this.content.find((part) => part instanceof Text && part.node != null);
-        if (own)
-            return own;
-        for (const child of this.children) {
-            const text = child.firstEditableText;
-            if (text)
-                return text;
-        }
-        return undefined;
+        return this.#editable(false);
     }
     /** @internal */
     get lastEditableText() {
-        const own = this.content.findLast((part) => part instanceof Text && part.node != null);
+        return this.#editable(true);
+    }
+    /**
+     * The first (or `last`) editable text of the block's own content, else
+     * of its subtree. Only a RENDERED text part is editable — a container's
+     * phantom content slot holds a Text with no `node`. Every child is
+     * scanned: the first can be noneditable (a void divider) while a later
+     * one owns the text the caret must land in.
+     */
+    #editable(last) {
+        const rendered = (part) => part instanceof Text && part.node != null;
+        const own = last ? this.content.findLast(rendered) : this.content.find(rendered);
         if (own)
             return own;
-        for (let i = this.children.length - 1; i >= 0; i--) {
-            const text = this.children[i].lastEditableText;
+        const children = this.children;
+        for (const child of last ? children.reverse() : children) {
+            const text = child.#editable(last);
             if (text)
                 return text;
         }
@@ -305,40 +289,6 @@ export class Block {
             return this.children.at(-1)?.lastText;
         return this.rendersContent ? this.content.findLast((p) => p instanceof Text) : undefined;
     }
-    addChildBlock = batch('addChildBlock', addChildBlock);
-    addChildBlocks = batch('addChildBlocks', addChildBlocks);
-    insertBlockAfter = batch('insertBlockAfter', insertBlockAfter, prepareInsertAfter, blockOf);
-    insertBlockBefore = batch('insertBlockBefore', insertBlockBefore, prepareInsertBefore, blockOf);
-    splitBlock = batch('splitBlock', splitBlock, prepareSplit, blockOf);
-    duplicateBlock = batch('duplicateBlock', duplicateBlock, prepareDuplicate, blockOf);
-    removeBlock = batch('removeBlock', removeBlock, prepareRemove);
-    unNestBlock = revealed(batch('unNestBlock', unNestBlock, prepareUnNest));
-    mergeBlockBackward = batch('mergeBlockBackward', mergeBlockBackward, prepareMergeBackward, blockOf);
-    mergeBlockForward = batch('mergeBlockForward', mergeBlockForward, prepareMergeForward, blockOf);
-    nestBlock = revealed(batch('nestBlock', nestBlock, prepareNest));
-    setBlock = batch('setBlock', setBlock, prepareSet);
-    moveBlock = revealed(batch('moveBlock', moveBlock, prepareMove));
-    moveBlocks = revealed(batch('moveBlocks', moveBlocks, prepareMoves));
-    pushContentIntoBlock = batch('pushContentIntoBlock', pushContentIntoBlock);
-    removeInlineBlock = batch('removeInlineBlock', removeInlineBlock, prepareRemoveInline);
-    patchData = batch('patchData', patchData, preparePatch);
-    #addInline = batch('addInlineBlock', addInlineBlock, undefined, textAfterAtom);
-    /**
-     * Insert an inline atom: at `offset` of the block's content (block
-     * offsets, an inline atom counting 1; a caret's), or at `index` of the
-     * text segment `text`. One `addInlineBlock` operation (its payload names
-     * the segment). Answers the text segment right after the atom, where a
-     * caret goes (`null` when it was not written, `undefined` when refused).
-     */
-    addInlineBlock = (payload) => {
-        if (!('offset' in payload))
-            return this.#addInline(payload);
-        const at = this.textAtOffset(Math.max(0, payload.offset));
-        return at ? this.#addInline({ index: at.offset, text: at.text, block: payload.block }) : null;
-    };
-    normalizeContent = batch('normalizeContent', normalizeContent);
-    normalizeChildren = batch('normalizeChildren', normalizeChildren);
-    deleteContentAtRange = batch('deleteContentAtRange', deleteContentAtRange, prepareDeleteRange);
     /** Mark an element inside the block's markup as non-editable chrome (a header, a caption bar). */
     void = voidChrome;
     /**
@@ -366,60 +316,6 @@ export class Block {
         }
         return hit;
     };
-    // ── JSON insertion (specs are data; `new Block({block})` is gone) ──
-    /**
-     * Insert children at `index`: a JSON spec is created (its id kept, minted
-     * when missing); a block handle moves there with its identity. A raw
-     * write for the editor's own commands: nothing on a view whose dispatcher
-     * refuses writes (readonly, a read-only document).
-     * @internal
-     */
-    insertChildren = (index, blocks) => {
-        if (!this.edytor.dispatcher.permits())
-            return;
-        const { facade } = this.edytor;
-        const parent = this.isRoot ? null : this.id;
-        blocks.forEach((block, k) => {
-            if (block instanceof Block)
-                block.model?.moveTo({ parent: this.model, index: index + k });
-            else
-                facade.insertBlock({ parent, index: index + k }, jsonBlockToSpec(block));
-        });
-    };
-    /**
-     * Delete `length` visible children from `index`, each with its subtree (a
-     * document delete). Raw, as `insertChildren`.
-     * @internal
-     */
-    deleteChildren = (index, length = 1) => {
-        if (!this.edytor.dispatcher.permits())
-            return;
-        const ids = this.edytor.facade.childrenIds(this.isRoot ? null : this.id);
-        for (const id of ids.slice(index, index + length).reverse())
-            this.edytor.facade.block(id).delete({ keepChildren: false });
-    };
-    /**
-     * Insert content before part `index` (a text segment or an inline atom):
-     * each entry is a text's runs or an atom, as JSON. Raw, as `insertChildren`.
-     * @internal
-     */
-    insertParts = (index, parts) => {
-        if (!this.edytor.dispatcher.permits())
-            return;
-        const model = this.model;
-        if (!model)
-            return;
-        const all = this.edytor.idToBlock.parts(this.id);
-        let at = all[index]?.start ?? model.length;
-        for (const item of jsonContentToItems(parts.flat())) {
-            if (item.kind === 'inline')
-                model.insertInline(at++, item);
-            else if (item.text) {
-                model.insertText(at, item.text, item.marks);
-                at += item.text.length;
-            }
-        }
-    };
     /** The declared view state (`open` on a `details`) the block's last element held. */
     #viewState = [];
     /**
@@ -428,14 +324,14 @@ export class Block {
      * view state: an open toggle stays open.
      * @internal
      */
-    attach = (node) => {
+    attach = (node, owned) => {
         const names = this.definition.viewState ?? [];
         const read = (from) => names.flatMap((name) => (from.hasAttribute(name) ? [[name, from.getAttribute(name)]] : []));
         for (const [name, value] of this.node ? read(this.node) : this.#viewState)
             if (names.includes(name))
                 node.setAttribute(name, value);
         this.node = node;
-        const release = this.edytor.surface.register(node, 'block', this.id);
+        const release = this.edytor.surface.register(node, 'block', this.id, undefined, owned);
         // Its attributes follow its own selected and focused membership.
         this.edytor.selection.keep(this);
         // A block laid out again with no commit moves the chrome beside it (the overlay measures).

package/dist/block/colors.d.ts

@@ -14,15 +14,6 @@ import type { Block } from './block.svelte.js';
 import type { Edytor } from '../edytor.svelte.js';
 /** Notion's palette: the colour names a block may hold, in menu order ("Default" is none). */
 export declare const BLOCK_COLORS: readonly ["gray", "brown", "orange", "yellow", "green", "blue", "purple", "pink", "red"];
-/**
- * Notion's light values of the palette: the fallbacks of the theme tokens
- * (`--edytor-color-<name>`, `--edytor-background-<name>`), as the core's
- * stylesheet (`Block.svelte`) and the Notion theme write them.
- */
-export declare const BLOCK_PALETTE: Record<(typeof BLOCK_COLORS)[number], {
-    color: string;
-    background: string;
-}>;
 /** A block's colour fields: its text colour and its background. */
 export type BlockColorField = 'color' | 'background';
 /** `value` as a colour name, or `undefined`. */

package/dist/block/colors.js

@@ -10,22 +10,6 @@ export const BLOCK_COLORS = [
     'pink',
     'red'
 ];
-/**
- * Notion's light values of the palette: the fallbacks of the theme tokens
- * (`--edytor-color-<name>`, `--edytor-background-<name>`), as the core's
- * stylesheet (`Block.svelte`) and the Notion theme write them.
- */
-export const BLOCK_PALETTE = {
-    gray: { color: '#7d7a75', background: '#f0efed' },
-    brown: { color: '#9f765a', background: '#f5ede9' },
-    orange: { color: '#d27b2d', background: '#fbebde' },
-    yellow: { color: '#cb9434', background: '#f9f3dc' },
-    green: { color: '#50946e', background: '#e8f1ec' },
-    blue: { color: '#387dc9', background: '#e5f2fc' },
-    purple: { color: '#9a6bb4', background: '#f3ebf9' },
-    pink: { color: '#c14c8a', background: '#fae9f1' },
-    red: { color: '#cf5148', background: '#fce9e7' }
-};
 /**
  * A colour name the core renders: lowercase letters, digits and hyphens,
  * starting with a letter (an app's own name, such as `teal`, renders too,
@@ -67,8 +51,7 @@ export const setBlockColor = (edytor, blocks, field, value) => {
     if (!painted.length)
         return false;
     const applied = edytor.dispatcher.each('setBlockColor', painted, (block) => {
-        block.patchData({ ops: [{ path: [field], value: name }] });
-        return edytor.dispatcher.last?.status === 'applied';
+        return edytor.patchData(block.id, [{ path: [field], value: name }]).status === 'applied';
     });
     return applied.some(Boolean);
 };

package/dist/block/contentRange.d.ts

@@ -1,4 +1,8 @@
 import type { JSONInlineBlock, JSONText } from '../utils/json.js';
 export type JSONContentPart = JSONText | JSONInlineBlock;
 export declare const isTextPart: (part: JSONContentPart) => part is JSONText;
-export declare const sliceTextValue: (value: JSONText[], start: number, end: number) => JSONText[];
+/**
+ * The parts of `content` inside display offsets `[from, to)` (an inline atom
+ * counts 1): the texts sliced, an empty slice dropped, the atoms whole.
+ */
+export declare const sliceContent: (content?: readonly JSONContentPart[], from?: number, to?: number) => JSONContentPart[];

package/dist/block/contentRange.js

@@ -1,20 +1,19 @@
 export const isTextPart = (part) => 'text' in part;
-export const sliceTextValue = (value, start, end) => {
-    let offset = 0;
-    const result = [];
-    for (const part of value) {
-        const partStart = offset;
-        const partEnd = offset + part.text.length;
-        offset = partEnd;
-        if (partEnd <= start || partStart >= end) {
+/**
+ * The parts of `content` inside display offsets `[from, to)` (an inline atom
+ * counts 1): the texts sliced, an empty slice dropped, the atoms whole.
+ */
+export const sliceContent = (content = [], from = 0, to = Infinity) => {
+    const out = [];
+    let at = 0;
+    for (const part of content) {
+        const start = at;
+        at += isTextPart(part) ? part.text.length : 1;
+        if (at <= from || start >= to)
             continue;
-        }
-        const textStart = Math.max(start - partStart, 0);
-        const textEnd = Math.min(end - partStart, part.text.length);
-        result.push({
-            text: part.text.slice(textStart, textEnd),
-            ...(part.marks ? { marks: part.marks } : {})
-        });
+        out.push(isTextPart(part)
+            ? { ...part, text: part.text.slice(Math.max(0, from - start), to - start) }
+            : part);
     }
-    return result;
+    return out;
 };

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

@@ -3,32 +3,34 @@ import type { InlineBlockDefinition } from '../plugins.js';
 import type { JSONInlineBlock } from '../utils/json.js';
 import type { Block } from './block.svelte.js';
 /**
- * An id-only inline-atom handle: atom `id`, shown in
- * block `blockId`. Getters read the document index; `node` is the element
- * that renders it (a Surface fact). A reactive reader of a getter depends on
- * the block's cell, so it re-runs when a commit changes the block's content.
+ * An id-only, read-only inline-atom handle: atom `id`, shown in block
+ * `blockId`. Getters read the document index; writes are the view's
+ * operations (`edytor.patchData({ block: atom.blockId, atom: atom.id }, …)`).
+ * `node` is the element that renders it (a Surface fact). A reactive reader
+ * of a getter depends on the block's cell, so it re-runs when a commit
+ * changes the block's content.
  */
 export declare class InlineBlock {
     #private;
-    _def: "inline";
     readonly: boolean;
     readonly edytor: Edytor;
     readonly id: string;
     /** The block that shows the atom (the view updates it when the atom moves). */
     blockId: string;
     node: HTMLElement | undefined;
-    private attachedNodes;
     constructor(edytor: Edytor, blockId: string, id: string);
     get parent(): Block;
     get selected(): boolean;
     get type(): string;
-    /** The atom's `data` as a live proxy (`session/props.ts`): writes are its block's `patchData` commands. */
+    /**
+     * 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;
-    /** Replace the atom's `data` — its block's `patchData` command (readonly, hooks). */
-    setData: (data: Record<string, unknown>) => void;
     /** The atom is shown by a live block. */
     get isInDocument(): boolean;
     get value(): JSONInlineBlock;