edytor 0.1.0-next.34 → 0.1.0-next.38

package/README.md

@@ -10,19 +10,24 @@
 <p>
     <a href="https://edytor.dev/docs">Documentation</a> •
     <a href="#quick-start">Quick start</a> •
-    <a href="https://edytor.dev/docs/reference/migration">Migrating from 0.0.11</a>
+    <a href="https://edytor.dev/docs/reference/migration">Changelog</a>
   </p>
 </div>
 
 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.
 
-> **Work in progress.** Edytor is a pre-release (`0.1.0-next.34`, `edytor@next` on npm) and not ready for production; the API changes between releases without a compatibility layer. The untagged `edytor@0.0.11` on npm predates the current API. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
+> **Work in progress.** Edytor is a pre-release (`0.1.0-next.38`, `edytor@next` on npm) and not ready for production; the API changes between releases without a compatibility layer. The untagged `edytor@0.0.11` on npm predates the current API. 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, lists, to-dos, toggles, callouts, quotes, dividers, ten marks and Notion's hotkeys. Add the Notion theme, a block menu (drag one block, or every block the selection covers), a slash menu, a selection toolbar, markdown shortcuts (`markdownShortcutsPlugin`) and code blocks.
+- **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)).
+- **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.
 - **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.
@@ -99,7 +104,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), [migration from 0.0.11](https://edytor.dev/docs/reference/migration), 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)), [importing v13 documents](https://edytor.dev/docs/reference/v13-import), limitations, [platform support](https://edytor.dev/docs/reference/platform-support)
 
 ## Contributing
 

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

@@ -1,18 +1,22 @@
 import { Text } from '../text/text.svelte.js';
-import { Edytor } from '../edytor.svelte.js';
+import type { Edytor } from '../edytor.svelte.js';
 import type { JSONBlock, JSONText, JSONInlineBlock } from '../utils/json.js';
 import { type BlockOperations } from './block.utils.js';
 import type { BlockDefinition } from '../plugins.js';
 import { InlineBlock } from './inlineBlock.svelte.js';
 import type { DocBlock } from '../crdt/index.js';
-/**
- * An id-only block handle (§2.4 "Handles", R4): 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 (O45).
- */
 /** 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.
+ *
+ * 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,
+ * the root's list), so it re-runs when a commit changes them, as `data`
+ * does; a read anywhere else is a plain read of the document.
+ */
 export declare class Block {
     #private;
     readonly: boolean;
@@ -160,10 +164,16 @@ export declare class Block {
         ops: import("../crdt/index.js").DataPatch[];
         atom?: string;
     }) => void;
-    addInlineBlock: (payload: {
-        index: number;
+    /**
+     * 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: Text;
     }) => Text | null | undefined;
     normalizeContent: () => void;
     normalizeChildren: () => void;

package/dist/block/block.svelte.js

@@ -1,22 +1,25 @@
 import { Text } from '../text/text.svelte.js';
-import { Edytor } from '../edytor.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, acceptSuggestedText, suggestText, 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';
-/**
- * An id-only block handle (§2.4 "Handles", R4): 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 (O45).
- */
 /** 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`);
     node.style.userSelect = 'none';
     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.
+ *
+ * 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,
+ * the root's list), so it re-runs when a commit changes them, as `data`
+ * does; a read anywhere else is a plain read of the document.
+ */
 export class Block {
     readonly = false;
     edytor;
@@ -29,21 +32,43 @@ export class Block {
     get isRoot() {
         return this.id === 'root';
     }
+    /**
+     * Under a reactive reader, depend on block `id`'s cell (the root: its
+     * child list): the commit that patches it re-runs the reader. A cell
+     * that goes away (the block died) re-runs it too.
+     */
+    #track(id = this.id) {
+        if (!$effect.tracking())
+            return;
+        const cells = this.edytor.cells;
+        if (id === 'root')
+            void cells?.rootIds;
+        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() {
-        const at = this.isRoot ? null : this.edytor.facade.positionOf(this.id);
+        if (this.isRoot)
+            return undefined;
+        this.#track();
+        const at = this.edytor.facade.positionOf(this.id);
+        // The parent's child list names this block: a move patches it.
+        if (at)
+            this.#track(at.parent ?? 'root');
         return at ? this.edytor.idToBlock.block(at.parent ?? 'root') : undefined;
     }
     get children() {
+        this.#track();
         const { facade, idToBlock } = this.edytor;
         return facade.childrenIds(this.isRoot ? null : this.id).map(idToBlock.block);
     }
     /** Text segments and inline atoms, alternating, starting and ending with a text. */
     get content() {
+        this.#track();
         const handles = this.edytor.idToBlock;
         let ordinal = 0;
         return handles
@@ -53,7 +78,10 @@ export class Block {
             : handles.atom(this.id, part.item.id));
     }
     get type() {
-        return this.isRoot ? 'root' : (this.edytor.facade.blockTypeOf(this.id) ?? '');
+        if (this.isRoot)
+            return 'root';
+        this.#track();
+        return this.edytor.facade.blockTypeOf(this.id) ?? '';
     }
     /** Retype the block — the `setBlock` command (readonly, hooks, `dispatcher.last`). */
     set type(value) {
@@ -139,7 +167,13 @@ export class Block {
         return undefined;
     }
     get index() {
-        return (!this.isRoot && this.edytor.facade.positionOf(this.id)?.index) || 0;
+        if (this.isRoot)
+            return 0;
+        const at = this.edytor.facade.positionOf(this.id);
+        this.#track();
+        if (at)
+            this.#track(at.parent ?? 'root');
+        return at?.index || 0;
     }
     get depth() {
         return this.parent ? this.parent.depth + 1 : 0;
@@ -155,7 +189,10 @@ export class Block {
     }
     /** The block is visible in the document (a dead handle answers false). */
     get isInTree() {
-        return this.isRoot || this.edytor.facade.isVisibleBlock(this.id);
+        if (this.isRoot)
+            return true;
+        this.#track();
+        return this.edytor.facade.isVisibleBlock(this.id);
     }
     /**
      * @deprecated `edytor.suggestions` with `{ end: block.id }`. The content of
@@ -211,6 +248,9 @@ export class Block {
     }
     /** This block's JSON — the document's one serializer (`facade.blockJSON`). */
     get value() {
+        // Its subtree's: every commit re-runs a reactive reader.
+        if ($effect.tracking())
+            void this.edytor.valueRevision;
         if (!this.isRoot)
             return this.edytor.facade.blockJSON(this.id);
         const { data = {}, children } = this.edytor.facade.toJSON();
@@ -294,7 +334,20 @@ export class Block {
     pushContentIntoBlock = batch('pushContentIntoBlock', pushContentIntoBlock);
     removeInlineBlock = batch('removeInlineBlock', removeInlineBlock, prepareRemoveInline);
     patchData = batch('patchData', patchData, preparePatch);
-    addInlineBlock = batch('addInlineBlock', addInlineBlock, undefined, textAfterAtom);
+    #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);
     /** @deprecated `edytor.suggestions.add({ end: block.id }, …)`. */
@@ -385,6 +438,8 @@ export class Block {
                 node.setAttribute(name, value);
         this.node = node;
         const release = this.edytor.surface.register(node, 'block', this.id);
+        // 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] : [];
@@ -395,6 +450,7 @@ export class Block {
                 if (this.node === node)
                     this.node = undefined;
                 release();
+                unobserve();
                 onDestroy.forEach((destroy) => destroy());
             }
         };

package/dist/block/block.utils.d.ts

@@ -135,6 +135,19 @@ export type BlockOperations = {
         }[];
         replacement: string;
     };
+    /**
+     * A comment thread's anchor (`plugins/comments`): its `comment:<thread>`
+     * mark over each run of the text it was made on, one plan, one undo step
+     * (its steps: a `formatRange` per run).
+     */
+    addComment: {
+        thread: string;
+        runs: {
+            block: string;
+            offset: number;
+            length: number;
+        }[];
+    };
     deleteContentAtRange: {
         start: [number, number];
         end: [number, number];
@@ -146,6 +159,30 @@ export type BlockOperations = {
         flow: Flow;
         target: FlowTarget;
     };
+    /**
+     * A text range dragged inside the editor and dropped at `to` (block
+     * offsets): its content placed at `to`, then the range deleted — or,
+     * with `copy` (Alt), only placed. Both are prepared before any write:
+     * hooks see the placement's planned steps and the deletion's, and a
+     * veto or a refusal of either writes nothing.
+     */
+    moveText: {
+        from: {
+            start: {
+                block: string;
+                offset: number;
+            };
+            end: {
+                block: string;
+                offset: number;
+            };
+        };
+        to: {
+            block: string;
+            offset: number;
+        };
+        copy: boolean;
+    };
     deleteBlocks: {
         blocks: Block[];
     };
@@ -157,6 +194,38 @@ export type BlockOperations = {
     };
     /** A divider at the caret: its steps are the conversion, insertion or split it plans. */
     insertDivider: {};
+    /** A table's row at `index`, one empty cell per column (`table.insert-row`). */
+    insertTableRow: {
+        index: number;
+    };
+    /** A table's rows, with their cells (`table.delete-row`). */
+    deleteTableRows: {
+        rows: Block[];
+    };
+    /** A table's column at `index`, an empty cell in every row (`table.insert-column`). */
+    insertTableColumn: {
+        index: number;
+        width?: number;
+    };
+    /** A table's column, by id or position, with its cells (`table.delete-column`). */
+    deleteTableColumn: {
+        column: string | number;
+    };
+    /** A table's column moved to position `to` (`table.move-column`). */
+    moveTableColumn: {
+        column: string | number;
+        to: number;
+    };
+    /** A table's rows moved to position `to` among its rows (`table.move-row`). */
+    moveTableRows: {
+        rows: Block[];
+        to: number;
+    };
+    /** The cell a row shows none of in `column`, created (`table.pad`). */
+    fillTableCell: {
+        row: string;
+        column: string | number;
+    };
 };
 /**
  * Bind an operation onto its wrapper: every call is dispatched as a command

package/dist/block/colors.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Block colours (Notion's "Color" in the block menu): a block's text colour
+ * and background, by palette name, in two data leaves, `data.color` and
+ * `data.background`. Each is one property of the block, so two people
+ * colouring it at once keep one value each (per-leaf last writer), and
+ * Turn into keeps them (a retype sets only the leaves it names).
+ *
+ * The core renders a valid name as `data-edytor-color` and
+ * `data-edytor-background` on the block element (`Block.svelte`, owned by
+ * the attribute table), and its stylesheet paints the bundled names from
+ * theme tokens (`--edytor-color-<name>`, `--edytor-background-<name>`).
+ */
+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`. */
+export declare const colorName: (value: unknown) => string | undefined;
+/** The block element's colour attributes for `data` (absent when it holds none). */
+export declare const colorAttributes: (data: Readonly<Record<string, unknown>> | undefined) => {
+    'data-edytor-color': string | undefined;
+    'data-edytor-background': string | undefined;
+};
+/**
+ * Whether `block` takes a colour: a block showing its own text (a
+ * paragraph, a heading, a list item, a toggle, a callout), not a void (a
+ * divider, an image), an island (a code block) or one of its lines.
+ */
+export declare const colorable: (block: Block) => boolean;
+/**
+ * Set `field` of every colourable block of `blocks` to `value` (`null`
+ * removes it: the default), as one command and one undo step; each block
+ * is its own data write (`patchData`), so an extension vetoing one keeps
+ * that block as it was. Answers whether any block changed.
+ */
+export declare const setBlockColor: (edytor: Edytor, blocks: Iterable<Block>, field: BlockColorField, value: string | null) => boolean;
+/**
+ * A block's colours as the classes Notion's HTML export writes
+ * (`block-color-red`, `block-color-red_background`), space-separated; empty
+ * when it holds none. The copy's `text/html` names them so.
+ */
+export declare const colorClasses: (data: Readonly<Record<string, unknown>> | undefined) => string;
+/**
+ * The palette colours `element`'s classes name as Notion's HTML export does
+ * (its `teal` read as green): what a paste keeps. A class naming no palette
+ * colour adds nothing.
+ */
+export declare const colorsOfClasses: (element: Element) => {
+    color?: string;
+    background?: string;
+};

package/dist/block/colors.js

@@ -0,0 +1,106 @@
+/** Notion's palette: the colour names a block may hold, in menu order ("Default" is none). */
+export const BLOCK_COLORS = [
+    '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 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,
+ * and its stylesheet paints it). Anything else renders nothing.
+ */
+const NAME = /^[a-z][a-z0-9-]{0,31}$/;
+/** `value` as a colour name, or `undefined`. */
+export const colorName = (value) => typeof value === 'string' && NAME.test(value) ? value : undefined;
+/** The block element's colour attributes for `data` (absent when it holds none). */
+export const colorAttributes = (data) => ({
+    'data-edytor-color': colorName(data?.color),
+    'data-edytor-background': colorName(data?.background)
+});
+/**
+ * Whether `block` takes a colour: a block showing its own text (a
+ * paragraph, a heading, a list item, a toggle, a callout), not a void (a
+ * divider, an image), an island (a code block) or one of its lines.
+ */
+export const colorable = (block) => {
+    const { facade } = block.edytor;
+    const line = block.parent && !block.parent.isRoot && facade.isLines(block.parent.id);
+    return (!block.isRoot &&
+        block.rendersContent &&
+        !facade.isVoid(block.id) &&
+        !facade.isIsland(block.id) &&
+        !line);
+};
+/**
+ * Set `field` of every colourable block of `blocks` to `value` (`null`
+ * removes it: the default), as one command and one undo step; each block
+ * is its own data write (`patchData`), so an extension vetoing one keeps
+ * that block as it was. Answers whether any block changed.
+ */
+export const setBlockColor = (edytor, blocks, field, value) => {
+    const name = value === null ? undefined : colorName(value);
+    if (value !== null && name === undefined)
+        return false;
+    const painted = [...blocks].filter((block) => colorable(block) && edytor.facade.blockDataOf(block.id)?.[field] !== name);
+    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 applied.some(Boolean);
+};
+/** The class Notion's HTML export gives a block's colour: `block-color-<name>`, `block-color-<name>_background`. */
+const CLASS = /^block-color-([a-z]+)(_background)?$/;
+/** Notion's export names the palette's green `teal`. */
+const EXPORTED = { teal: 'green' };
+/**
+ * A block's colours as the classes Notion's HTML export writes
+ * (`block-color-red`, `block-color-red_background`), space-separated; empty
+ * when it holds none. The copy's `text/html` names them so.
+ */
+export const colorClasses = (data) => {
+    const color = colorName(data?.color);
+    const background = colorName(data?.background);
+    return [color && `block-color-${color}`, background && `block-color-${background}_background`]
+        .filter(Boolean)
+        .join(' ');
+};
+/**
+ * The palette colours `element`'s classes name as Notion's HTML export does
+ * (its `teal` read as green): what a paste keeps. A class naming no palette
+ * colour adds nothing.
+ */
+export const colorsOfClasses = (element) => {
+    const found = {};
+    for (const name of element.classList) {
+        const [, raw, background] = CLASS.exec(name) ?? [];
+        const color = raw && (EXPORTED[raw] ?? raw);
+        if (!color || !BLOCK_COLORS.includes(color))
+            continue;
+        found[background ? 'background' : 'color'] = color;
+    }
+    return found;
+};

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

@@ -5,7 +5,8 @@ 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).
+ * 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;

package/dist/block/inlineBlock.svelte.js

@@ -1,11 +1,11 @@
-import { clearDomSelection } from '../selection/domSelection.js';
 import { propsProxy } from '../session/props.js';
 const INLINE_EDGE_CARET_THRESHOLD_PX = 4;
 const isTextPart = (part) => part !== undefined && !(part instanceof InlineBlock);
 /**
  * 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).
+ * 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 class InlineBlock {
     _def = 'inline';
@@ -25,6 +25,8 @@ export class InlineBlock {
         return this.edytor.idToBlock.block(this.blockId);
     }
     get #item() {
+        if ($effect.tracking())
+            this.edytor.cells?.get(this.blockId);
         const parts = this.edytor.idToBlock.parts(this.blockId);
         const part = parts.find((part) => part.kind === 'inline' && part.item.id === this.id);
         return part?.kind === 'inline' ? part.item : undefined;
@@ -88,10 +90,10 @@ export class InlineBlock {
             if (event.clientX >= rect.right - INLINE_EDGE_CARET_THRESHOLD_PX && isTextPart(after))
                 return selection.setAtTextOffset(after, 0);
             selection.selectInlineBlock(this);
-            clearDomSelection(this.edytor.node);
+            this.edytor.ports.surface.clear();
             // The atom took the press: the caret the browser still leaves for it
             // (Chromium parks one at the host's start before the release) is its own.
-            this.edytor.projector.parked();
+            this.edytor.ports.surface.parked();
         };
         node.addEventListener('pointerdown', selectInlineBlock);
         return {

package/dist/clipboard/createClipboardFragment.js

@@ -67,7 +67,40 @@ const extractBlockRange = (edytor) => {
         return value;
     });
 };
-export const createEdytorClipboardFragment = (edytor) => {
+/**
+ * `fragment` without the marks whose record says `copy: false` (a
+ * comment's anchor, `comment:<id>`: Notion copies the text, not the
+ * comment): one rule for copy, cut and the internal paste they feed.
+ */
+const withoutUncopied = (edytor, fragment) => {
+    if (!fragment)
+        return fragment;
+    const strip = (content) => {
+        for (const part of content ?? []) {
+            if (!('text' in part) || !part.marks)
+                continue;
+            for (const key of Object.keys(part.marks))
+                if (edytor.marks.get(key)?.copy === false)
+                    delete part.marks[key];
+            if (Object.keys(part.marks).length === 0)
+                delete part.marks;
+        }
+    };
+    const walk = (blocks) => {
+        for (const block of blocks) {
+            strip(block.content);
+            if (block.children)
+                walk(block.children);
+        }
+    };
+    if (fragment.kind === 'blocks')
+        walk(fragment.blocks);
+    else
+        strip(fragment.content);
+    return fragment;
+};
+export const createEdytorClipboardFragment = (edytor) => withoutUncopied(edytor, fragmentOf(edytor));
+const fragmentOf = (edytor) => {
     // A layout the block selection covers whole is copied as the layout (D3).
     const selectedBlocks = selectedMembers(edytor, liftLayouts(edytor.selection.selectedBlocks));
     if (selectedBlocks.length > 0) {

package/dist/clipboard/htmlFlow.d.ts

@@ -2,8 +2,8 @@ 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';
-/** What HTML import reads: the kind and mark records, and the document's default child. */
-export type ImportKinds = Pick<Edytor, 'blocks' | 'marks'> & {
+/** 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'>;
 };
 type Values = Record<string, SerializableContent>;
@@ -17,7 +17,9 @@ export declare const tagOf: (type: string, kind: BlockDefinition, data: Values)
  * `tag`, and each record's `parse` hook first (aliases, sanitized values).
  * A void kind with a `parse` hook (an image, an embed, a video) is found
  * by its hook only, and a void takes only its `figcaption`'s text; an
- * `iframe`, `video` or `audio` no hook claims carries nothing. Unknown
+ * `iframe`, `video` or `audio` no hook claims carries nothing. An atom
+ * kind's `parse` hook claims inline elements (an equation's `<math>`): the
+ * atom, never its text. Unknown
  * elements degrade to text runs; whitespace collapses as HTML renders it. `null` when the HTML carries nothing (`flow.shape`, F-P10).
  */
 export declare const flowOfHtml: (kinds: ImportKinds, html: string | undefined) => Flow | null;