edytor 0.1.0-next.32 → 0.1.0-next.34

package/README.md

@@ -3,6 +3,7 @@
 
 <p>A collaborative block editor for Svelte 5, on a Yjs v14 engine</p>
 
+[![CI](https://github.com/beynar/edytor/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/beynar/edytor/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Svelte v5](https://img.shields.io/badge/Svelte-v5-FF3E00.svg)](https://svelte.dev)
 
@@ -15,7 +16,7 @@
 
 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.32`, `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.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.
 
 ## Features
 
@@ -38,7 +39,7 @@ The pre-release is on npm under the `next` tag. Name the tag: a bare `edytor` is
 pnpm add edytor@next
 ```
 
-`svelte@^5` is a peer dependency. Do not install `yjs`: the v14 engine is vendored (`edytor/crdt`). See [installation](https://edytor.dev/docs/getting-started).
+`svelte@^5` is a peer dependency. Do not install `yjs`: the v14 engine is vendored (`edytor/crdt`). See [installation](https://edytor.dev/docs/getting-started) and [platform support](https://edytor.dev/docs/reference/platform-support) (Chrome, Edge, Firefox and Safari; real phones are not tested yet).
 
 ## Quick start
 
@@ -78,7 +79,7 @@ pnpm add edytor@next
 </div>
 ```
 
-`<Edytor>` adds the rich text, image, arrow-move and suggestions plugins after yours, and block handles. To collaborate, name a room and a server running the [`edytor/cloudflare` room](https://edytor.dev/docs/server/quick-start):
+An editable editor is client-only: in SvelteKit, mount it once the page has hydrated ([quick start](https://edytor.dev/docs/getting-started/quick-start#mount-it-in-a-page)). `<Edytor>` adds the rich text, image, arrow-move and suggestions plugins after yours, and block handles. To collaborate, name a room and a server running the [`edytor/cloudflare` room](https://edytor.dev/docs/server/quick-start):
 
 ```svelte
 <Edytor
@@ -98,11 +99,11 @@ 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
+- [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)
 
 ## Contributing
 
-`AGENTS.md` describes the architecture (one owner per fact), where to fix what, and the test lanes. The docs live in `site/content/docs`; a change to public behavior updates them in the same commit.
+`CONTRIBUTING.md` lists the test lanes, what CI runs, and the pull request checklist; `AGENTS.md` describes the architecture (one owner per fact) and where to fix what. The docs live in `site/content/docs`; a change to public behavior updates them in the same commit.
 
 ```bash
 pnpm install

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

@@ -45,18 +45,16 @@ export declare class Block {
     setData: (data: Record<string, unknown>) => void;
     get selected(): boolean;
     get focused(): boolean;
-    /** May this block move at all — R5 `canPlace` without a destination (drag handles). */
+    /** May this block move at all: `canPlace` without a destination (drag handles). */
     get movable(): boolean;
     /**
      * May text-level structural commands (convert, markdown shortcut, slash
      * menu) apply: the block is movable — or the virtual paragraph of an
      * emptied document, which a conversion creates with its kind
-     * (SW10-lists-3) — has no role of its own and renders its own content —
-     * a container (a list) is never converted, its items are (ZW-02).
+     * — has no role of its own and renders its own content —
+     * a container (a list) is never converted, its items are.
      */
     get convertible(): boolean;
-    get firstEditableText(): Text | undefined;
-    get lastEditableText(): Text | undefined;
     get index(): number;
     get depth(): number;
     get path(): number[];
@@ -79,14 +77,14 @@ export declare class Block {
     /** It holds nothing: no content and no children (the emptiness Turn into reads, `holdsNothing`). */
     get isEmpty(): boolean;
     get isNested(): boolean;
-    /** This block's JSON — the document's one serializer (`facade.blockJSON`, L14). */
+    /** This block's JSON — the document's one serializer (`facade.blockJSON`). */
     get value(): JSONBlock;
     isChildOf(block: Block): boolean;
-    /** Whether this kind renders its own content slot — the adopted capability (R5, O22). */
+    /** Whether this kind renders its own content slot — the adopted capability. */
     get rendersContent(): boolean;
     /**
      * A container: it shows only its children (a list), neither void nor an
-     * island — the document's container rule (YW-02). Its items hold what it
+     * island — the document's container rule. Its items hold what it
      * shows; it is never converted (`convertible`).
      */
     get isContainer(): boolean;
@@ -100,7 +98,7 @@ export declare class Block {
     /**
      * The list this block shows in: its container when it is an item
      * (`isListItem`), or — an item outdented out of a nested list into the
-     * item holding it (SW8-roles-4) — the list of the items of its kind it
+     * item holding it — the list of the items of its kind it
      * sits under. <kbd>Enter</kbd> in an empty one outdents it; the menus
      * name it by the list's `itemKind`.
      */
@@ -114,55 +112,55 @@ export declare class Block {
     get firstText(): Text | undefined;
     /** The last text of this block's own content (see {@link firstText}). */
     get lastText(): Text | undefined;
-    addChildBlock: (args_0: {
+    addChildBlock: (payload: {
         block: JSONBlock;
         index: number;
     }) => Block;
-    addChildBlocks: (args_0: {
+    addChildBlocks: (payload: {
         blocks: JSONBlock[];
         index: number;
     }) => Block[];
     insertBlockAfter: (payload: {
         block: JSONBlock;
-    }, plan?: import("../crdt/index.js").Prepared | undefined) => Block | null | undefined;
+    }) => Block | null | undefined;
     insertBlockBefore: (payload: {
         block: JSONBlock;
-    }, plan?: import("../crdt/index.js").Prepared | undefined) => Block | null | undefined;
+    }) => Block | null | undefined;
     splitBlock: (payload: {
         index: number;
         text: Text;
-    }, plan?: import("../crdt/index.js").Prepared | undefined) => Block | null | undefined;
-    duplicateBlock: (_?: {} | undefined, plan?: import("../crdt/index.js").Prepared | undefined) => Block | null | undefined;
+    }) => Block | null | undefined;
+    duplicateBlock: (payload?: {} | undefined) => Block | null | undefined;
     removeBlock: (payload?: {
         keepChildren?: boolean;
-    } | undefined, plan?: import("../crdt/index.js").Prepared | undefined) => void;
-    unNestBlock: (this: Block, _?: {} | undefined, plan?: import("../crdt/index.js").Prepared | undefined) => Block | null;
-    mergeBlockBackward: (_?: {} | undefined, plan?: import("../crdt/index.js").Prepared | undefined) => Block | null | undefined;
-    mergeBlockForward: (_?: {} | undefined, plan?: import("../crdt/index.js").Prepared | undefined) => Block | null | undefined;
-    nestBlock: (this: Block, _?: {} | undefined, plan?: import("../crdt/index.js").Prepared | undefined) => Block | null;
+    } | undefined) => void;
+    unNestBlock: (this: Block, payload?: {} | undefined) => Block | null;
+    mergeBlockBackward: (payload?: {} | undefined) => Block | null | undefined;
+    mergeBlockForward: (payload?: {} | undefined) => Block | null | undefined;
+    nestBlock: (this: Block, payload?: {} | undefined) => Block | null;
     setBlock: (payload: {
         value: Partial<JSONBlock>;
-    }, plan?: import("../crdt/index.js").Prepared | undefined) => void;
+    }) => void;
     moveBlock: (this: Block, payload: {
         path: number[];
         beside?: import("./block.utils.js").BlockBeside;
-    }, plan?: import("../crdt/index.js").Prepared | undefined) => Block | null;
+    }) => Block | null;
     moveBlocks: (this: Block, payload: {
         blocks: Block[];
         path: number[];
         beside?: import("./block.utils.js").BlockBeside;
-    }, plan?: import("../crdt/index.js").Prepared | undefined) => Block[];
-    pushContentIntoBlock: (args_0: {
+    }) => Block[];
+    pushContentIntoBlock: (payload: {
         value: (Text | InlineBlock)[];
     }) => void;
     removeInlineBlock: (payload: {
         index: number;
-    }, plan?: import("../crdt/index.js").Prepared | undefined) => void;
+    }) => void;
     patchData: (payload: {
         ops: import("../crdt/index.js").DataPatch[];
         atom?: string;
-    }, plan?: import("../crdt/index.js").Prepared | undefined) => void;
-    addInlineBlock: (args_0: {
+    }) => void;
+    addInlineBlock: (payload: {
         index: number;
         block: JSONInlineBlock;
         text: Text;
@@ -176,7 +174,7 @@ export declare class Block {
     deleteContentAtRange: (payload: {
         start: [number, number];
         end: [number, number];
-    }, plan?: import("../crdt/index.js").Prepared | undefined) => void;
+    }) => void;
     /** Mark an element inside the block's markup as non-editable chrome (a header, a caption bar). */
     void: (node: HTMLElement) => void;
     /**
@@ -201,12 +199,4 @@ export declare class Block {
      * each entry is a text's runs or an atom, as JSON.
      */
     insertParts: (index: number, parts: (JSONText[] | JSONInlineBlock)[]) => void;
-    /**
-     * Register the element the core rendered for this block (O45) and run the
-     * attach hooks. A re-rendered block (moved, re-parented) keeps its declared
-     * view state (R11): an open toggle stays open.
-     */
-    attach: (node: HTMLElement) => {
-        destroy: () => void;
-    };
 }

