@react-x11/components 0.9.0 → 0.10.0

package/src/qml/layouts.tsx

@@ -35,23 +35,38 @@ import {
   cancelAfterLayout,
   type LayoutTick,
 } from '../internal/timers.js';
+import { scaleOf } from '../internal/units.js';
 
 function isRow(inst: QmlInstance): boolean {
   return inst.typeInfo.name === 'RowLayout';
 }
 
-/** Reflect yoga's answers into the managed children's geometry slots. */
+/**
+ * Reflect yoga's answers into the managed children's geometry slots.
+ *
+ * `abs` is device pixels and the slots are the logical ones the document is
+ * written in (react-x11's docs/scale.md), and this is not only read-back:
+ * an author `width:` is the item's size hint and the slot this writes, so a
+ * device number here came back as a hint twice the size and the row drew
+ * it that way. Divided once, after the subtraction: `(a - b) / s` rounds
+ * once where `a / s - b / s` rounds three times, and at a scale of 1.25
+ * half the positions would read like 78.39999999999999 rather than 78.4.
+ * And from `abs` rather than `getClientRects()`, which answers nothing for
+ * a box with no area: a 0×0 item in a row still has an `x`.
+ */
 function feedbackLayout(inst: QmlInstance): void {
   if (inst.destroyed) return;
-  const containerAbs = hostNode(inst)?.abs;
+  const container = hostNode(inst);
+  const containerAbs = container?.abs;
   if (!containerAbs) return;
+  const s = scaleOf(container);
   for (const child of inst.visualChildren()) {
     const abs = hostNode(child)?.abs;
     if (!abs) continue; // a custom view without captureNode: skip quietly
-    child.slots.get('x')?.reflect(abs.x - containerAbs.x);
-    child.slots.get('y')?.reflect(abs.y - containerAbs.y);
-    child.slots.get('width')?.reflect(abs.width);
-    child.slots.get('height')?.reflect(abs.height);
+    child.slots.get('x')?.reflect((abs.x - containerAbs.x) / s);
+    child.slots.get('y')?.reflect((abs.y - containerAbs.y) / s);
+    child.slots.get('width')?.reflect(abs.width / s);
+    child.slots.get('height')?.reflect(abs.height / s);
   }
 }
 

package/src/qml/qtquick.tsx

@@ -40,6 +40,7 @@ import { layoutTypes } from './layouts.js';
 import { modelTypes } from './models.js';
 import { stateTypes } from './states.js';
 import { cancel, schedule, warn } from './globals.js';
+import { scaleOf } from '../internal/units.js';
 
 // Qt namespace constants used from expressions (`Qt.LeftButton`,
 // `mouse.modifiers & Qt.ShiftModifier`, `Qt.AlignHCenter`).
