edytor 1.0.0-rc.2 → 1.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.2` 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.
+> **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.
 
 ## 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 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.
+- **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` 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.
 - **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,21 +45,51 @@ 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
 
+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 {
-		Edytor,
-		codePlugin,
-		markdownShortcutsPlugin,
 		slashMenuPlugin,
 		toolbarPlugin,
+		blockHandlesPlugin,
 		blockMenuPlugin,
+		codePlugin
+	} from '$lib/chrome/plugins';
+</script>
+
+<div class="edytor-notion">
+	<Edytor
+		plugins={[slashMenuPlugin, toolbarPlugin, blockHandlesPlugin, blockMenuPlugin, codePlugin]}
+	/>
+</div>
+```
+
+Or draw a menu yourself: your snippet draws it, the plugin gives it its keys and ARIA.
+
+```svelte
+<script lang="ts">
+	import {
+		Edytor,
+		createCodePlugin,
+		createSlashMenuPlugin,
+		createMarkdownShortcutsPlugin,
 		richTextPlaceholder,
-		type JSONDoc
+		type JSONDoc,
+		type SlashMenuController
 	} from 'edytor';
 	import 'edytor/themes/notion.css';
 
@@ -67,25 +97,35 @@ pnpm add edytor
 		children: [{ type: 'paragraph', content: [{ text: 'Hello, World!' }] }]
 	};
 	const plugins = [
-		codePlugin,
-		markdownShortcutsPlugin,
-		slashMenuPlugin,
-		toolbarPlugin,
-		blockMenuPlugin
+		// Notion's hints in empty blocks.
+		() => ({ placeholder: richTextPlaceholder }),
+		createCodePlugin(),
+		createMarkdownShortcutsPlugin(),
+		createSlashMenuPlugin({ menu })
 	];
 </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}
-		placeholder={richTextPlaceholder}
-		onChange={(root) => console.log(root)}
-	/>
+	<Edytor {value} {plugins} onChange={(root) => console.log(root)} />
 </div>
 ```
 
-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):
+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):
 
 ```svelte
 <Edytor
@@ -105,7 +145,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,19 @@ 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`, 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)`.
      */
-    get data(): Record<string, any>;
+    get data(): Readonly<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 +99,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,21 +75,15 @@ 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`, 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)`.
      */
     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)));
-    }
-    #current() {
+        if (this.isRoot)
+            return this.edytor.docData();
         const { facade, cells } = this.edytor;
         cells?.get(this.id);
         const version = facade.version;
@@ -108,19 +94,11 @@ 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.selectedBlocks.has(this);
+        return this.edytor.selection.isSelected(this);
     }
     get focused() {
-        return this.edytor.selection.focusedBlocks.has(this) && !this.selected;
+        return this.edytor.selection.isFocused(this) && !this.selected;
     }
     /** May this block move at all: `canPlace` without a destination (drag handles). */
     get movable() {
@@ -140,27 +118,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;
         }
@@ -195,10 +173,24 @@ export class Block {
         return this.edytor.facade.isVisibleBlock(this.id);
     }
     get nextBlock() {
-        return this.parent ? this.parent.children[this.index + 1] : null;
+        return this.#sibling(1);
     }
     get previousBlock() {
-        return this.parent ? this.parent.children[this.index - 1] : null;
+        return this.#sibling(-1);
+    }
+    /**
+     * The sibling `step` places away (none past either end): one id read, no
+     * handle for every sibling (a top-level block's are the whole page's).
+     * Tracks what `parent` and `index` track: this block's cell and its
+     * parent's child list.
+     */
+    #sibling(step) {
+        const parent = this.parent;
+        if (!parent)
+            return null;
+        const ids = this.edytor.facade.childrenIds(parent.isRoot ? null : parent.id);
+        const id = ids[this.index + step];
+        return id === undefined ? null : this.edytor.idToBlock.block(id);
     }
     get closestPreviousBlock() {
         return this.edytor.blockBefore(this);
@@ -291,40 +283,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;
     /**
@@ -352,60 +310,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 = [];
     /**
@@ -414,14 +318,16 @@ 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).
         const unobserve = this.edytor.overlay.observe(node);
         const onDestroy = this.edytor.plugins.flatMap((plugin) => {

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;
 };