@react-x11/components 0.9.0 → 0.11.0

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;
 }

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

@@ -27,6 +27,7 @@ import { parse } from '../internal/markdown/parse.js';
 import { stringify } from '../internal/markdown/stringify.js';
 import type {
   BlockNode,
+  Document,
   InlineNode,
   LinkInline,
   ListItem,
@@ -43,11 +44,45 @@ export interface MarkdownCodec {
 /** The codec for `schema`: the reference names, TipTap's, or both. */
 export function markdownCodec(schema: Schema): MarkdownCodec {
   return {
-    parse: (source) => docFromMarkdown(schema, source),
+    parse: markdownReader(schema),
     serialize: (doc) => markdownFromDoc(doc),
   };
 }
 
+/**
+ * `docFromMarkdown` for a document read again and again: a value that
+ * streams in, or a controlled value an app keeps handing over. Each parse
+ * resumes from the last one (`ParseOptions.previous`), which hands back
+ * the blocks it did not have to read again as the same objects, and a
+ * block seen before becomes the nodes it became then. So a word streamed
+ * into a long document converts the paragraph it lands in, and the
+ * document's other blocks are the nodes the editor already holds.
+ */
+function markdownReader(schema: Schema): (source: string) => PMNode {
+  let last: Document | null = null;
+  const converted = new WeakMap<BlockNode, PMNode[]>();
+  return (source) => {
+    const ast = parse(
+      source,
+      last ? { partial: false, previous: last } : { partial: false },
+    );
+    last = ast;
+    const blocks: PMNode[] = [];
+    for (const block of ast.blocks) {
+      let nodes = converted.get(block);
+      if (!nodes) {
+        nodes = blockToNodes(schema, block);
+        converted.set(block, nodes);
+      }
+      for (const node of nodes) blocks.push(node);
+    }
+    return (
+      schema.topNodeType.createAndFill(null, blocks) ??
+      schema.topNodeType.createAndFill()!
+    );
+  };
+}
+
 // --- names -------------------------------------------------------------------
 
 /** The spellings each thing goes by: ProseMirror's reference schemas first,

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

@@ -0,0 +1,101 @@
+// `toggleMark` from prosemirror-commands, with one difference: a mark is
+// added the way prosemirror-transform already removes one.
+//
+// Its `addMark` makes a step for each run of text that lacks the mark, and a
+// run ends where its textblock does. Bold over a document of 1,700 paragraphs
+// is 1,700 steps, and each step copies the document's top-level children:
+// quadratic in blocks, 425 ms a toggle over the sweep's 600 KB report.
+// `removeMark` joins its runs across blocks already.
+//
+// `addMarkAcross` joins consecutive inline nodes that lack the mark whatever
+// lies between them, which can only be block structure. An `AddMarkStep`
+// marks the inline nodes of its range whose parent allows the mark and leaves
+// everything else alone, and its inverse removes the mark from those same
+// nodes, every one of which lacked it. So the document, the undo, and a
+// position mapped through the transaction (a mark step maps nothing) are
+// what they were. A node that already has the mark, or cannot take it, ends
+// the run, as it did.
+
+import { toggleMark as pmToggleMark } from 'prosemirror-commands';
+import type { Attrs, Mark, MarkType } from 'prosemirror-model';
+import type { Command, EditorState } from 'prosemirror-state';
+import {
+  AddMarkStep,
+  RemoveMarkStep,
+  type Transform,
+} from 'prosemirror-transform';
+
+interface Run {
+  from: number;
+  to: number;
+}
+
+/** `tr.addMark(from, to, mark)`, one step for a run however many blocks it crosses. */
+export function addMarkAcross(
+  tr: Transform,
+  from: number,
+  to: number,
+  mark: Mark,
+): Transform {
+  const removed: Array<Run & { mark: Mark }> = [];
+  const added: Run[] = [];
+  let removing: (Run & { mark: Mark }) | null = null;
+  let adding: Run | null = null;
+  tr.doc.nodesBetween(from, to, (node, pos, parent) => {
+    if (!node.isInline) return;
+    const marks = node.marks;
+    if (
+      mark.isInSet(marks) ||
+      !parent ||
+      !parent.type.allowsMarkType(mark.type)
+    ) {
+      adding = null;
+      return;
+    }
+    const start = Math.max(pos, from);
+    const end = Math.min(pos + node.nodeSize, to);
+    // the marks this one excludes come off first, run for run as addMark does
+    const newSet = mark.addToSet(marks);
+    for (const other of marks) {
+      if (other.isInSet(newSet)) continue;
+      if (removing && removing.to === start && removing.mark.eq(other))
+        removing.to = end;
+      else removed.push((removing = { from: start, to: end, mark: other }));
+    }
+    if (adding) adding.to = end;
+    else added.push((adding = { from: start, to: end }));
+  });
+  for (const r of removed) tr.step(new RemoveMarkStep(r.from, r.to, r.mark));
+  for (const a of added) tr.step(new AddMarkStep(a.from, a.to, mark));
+  return tr;
+}
+
+/** prosemirror-commands' `toggleMark`, adding through `addMarkAcross`. */
+export function toggleMark(
+  markType: MarkType,
+  attrs: Attrs | null = null,
+  options?: Parameters<typeof pmToggleMark>[2],
+): Command {
+  const command = pmToggleMark(markType, attrs, options);
+  return (state, dispatch, view) =>
+    command(dispatch ? addingAcross(state) : state, dispatch, view);
+}
+
+/**
+ * The state as the command sees it: every transaction it starts adds marks
+ * through `addMarkAcross`. Only that transaction's own `addMark` is replaced,
+ * so nothing else in the process changes.
+ */
+function addingAcross(state: EditorState): EditorState {
+  return new Proxy(state, {
+    get(target, prop) {
+      if (prop !== 'tr') return Reflect.get(target, prop, target);
+      const tr = target.tr;
+      tr.addMark = (from: number, to: number, mark: Mark) => {
+        addMarkAcross(tr, from, to, mark);
+        return tr;
+      };
+      return tr;
+    },
+  });
+}

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

@@ -147,6 +147,53 @@ function isOrdered(list: PMNode): boolean {
   return domTagOf(list.type.spec, list)?.tag === 'ol';
 }
 
+/**
+ * The element last made for a block, by its node. A block whose node, key
+ * and surroundings are what they were gets that element back, and React
+ * bails out of an element it has rendered before without so much as
+ * comparing its props — so a keystroke reconciles the block it changed,
+ * where it made and compared an element for every block in view: a hundred
+ * of them in a long document's window. Weak, so a node nobody draws any
+ * more takes its element with it.
+ */
+const madeFor = new WeakMap<
+  PMNode,
+  {
+    key: string;
+    ctx: RenderContext;
+    bctx: BlockContext;
+    at: number;
+    register: RowProps['register'] | null;
+    element: ReactElement;
+  }
+>();
+
+function blockElement(
+  node: PMNode,
+  key: string,
+  ctx: RenderContext,
+  bctx: BlockContext,
+  at: number,
+  register: RowProps['register'] | null,
+): ReactElement {
+  const made = madeFor.get(node);
+  if (
+    made &&
+    made.key === key &&
+    made.ctx === ctx &&
+    made.bctx === bctx &&
+    made.at === at &&
+    made.register === register
+  ) {
+    return made.element;
+  }
+  const element = register
+    ? h(BlockRow, { key, blockKey: key, node, ctx, bctx, at, register })
+    : h(BlockView, { key, blockKey: key, node, ctx, bctx });
+  madeFor.set(node, { key, ctx, bctx, at, register, element });
+  return element;
+}
+
 /** The blocks inside `parent`, whose content starts at `contentStart`. */
 export function renderBlocks(
   parent: PMNode,
@@ -158,7 +205,7 @@ export function renderBlocks(
   parent.forEach((child, offset) => {
     const pos = contentStart + offset;
     const key = ctx.view.keys.keyAt(pos) ?? `p${pos}`;
-    out.push(h(BlockView, { key, blockKey: key, node: child, ctx, bctx }));
+    out.push(blockElement(child, key, ctx, bctx, -1, null));
   });
   return out;
 }
@@ -288,17 +335,7 @@ export function renderBlockRange(
   doc.forEach((child, offset, index) => {
     if (index < first || index >= last) return;
     const key = ctx.view.keys.keyAt(offset) ?? `p${offset}`;
-    out.push(
-      h(BlockRow, {
-        key,
-        blockKey: key,
-        node: child,
-        ctx,
-        bctx: PLAIN,
-        at: index,
-        register,
-      }),
-    );
+    out.push(blockElement(child, key, ctx, PLAIN, index, register));
   });
   return out;
 }

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

@@ -0,0 +1,85 @@
+// A document handed in from outside — a controlled `value`, the handle's
+// `setValue` — put into the editor.
+//
+// Replacing the whole document with it made every block a new node: each
+// one was keyed again and drawn again, and a plugin that walks what a
+// transaction changed (prosemirror-tables' `fixTables`) walked all of it. A
+// value that streams in — a model writing into the editor — did that for
+// every word it gained: 75 ms a word at 3,200 paragraphs. Pure: no React,
+// and `test/rich-text-editor-model.test.ts` asks it the rest.
+import type { Node as PMNode } from 'prosemirror-model';
+import { Selection } from 'prosemirror-state';
+import type { EditorState, Transaction } from 'prosemirror-state';
+
+/**
+ * The transaction that makes `state`'s document `doc`: a reset, as it
+ * always was. To the history, the selection and every plugin that maps a
+ * position through it, the whole document is replaced — so an undo reaches
+ * nothing from before, the draft an app just cleared included. What changes
+ * is which nodes the new document is made of: where it is the same as the
+ * old one, it is the old one's nodes, so the blocks the value left alone
+ * keep their keys and their drawn elements.
+ */
+export function replaceDocumentTr(
+  state: EditorState,
+  doc: PMNode,
+  addToHistory: boolean,
+): Transaction {
+  // First the document as itself, over the whole of it: the step the
+  // history and the mapping see, the one they always saw — every position
+  // inside the document replaced. It puts back the node objects that were
+  // there, so nothing is drawn again for it.
+  const tr = state.tr.replaceWith(0, state.doc.content.size, state.doc.content);
+  // Then the change, in steps made against the same document.
+  for (const step of changedPart(state, doc)?.steps ?? []) tr.step(step);
+  // keep the caret about where it was, inside what is there now
+  tr.setSelection(
+    Selection.near(
+      tr.doc.resolve(Math.min(state.selection.head, tr.doc.content.size)),
+    ),
+  );
+  if (!addToHistory) tr.setMeta('addToHistory', false);
+  return tr;
+}
+
+/** A transaction replacing only where `doc` differs from `state`'s
+ *  document; null when it does not. */
+function changedPart(state: EditorState, doc: PMNode): Transaction | null {
+  const before = state.doc.content;
+  const start = before.findDiffStart(doc.content);
+  if (start === null) return null;
+  let { a: endA, b: endB } = before.findDiffEnd(doc.content)!;
+  // Where the change repeats what is beside it ("aa" to "aaa"), the ends
+  // found from the back reach past the start found from the front: move
+  // both ends on by the overlap, over content the two documents share.
+  const overlap = start - Math.min(endA, endB);
+  if (overlap > 0) {
+    endA += overlap;
+    endB += overlap;
+  }
+  let tr = state.tr.replace(start, endA, doc.slice(start, endB));
+  if (tr.doc.eq(doc)) return tr;
+  // A slice that opens inside a table can be fitted into another shape than
+  // the value's. Whole blocks always fit between the ones the two documents
+  // share: the top-level blocks the change reaches, then.
+  const from = blockStart(state.doc, start);
+  tr = state.tr.replaceWith(
+    from,
+    blockEnd(state.doc, endA),
+    doc.content.cut(from, blockEnd(doc, endB)),
+  );
+  if (tr.doc.eq(doc)) return tr;
+  return state.tr.replaceWith(0, state.doc.content.size, doc.content);
+}
+
+/** Where the top-level block `pos` is in starts; `pos` itself between two. */
+function blockStart(doc: PMNode, pos: number): number {
+  const $pos = doc.resolve(pos);
+  return $pos.depth === 0 ? pos : $pos.before(1);
+}
+
+/** Where the top-level block `pos` is in ends; `pos` itself between two. */
+function blockEnd(doc: PMNode, pos: number): number {
+  const $pos = doc.resolve(pos);
+  return $pos.depth === 0 ? pos : $pos.after(1);
+}

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

@@ -30,7 +30,6 @@ import type { ReactElement, ReactNode } from 'react';
 import type { MouseEvent as X11MouseEvent } from 'react-x11';
 import { tint } from 'react-x11/style';
 import type { Style } from 'react-x11/style';
-import { toggleMark } from 'prosemirror-commands';
 import { redo, redoDepth, undo, undoDepth } from 'prosemirror-history';
 import type { Schema } from 'prosemirror-model';
 import type { Command, EditorState } from 'prosemirror-state';
@@ -48,6 +47,7 @@ import {
   toggleWrap,
 } from './commands.js';
 import type { EditorLook } from './look.js';
+import { toggleMark } from './marks.js';
 import {
   addColumnAfter,
   addColumnBefore,

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

@@ -131,11 +131,36 @@ export function useBlockWindow(inputs: BlockWindowInputs): BlockWindowState {
   }
   heights.sync(rows, estimate);
 
+  /**
+   * One drawn block into the index, for the window's trim: it drops a block
+   * only once the index knows the height it is laid out at, and a scroll
+   * reaches the blocks behind it long before `measure` below has run — so
+   * it dropped none, and a scroll through a long document kept every block
+   * it passed mounted (the flick `<Table>` and `<Tree>` had, and the same
+   * hook: `measure` on the window's inputs).
+   */
+  const measureDrawn = useCallback(
+    (id: RowKey, at: number): boolean => {
+      const drawn = nodes.current.get(id);
+      if (!drawn || drawn.at !== at || !(drawn.node.abs.height > 0)) {
+        return false;
+      }
+      heights.measure(
+        id,
+        at,
+        drawn.node.abs.height / scaleOf(drawn.node) + gapRef.current,
+      );
+      return heights.isMeasured(at);
+    },
+    [heights],
+  );
+
   const win = useVirtualWindow({
     box,
     heights,
     rows,
     exact: false,
+    measure: measureDrawn,
     virtualizing,
     overscan: DEFAULT_OVERSCAN,
     prefetch: DEFAULT_PREFETCH,