@@ -120,8 +121,14 @@ function TextView({ inst }: { inst: QmlInstance }): ReactElement {
     if (!node?.app?.fonts || !node.resolvedTextStyle) return;
     try {
       const layout = node.app.fonts.layout(text, node.resolvedTextStyle());
-      inst.slots.get('implicitWidth')?.assign(Math.ceil(layout.width));
-      inst.slots.get('implicitHeight')?.assign(Math.ceil(layout.height));
+      // The resolved size is the device one — the cascade resolves a
+      // theme's size once, at the root, in device pixels — so at scale 2 a
+      // `font.pixelSize: 20` is laid out at 40 and measured in device
+      // pixels. Divided back into the logical ones an implicit size is read
+      // in, or every binding on it reads double.
+      const s = scaleOf(node);
+      inst.slots.get('implicitWidth')?.assign(Math.ceil(layout.width / s));
+      inst.slots.get('implicitHeight')?.assign(Math.ceil(layout.height / s));
     } catch {
       // No fonts loaded (headless without the fonts option): leave 0.
     }

package/src/qml/react.tsx

@@ -175,7 +175,9 @@ export const QmlView = forwardRef(function QmlView(
 
   // Root-size feedback. `afterLayout` (not a bare effect): react-x11 lays
   // out on the frame flush, so an effect body reads the geometry of the
-  // previous pass — src/internal/timers.ts documents the shape.
+  // previous pass — src/internal/timers.ts documents the shape. The client
+  // rect, not `abs`: `abs` is device pixels, and the root's size is read in
+  // the logical ones the document and the wrapper's `style` are written in.
   const wrapRef = useRef<DrawnNode>(null);
   const rootW = root.slots.get('width');
   const rootH = root.slots.get('height');
@@ -183,10 +185,10 @@ export const QmlView = forwardRef(function QmlView(
   useEffect(() => {
     if (sized) return;
     const tick = afterLayout(() => {
-      const abs = wrapRef.current?.abs;
-      if (!abs || root.destroyed) return;
-      if (abs.width) root.slots.get('implicitWidth')?.assign(abs.width);
-      if (abs.height) root.slots.get('implicitHeight')?.assign(abs.height);
+      const box = wrapRef.current?.getClientRects()[0];
+      if (!box || root.destroyed) return;
+      if (box.width) root.slots.get('implicitWidth')?.assign(box.width);
+      if (box.height) root.slots.get('implicitHeight')?.assign(box.height);
       flushBindings();
     });
     return () => cancelAfterLayout(tick);

package/src/reorder/clock.ts

@@ -0,0 +1,27 @@
+// The drop flight's clock — the time it reads and the timer that steps it —
+// in a module of its own, so that a test can hold it.
+//
+// The flight home is wall-clock time on purpose: `dropAnimation={180}` is a
+// hundred and eighty milliseconds however many frames the machine manages.
+// That is also what makes it hard to look at. A runner slow enough to spend
+// the whole flight inside the `await` that released the item finds it
+// already landed, which is how "a drag that landed nowhere flies back"
+// failed on CI. `test/held-clock.ts` stands in for this object and nothing
+// else, so the drag, and the layout tick the flight starts from, stay real.
+//
+// Exported from this module and not from `./index.ts`: everything there is
+// the package's `./reorder` subpath, and this is for the tests.
+import { cancelLater, later } from '../internal/timers.js';
+import type { DelayTick } from '../internal/timers.js';
+
+export const flightClock = {
+  now(): number {
+    return Date.now();
+  },
+  arm(step: () => void, ms: number): DelayTick {
+    return later(step, ms);
+  },
+  disarm(handle: DelayTick): void {
+    cancelLater(handle);
+  },
+};

package/src/reorder/index.ts

@@ -47,7 +47,12 @@
 //    is over. It is one object for one gesture, never read at import time.
 //  - **The indicator, not the slide.** Neighbours do not glide out of the
 //    way: this renderer has no transform, and a line at the closest edge
-//    answers the same question for a rectangle per item. The one thing that
+//    answers the same question for a rectangle per item. That is the
+//    *default*, not a limit — an app that wants the gap instead can open one
+//    from `onDragUpdate` and let flex layout move the rows, which is what
+//    `examples/reorder.tsx`'s first list does in about twenty lines. What
+//    this component will not do is pick that for everyone: a gap costs a
+//    reflow per pointer move, and a line costs none. The one thing that
 //    does move is the drop: `dropAnimation` flies a copy of the item from
 //    where the pointer let go to where the item landed. That copy is a box
 //    **inside the item**, not the ghost popup carried on — a popup outlives
@@ -147,14 +152,11 @@ import {
 import { hx } from './hx.js';
 // Shared with <Tree> and <Table> — internal, deliberately not a shared
 // *module*; the header of src/internal/timers.ts says why. The drop flight
-// needs both: a tick after the layout that placed the item, and a clock.
-import {
-  afterLayout,
-  cancelAfterLayout,
-  cancelLater,
-  later,
-} from '../internal/timers.js';
+// needs both: a tick after the layout that placed the item, and a clock —
+// which is `./clock.ts`'s, where a test can hold it.
+import { afterLayout, cancelAfterLayout } from '../internal/timers.js';
 import type { DelayTick, LayoutTick } from '../internal/timers.js';
+import { flightClock } from './clock.js';
 import {
   closestSlot,
   insertManyAtSlot,
@@ -338,14 +340,39 @@ export interface ReorderDragStart {
 
 /** Where the drag is now. Fires on the list the item belongs to, whichever
  *  list the pointer is over — `over` is null over anything that is not a
- *  list in the group. `over.index` is the index the item would **land at**,
- *  which is what `onReorder`'s `to` and `onInsert`'s `index` will say, not
- *  the raw gap it is hovering. */
+ *  list in the group, and **only** then. `over.index` is the index the item
+ *  would **land at**, which is what `onReorder`'s `to` and `onInsert`'s
+ *  `index` will say, not the raw gap it is hovering; `over.settled` says the
+ *  drop would land there and change nothing. */
 export interface ReorderDragUpdate {
   id: ReorderId;
   ids: ReorderId[];
   from: number;
-  over: { list: string | undefined; index: number } | null;
+  over: {
+    list: string | undefined;
+    /** Where the row would **end up** — what `onReorder`'s `to` will say. */
+    index: number;
+    /**
+     * Which gap the pointer is over, counting the one before the first row
+     * as 0 and the one past the last as `length`.
+     *
+     * Not the same number as `index`, and the difference is not a detail: a
+     * row moving within its own list closes the hole it leaves behind, so
+     * dragging row 0 down onto the gap after row 1 is **slot 2** and lands
+     * at **index 1**. Draw a drop position from `index` and it sits one
+     * place too high for every downward drag and exactly right for every
+     * upward one, which is what an off-by-one that only happens half the
+     * time looks like.
+     *
+     * So: `slot` to draw *where the drop would go*, `index` to say *what
+     * the list will become*.
+     */
+    slot: number;
+    /** The drop would land here and change nothing. A position, not an
+     *  absence: the pointer is over the list, at an index it can name, and
+     *  the rows are simply already in that order. */
+    settled: boolean;
+  } | null;
   combine: ReorderId | null;
   input: ReorderInput;
 }
@@ -539,7 +566,14 @@ interface DragOver {
   listUid: string;
   list: string | undefined;
   index: number;
+  /** The gap the pointer is over. **Not** `index`: for a move within one
+   *  list the row leaves a hole behind it, so dragging row 0 down to the
+   *  gap after row 1 is slot 2 and lands at index 1. */
+  slot: number;
   combine: ReorderId | null;
+  /** The drop would land here and change nothing — the rows are already in
+   *  this order. Still a position, and still over the list. */
+  settled: boolean;
 }
 
 /**
@@ -843,11 +877,30 @@ function refuse(): boolean {
   return false;
 }
 
+/**
+ * Whether two answers say the same thing — the gate that keeps one
+ * `onDragUpdate` per *change* rather than one per pointer motion.
+ *
+ * `slot` is part of the comparison and not an afterthought: it and `index`
+ * move independently. Dragging a row down its own list, the gap after the
+ * next row and the gap after the one beyond it are slots 2 and 3, and both
+ * land the row at index 1 and 2 — but the pair (1,2) and (2,3) differ in
+ * both. Where they *don't* is at the top of a downward drag: slots 1 and 2
+ * both land at index 1, because the row closes the hole it left. Comparing
+ * on `index` alone therefore swallowed the move from slot 1 to slot 2, and a
+ * list drawing the drop as a space kept it a row too high for as long as the
+ * pointer stayed in that band — an off-by-one that looked like a rule
+ * problem and was a dropped notification.
+ */
 function sameOver(a: DragOver | null, b: DragOver | null): boolean {
   if (a === b) return true;
   if (!a || !b) return false;
   return (
-    a.listUid === b.listUid && a.index === b.index && a.combine === b.combine
+    a.listUid === b.listUid &&
+    a.index === b.index &&
+    a.slot === b.slot &&
+    a.settled === b.settled &&
+    a.combine === b.combine
   );
 }
 
@@ -1144,18 +1197,26 @@ export function ReorderList(props: ReorderListProps): ReactElement {
       ev.reject();
       return;
     }
-    // one of this list's own items, over a gap that is already its own:
-    // nothing would move, so nothing is promised
+    // One of this list's own items, over a slot it already occupies: the
+    // drop would change nothing.
     const move =
       !combining && moving.length > 0
         ? moveManyToSlot(ids, moving, slot, payload!.id)
         : null;
-    if (!combining && moving.length > 0 && move === null) {
-      mark(null);
-      if (activeDrag?.over?.listUid === uid) activeDrag.over = null;
-      return;
-    }
-    mark(at);
+    const settled = !combining && moving.length > 0 && move === null;
+    // No line: there is no insertion to point at. But the drag **is** over
+    // this list, at a position this list can name, and saying `over: null`
+    // for it conflated two different facts — "nowhere" and "here, and
+    // already in order".
+    //
+    // That conflation is visible, not theoretical. A list that draws the
+    // drop as a gap closes the gap when told `over` is null; closing it
+    // moves the rows back up; the pointer is then over a different row, so
+    // a gap opens again, which moves the rows down, which puts the pointer
+    // back over the gap. Walking a pointer down the list a step at a time,
+    // that alternates every other sample — and what it looks like is a drop
+    // target one slot away from the pointer.
+    mark(settled ? null : at);
     if (activeDrag) {
       activeDrag.over = {
         listUid: uid,
@@ -1163,7 +1224,9 @@ export function ReorderList(props: ReorderListProps): ReactElement {
         // where it would land, not the gap it is over — a same-list move
         // closes the hole it left behind, and a newcomer lands at the gap
         index: move ? move.to : slot,
+        slot,
         combine: combining,
+        settled,
       };
     }
   };
@@ -1361,7 +1424,10 @@ export function ReorderList(props: ReorderListProps): ReactElement {
         id: itemId,
         ids: move.ids,
         from,
-        over: { list: id, index: move.to },
+        // The keyboard path is not a preview: the row has already *moved*,
+        // so where it is and where it would land are the same place and
+        // there is no hole still open behind it.
+        over: { list: id, index: move.to, slot: move.to, settled: false },
         combine: null,
         input: 'keyboard',
       });
@@ -1423,7 +1489,14 @@ export function ReorderList(props: ReorderListProps): ReactElement {
       id: itemId,
       ids: payload?.ids ?? [itemId],
       from: payload?.index ?? -1,
-      over: over ? { list: over.list, index: over.index } : null,
+      over: over
+        ? {
+            list: over.list,
+            index: over.index,
+            slot: over.slot,
+            settled: over.settled,
+          }
+        : null,
       combine: over?.combine ?? null,
       input: 'pointer',
     });
@@ -1746,7 +1819,7 @@ export function ReorderItem(props: ReorderItemProps): ReactElement {
   useEffect(
     () => () => {
       cancelAfterLayout(ticks.current.layout);
-      cancelLater(ticks.current.timer);
+      flightClock.disarm(ticks.current.timer);
     },
     [],
   );
@@ -1796,9 +1869,9 @@ export function ReorderItem(props: ReorderItemProps): ReactElement {
           setFlight(null);
           return;
         }
-        const started = Date.now();
+        const started = flightClock.now();
         const stepOn = (): void => {
-          const t = Math.min((Date.now() - started) / ms, 1);
+          const t = Math.min((flightClock.now() - started) / ms, 1);
           if (t >= 1) {
             ticks.current.timer = null;
             setFlight(null);
@@ -1806,7 +1879,7 @@ export function ReorderItem(props: ReorderItemProps): ReactElement {
           }
           const left = 1 - ease(t);
           setFlight({ x: dx * left, y: dy * left });
-          ticks.current.timer = later(stepOn, FLIGHT_STEP_MS);
+          ticks.current.timer = flightClock.arm(stepOn, FLIGHT_STEP_MS);
         };
         stepOn();
       });

package/src/rich-text-editor/index.ts

@@ -50,7 +50,6 @@ import type {
 import { XK_ESCAPE, XK_KP_ENTER, XK_RETURN } from 'react-x11/keysyms';
 import { tint } from 'react-x11/style';
 import type { Style } from 'react-x11/style';
-import { toggleMark } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
 import { Fragment, Slice } from 'prosemirror-model';
 import type { Node as PMNode, Schema } from 'prosemirror-model';
@@ -80,6 +79,7 @@ import type { DropAnswer } from './drag.js';
 import { docFromHTML, htmlFromContent } from './html.js';
 import { defaultPlugins } from './keymap.js';
 import { deriveLook } from './look.js';
+import { toggleMark } from './marks.js';
 import type { MarkStyle } from './look.js';
 import { docFromText, markdownCodec, textFromDoc } from './markdown.js';
 import type { MarkdownCodec } from './markdown.js';
@@ -106,6 +106,7 @@ import type { ToolbarEntry } from './toolbar.js';
 import { RichEditorView } from './view.js';
 import type { ViewConfig, ViewProps } from './view.js';
 import { useBlockWindow } from './virtual.js';
+import { useFontPrewarm } from '../internal/prewarm.js';
 
 registerRichText();
 registerEditorElements();
@@ -384,6 +385,33 @@ interface LinkEdit {
  * />
  * ```
  */
+/**
+ * Whether the document an editor mounts with has code in it: a code span or
+ * block as markdown spells one, as HTML does, or as a node's schema says.
+ */
+function hasCode(props: RichTextEditorProps, format: EditorFormat): boolean {
+  const content = props.state?.doc ?? props.value ?? props.defaultValue;
+  if (content == null) return false;
+  if (typeof content === 'string') {
+    if (format === 'markdown') {
+      return content.includes('`') || content.includes('~~~');
+    }
+    if (format === 'html') {
+      return content.includes('<code') || content.includes('<pre');
+    }
+    return false;
+  }
+  let found = false;
+  content.descendants((node) => {
+    if (found) return false;
+    if (node.type.spec.code || node.marks.some((m) => m.type.spec.code)) {
+      found = true;
+    }
+    return !found;
+  });
+  return found;
+}
+
 export function RichTextEditor(props: RichTextEditorProps): ReactElement {
   const theme = useTheme() as unknown as Record<string, unknown>;
   const clipboard = useClipboard();
@@ -431,6 +459,11 @@ export function RichTextEditor(props: RichTextEditorProps): ReactElement {
       disabled,
     ],
   );
+  // A document that mounts with code in it sets that code in the mono
+  // family on its first frame: warmed while the editor renders, asked of
+  // the content it mounts with, once.
+  const [mountsWithCode] = useState(() => hasCode(props, format));
+  useFontPrewarm(mountsWithCode ? look.mono : null);
 
   // The editor's own plugins, made once per schema and option set — a
   // plugin instance carries its state across a reconfigure, so the undo

package/src/rich-text-editor/keymap.ts

@@ -29,7 +29,6 @@ import {
   chainCommands,
   exitCode,
   setBlockType,
-  toggleMark,
   wrapIn,
 } from 'prosemirror-commands';
 import { history, redo, undo } from 'prosemirror-history';
@@ -64,6 +63,7 @@ import {
   toggleTaskList,
 } from './commands.js';
 import { hasTables, tableRepair } from './tables.js';
+import { toggleMark } from './marks.js';
 
 // --- the event ---------------------------------------------------------------
 

package/src/rich-text-editor/keys.ts

@@ -24,14 +24,25 @@
 // key at a position, the position of a key, the node under a key — and
 // `test/rich-text-editor-model.test.ts` asks it the rest.
 import type { Node as PMNode } from 'prosemirror-model';
+import { Mapping } from 'prosemirror-transform';
 import type { Mappable } from 'prosemirror-transform';
+import { spliceAll } from '../internal/splice.js';
+
+/** A block: its key, where it starts, and the node it is. */
+interface Entry {
+  key: string;
+  pos: number;
+  node: PMNode;
+}
 
 export class BlockKeys {
   private counter = 0;
-  /** Block start position → key, for the current document. */
-  private byPos = new Map<number, string>();
-  private posByKey = new Map<string, number>();
-  private nodeByKey = new Map<string, PMNode>();
+  /** Every block, in document order — which is the order of their starts,
+   *  so a position is found by bisection. */
+  private entries: Entry[] = [];
+  private byKey = new Map<string, Entry>();
+  /** The document the entries describe. */
+  private doc: PMNode | null = null;
 
   constructor(doc: PMNode) {
     this.update(doc, null);
@@ -40,22 +51,32 @@ export class BlockKeys {
   /** How many blocks the document has — every non-inline node but the
    *  document itself. */
   get size(): number {
-    return this.byPos.size;
+    return this.entries.length;
   }
 
   /** The key of the block that starts at `pos`, if one does. */
   keyAt(pos: number): string | undefined {
-    return this.byPos.get(pos);
+    const entries = this.entries;
+    let lo = 0;
+    let hi = entries.length - 1;
+    while (lo <= hi) {
+      const mid = (lo + hi) >> 1;
+      const at = entries[mid].pos;
+      if (at === pos) return entries[mid].key;
+      if (at < pos) lo = mid + 1;
+      else hi = mid - 1;
+    }
+    return undefined;
   }
 
   /** Where the block under `key` starts now. */
   posOf(key: string): number | undefined {
-    return this.posByKey.get(key);
+    return this.byKey.get(key)?.pos;
   }
 
   /** The node the block under `key` is now. */
   nodeOf(key: string): PMNode | undefined {
-    return this.nodeByKey.get(key);
+    return this.byKey.get(key)?.node;
   }
 
   /**
@@ -63,57 +84,145 @@ export class BlockKeys {
    * transactions) that produced it from the one the keys were last built
    * for; null when nothing knows how the two relate.
    *
-   * O(blocks), which is the right order: 10,000 paragraphs is a millisecond,
-   * and the render that follows touches only the blocks whose node changed.
+   * The top-level blocks the two documents share at either end — the same
+   * node objects, which is what ProseMirror's structural sharing leaves
+   * everywhere an edit did not reach — keep their keys, and the blocks
+   * after the edit only move. What lies between is keyed as the whole
+   * document used to be, on every keystroke: a mapped start first, then a
+   * surviving node, then a fresh key. So a keystroke costs the block it
+   * lands in plus a pass that adds a number to each block after it, where
+   * it cost a walk of the document and three maps built from scratch —
+   * six milliseconds a key in a 2 MB document.
    */
   update(doc: PMNode, mapping: Mappable | null): void {
-    // 1. Where each old block's start went.
+    const was = this.doc;
+    this.doc = doc;
+    // the top-level children the two documents share at either end
+    let head = 0;
+    let tail = 0;
+    if (was) {
+      const shared = Math.min(was.childCount, doc.childCount);
+      while (head < shared && was.child(head) === doc.child(head)) head++;
+      while (
+        tail < shared - head &&
+        was.child(was.childCount - 1 - tail) ===
+          doc.child(doc.childCount - 1 - tail)
+      ) {
+        tail++;
+      }
+    }
+    let from = 0; // where the changed children start, in both documents
+    for (let i = 0; i < head; i++) from += doc.child(i).nodeSize;
+    let wasTo = from;
+    if (was) {
+      for (let i = head; i < was.childCount - tail; i++) {
+        wasTo += was.child(i).nodeSize;
+      }
+    }
+    let to = from;
+    for (let i = head; i < doc.childCount - tail; i++) {
+      to += doc.child(i).nodeSize;
+    }
+    const entries = this.entries;
+    const first = this._firstAtOrAfter(from);
+    const end = this._firstAtOrAfter(wasTo);
+    const old = entries.slice(first, end);
+
+    // 1. Where each old block's start went — nowhere, when nothing in the
+    // mapping moves a position: a mark added or taken off, an attribute set.
+    // Bold over a whole document is one step a paragraph, and mapping every
+    // block through every one of them was a third of the command.
     const carried = new Map<number, string>();
-    if (mapping) {
-      for (const [pos, key] of this.byPos) {
+    if (mapping && !movesNothing(mapping)) {
+      for (const { pos, key } of old) {
         const result = mapping.mapResult(pos, 1);
         // the token after the start is the block's own opening — gone means
         // the block is gone, merged into whatever preceded it
         if (result.deletedAfter) continue;
         if (!carried.has(result.pos)) carried.set(result.pos, key);
       }
+    } else if (mapping) {
+      for (const { pos, key } of old) {
+        if (!carried.has(pos)) carried.set(pos, key);
+      }
     }
     // 2. Which old node objects are still here, for when nothing mapped.
     const byNode = new Map<PMNode, string[]>();
     const carriedKeys = new Set(carried.values());
-    for (const [key, node] of this.nodeByKey) {
+    for (const { key, node } of old) {
       if (carriedKeys.has(key)) continue;
       const list = byNode.get(node);
       if (list) list.push(key);
       else byNode.set(node, [key]);
     }
+    for (const { key } of old) this.byKey.delete(key);
 
-    const byPos = new Map<number, string>();
-    const posByKey = new Map<string, number>();
-    const nodeByKey = new Map<string, PMNode>();
-    doc.descendants((node, pos) => {
+    // 3. The changed children, keyed.
+    const fresh: Entry[] = [];
+    const used = new Set<string>();
+    const visit = (node: PMNode, pos: number): boolean => {
       if (node.isInline) return false;
       let key = carried.get(pos);
-      if (key !== undefined && posByKey.has(key)) key = undefined;
+      if (key !== undefined && used.has(key)) key = undefined;
       if (key === undefined) {
         const list = byNode.get(node);
         while (list && list.length > 0) {
           const candidate = list.shift()!;
-          if (!posByKey.has(candidate)) {
+          if (!used.has(candidate)) {
             key = candidate;
             break;
           }
         }
       }
       if (key === undefined) key = `b${(this.counter++).toString(36)}`;
-      byPos.set(pos, key);
-      posByKey.set(key, pos);
-      nodeByKey.set(key, node);
+      used.add(key);
+      const entry = { key, pos, node };
+      fresh.push(entry);
+      this.byKey.set(key, entry);
       // a textblock's children are inline: nothing below it has a key
       return !node.isTextblock;
+    };
+    let at = from;
+    for (let i = head; i < doc.childCount - tail; i++) {
+      const child = doc.child(i);
+      if (visit(child, at)) {
+        const base = at + 1;
+        child.descendants((node, pos) => visit(node, base + pos));
+      }
+      at += child.nodeSize;
+    }
+
+    // 4. The blocks after them moved, and are otherwise as they were.
+    const shift = to - wasTo;
+    if (shift !== 0) {
+      for (let i = end; i < entries.length; i++) entries[i].pos += shift;
+    }
+    spliceAll(entries, first, end - first, fresh);
+  }
+
+  /** The index of the first block starting at or after `pos`. */
+  private _firstAtOrAfter(pos: number): number {
+    const entries = this.entries;
+    let lo = 0;
+    let hi = entries.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (entries[mid].pos < pos) lo = mid + 1;
+      else hi = mid;
+    }
+    return lo;
+  }
+}
+
+/** Whether a mapping is made only of steps that move no position. */
+function movesNothing(mapping: Mappable): boolean {
+  if (!(mapping instanceof Mapping)) return false;
+  for (const map of mapping.maps) {
+    let moved = false;
+    map.forEach(() => {
+      moved = true;
     });
-    this.byPos = byPos;
-    this.posByKey = posByKey;
-    this.nodeByKey = nodeByKey;
+    if (moved) return false;
   }
+  return true;
 }