edytor 0.1.0-next.36 → 0.1.0-next.38

package/README.md

@@ -10,20 +10,22 @@
 <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.36`, `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, 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.
@@ -102,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;

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();
@@ -398,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] : [];
@@ -408,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

@@ -45,3 +45,18 @@ export declare const colorable: (block: Block) => boolean;
  * 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

@@ -72,3 +72,35 @@ export const setBlockColor = (edytor, blocks, field, value) => {
     });
     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;

package/dist/clipboard/htmlFlow.js

@@ -1,3 +1,5 @@
+import { colorsOfClasses } from '../block/colors.js';
+import { isTextPart } from '../block/contentRange.js';
 import { jsonBlockToSpec } from '../utils/json.js';
 /** Never content: their text is code, metadata or form state. */
 const SKIP = /^(script|style|template|noscript|svg|math|iframe|object|embed|canvas|video|audio|img|input|button|select|textarea|head|title|meta|link|base)$/;
@@ -59,13 +61,16 @@ export const tagOf = (type, kind, data) => {
  * `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 const flowOfHtml = (kinds, html) => {
     if (!html || html.length > 8 * 1024 * 1024 || typeof DOMParser === 'undefined')
         return null;
     const { blocks, marks } = kinds;
+    const atoms = kinds.inlineBlocks ?? new Map();
     const byTag = new Map();
     for (const [type, kind] of blocks) {
         // A void found by its hook carries its substance in data (a source): its tag alone is none.
@@ -92,6 +97,15 @@ export const flowOfHtml = (kinds, html) => {
         }
         return byTag.get(element.localName);
     };
+    /** An inline atom an atom kind's hook claims `element` as. */
+    const atomOf = (element) => {
+        for (const [type, atom] of atoms) {
+            const data = atom.parse?.(element);
+            if (data)
+                return { type, data };
+        }
+        return undefined;
+    };
     const marksOf = (element) => {
         const found = {};
         for (const [name, mark] of marks) {
@@ -102,17 +116,21 @@ export const flowOfHtml = (kinds, html) => {
         }
         return found;
     };
-    const isBlock = (node) => node instanceof HTMLElement && (BLOCK.test(node.localName) || kindOf(node) !== undefined);
+    // A kind's hook may claim an element of another namespace (an equation's MathML `<math>`).
+    const isBlock = (node) => (node instanceof HTMLElement && BLOCK.test(node.localName)) ||
+        (node instanceof Element && kindOf(node) !== undefined);
     /** A void kind's element (an image): it shows no text, so a line it is met in ends there. */
     const isVoid = (node) => {
-        const claim = node instanceof HTMLElement ? kindOf(node) : undefined;
+        const claim = node instanceof Element ? kindOf(node) : undefined;
         return claim !== undefined && blocks.get(claim.type)?.void === true;
     };
     const text = (line, value, marks, pre) => {
-        const last = line.content.at(-1);
+        const before = line.content.at(-1);
+        // After an atom, text starts a run of its own (a space there is kept).
+        const last = before && isTextPart(before) ? before : undefined;
         if (!pre)
             value = value.replace(/[ \t\n\f\r]+/g, ' ');
-        if (!pre && (!last || /[ \n]$/.test(last.text)))
+        if (!pre && (!before || /[ \n]$/.test(last?.text ?? '')))
             value = value.replace(/^ /, '');
         value = value.replace(/\u00a0/g, ' ');
         if (!value)
@@ -129,6 +147,9 @@ export const flowOfHtml = (kinds, html) => {
             return text(at.line(), node.getAttribute('alt') ?? '', marks, pre);
         if (isVoid(node))
             return at.apart(node);
+        const atom = node instanceof Element ? atomOf(node) : undefined;
+        if (atom)
+            return void at.line().content.push(atom);
         if (!(node instanceof HTMLElement) || SKIP.test(node.localName))
             return;
         if (node.localName === 'br')
@@ -139,7 +160,8 @@ export const flowOfHtml = (kinds, html) => {
     };
     /** A line ends without its trailing space or `<br>`. */
     const end = (line) => {
-        const last = line.content.at(-1);
+        const at = line.content.at(-1);
+        const last = at && isTextPart(at) ? at : undefined;
         if (last)
             last.text = last.text.replace(/ ?\n?$/, '');
         if (last && !last.text)
@@ -206,7 +228,10 @@ export const flowOfHtml = (kinds, html) => {
         // An element that only wraps blocks (a `div`, a `ul`) is not a line of its own.
         if (!claim && wraps(element))
             return linesOf(element, type);
-        const line = { type: claim?.type ?? type, data: claim?.data, content: [] };
+        // A text line keeps the colours Notion's export classes name (`block-color-red`).
+        const colors = colorsOfClasses(element);
+        const data = Object.keys(colors).length ? { ...claim?.data, ...colors } : claim?.data;
+        const line = { type: claim?.type ?? type, data, content: [] };
         const childType = claim ? kinds.document.defaultChild(claim.type) : type;
         const pre = element.localName === 'pre';
         // The element's line, then, for each void element met in it, that block

package/dist/clipboard/moveText.d.ts

@@ -0,0 +1,35 @@
+import type { Edytor } from '../edytor.svelte.js';
+import { type SelectionPoint, type SelectionValue } from '../session/selection.js';
+import type { EdytorClipboardFragment } from './types.js';
+/**
+ * A view's own text drag, from its `dragstart` to its `dragend`: the
+ * selected range it moves (anchored: it follows concurrent edits) and its
+ * content as a clipboard fragment, also on the drag's data for a drop
+ * elsewhere.
+ */
+export type TextDrag = {
+    range: SelectionValue & {
+        kind: 'text';
+    };
+    fragment: EdytorClipboardFragment;
+    /** The drop's: Alt was held (a copy). */
+    copy: boolean;
+    /** Set while the view's own drop runs. */
+    dropping: boolean;
+};
+/** The view's text drag in progress, if any. */
+export declare const textDragOf: (edytor: Edytor) => TextDrag | undefined;
+export declare const startTextDrag: (edytor: Edytor, drag: Omit<TextDrag, "copy" | "dropping">) => undefined;
+export declare const endTextDrag: (edytor: Edytor) => undefined;
+/**
+ * The view's dragged text dropped at `to` (`moveText`, one command and one
+ * undo step): its content placed at the drop point as a paste places a flow
+ * (`insertFlow`), then, for a move, the range deleted as a replacement
+ * deletes it (`replaceRange`); with `copy`, the placement alone. Both halves
+ * are prepared before any write, so hooks see the command's effect and
+ * every step of both, a veto of any of them keeps everything, and a drop
+ * either half refuses writes nothing. A move dropped inside its own range
+ * changes nothing. The content is selected after; when nothing was written,
+ * the range stays selected. Answers whether it wrote.
+ */
+export declare const dropText: (edytor: Edytor, drag: TextDrag, to: SelectionPoint) => boolean;