edytor 4.0.0 → 6.0.0

package/dist/surface/observer.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Edytor } from '../edytor.svelte.js';
 import type { Text } from '../text/text.svelte.js';
+import type { InlineBlock } from '../block/inlineBlock.svelte.js';
 import { type Kind, type Owned } from './attributes.js';
 import { type Patched, type Replaced } from './cells.js';
 /**
@@ -29,7 +30,7 @@ export declare class SurfaceObserver {
      * release. A text element takes the table's attributes now (its id, its
      * editing host inside a void).
      */
-    register: (node: Element, kind: Kind, block: string, name?: string, owned?: () => Owned) => () => void;
+    register: (node: Element, kind: Kind, block: string, name?: string, owned?: () => Owned, handle?: Text | InlineBlock) => () => void;
     /** The render anchor (`Edytor.svelte`): a registered child of the strict root. */
     anchor: (node: HTMLElement) => {
         destroy: () => void;
@@ -53,6 +54,10 @@ export declare class SurfaceObserver {
     flush: () => Promise<void>;
     pre: () => void;
     post: () => void;
+    /** The handle a registered element of `kind` renders (`null`: another element). */
+    handleOf: <K extends "text" | "atom">(element: Node | null | undefined, kind: K) => (K extends "text" ? Text : InlineBlock) | null;
+    /** The block `node` is in (its closest registered element's), none in a preview or outside the host. */
+    blockOf: (node: Node | null) => import("../index.js").Block | null;
 }
 /**
  * Adopt what the browser made of `text` — the only adopter: one

package/dist/surface/observer.svelte.js

@@ -18,8 +18,11 @@
  * - The pre pass (root `$effect.pre`, before the flush's writes) inverts a
  *   record that removed registered elements (its added nodes go, its removed
  *   nodes return at their recorded siblings, before Svelte reconciles around
- *   them) and snapshots a content the flush re-renders whose DOM holds an edit
- *   the flush would overwrite.
+ *   them), and one that removed only the render's anchors from a block list
+ *   when the editor did not write it (`dom.anchors.foreign`: the records taken
+ *   from the pre pass to the end of a compare pass are the editor's own), and
+ *   snapshots a content the flush re-renders whose DOM holds an edit the
+ *   flush would overwrite.
  * - The compare pass (root `$effect`, after every DOM write of the flush)
  *   removes identity clones, nodes inside a content's run and the root's
  *   foreign children, heals owned attributes (bounded), and compares each
@@ -42,7 +45,7 @@ import { runOccurrence } from '../events/onBeforeInput.js';
 import { getDomSelectionSnapshot } from '../selection/domSelection.js';
 import { domOffsetIn } from '../selection/selection.utils.js';
 import { diverges, heal, ownedOf } from './attributes.js';
-import { getTextContentOffsetAtPoint } from '../events/domTextOffset.js';
+import { getTextContentOffsetAtPoint, textLeaves } from '../events/domTextOffset.js';
 import { rendersMark } from './cells.js';
 const ZWSP = /\u200B/g;
 const ATOM = '\uFFFC';
@@ -70,13 +73,7 @@ const textOf = (cell) => cell.runs
 /** Svelte's anchors: comments and empty text nodes are never input and never removed. */
 const isAnchor = (node) => node.nodeType === Node.COMMENT_NODE || (node.nodeType === Node.TEXT_NODE && !node.nodeValue);
 /** The `nth` non-empty text node under `node`. */
-const textLeaf = (node, nth = 0) => {
-    const walker = (node.ownerDocument ?? document).createTreeWalker(node, NodeFilter.SHOW_TEXT);
-    while (walker.nextNode())
-        if (walker.currentNode.data && nth-- === 0)
-            return walker.currentNode;
-    return null;
-};
+const textLeaf = (node, nth = 0) => textLeaves(node).filter((leaf) => leaf.data)[nth] ?? null;
 const ZERO_WIDTH_SPACE = '\u200B';
 /**
  * What the browser shows for `text`: its element's text nodes in order (WebKit's
@@ -86,15 +83,10 @@ const ZERO_WIDTH_SPACE = '\u200B';
 export const readDomText = (text) => {
     let value = '';
     const node = text.node;
-    if (node) {
-        const walker = (node.ownerDocument ?? document).createTreeWalker(node, NodeFilter.SHOW_TEXT);
-        while (walker.nextNode()) {
-            const leaf = walker.currentNode;
-            value += leaf.parentElement?.closest('span.Apple-converted-space')
-                ? leaf.data.replaceAll('\u00A0', ' ')
-                : leaf.data;
-        }
-    }
+    for (const leaf of node ? textLeaves(node) : [])
+        value += leaf.parentElement?.closest('span.Apple-converted-space')
+            ? leaf.data.replaceAll('\u00A0', ' ')
+            : leaf.data;
     // An empty text's filler shares its node with what the browser typed, on either side.
     if (text.isEmpty)
         return value.replaceAll(ZERO_WIDTH_SPACE, '');
@@ -189,6 +181,10 @@ export class SurfaceObserver {
     #wrote = false;
     /** Records arrived since the last pass (the projector reads what they did: `rendered`). */
     #fresh = false;
+    /** The flush writes the host: from the pre pass to the end of its compare pass. */
+    #rendering = false;
+    /** Passes under way (a pass's own repairs; an adoption's synchronous flush nests one). */
+    #passes = 0;
     #window = null;
     constructor(edytor) {
         this.edytor = edytor;
@@ -196,11 +192,13 @@ export class SurfaceObserver {
     /** Observe `root` (the host): records name what to compare. */
     attach = (root) => {
         const mo = (this.#mo = new MutationObserver((records) => {
-            records.forEach(this.#intake);
+            for (const record of records)
+                this.#intake(record, this.#own());
             this.signal();
         }));
         for (const child of root.childNodes)
             this.#rooted.add(child);
+        this.#rendering = false;
         mo.observe(root, {
             attributes: true,
             attributeOldValue: true,
@@ -220,8 +218,8 @@ export class SurfaceObserver {
      * release. A text element takes the table's attributes now (its id, its
      * editing host inside a void).
      */
-    register = (node, kind, block, name, owned) => {
-        const entry = { kind, block, name, owned };
+    register = (node, kind, block, name, owned, handle) => {
+        const entry = { kind, block, name, owned, handle };
         this.#registry.set(node, entry);
         if (kind === 'text')
             heal(node, ownedOf(this.edytor, node, entry));
@@ -289,50 +287,71 @@ export class SurfaceObserver {
             if (!this.edytor.readonly)
                 this.#restore();
             this.#snapshot();
+            // From here to the end of the compare pass, what the host records is the flush's.
+            this.#rendering = true;
         });
     };
     post = () => {
         this.#deps();
-        untrack(() => void this.#pass(true));
+        untrack(() => {
+            void this.#pass(true);
+            this.#rendering = false;
+        });
     };
     #deps = () => {
         const { edytor } = this;
         void [this.epoch, this.records, edytor.readonly, edytor.composition.phase];
         void [edytor.selection.value, edytor.suggestions.revision];
     };
+    /**
+     * The editor writes the host now: the flush (from the pre pass to the end
+     * of its compare pass) or a pass's own repairs. A record taken then is the
+     * render's (`dom.anchors.foreign`); every other one is the browser's, a
+     * page script's or an extension's.
+     */
+    #own = () => this.#rendering || this.#passes > 0;
     #take = () => {
         const records = this.#mo?.takeRecords() ?? [];
-        records.forEach(this.#intake);
+        const own = this.#own();
+        for (const record of records)
+            this.#intake(record, own);
         return records.length > 0;
     };
-    /** The block an element belongs to: its closest registered element's (`null`: the root). */
-    #owner = (node) => {
+    /** The closest registered element holding `node` in the host: its entry (`null`: the host). */
+    #near = (node) => {
         for (let at = node; at; at = at.parentNode) {
             if (at === this.edytor.node)
                 return null;
-            const entry = at instanceof Element ? this.#registry.get(at) : undefined;
-            // What happens in a preview is the view's own render: nothing to compare.
+            const entry = this.#registry.get(at);
             if (entry)
-                return entry.kind === 'preview' ? undefined : entry.kind === 'anchor' ? null : entry.block;
+                return entry;
         }
-        return undefined;
     };
-    /** The text whose element holds `node`. */
-    #textOf = (node) => {
-        for (let at = node; at && at !== this.edytor.node; at = at.parentNode) {
-            const entry = at instanceof Element ? this.#registry.get(at) : undefined;
-            if (entry)
-                return entry.kind === 'text' ? this.edytor.nodeToText.get(at) : undefined;
-        }
-        return undefined;
+    /** The block an element belongs to: its closest registered element's (`null`: the root). */
+    #owner = (node) => {
+        const entry = this.#near(node);
+        // What happens in a preview is the view's own render: nothing to compare.
+        return (entry && (entry.kind === 'preview' ? undefined : entry.kind === 'anchor' ? null : entry.block));
+    };
+    /** The handle a registered element of `kind` renders (`null`: another element). */
+    handleOf = (element, kind) => {
+        const entry = element && this.#registry.get(element);
+        return (entry?.kind === kind ? entry.handle : null);
+    };
+    /** The block `node` is in (its closest registered element's), none in a preview or outside the host. */
+    blockOf = (node) => {
+        const entry = this.#near(node);
+        return entry && entry.kind !== 'preview' && entry.kind !== 'anchor'
+            ? (this.edytor.idToBlock.get(entry.block) ?? null)
+            : null;
     };
     #registered = (node) => node instanceof Element && this.#registry.has(node);
     /** `node` is, or holds, an element the core still renders. */
     #holds = (node) => this.#registered(node) ||
         (node instanceof Element &&
             [...node.querySelectorAll('*')].some((child) => this.#registry.has(child)));
-    /** A record names elements to compare (never a verdict). */
-    #intake = (record) => {
+    /** A record names elements to compare (never a verdict); `own`: the editor wrote it. */
+    #intake = (record, own) => {
         this.#fresh = true;
         const id = this.#owner(record.target);
         if (id === undefined)
@@ -355,7 +374,7 @@ export class SurfaceObserver {
             return;
         const added = [...record.addedNodes];
         const { target: parent, nextSibling: next, previousSibling: prev } = record;
-        this.#removed.push({ parent, nodes: removed, added, next, prev });
+        this.#removed.push({ parent, nodes: removed, added, next, prev, foreign: !own });
         // Wrapper replacement: the browser replaced a text element with its own nodes.
         const [text] = removed;
         if (removed.length === 1 &&
@@ -394,21 +413,33 @@ export class SurfaceObserver {
      * browser removed them one record each (Firefox): an anchor-only record is
      * inverted in a parent that gets a registered element back, else the
      * element's recorded siblings are gone and it lands outside Svelte's block.
+     * A foreign range across blocks (`dom.anchors.foreign`: a script's
+     * `Range.deleteContents()`) takes the render's anchors between the blocks
+     * from their list (the root, a block's children) and those after its start
+     * and before its end inside the blocks it enters, and leaves the elements:
+     * Svelte's next removal of either block would start at a detached anchor
+     * and leave its element, a child added to one would find no anchor to
+     * render before. When a foreign record took anchors from a block list,
+     * every foreign anchor-only record of the batch is inverted. The render's
+     * own removals (an item leaving the list) are never undone.
      */
     #restore = () => {
         const root = this.edytor.node;
         const removals = this.#removed.splice(0).reverse();
         const held = ({ parent, nodes }) => nodes.some((node) => node.parentNode !== parent && this.#holds(node));
         const parents = new Set(removals.filter(held).map(({ parent }) => parent));
+        const crossed = removals.some((removal) => this.#lost(removal) && this.#list(removal.parent));
         for (const removal of removals) {
             const { parent, nodes, added, next, prev } = removal;
             if (!root?.contains(parent))
                 continue;
-            if (!held(removal) && !(parents.has(parent) && nodes.every(isAnchor)))
+            const anchors = parents.has(parent) && nodes.every(isAnchor);
+            if (!held(removal) && !anchors && !(crossed && this.#lost(removal)))
                 continue;
             // A browser-owned attempt's host: its change is adopted whatever the
             // browser did to its structure, which the re-render then restores.
-            const inside = this.#textOf(parent);
+            const near = this.#near(parent);
+            const inside = near?.kind === 'text' && near.handle;
             if (inside && this.edytor.attempts.on(inside))
                 continue;
             for (const node of added)
@@ -428,6 +459,17 @@ export class SurfaceObserver {
         }
         this.#replaced.clear();
     };
+    /**
+     * A foreign record took only the render's anchors, and they are gone from
+     * the page (not moved): they can return beside a recorded sibling still
+     * there (never at the parent's end).
+     */
+    #lost = ({ parent, nodes, next, prev, foreign }) => foreign &&
+        nodes.every((node) => isAnchor(node) && !node.isConnected) &&
+        (next?.parentNode === parent || prev?.parentNode === parent);
+    /** A block list: the root, or a parent of block elements (a block's children). */
+    #list = (parent) => parent === this.edytor.node ||
+        [...parent.childNodes].some((child) => child instanceof Element && this.#registry.get(child)?.kind === 'block');
     /**
      * Where an edit made at `at` of the base lands now: through the anchor
      * minted at it (it follows its text through a re-key, split, move or
@@ -479,6 +521,19 @@ export class SurfaceObserver {
      * `$effect`); otherwise contents waiting for a flush are left to it.
      */
     #pass = (flushed) => {
+        this.#passes++;
+        try {
+            return this.#compare(flushed);
+        }
+        finally {
+            // What the flush and this pass wrote: the render's records, compared
+            // at the next pass (as the observer's callback would have them).
+            if (this.#take())
+                queueMicrotask(this.signal);
+            this.#passes--;
+        }
+    };
+    #compare = (flushed) => {
         const { edytor } = this;
         const cells = edytor.cells;
         if (!cells || !edytor.node?.isConnected || edytor.destroyed)
@@ -620,31 +675,11 @@ export class SurfaceObserver {
     #invert = (id) => {
         if (id === this.#live())
             return;
-        if (this.#shape(id) || !this.#rewrite(id))
+        if (this.#shape(id, true))
             this.edytor.cells?.remount(id);
         else
             this.update();
     };
-    /** Write each render delta's text back into its node; false when a node is not there. */
-    #rewrite = (id) => {
-        const writes = [];
-        for (const text of this.#texts(id)) {
-            const deltas = this.edytor.deltasOf(text);
-            const nodes = this.#nodes(text.node);
-            const shown = deltas.length ? deltas : [{ text: '\u200B' }];
-            for (const [i, delta] of shown.entries()) {
-                const node = nodes[i];
-                const leaf = node?.nodeType === Node.TEXT_NODE ? node : node && textLeaf(node);
-                if (!leaf)
-                    return false;
-                if (leaf.data !== delta.text)
-                    writes.push([leaf, delta.text]);
-            }
-        }
-        for (const [leaf, value] of writes)
-            leaf.data = value;
-        return true;
-    };
     /** A text element's children that stand for render deltas (Svelte's anchors and the newline marker aside). */
     #nodes = (element) => [...element.childNodes].filter((node) => !isAnchor(node) &&
         !(node instanceof Element && node.hasAttribute('data-edytor-trailing-newline')));
@@ -655,7 +690,7 @@ export class SurfaceObserver {
      */
     #adoptContent = (id) => {
         const { edytor } = this;
-        let broken = Boolean(this.#shape(id));
+        let broken = this.#shape(id);
         const caret = getCollapsedDomTextSelection(edytor);
         const work = [];
         for (const text of this.#texts(id)) {
@@ -688,7 +723,7 @@ export class SurfaceObserver {
         const value = now.slice(0, local) + insert + now.slice(local + remove);
         return adopt(this.edytor, text, value, undefined, local + insert.length);
     };
-    #texts = (id) => [...(this.#contents.get(id) ?? [])].flatMap((element) => this.edytor.nodeToText.get(element) ?? []);
+    #texts = (id) => [...(this.#contents.get(id) ?? [])].flatMap((element) => this.handleOf(element, 'text') ?? []);
     /** A content's DOM: its registered text and atom elements in order; null when not shown. */
     #read = (id) => {
         const elements = [...(this.#contents.get(id) ?? [])];
@@ -697,20 +732,17 @@ export class SurfaceObserver {
         elements.sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
         const host = this.#blocks.get(id);
         let text = '';
-        let broken = host && !host.isConnected ? 'missing' : null;
+        let broken = !!host && !host.isConnected;
         for (const element of elements) {
             const kind = this.#registry.get(element)?.kind;
             // A mark is inside its text element: its presence is the shape check's.
             if (kind === 'mark')
                 continue;
-            if (!element.isConnected)
-                broken ??= 'missing';
-            else if (host && !host.contains(element))
-                broken ??= 'escaped';
+            broken ||= !element.isConnected || (!!host && !host.contains(element));
             if (kind === 'atom')
                 text += ATOM;
             else if (kind === 'text') {
-                const found = this.edytor.nodeToText.get(element);
+                const found = this.handleOf(element, 'text');
                 text += (found ? readDomText(found) : (element.textContent ?? '')).replace(ZWSP, '');
             }
         }
@@ -718,46 +750,50 @@ export class SurfaceObserver {
     };
     /**
      * Equal text, compared structurally: each text element (a strict
-     * container) holds one node per render delta — a text node, or a
-     * registered mark element whose registered marks follow the delta's chain.
+     * container) holds one node per render delta (the empty filler's one) — a
+     * text node, or a registered mark element whose registered marks follow
+     * the delta's chain and that renders one text node. Answers whether it
+     * differs; `write`: a content that does not gets each delta's text back
+     * in its node.
      */
-    #shape = (id) => {
+    #shape = (id, write) => {
+        const writes = [];
         for (const text of this.#texts(id)) {
             const element = text.node;
             if (!element)
                 continue;
             const deltas = this.edytor.deltasOf(text);
+            const shown = deltas.length ? deltas : [{ text: '\u200B', marks: [] }];
             const nodes = this.#nodes(element);
-            if (!deltas.length) {
-                if (nodes.length !== 1 || nodes[0].nodeType !== Node.TEXT_NODE)
-                    return 'filler';
-                continue;
-            }
-            if (nodes.length !== deltas.length)
-                return 'partition';
-            for (const [i, delta] of deltas.entries()) {
+            if (nodes.length !== shown.length)
+                return true;
+            for (const [i, delta] of shown.entries()) {
                 const node = nodes[i];
+                let leaf = node;
                 const chain = delta.marks
                     .map(([name]) => name)
                     .filter((name) => rendersMark(this.edytor.marks, name));
-                if (!chain.length) {
-                    if (node.nodeType !== Node.TEXT_NODE)
-                        return 'foreign-child';
-                    continue;
+                if (chain.length) {
+                    if (!this.#registry.has(node))
+                        return true;
+                    const marks = [node, ...node.querySelectorAll('[data-edytor-mark]')]
+                        .map((el) => this.#registry.get(el)?.name)
+                        .filter(Boolean);
+                    leaf = textLeaf(node);
+                    // The snippet's markup is its own, but the delta renders one text node.
+                    if (marks.join() !== chain.join() || !leaf || textLeaf(node, 1))
+                        return true;
                 }
-                if (!(node instanceof Element) || !this.#registry.has(node))
-                    return 'foreign-child';
-                const marks = [node, ...node.querySelectorAll('[data-edytor-mark]')]
-                    .map((el) => this.#registry.get(el)?.name)
-                    .filter(Boolean);
-                if (marks.join() !== chain.join())
-                    return 'mark-chain';
-                // The snippet's markup is its own, but the delta renders one text node.
-                if (!textLeaf(node) || textLeaf(node, 1))
-                    return 'mark-text';
+                else if (node.nodeType !== Node.TEXT_NODE)
+                    return true;
+                if (leaf.data !== delta.text)
+                    writes.push([leaf, delta.text]);
             }
         }
-        return null;
+        if (write)
+            for (const [leaf, value] of writes)
+                leaf.data = value;
+        return false;
     };
     /** The root's children differ from its registered block elements in cell order, the anchor, Svelte's anchors. */
     #rootDiverges = () => {
@@ -921,21 +957,17 @@ const shownMarks = (text, at) => {
     const element = text.node;
     if (!element)
         return null;
-    const walker = element.ownerDocument.createTreeWalker(element, NodeFilter.SHOW_TEXT);
     let offset = 0;
-    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
-        offset += node.data.replace(ZWSP, '').length;
-        if (offset <= at)
-            continue;
-        const names = [];
-        for (let el = node.parentElement; el && el !== element; el = el.parentElement) {
-            const name = el.getAttribute('data-edytor-mark');
-            if (name)
-                names.push(name);
-        }
-        return names.sort().join();
+    const node = textLeaves(element).find((leaf) => (offset += leaf.data.replace(ZWSP, '').length) > at);
+    if (!node)
+        return null;
+    const names = [];
+    for (let el = node.parentElement; el && el !== element; el = el.parentElement) {
+        const name = el.getAttribute('data-edytor-mark');
+        if (name)
+            names.push(name);
     }
-    return null;
+    return names.sort().join();
 };
 /** The rendered marks the model gives the character at `at` of `text`. */
 const modelMarks = (edytor, text, at) => Object.keys(activeMarks(text.getMarksAtRange(at, at + 1)[0]?.marks))

package/dist/surface/pin.svelte.d.ts

@@ -23,15 +23,15 @@ export declare class Pin {
     /** The session's preview (the browser draws it itself when `native`). */
     show: (text: string, marks: Record<string, unknown> | undefined, native: boolean) => void;
     /**
-     * The first write replaced a range across texts: the host's
-     * cell lost the segments and atoms it covered, and the rest of its end text
-     * now follows the preview in the host, as its own nodes, so the IME's node
-     * is never rewritten. Across blocks they follow the frozen render inside the
-     * host element; inside one block (`beside`: across an inline atom) they go
-     * in their own element right after it (`rest`), as there the IME's write
-     * moves the host element's render anchors into the next segment's (Chromium).
+     * The first write replaced a range across an inline atom inside one block:
+     * the host's cell lost the segments and atoms it covered, and the rest of
+     * its end text now follows the preview in its own element right after the
+     * host (`rest`), so the IME's node is never rewritten (the IME's write
+     * moves the host element's render anchors into the next segment's,
+     * Chromium). A range across blocks never merges: the session replaces it
+     * at its start (`Composition.#rangeless`).
      */
-    merge: (cell: Cell, items: Item[], beside: boolean) => void;
+    merge: (cell: Cell, items: Item[]) => void;
     /** The session ended: the host renders from its cell again (the catch-up patch). */
     release: () => null;
     /** `node` lies inside the pinned element. */
@@ -48,7 +48,7 @@ export declare class Pin {
         deltas: RenderDelta[];
         empty: boolean;
     };
-    /** What follows the pinned segment `key` of `block` in its own element (`merge`, `beside`). */
+    /** What follows the pinned segment `key` of `block` in its own element (`merge`). */
     rest: (block: BlockId, key: string) => RenderDelta[];
     /**
      * What the IME shows in the pinned element: its text between the frozen

package/dist/surface/pin.svelte.js

@@ -29,7 +29,6 @@ export class Pin {
             head: cut(frozen, from)[0],
             tail: cut(frozen, Math.max(from, to))[1],
             merged: [],
-            beside: false,
             element,
             // Until the first preview the render stays as the IME found it: a
             // write now would collapse its DOM range before it replaces it.
@@ -44,18 +43,18 @@ export class Pin {
             this.#held = { ...held, preview: { text, marks: set && Object.fromEntries(set), native } };
     };
     /**
-     * The first write replaced a range across texts: the host's
-     * cell lost the segments and atoms it covered, and the rest of its end text
-     * now follows the preview in the host, as its own nodes, so the IME's node
-     * is never rewritten. Across blocks they follow the frozen render inside the
-     * host element; inside one block (`beside`: across an inline atom) they go
-     * in their own element right after it (`rest`), as there the IME's write
-     * moves the host element's render anchors into the next segment's (Chromium).
+     * The first write replaced a range across an inline atom inside one block:
+     * the host's cell lost the segments and atoms it covered, and the rest of
+     * its end text now follows the preview in its own element right after the
+     * host (`rest`), so the IME's node is never rewritten (the IME's write
+     * moves the host element's render anchors into the next segment's,
+     * Chromium). A range across blocks never merges: the session replaces it
+     * at its start (`Composition.#rangeless`).
      */
-    merge = (cell, items, beside) => {
+    merge = (cell, items) => {
         const held = this.#held;
         if (held)
-            this.#held = { ...held, parts: partsOf(cell.runs), merged: items, beside };
+            this.#held = { ...held, parts: partsOf(cell.runs), merged: items };
     };
     /** The session ended: the host renders from its cell again (the catch-up patch). */
     release = () => (this.#held = null);
@@ -68,14 +67,10 @@ export class Pin {
         const held = this.#held;
         if (!held || held.block !== block || held.key !== key)
             return null;
-        const { preview, head, tail, beside } = held;
-        const merged = beside ? [] : held.merged;
+        const { preview, head, tail } = held;
         if (!preview || preview.native)
-            return {
-                deltas: [...held.frozen, ...renderDeltas(merged)],
-                empty: held.empty && !textOf(merged)
-            };
-        const items = [...head, preview, ...tail, ...merged];
+            return { deltas: [...held.frozen], empty: held.empty };
+        const items = [...head, preview, ...tail];
         return { deltas: renderDeltas(items), empty: !textOf(items) };
     };
     /** The render of `segment` of `cell`: pinned while it hosts the IME, else its kind's (`segmentDeltas`). */
@@ -83,11 +78,10 @@ export class Pin {
         deltas: segmentDeltas(cell, segment, transform),
         empty: segment.text === ''
     };
-    /** What follows the pinned segment `key` of `block` in its own element (`merge`, `beside`). */
+    /** What follows the pinned segment `key` of `block` in its own element (`merge`). */
     rest = (block, key) => {
         const held = this.#held;
-        const shown = held?.beside && held.block === block && held.key === key;
-        return shown ? renderDeltas(held.merged) : [];
+        return held?.block === block && held.key === key ? renderDeltas(held.merged) : [];
     };
     /**
      * What the IME shows in the pinned element: its text between the frozen
@@ -102,8 +96,7 @@ export class Pin {
         const dom = (held.element.textContent ?? '').replace(/\u200B/g, '');
         if (!held.preview && dom === textOf(held.frozen))
             return null;
-        const inside = held.beside ? held.tail : [...held.tail, ...held.merged];
-        const [head, tail] = [textOf(held.head), textOf(inside)];
+        const [head, tail] = [textOf(held.head), textOf(held.tail)];
         if (dom.length < head.length + tail.length)
             return null;
         return dom.startsWith(head) && dom.endsWith(tail)