edytor 1.0.0-rc.2 → 1.0.0

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

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

package/dist/block/inlineBlock.svelte.js

@@ -1,21 +1,21 @@
-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). A reactive reader of a getter depends on
- * the block's cell, so it re-runs when a commit changes the block's content.
+ * An id-only, read-only inline-atom handle: atom `id`, shown in block
+ * `blockId`. Getters read the document index; writes are the view's
+ * operations (`edytor.patchData({ block: atom.blockId, atom: atom.id }, …)`).
+ * `node` is the element that renders it (a Surface fact). A reactive reader
+ * of a getter depends on the block's cell, so it re-runs when a commit
+ * changes the block's content.
  */
 export class InlineBlock {
-    _def = 'inline';
     readonly = false;
     edytor;
     id;
     /** The block that shows the atom (the view updates it when the atom moves). */
     blockId;
     node;
-    attachedNodes = new Set();
+    #attachedNodes = new Set();
     constructor(edytor, blockId, id) {
         this.edytor = edytor;
         this.blockId = blockId;
@@ -37,13 +37,9 @@ export class InlineBlock {
     get type() {
         return this.#item?.type ?? '';
     }
-    #props;
-    /** The atom's `data` as a live proxy (`session/props.ts`): writes are its block's `patchData` commands. */
+    /** The atom's `data`; a reactive reader depends on its block's cell. */
     get data() {
-        return (this.#props ??= propsProxy(() => {
-            this.edytor.cells?.get(this.blockId);
-            return this.#item?.data ?? {};
-        }, (ops) => this.parent.patchData({ atom: this.id, ops }), (path) => this.edytor.facade.dataItemIds({ block: this.blockId, atom: this.id }, path)));
+        return this.#item?.data ?? {};
     }
     get definition() {
         return this.edytor.inlineBlocks.get(this.type) ?? {};
@@ -52,10 +48,6 @@ export class InlineBlock {
     get index() {
         return this.parent.content.indexOf(this);
     }
-    /** Replace the atom's `data` — its block's `patchData` command (readonly, hooks). */
-    setData = (data) => {
-        this.parent.patchData({ atom: this.id, ops: [{ path: [], value: data }] });
-    };
     /** The atom is shown by a live block. */
     get isInDocument() {
         return this.parent.isInTree && this.#item !== undefined;
@@ -68,7 +60,7 @@ export class InlineBlock {
         node.setAttribute('contenteditable', 'false');
         node.dataset.edytorId = this.id;
         node.dataset.edytorInlineBlock = this.type;
-        this.attachedNodes.add(node);
+        this.#attachedNodes.add(node);
         this.edytor.nodeToInlineBlock.set(node, this);
         this.node = node;
         const release = this.edytor.surface.register(node, 'atom', this.blockId);
@@ -86,9 +78,9 @@ export class InlineBlock {
             const [before, after] = [content[index - 1], content[index + 1]];
             const { selection } = this.edytor;
             if (event.clientX <= rect.left + INLINE_EDGE_CARET_THRESHOLD_PX && isTextPart(before))
-                return selection.setAtTextOffset(before, before.length);
+                return selection.selectText(before, before.length);
             if (event.clientX >= rect.right - INLINE_EDGE_CARET_THRESHOLD_PX && isTextPart(after))
-                return selection.setAtTextOffset(after, 0);
+                return selection.selectText(after, 0);
             selection.selectInlineBlock(this);
             this.edytor.ports.surface.clear();
             // The atom took the press: the caret the browser still leaves for it
@@ -99,9 +91,9 @@ export class InlineBlock {
         return {
             destroy: () => {
                 node.removeEventListener('pointerdown', selectInlineBlock);
-                this.attachedNodes.delete(node);
+                this.#attachedNodes.delete(node);
                 if (this.node === node) {
-                    this.node = this.attachedNodes.values().next().value;
+                    this.node = this.#attachedNodes.values().next().value;
                 }
                 this.edytor.nodeToInlineBlock.delete(node);
                 release();

package/dist/clipboard/createClipboardFragment.js

@@ -1,28 +1,6 @@
-import { InlineBlock } from '../block/inlineBlock.svelte.js';
-import { Text } from '../text/text.svelte.js';
-import { sliceTextValue } from '../block/contentRange.js';
-import { cloneJson } from '../utils/json.js';
+import { sliceContent } from '../block/contentRange.js';
 import { rangeCovers, selectedMembers } from '../selection/visibility.js';
 import { liftLayouts } from '../selection/replaceSelection.js';
-const extractContentRange = (block, startText, startOffset, endText, endOffset) => {
-    const content = [];
-    const startIndex = block.content.indexOf(startText);
-    const endIndex = block.content.indexOf(endText);
-    for (const [index, part] of block.content.entries()) {
-        if (index < startIndex || index > endIndex) {
-            continue;
-        }
-        if (part instanceof InlineBlock) {
-            // An atom's `value.data` is a shallow copy of the index's: clone it.
-            content.push(cloneJson(part.value));
-            continue;
-        }
-        const start = part === startText ? startOffset : 0;
-        const end = part === endText ? endOffset : part.length;
-        content.push(...sliceTextValue(part.value, start, end));
-    }
-    return content;
-};
 /**
  * Block values nested as in the document, members only: a child that is not
  * a member is left out, a member under a non-member starts a top-level entry.
@@ -43,30 +21,6 @@ const nestMembers = (blocks, valueOf) => {
     }
     return out;
 };
-const extractBlockRange = (edytor) => {
-    const { blocks, startBlock, endBlock, startText, endText, yStart, yEnd } = edytor.selection.state;
-    if (!startBlock || !endBlock || !startText || !endText || blocks.length === 0) {
-        return null;
-    }
-    // A hidden block (a closed toggle's body) is copied exactly when the range's
-    // delete removes it, so a cut, or a copy then Backspace, never loses or
-    // duplicates it (`del.range.hidden-body`).
-    const copied = blocks.filter(rangeCovers(edytor));
-    // `block.value` is the document's serializer output: fresh JSON, no clone.
-    return nestMembers(copied, (block) => {
-        const value = block.value;
-        if (block === startBlock) {
-            value.content = extractContentRange(block, startText, yStart, block.lastText, block.lastText.length);
-        }
-        if (block === endBlock) {
-            value.content = extractContentRange(block, block.firstText, 0, endText, yEnd);
-        }
-        if (startBlock === endBlock) {
-            value.content = extractContentRange(block, startText, yStart, endText, yEnd);
-        }
-        return value;
-    });
-};
 /**
  * `fragment` without the marks whose record says `copy: false` (a
  * comment's anchor, `comment:<id>`: Notion copies the text, not the
@@ -101,8 +55,9 @@ const withoutUncopied = (edytor, fragment) => {
 };
 export const createEdytorClipboardFragment = (edytor) => withoutUncopied(edytor, fragmentOf(edytor));
 const fragmentOf = (edytor) => {
+    const { selection, idToBlock } = edytor;
     // A layout the block selection covers whole is copied as the layout.
-    const selectedBlocks = selectedMembers(edytor, liftLayouts(edytor.selection.selectedBlocks));
+    const selectedBlocks = selectedMembers(edytor, liftLayouts(selection.selectedBlocks));
     if (selectedBlocks.length > 0) {
         return {
             version: 1,
@@ -114,26 +69,29 @@ const fragmentOf = (edytor) => {
             whole: true
         };
     }
-    const { startBlock, startText, endText, yStart, yEnd, isCollapsed, isBlockSpanning } = edytor.selection.state;
-    if (!startBlock || !startText || !endText || isCollapsed) {
+    // The range in block offsets: `block.value` is the document's serializer output (fresh JSON).
+    const { start, end, isCollapsed, isBlockSpanning, blocks } = selection.projection;
+    const startBlock = start && idToBlock.get(start.block);
+    if (!start || !end || !startBlock || isCollapsed)
         return null;
+    if (!isBlockSpanning) {
+        const content = sliceContent(startBlock.value.content, start.offset, end.offset);
+        return { version: 1, source: 'edytor', kind: 'content', blockType: startBlock.type, content };
     }
-    if (isBlockSpanning) {
-        const blocks = extractBlockRange(edytor);
-        return blocks
-            ? {
-                version: 1,
-                source: 'edytor',
-                kind: 'blocks',
-                blocks
-            }
-            : null;
-    }
+    // A hidden block (a closed toggle's body) is copied exactly when the range's
+    // delete removes it, so a cut, or a copy then Backspace, never loses or
+    // duplicates it (`del.range.hidden-body`).
+    const copied = blocks.flatMap((id) => idToBlock.get(id) ?? []).filter(rangeCovers(edytor));
     return {
         version: 1,
         source: 'edytor',
-        kind: 'content',
-        blockType: startBlock.type,
-        content: extractContentRange(startBlock, startText, yStart, endText, yEnd)
+        kind: 'blocks',
+        blocks: nestMembers(copied, (block) => {
+            const value = block.value;
+            const [first, last] = [block.id === start.block, block.id === end.block];
+            if (first || last)
+                value.content = sliceContent(value.content, first ? start.offset : 0, last ? end.offset : Infinity);
+            return value;
+        })
     };
 };

package/dist/clipboard/fragmentData.js

@@ -1,51 +1,26 @@
 import { EDYTOR_FRAGMENT_ATTRIBUTE, EDYTOR_FRAGMENT_MIME } from './types.js';
 import { encodeClipboardJson, serializeClipboardFragmentToHtml, serializeClipboardFragmentToPlainText } from './serializeClipboardFragment.js';
-/** A plain object (arrays are not records here: fragment validation rejects them). */
-const isRecord = (value) => Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+import { isObject } from '../crdt/data.js';
 const decodeJson = (value) => JSON.parse(decodeURIComponent(atob(value)));
-const isValidTextPart = (value) => {
-    if (!isRecord(value) || typeof value.text !== 'string') {
-        return false;
-    }
-    return value.marks === undefined || isRecord(value.marks);
-};
+/** A kind's name: a non-empty string. */
+const isName = (value) => typeof value === 'string' && value.length > 0;
+/** Every item of a list (absent: none) passes `valid`. */
+const all = (value, valid, optional = false) => (optional && value === undefined) || (Array.isArray(value) && value.every(valid));
 // Input is JSON (a parsed payload, or `cloneJsonSafe` on the programmatic path): no value walk.
-const isValidInlineBlockPart = (value) => isRecord(value) && typeof value.type === 'string' && value.type.length > 0;
-const isValidContentPart = (value) => isValidTextPart(value) || isValidInlineBlockPart(value);
-const isValidBlock = (value) => {
-    if (!isRecord(value) || typeof value.type !== 'string' || value.type.length === 0) {
-        return false;
-    }
-    if (value.content !== undefined) {
-        if (!Array.isArray(value.content) || !value.content.every(isValidContentPart)) {
-            return false;
-        }
-    }
-    if (value.children !== undefined) {
-        if (!Array.isArray(value.children) || !value.children.every(isValidBlock)) {
-            return false;
-        }
-    }
-    return true;
-};
+/** A text (its marks a record) or an inline atom (its kind named). */
+const isPart = (value) => isObject(value) &&
+    ((typeof value.text === 'string' && (value.marks === undefined || isObject(value.marks))) ||
+        isName(value.type));
+const isBlock = (value) => isObject(value) &&
+    isName(value.type) &&
+    all(value.content, isPart, true) &&
+    all(value.children, isBlock, true);
 export const isValidEdytorClipboardFragment = (value) => {
-    if (!value || typeof value !== 'object') {
-        return false;
-    }
-    const fragment = value;
-    if (fragment.version !== 1 || fragment.source !== 'edytor') {
+    if (!isObject(value) || value.version !== 1 || value.source !== 'edytor')
         return false;
-    }
-    if (fragment.kind === 'blocks') {
-        return Array.isArray(fragment.blocks) && fragment.blocks.every(isValidBlock);
-    }
-    if (fragment.kind === 'content') {
-        return (typeof fragment.blockType === 'string' &&
-            fragment.blockType.length > 0 &&
-            Array.isArray(fragment.content) &&
-            fragment.content.every(isValidContentPart));
-    }
-    return false;
+    if (value.kind === 'blocks')
+        return all(value.blocks, isBlock);
+    return value.kind === 'content' && isName(value.blockType) && all(value.content, isPart);
 };
 const parseEncodedFragment = (encoded) => {
     try {

package/dist/clipboard/htmlFlow.d.ts

@@ -7,7 +7,12 @@ export type ImportKinds = Pick<Edytor, 'blocks' | 'marks'> & Partial<Pick<Edytor
     document: Pick<Edytor['document'], 'defaultChild'>;
 };
 type Values = Record<string, SerializableContent>;
-/** The tag a kind writes for `data`: its export form's first tag, else its element's, else its content element's. */
+/**
+ * The tag a kind writes for `data`: its export form's first tag, else its
+ * element's, else its content element's. A generic one (`div`, `span`) is
+ * none: an export form written as one (a callout's `<div data-edytor-callout>`)
+ * is found by its `parse` hook only.
+ */
 export declare const tagOf: (type: string, kind: BlockDefinition, data: Values) => string | undefined;
 /**
  * External HTML as a flow: the browser parses (inert: no script

package/dist/clipboard/htmlFlow.js

@@ -33,14 +33,21 @@ const isGlyph = (node) => {
 };
 /** Tags that carry no meaning of their own: a kind rendering one is not found by it. */
 const GENERIC = /^(div|span)$/;
-/** The tag a kind writes for `data`: its export form's first tag, else its element's, else its content element's. */
+/**
+ * The tag a kind writes for `data`: its export form's first tag, else its
+ * element's, else its content element's. A generic one (`div`, `span`) is
+ * none: an export form written as one (a callout's `<div data-edytor-callout>`)
+ * is found by its `parse` hook only.
+ */
 export const tagOf = (type, kind, data) => {
     const { html, element, contentElement } = kind;
     if (typeof html === 'string')
         return html;
     try {
-        if (html)
-            return /^<([a-z][\w-]*)/i.exec(html({ type, data }, '', ''))?.[1]?.toLowerCase();
+        if (html) {
+            const tag = /^<([a-z][\w-]*)/i.exec(html({ type, data }, '', ''))?.[1]?.toLowerCase();
+            return tag && !GENERIC.test(tag) ? tag : undefined;
+        }
     }
     catch {
         return undefined;
@@ -79,12 +86,12 @@ export const flowOfHtml = (kinds, html) => {
         for (const { data = {} } of kind.presets) {
             const tag = tagOf(type, kind, data);
             if (tag && !byTag.has(tag))
-                byTag.set(tag, { type, data });
+                byTag.set(tag, { type, kind, data });
         }
         const child = kind.rendersContent === false ? kind.defaultChild : undefined;
         const tag = child && blocks.has(child) ? tagOf(child, blocks.get(child), {}) : undefined;
         if (tag && !byTag.has(tag))
-            byTag.set(tag, { type, data: kind.presets[0].data ?? {}, lines: child });
+            byTag.set(tag, { type, kind, data: kind.presets[0].data ?? {}, lines: child });
     }
     const kindOf = (element) => {
         // A glyph is text: no kind claims it.
@@ -93,7 +100,7 @@ export const flowOfHtml = (kinds, html) => {
         for (const [type, kind] of blocks) {
             const data = kind.parse?.(element);
             if (data)
-                return { type, data };
+                return { type, kind, data };
         }
         return byTag.get(element.localName);
     };
@@ -122,7 +129,7 @@ export const flowOfHtml = (kinds, html) => {
     /** A void kind's element (an image): it shows no text, so a line it is met in ends there. */
     const isVoid = (node) => {
         const claim = node instanceof Element ? kindOf(node) : undefined;
-        return claim !== undefined && blocks.get(claim.type)?.void === true;
+        return claim?.kind.void === true;
     };
     const text = (line, value, marks, pre) => {
         const before = line.content.at(-1);
@@ -207,7 +214,7 @@ export const flowOfHtml = (kinds, html) => {
         }
         // A void's only text is its caption: an `iframe`'s fallback, a `video`'s source list or
         // a bookmark's link text is never content.
-        if (claim && blocks.get(claim.type)?.void) {
+        if (claim?.kind.void) {
             const line = { type: claim.type, data: claim.data, content: [] };
             const caption = [...element.children].find((child) => child.localName === 'figcaption');
             // A caption is one line: an element that would end it (an image) adds nothing.
@@ -218,7 +225,7 @@ export const flowOfHtml = (kinds, html) => {
         }
         // A kind that shows no text of its own (a list, a layout, a column) takes none: its
         // inline runs and a leading paragraph are lines of its default child, never hidden text.
-        if (claim && blocks.get(claim.type)?.rendersContent === false) {
+        if (claim?.kind.rendersContent === false) {
             const children = linesOf(element, kinds.document.defaultChild(claim.type));
             return [
                 { type: claim.type, data: claim.data, content: [], ...(children.length && { children }) }
@@ -243,7 +250,7 @@ export const flowOfHtml = (kinds, html) => {
             line: () => current,
             apart: (inner) => {
                 // A void's own media (a figure's `img`) is part of it.
-                if (claim && blocks.get(claim.type)?.void)
+                if (claim?.kind.void)
                     return;
                 parts.push(...blockOf(inner, type));
                 current = { type: line.type, data: line.data, content: [] };
@@ -251,18 +258,24 @@ export const flowOfHtml = (kinds, html) => {
                 texts.add(current);
             }
         };
+        /** Whether a leading paragraph gave the element its text: one only, empty or not. */
+        let led = false;
         for (const node of element.childNodes)
             if (isVoid(node))
                 at.apart(node);
             else if (!isBlock(node))
                 inline(node, at, {}, pre);
-            // A leading plain paragraph is the element's own text (`<li><p>Item</p></li>`).
-            else if (!current.content.length &&
+            // A leading plain paragraph is the element's own text (`<li><p>Item</p></li>`,
+            // a callout's title): an empty one too, so the paragraph after it is a child.
+            else if (!led &&
+                !current.content.length &&
                 !current.children?.length &&
                 !kindOf(node) &&
-                !wraps(node))
+                !wraps(node)) {
+                led = true;
                 for (const child of node.childNodes)
                     inline(child, at, {}, pre);
+            }
             else
                 (current.children ??= []).push(...blockOf(node, childType));
         for (const part of texts)

package/dist/clipboard/insertClipboardFragment.js

@@ -1,7 +1,8 @@
-import { keepsSelectedBlocks, replaceSelectionWithCollapsedTarget } from '../selection/replaceSelection.js';
+import { keepsSelectedBlocks, replaceSelectionWithCollapsedTarget, caretLeft } from '../selection/replaceSelection.js';
 import { selectedMembers } from '../selection/visibility.js';
 import { cloneJsonSafe, jsonBlockToSpec, jsonContentToItems } from '../utils/json.js';
 import { id } from '../utils.js';
+import { noSelection } from '../session/selection.js';
 import { caretAt } from '../session/attempt.js';
 import { isValidEdytorClipboardFragment } from './fragmentData.js';
 import { hasBlockMarkdown, textToBlocks } from './textBlocks.js';
@@ -58,10 +59,10 @@ export const pasteFlow = (edytor, flow, { at, selection } = {}) => {
     if (!replace.length && !block)
         return;
     const target = block ? { block: block.id, offset: p.text.segStart + p.offset } : { replace };
-    const [text, offset] = edytor.insertFlow({ flow, target });
+    const end = caretLeft(edytor, edytor.insertFlow(target, flow));
     if (replace.length)
-        edytor.selection.selectBlocks();
-    caretAt(edytor, text, offset);
+        edytor.selection.select(noSelection);
+    caretAt(edytor, end?.text, end?.offset ?? 0);
 };
 /** Programmatic insertion: the fragment is untrusted input, projected to JSON and validated here. */
 export const insertEdytorClipboardFragment = async (edytor, fragment) => {

package/dist/clipboard/moveText.js

@@ -1,6 +1,5 @@
 import { project } from '../session/selection.js';
 import { viewOf } from '../selection/visibility.js';
-import { applyAt, caretOf } from '../edytor.utils.js';
 import { flowOfFragment } from './insertClipboardFragment.js';
 const drags = new WeakMap();
 /** The view's text drag in progress, if any. */
@@ -41,6 +40,13 @@ export const dropText = (edytor, drag, to) => {
     /** Both halves at the current version, as hooks see them (a copy: the placement). */
     const prepare = ({ from, to, copy }) => copy ? place(to) : facade.compose(place(to), remove(from));
     const block = edytor.idToBlock.get(to.block);
+    /** Write a stage in the command; answers the caret it decides. */
+    const write = (plan) => {
+        if (!('writes' in plan) || !plan.at)
+            return null;
+        dispatcher.write(plan);
+        return plan.at;
+    };
     /** Where the content went: its start and its end, bound to the placed text. */
     const placed = {};
     const payload = { from: { start, end }, to, copy };
@@ -51,29 +57,31 @@ export const dropText = (edytor, drag, to) => {
         const first = facade.anchorAt(from.start.block, from.start.offset, 'right');
         const last = facade.anchorAt(from.end.block, from.end.offset, 'left');
         placed.from = facade.anchorAt(to.block, to.offset, 'left');
-        const at = applyAt(edytor, place(to));
+        const at = write(place(to));
         placed.to = at && facade.anchorAt(at.block, at.offset, 'left');
         if (copy || !at)
             return;
         const [a, b] = [first && facade.resolveAnchor(first), last && facade.resolveAnchor(last)];
         if (!a || !b)
             return;
-        applyAt(edytor, remove({
+        write(remove({
             start: { block: a.blockId, offset: a.offset },
             end: { block: b.blockId, offset: b.offset }
         }));
     }, prepare);
     if (dispatcher.last?.status !== 'applied' || !placed.to)
         return keep();
+    /** The text and offset an anchor resolves to. */
     const point = (anchor) => {
         const hit = anchor && facade.resolveAnchor(anchor);
-        return hit ? { block: hit.blockId, offset: hit.offset } : null;
+        const at = hit && edytor.idToBlock.get(hit.blockId)?.textAtOffset(hit.offset);
+        return at ? [at.text, at.offset] : [null, 0];
     };
-    const [startText, startOffset] = caretOf.call(edytor, point(placed.from));
-    const [endText, endOffset] = caretOf.call(edytor, point(placed.to));
+    const [startText, startOffset] = point(placed.from);
+    const [endText, endOffset] = point(placed.to);
     if (startText && endText)
-        edytor.selection.setAtRange(startText, startOffset, endText, endOffset);
+        edytor.selection.selectText(startText, startOffset, endText, endOffset);
     else if (endText)
-        edytor.selection.setAtTextOffset(endText, endOffset);
+        edytor.selection.selectText(endText, endOffset);
     return true;
 };

package/dist/clipboard/serializeClipboardFragment.d.ts

@@ -3,5 +3,7 @@ import type { EdytorClipboardFragment } from './types.js';
 /** The records the export reads: each kind, mark and atom declares its own forms. */
 export type ExportKinds = Pick<Edytor, 'blocks' | 'marks' | 'inlineBlocks'>;
 export declare const encodeClipboardJson: (value: unknown) => string;
+/** `value` escaped for an HTML text or a double-quoted attribute: every kind's export reads it. */
+export declare const escapeHtml: (value: string) => string;
 export declare const serializeClipboardFragmentToPlainText: (fragment: EdytorClipboardFragment, kinds: ExportKinds) => string;
 export declare const serializeClipboardFragmentToHtml: (fragment: EdytorClipboardFragment, kinds: ExportKinds) => string;

package/dist/clipboard/serializeClipboardFragment.js

@@ -2,7 +2,8 @@ import { EDYTOR_FRAGMENT_ATTRIBUTE } from './types.js';
 import { isTextPart } from '../block/contentRange.js';
 import { colorClasses } from '../block/colors.js';
 export const encodeClipboardJson = (value) => btoa(encodeURIComponent(JSON.stringify(value)));
-const escapeHtml = (value) => value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+/** `value` escaped for an HTML text or a double-quoted attribute: every kind's export reads it. */
+export const escapeHtml = (value) => value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 /** A tag form wraps `inner`; attributes left `undefined` are omitted. */
 const tag = (name, inner, attributes = {}) => `<${name}${Object.entries(attributes)
     .map(([key, value]) => (value === undefined ? '' : ` ${key}="${escapeHtml(value)}"`))
@@ -17,11 +18,17 @@ const textHtml = (part, kinds) => {
     }
     return html;
 };
-const contentHtml = (content = [], kinds) => content
-    .map((part) => isTextPart(part)
-    ? textHtml(part, kinds)
-    : (kinds.inlineBlocks.get(part.type)?.html?.(part.data) ??
-        `<span data-edytor-inline-block="${escapeHtml(part.type)}"></span>`))
+/** The content as HTML, or as plain text: an atom by its kind's form (`html`, `plain`). */
+const contentOf = (content = [], kinds, html) => content
+    .map((part) => {
+    if (isTextPart(part))
+        return html ? textHtml(part, kinds) : part.text;
+    const atom = kinds.inlineBlocks.get(part.type);
+    return html
+        ? (atom?.html?.(part.data) ??
+            `<span data-edytor-inline-block="${escapeHtml(part.type)}"></span>`)
+        : (atom?.plain?.(part.data) ?? '');
+})
     .join('');
 /** `classes` added to the first element of `html` (the block's own), beside a class it has. */
 const withClasses = (html, classes) => classes
@@ -33,37 +40,34 @@ const withClasses = (html, classes) => classes
         return `<${name}${merged}${end}>`;
     })
     : html;
-const blockHtml = (block, kinds) => {
-    const content = contentHtml(block.content, kinds);
-    const children = block.children?.map((child) => blockHtml(child, kinds)).join('') ?? '';
-    const form = kinds.blocks.get(block.type)?.html;
-    const html = !form
+/** A block and its subtree as HTML (its colours as Notion's classes), or as plain text. */
+const blockOf = (block, kinds, html) => {
+    const content = contentOf(block.content, kinds, html);
+    const kids = block.children?.map((child) => blockOf(child, kinds, html)) ?? [];
+    const kind = kinds.blocks.get(block.type);
+    if (!html) {
+        const children = kids.filter(Boolean).join('\n');
+        return kind?.plain
+            ? kind.plain(block, content, children)
+            : [content, children].filter(Boolean).join('\n');
+    }
+    const children = kids.join('');
+    const form = kind?.html;
+    const out = !form
         ? `<p>${content}</p>${children}`
         : typeof form === 'string'
             ? tag(form, content + children)
             : form(block, content, children);
     // A block's colours as Notion's export names them (`block-color-red`).
-    return withClasses(html, colorClasses(block.data));
-};
-const contentPlain = (content = [], kinds) => content
-    .map((part) => isTextPart(part) ? part.text : (kinds.inlineBlocks.get(part.type)?.plain?.(part.data) ?? ''))
-    .join('');
-const blockPlain = (block, kinds) => {
-    const content = contentPlain(block.content, kinds);
-    const children = block.children
-        ?.map((child) => blockPlain(child, kinds))
-        .filter(Boolean)
-        .join('\n') ?? '';
-    const form = kinds.blocks.get(block.type)?.plain;
-    return form ? form(block, content, children) : [content, children].filter(Boolean).join('\n');
+    return withClasses(out, colorClasses(block.data));
 };
 export const serializeClipboardFragmentToPlainText = (fragment, kinds) => fragment.kind === 'blocks'
-    ? fragment.blocks.map((block) => blockPlain(block, kinds)).join('\n')
-    : contentPlain(fragment.content, kinds);
+    ? fragment.blocks.map((block) => blockOf(block, kinds, false)).join('\n')
+    : contentOf(fragment.content, kinds, false);
 export const serializeClipboardFragmentToHtml = (fragment, kinds) => {
     const encoded = encodeClipboardJson(fragment);
     const html = fragment.kind === 'blocks'
-        ? fragment.blocks.map((block) => blockHtml(block, kinds)).join('')
-        : `<p>${contentHtml(fragment.content, kinds)}</p>`;
+        ? fragment.blocks.map((block) => blockOf(block, kinds, true)).join('')
+        : `<p>${contentOf(fragment.content, kinds, true)}</p>`;
     return `<meta charset="utf-8"><span ${EDYTOR_FRAGMENT_ATTRIBUTE}="${encoded}" hidden></span>${html}`;
 };