package/dist/block/block.svelte.js

@@ -94,7 +94,7 @@ export class Block {
     get focused() {
         return this.edytor.selection.focusedBlocks.has(this) && !this.selected;
     }
-    /** May this block move at all — R5 `canPlace` without a destination (drag handles). */
+    /** May this block move at all: `canPlace` without a destination (drag handles). */
     get movable() {
         return this.edytor.facade.canPlace([this.id]);
     }
@@ -102,14 +102,15 @@ export class Block {
      * May text-level structural commands (convert, markdown shortcut, slash
      * menu) apply: the block is movable — or the virtual paragraph of an
      * emptied document, which a conversion creates with its kind
-     * (SW10-lists-3) — has no role of its own and renders its own content —
-     * a container (a list) is never converted, its items are (ZW-02).
+     * — has no role of its own and renders its own content —
+     * a container (a list) is never converted, its items are.
      */
     get convertible() {
         const { facade } = this.edytor;
         const placeable = this.movable || facade.virtual() === this.id;
         return placeable && this.rendersContent && !facade.isVoid(this.id) && !facade.isIsland(this.id);
     }
+    /** @internal */
     get firstEditableText() {
         // Only a RENDERED text part is editable — a container's phantom
         // content slot holds a Text with no `node`. Scan ALL children: the
@@ -125,6 +126,7 @@ export class Block {
         }
         return undefined;
     }
+    /** @internal */
     get lastEditableText() {
         const own = this.content.findLast((part) => part instanceof Text && part.node != null);
         if (own)
@@ -207,7 +209,7 @@ export class Block {
     get isNested() {
         return (this.parent && this.parent.type !== 'root') || false;
     }
-    /** This block's JSON — the document's one serializer (`facade.blockJSON`, L14). */
+    /** This block's JSON — the document's one serializer (`facade.blockJSON`). */
     get value() {
         if (!this.isRoot)
             return this.edytor.facade.blockJSON(this.id);
@@ -220,13 +222,13 @@ export class Block {
                 return true;
         return false;
     }
-    /** Whether this kind renders its own content slot — the adopted capability (R5, O22). */
+    /** Whether this kind renders its own content slot — the adopted capability. */
     get rendersContent() {
         return this.edytor.document.rendersContent(this.type);
     }
     /**
      * A container: it shows only its children (a list), neither void nor an
-     * island — the document's container rule (YW-02). Its items hold what it
+     * island — the document's container rule. Its items hold what it
      * shows; it is never converted (`convertible`).
      */
     get isContainer() {
@@ -249,7 +251,7 @@ export class Block {
     /**
      * The list this block shows in: its container when it is an item
      * (`isListItem`), or — an item outdented out of a nested list into the
-     * item holding it (SW8-roles-4) — the list of the items of its kind it
+     * item holding it — the list of the items of its kind it
      * sits under. <kbd>Enter</kbd> in an empty one outdents it; the menus
      * name it by the list's `itemKind`.
      */
@@ -373,6 +375,7 @@ export class Block {
      * Register the element the core rendered for this block (O45) and run the
      * attach hooks. A re-rendered block (moved, re-parented) keeps its declared
      * view state (R11): an open toggle stays open.
+     * @internal
      */
     attach = (node) => {
         const names = this.definition.viewState ?? [];

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

@@ -122,6 +122,19 @@ export type BlockOperations = {
             content: readonly JSONBlock[];
         };
     };
+    /**
+     * Find and replace (`plugins/find`): each match's text replaced by
+     * `replacement`, one plan, one undo step (its steps: a
+     * `deleteContentAtRange` and an `insertText` per match).
+     */
+    replaceMatches: {
+        matches: {
+            block: string;
+            offset: number;
+            length: number;
+        }[];
+        replacement: string;
+    };
     deleteContentAtRange: {
         start: [number, number];
         end: [number, number];
@@ -153,7 +166,12 @@ export type BlockOperations = {
  * and answers the op's document result; `resolve` turns it into wrappers
  * after the commit patched them.
  */
-export declare function batch<T extends (...args: any[]) => any, O extends keyof BlockOperations, R = ReturnType<T>>(operation: O, func: T, prepare?: (payload: BlockOperations[O]) => Prepared, resolve?: (this: any, out: ReturnType<T> | undefined, payload: Parameters<T>[0]) => R): (...args: Parameters<T>) => R;
+export declare function batch<T extends (...args: any[]) => any, O extends keyof BlockOperations, R = ReturnType<T>>(operation: O, func: T, prepare?: (payload: BlockOperations[O]) => Prepared, resolve?: (this: any, out: ReturnType<T> | undefined, payload: Parameters<T>[0]) => R): (...args: PayloadOf<Parameters<T>>) => R;
+/**
+ * A mutator's public parameters: its payload alone (optional when the op's
+ * is). The plan the dispatcher passes the op is not the caller's.
+ */
+export type PayloadOf<A extends unknown[]> = A extends [] ? [] : A extends [infer P, ...unknown[]] ? [payload: P] : A extends [(infer P)?, ...unknown[]] ? [payload?: P] : [];
 /**
  * The handle of block `id` (null: refused at preparation, or gone; undefined:
  * the command did not run). Inside an outer transaction too: the index shows

package/dist/block/block.utils.js

@@ -12,7 +12,8 @@ import { InlineBlock } from './inlineBlock.svelte.js';
 export function batch(operation, func, prepare, resolve) {
     return function (...[payload]) {
         const out = this.edytor.dispatcher.dispatch(operation, payload, { block: this }, (p, plan) => func.call(this, p, plan), prepare && ((p) => prepare.call(this, p)));
-        return resolve ? resolve.call(this, out, payload) : out;
+        const value = resolve ? resolve.call(this, out, payload) : out;
+        return this.edytor.dispatcher.answer(value);
     };
 }
 /**

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

@@ -3,7 +3,7 @@ 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 (§2.4 "Handles", R4): atom `id`, shown in
+ * 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).
  */
@@ -31,7 +31,4 @@ export declare class InlineBlock {
     /** The atom is shown by a live block. */
     get isInDocument(): boolean;
     get value(): JSONInlineBlock;
-    attach: (node: HTMLElement) => {
-        destroy: () => void;
-    };
 }

package/dist/block/inlineBlock.svelte.js

@@ -3,7 +3,7 @@ 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 (§2.4 "Handles", R4): atom `id`, shown in
+ * 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).
  */
@@ -61,6 +61,7 @@ export class InlineBlock {
     get value() {
         return { id: this.id, type: this.type, data: { ...this.#item?.data } };
     }
+    /** @internal */
     attach = (node) => {
         node.setAttribute('contenteditable', 'false');
         node.dataset.edytorId = this.id;

package/dist/clipboard/htmlFlow.d.ts

@@ -15,8 +15,10 @@ export declare const tagOf: (type: string, kind: BlockDefinition, data: Values)
  * catalogue kind's tag per preset (a content-less container takes its
  * default child's tag, one child per text line), a value-less mark's
  * `tag`, and each record's `parse` hook first (aliases, sanitized values).
- * Unknown elements degrade to text runs; whitespace collapses as HTML
- * renders it. `null` when the HTML carries nothing (`flow.shape`, F-P10).
+ * 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
+ * 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;
 export {};

package/dist/clipboard/htmlFlow.js

@@ -3,6 +3,32 @@ import { jsonBlockToSpec } from '../utils/json.js';
 const SKIP = /^(script|style|template|noscript|svg|math|iframe|object|embed|canvas|video|audio|img|input|button|select|textarea|head|title|meta|link|base)$/;
 /** HTML's block-level elements: they start a line (a kind's tag does too). */
 const BLOCK = /^(address|article|aside|blockquote|dd|details|dialog|div|dl|dt|fieldset|figcaption|figure|footer|form|h[1-6]|header|hgroup|hr|li|main|nav|ol|p|pre|section|table|tbody|td|tfoot|th|thead|tr|ul)$/;
+/** The largest side, in CSS px, of an inline glyph image (an emoji, an icon, a tracking pixel). */
+const GLYPH_PX = 32;
+/** An alt made of emoji only (with their joiners, variation selectors and skin tones). */
+const EMOJI_ALT = /^(?:[\p{Extended_Pictographic}\p{Regional_Indicator}\s]|\u200d|\ufe0f|\u20e3|\p{Emoji_Modifier})+$/u;
+const sizeOf = (img, side) => {
+    const value = img.getAttribute(side) ?? img.style.getPropertyValue(side);
+    const px = /^\s*(\d+(?:\.\d+)?)\s*(px)?\s*$/.exec(value);
+    return px ? Number(px[1]) : undefined;
+};
+/**
+ * An inline glyph image (`flow.html.glyph`): an emoji drawn as an image (an
+ * emoji-only alt, an `emoji` class or `data-emoji`, as X, Gmail, Slack and
+ * WordPress write them), or an image no larger than a glyph (an icon, an
+ * email's tracking pixel). It is text, its `alt`, never a block.
+ */
+const isGlyph = (node) => {
+    if (!(node instanceof HTMLElement) || node.localName !== 'img')
+        return false;
+    const alt = node.getAttribute('alt')?.trim() ?? '';
+    if (alt && EMOJI_ALT.test(alt) && /[\p{Extended_Pictographic}\p{Regional_Indicator}]/u.test(alt))
+        return true;
+    if (/emoji/i.test(node.className) || node.hasAttribute('data-emoji'))
+        return true;
+    const sides = [sizeOf(node, 'width'), sizeOf(node, 'height')].filter((n) => n !== undefined);
+    return sides.length > 0 && sides.every((n) => n <= GLYPH_PX);
+};
 /** 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. */
@@ -31,8 +57,10 @@ export const tagOf = (type, kind, data) => {
  * catalogue kind's tag per preset (a content-less container takes its
  * default child's tag, one child per text line), a value-less mark's
  * `tag`, and each record's `parse` hook first (aliases, sanitized values).
- * Unknown elements degrade to text runs; whitespace collapses as HTML
- * renders it. `null` when the HTML carries nothing (`flow.shape`, F-P10).
+ * 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
+ * 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')
@@ -40,7 +68,8 @@ export const flowOfHtml = (kinds, html) => {
     const { blocks, marks } = kinds;
     const byTag = new Map();
     for (const [type, kind] of blocks) {
-        if (!kind.presets?.length)
+        // A void found by its hook carries its substance in data (a source): its tag alone is none.
+        if (!kind.presets?.length || (kind.void && kind.parse))
             continue;
         for (const { data = {} } of kind.presets) {
             const tag = tagOf(type, kind, data);
@@ -53,6 +82,9 @@ export const flowOfHtml = (kinds, html) => {
             byTag.set(tag, { type, data: kind.presets[0].data ?? {}, lines: child });
     }
     const kindOf = (element) => {
+        // A glyph is text: no kind claims it.
+        if (isGlyph(element))
+            return undefined;
         for (const [type, kind] of blocks) {
             const data = kind.parse?.(element);
             if (data)
@@ -71,6 +103,11 @@ export const flowOfHtml = (kinds, html) => {
         return found;
     };
     const isBlock = (node) => node instanceof HTMLElement && (BLOCK.test(node.localName) || 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;
+        return claim !== undefined && blocks.get(claim.type)?.void === true;
+    };
     const text = (line, value, marks, pre) => {
         const last = line.content.at(-1);
         if (!pre)
@@ -85,16 +122,20 @@ export const flowOfHtml = (kinds, html) => {
         else
             line.content.push(Object.keys(marks).length ? { text: value, marks } : { text: value });
     };
-    const inline = (node, line, marks, pre) => {
+    const inline = (node, at, marks, pre) => {
         if (node.nodeType === Node.TEXT_NODE)
-            return text(line, node.textContent ?? '', marks, pre);
+            return text(at.line(), node.textContent ?? '', marks, pre);
+        if (isGlyph(node))
+            return text(at.line(), node.getAttribute('alt') ?? '', marks, pre);
+        if (isVoid(node))
+            return at.apart(node);
         if (!(node instanceof HTMLElement) || SKIP.test(node.localName))
             return;
         if (node.localName === 'br')
-            return text(line, '\n', marks, true);
+            return text(at.line(), '\n', marks, true);
         const inner = { ...marks, ...marksOf(node) };
         for (const child of node.childNodes)
-            inline(child, line, inner, pre || node.localName === 'pre');
+            inline(child, at, inner, pre || node.localName === 'pre');
     };
     /** A line ends without its trailing space or `<br>`. */
     const end = (line) => {
@@ -114,9 +155,16 @@ export const flowOfHtml = (kinds, html) => {
                 lines.push(run);
             run = null;
         };
+        const at = {
+            line: () => (run ??= { type, content: [] }),
+            apart: (element) => {
+                flush();
+                lines.push(...blockOf(element, type));
+            }
+        };
         for (const node of parent.childNodes) {
             if (!isBlock(node))
-                inline(node, (run ??= { type, content: [] }), {}, false);
+                inline(node, at, {}, false);
             else {
                 flush();
                 lines.push(...blockOf(node, type));
@@ -135,6 +183,17 @@ export const flowOfHtml = (kinds, html) => {
             }));
             return [{ type: claim.type, data: claim.data, content: [], children }];
         }
+        // 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) {
+            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.
+            const at = { line: () => line, apart: () => { } };
+            for (const node of caption?.childNodes ?? [])
+                inline(node, at, {}, false);
+            return [end(line)];
+        }
         // 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) {
@@ -149,20 +208,45 @@ export const flowOfHtml = (kinds, html) => {
             return linesOf(element, type);
         const line = { type: claim?.type ?? type, data: claim?.data, content: [] };
         const childType = claim ? kinds.document.defaultChild(claim.type) : type;
-        const children = [];
         const pre = element.localName === 'pre';
+        // The element's line, then, for each void element met in it, that block
+        // and a line of the element's kind for what follows (`flow.html.void`).
+        const parts = [line];
+        const texts = new Set([line]);
+        let current = line;
+        const at = {
+            line: () => current,
+            apart: (inner) => {
+                // A void's own media (a figure's `img`) is part of it.
+                if (claim && blocks.get(claim.type)?.void)
+                    return;
+                parts.push(...blockOf(inner, type));
+                current = { type: line.type, data: line.data, content: [] };
+                parts.push(current);
+                texts.add(current);
+            }
+        };
         for (const node of element.childNodes)
-            if (!isBlock(node))
-                inline(node, line, {}, pre);
+            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 (!line.content.length && !children.length && !kindOf(node) && !wraps(node))
+            else if (!current.content.length &&
+                !current.children?.length &&
+                !kindOf(node) &&
+                !wraps(node))
                 for (const child of node.childNodes)
-                    inline(child, line, {}, pre);
+                    inline(child, at, {}, pre);
             else
-                children.push(...blockOf(node, childType));
-        if (children.length)
-            line.children = children;
-        return [end(line)];
+                (current.children ??= []).push(...blockOf(node, childType));
+        for (const part of texts)
+            if (!part.children?.length)
+                delete part.children;
+        if (parts.length === 1)
+            return [end(line)];
+        // Split: a text line left empty around a void element is not kept.
+        return parts.filter((part) => !texts.has(part) || end(part).content.length > 0 || part.children !== undefined);
     };
     const body = new DOMParser().parseFromString(html, 'text/html').body;
     const lines = linesOf(body, undefined);