@react-x11/components 0.10.0 → 0.12.0

package/src/html/surfaces.ts

@@ -8,7 +8,7 @@
 import { Surface } from 'react-x11/ntk';
 
 /** ntk's `Surface`, as this uses it. */
-interface SurfaceLike {
+export interface SurfaceLike {
   getContext(kind: '2d'): unknown;
   destroy?(): void;
 }
@@ -18,6 +18,26 @@ interface Kept {
   pixels: number;
 }
 
+/**
+ * A transparent surface of its own, the caller's to destroy once drawn: a
+ * masked element is drawn on one and composited. Null where the backend
+ * has no offscreen surface — the headless mock.
+ */
+export function newSurface(
+  app: unknown,
+  width: number,
+  height: number,
+): SurfaceLike | null {
+  try {
+    return new Surface(app as never, {
+      width,
+      height,
+    }) as unknown as SurfaceLike;
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Surfaces by key, the least recently drawn given up first once they hold
  * more than `budget` pixels. One too large for a quarter of the budget is

package/src/html/svg.ts

@@ -83,24 +83,32 @@ export function svgSizeHint(value: string): string | null {
   return m[2] ? v : `${parseFloat(m[1])}px`;
 }
 
-/** A percentage length as a fraction, or 1 for anything else. */
-function percentOf(value: string | undefined): number {
-  const v = value?.trim();
-  if (!v?.endsWith('%')) return 1;
-  const n = parseFloat(v);
-  return Number.isFinite(n) && n >= 0 ? n / 100 : 1;
-}
-
-function viewBoxOf(el: Element): [number, number, number, number] | null {
+function viewBoxParts(el: Element): [number, number, number, number] | null {
   const parts = (svgAttr(el, 'viewBox') ?? '')
     .trim()
     .split(/[\s,]+/)
     .map(Number);
   if (parts.length !== 4 || !parts.every(Number.isFinite)) return null;
-  // a zero or negative extent is an error: as though there were none
-  return parts[2] > 0 && parts[3] > 0
-    ? [parts[0], parts[1], parts[2], parts[3]]
-    : null;
+  return [parts[0], parts[1], parts[2], parts[3]];
+}
+
+function viewBoxOf(el: Element): [number, number, number, number] | null {
+  const parts = viewBoxParts(el);
+  // a zero or negative extent: as though there were none (see `drawsNothing`)
+  return parts && parts[2] > 0 && parts[3] > 0 ? parts : null;
+}
+
+/** Whether a `viewBox` with a zero width or height disables the drawing,
+ *  as SVG has it: a negative one is an error and as though there were no
+ *  `viewBox`, but a zero one is a drawing of nothing. */
+function drawsNothing(el: Element): boolean {
+  const parts = viewBoxParts(el);
+  return (
+    parts !== null &&
+    parts[2] >= 0 &&
+    parts[3] >= 0 &&
+    (parts[2] === 0 || parts[3] === 0)
+  );
 }
 
 /**
@@ -210,6 +218,7 @@ export class SvgDrawing {
     // the mock backend has no path API, and SvgView draws paths
     if (!ctx.beginPath || !ctx.rect || !ctx.clip || !ctx.fill) return;
     const root = this._root;
+    if (drawsNothing(root)) return;
     if (this._standalone) {
       // the root's background is the canvas's, and an image's canvas is
       // all of the rectangle, wherever its viewport and `viewBox` put the
@@ -222,12 +231,14 @@ export class SvgDrawing {
         ctx.fillRect(x, y, w, h);
         ctx.restore();
       }
-      // an image's root is sized in the rectangle it is drawn into, which
-      // is its viewport: `width="40%"` is two fifths of it. An inline one's
-      // percentages are its box's, already (`svgSizeHint`).
-      w *= percentOf(svgAttr(root, 'width'));
-      h *= percentOf(svgAttr(root, 'height'));
-      if (!(w > 0 && h > 0)) return;
+      // An image's root fills the rectangle it is drawn into, whatever its
+      // own `width` and `height` say: they are what its intrinsic size was
+      // read from (`svgIntrinsics`), and the rectangle is the concrete size
+      // the image was then given — a background's tile, an `<img>`'s box.
+      // Blink sizes an SVG embedded as an image to its container the same
+      // way. Drawn as two fifths of it, `width="40%"` left the rest of a
+      // `background-size: contain` empty. An inline root's percentages are
+      // its box's, already (`svgSizeHint`).
     }
     const box = viewBoxOf(root);
     // the viewport in user units, which a percentage is of

package/src/internal/codelines.ts

@@ -0,0 +1,200 @@
+// Code drawn as a column of blocks of lines, under `<Code>` and
+// `<Markdown>`'s fences.
+//
+// One `<richtext>` for a whole block of code is laid out whole whenever any
+// of it changes, and a code block that streams — a model writing a fence a
+// token at a time, a log of source — changes at its end every time: 0.4 s
+// for a line appended to 5,000 in either component. As blocks, a change
+// lays out the blocks it touches. The runs are tokenized afresh on every
+// change, so a block is kept by what it holds rather than by identity: while
+// its runs are the same text in the same styles, its element is the one
+// already drawn.
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { Style } from 'react-x11/style';
+
+import { RICHTEXT_ELEMENT } from '../richtext/index.js';
+import type { RichTextProps, TextRun } from '../richtext/index.js';
+
+const h = React.createElement;
+
+/** Lines a block of code holds. */
+export const CODE_BLOCK_LINES = 256;
+
+/**
+ * Runs split into blocks of `lines` whole lines: the text cut at every
+ * `lines`th newline, that newline left out, so the blocks stacked are the
+ * text again. A newline that ends the whole text stays in its block, where
+ * it draws the empty last line it always drew.
+ */
+export function codeBlocks(
+  runs: readonly TextRun[],
+  lines = CODE_BLOCK_LINES,
+): TextRun[][] {
+  let last = runs.length - 1;
+  while (last >= 0 && runs[last]!.text === '') last--;
+  const blocks: TextRun[][] = [];
+  let block: TextRun[] = [];
+  let count = 0;
+  for (let r = 0; r < runs.length; r++) {
+    const run = runs[r]!;
+    let from = 0;
+    let search = 0;
+    for (;;) {
+      const nl = run.text.indexOf('\n', search);
+      if (nl < 0) break;
+      search = nl + 1;
+      if (++count < lines) continue;
+      // the text's own last newline is a line of its own, and stays
+      if (r === last && nl === run.text.length - 1) break;
+      if (nl > from) block.push(piece(run, from, nl));
+      blocks.push(block);
+      block = [];
+      count = 0;
+      from = nl + 1;
+    }
+    if (from < run.text.length) {
+      block.push(from === 0 ? run : piece(run, from, run.text.length));
+    }
+  }
+  blocks.push(block);
+  return blocks;
+}
+
+function piece(run: TextRun, from: number, to: number): TextRun {
+  return { ...run, text: run.text.slice(from, to) };
+}
+
+/** Whether two runs are the same text in the same style, field for field. */
+function sameRun(a: TextRun, b: TextRun): boolean {
+  if (a === b) return true;
+  const x = a as unknown as Record<string, unknown>;
+  const y = b as unknown as Record<string, unknown>;
+  for (const key in x) if (x[key] !== y[key]) return false;
+  for (const key in y) if (!(key in x) && y[key] !== undefined) return false;
+  return true;
+}
+
+function sameRuns(a: readonly TextRun[], b: readonly TextRun[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (!sameRun(a[i]!, b[i]!)) return false;
+  return true;
+}
+
+function sameStyle(a: Style, b: Style): boolean {
+  return sameRun(a as unknown as TextRun, b as unknown as TextRun);
+}
+
+export interface CodeLinesProps {
+  runs: readonly TextRun[];
+  /** Every block's style, compared by value: a style object built afresh
+   *  each render keeps the blocks. */
+  style: Style;
+  /** `false` lays each block out unwrapped, as `<richtext>` takes it. */
+  wrap?: boolean;
+}
+
+/** The blocks' elements from the last render, and what they were built of. */
+interface Kept {
+  style: Style;
+  wrap: boolean | undefined;
+  blocks: TextRun[][];
+  elements: ReactElement[];
+}
+
+/**
+ * The runs of a block of code, drawn as blocks of lines (`codeBlocks`),
+ * each a `<richtext>` kept while its runs are the same. A selection runs
+ * across the blocks and copies as one text, since core joins text elements
+ * stacked one above the other with a newline.
+ */
+export function CodeLines(props: CodeLinesProps): ReactElement {
+  const { style, wrap } = props;
+  const kept = React.useRef<Kept | null>(null);
+  const was =
+    kept.current &&
+    kept.current.wrap === wrap &&
+    sameStyle(kept.current.style, style)
+      ? kept.current
+      : null;
+  const blocks = codeBlocks(props.runs);
+  const elements = blocks.map((block, i) => {
+    const before = was?.blocks[i];
+    if (before && sameRuns(before, block)) {
+      blocks[i] = before;
+      return was.elements[i]!;
+    }
+    const blockProps: RichTextProps = { runs: block, style };
+    if (wrap === false) blockProps.wrap = false;
+    return h(RICHTEXT_ELEMENT, {
+      key: i,
+      ...blockProps,
+    } as Record<string, unknown>);
+  });
+  kept.current = { style, wrap, blocks, elements };
+  return h(React.Fragment, null, ...elements);
+}
+
+export interface CodeGutterProps {
+  /** Lines in the code beside it. */
+  lines: number;
+  /** How a number is set: the code's family and size, a dimmer colour. */
+  run: Omit<TextRun, 'text'>;
+  style: Style;
+}
+
+/**
+ * The line numbers beside `CodeLines`, blocked the same way so that the two
+ * stay in register a block at a time, and a number not rebuilt for a line
+ * appended far below it. Each number is followed by a newline, the last as
+ * well, as the gutter always was.
+ */
+export function CodeGutter(props: CodeGutterProps): ReactElement {
+  const { lines, run, style } = props;
+  const kept = React.useRef<{
+    run: Omit<TextRun, 'text'>;
+    style: Style;
+    byStart: Map<string, ReactElement>;
+  } | null>(null);
+  if (
+    !kept.current ||
+    !sameRun(kept.current.run as TextRun, run as TextRun) ||
+    !sameStyle(kept.current.style, style)
+  ) {
+    kept.current = { run, style, byStart: new Map() };
+  }
+  const byStart = kept.current.byStart;
+  const elements: ReactElement[] = [];
+  const used = new Set<string>();
+  for (let start = 0; start < lines || start === 0; start += CODE_BLOCK_LINES) {
+    const end = Math.min(start + CODE_BLOCK_LINES, lines);
+    const key = `${start}:${end}`;
+    used.add(key);
+    let element = byStart.get(key);
+    if (!element) {
+      const runs: TextRun[] = [];
+      for (let i = start; i < end; i++) {
+        runs.push({ ...run, text: `${i + 1}\n` } as TextRun);
+      }
+      // the newline that ends a block is the gap to the next one
+      if (end < lines && runs.length > 0) {
+        const tail = runs[runs.length - 1]!;
+        runs[runs.length - 1] = { ...tail, text: tail.text.slice(0, -1) };
+      }
+      element = h(RICHTEXT_ELEMENT, {
+        key: start,
+        // The numbering is chrome, not text: `selectable={false}` keeps it
+        // out of a drag and out of the copied text.
+        selectable: false,
+        runs,
+        wrap: false,
+        style,
+      } as Record<string, unknown>);
+      byStart.set(key, element);
+    }
+    elements.push(element);
+    if (lines === 0) break;
+  }
+  for (const key of byStart.keys()) if (!used.has(key)) byStart.delete(key);
+  return h(React.Fragment, null, ...elements);
+}

package/src/internal/window.ts

@@ -99,6 +99,34 @@ const VEL_GAP_MS = 250;
  *  settle. */
 const FAST_V = 1.5;
 
+/**
+ * The window's time and its timer: what a scroll's speed is measured with,
+ * and what decides it has stopped (`IDLE_MS`) and paces the band's growth
+ * after it (`GROW_MS`). A test holds both (`holdClock` in
+ * test/held-clock.ts). On the real clock a runner that spends longer than
+ * `IDLE_MS` over one step of a flick ends the flick there, and the settle
+ * that follows measures the rows and moves the scroll by what they
+ * measured — outside the `act` the step ran in, so a look at the rows finds
+ * the new offset against the layout before it, every row a few pixels off.
+ * A test of a flick cannot tell that from rows that moved.
+ *
+ * Not the catch-up's clock: `catchupSince` is epoch milliseconds, which a
+ * scroll hint is handed as `since`. The shape of the map's `glideClock`,
+ * and exported from this module only, which has no subpath: this is for
+ * the tests.
+ */
+export const windowClock = {
+  now(): number {
+    return Date.now();
+  },
+  arm(step: () => void, ms: number): DelayTick {
+    return later(step, ms);
+  },
+  disarm(handle: DelayTick): void {
+    cancelLater(handle);
+  },
+};
+
 /** More rows than this entering the window in one render is a flood — a
  *  teleport or a hard flick — and floods build skeletons first. An ordinary
  *  notch brings in a handful and never trips this. */
@@ -302,7 +330,7 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
     // estimate adaptation) runs on.
     bump((n) => n + 1);
     if (wantsGrowth.current) {
-      idleTimer.current = later(tick, GROW_MS);
+      idleTimer.current = windowClock.arm(tick, GROW_MS);
     }
   }, []);
 
@@ -312,7 +340,7 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
       // one has no slice to rebuild, and re-rendering it on a scroll it
       // already drew would be work for nothing.
       if (!inp.current.virtualizing) return;
-      const now = Date.now();
+      const now = windowClock.now();
       const s = vel.current;
       const dt = now - s.t;
       if (dt > 0 && dt < VEL_GAP_MS) {
@@ -325,8 +353,8 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
       s.t = now;
       s.top = top;
       active.current = true;
-      cancelLater(idleTimer.current);
-      idleTimer.current = later(tick, IDLE_MS);
+      windowClock.disarm(idleTimer.current);
+      idleTimer.current = windowClock.arm(tick, IDLE_MS);
       setView((prev) => (prev.top === top ? prev : { ...prev, top }));
     },
     [tick],
@@ -365,13 +393,13 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
   // idle delay to fill them in would be a visible pause.
   useEffect(() => {
     if (hasSkeletons.current) {
-      cancelLater(idleTimer.current);
-      idleTimer.current = later(tick, GROW_MS);
+      windowClock.disarm(idleTimer.current);
+      idleTimer.current = windowClock.arm(tick, GROW_MS);
     } else if (wantsGrowth.current && idleTimer.current === null) {
-      idleTimer.current = later(tick, IDLE_MS);
+      idleTimer.current = windowClock.arm(tick, IDLE_MS);
     }
   });
-  useEffect(() => () => cancelLater(idleTimer.current), []);
+  useEffect(() => () => windowClock.disarm(idleTimer.current), []);
 
   const {
     heights,

package/src/markdown/index.ts

@@ -62,7 +62,7 @@ import {
 import type { RichTextProps, TextRun } from '../richtext/index.js';
 import {
   codeBlockLook,
-  codeBlockRuns,
+  CodeBlockRunCache,
   codeBlockStyle,
   codeTextStyle,
 } from '../codeblock/index.js';
@@ -77,6 +77,7 @@ import { runsOf, plainTextOf } from './spans.js';
 import type { InlineStyles } from './spans.js';
 import { useLinkClicks } from '../richtext/index.js';
 import { hx } from './hx.js';
+import { CodeLines } from '../internal/codelines.js';
 import { useFontPrewarm } from '../internal/prewarm.js';
 
 export type {
@@ -499,24 +500,57 @@ function renderCode(
       custom({ lang, text, partial: ctx.live === true }),
     );
   }
-  const code = ctx.look.code;
-  const runs = codeBlockRuns(text, code, {
+  return h(CodeFence, {
+    key,
+    text,
     lang,
+    look: ctx.look.code,
     highlight: ctx.look.highlight,
-    ...(ctx.resolveLanguage ? { resolveLanguage: ctx.resolveLanguage } : null),
+    resolveLanguage: ctx.resolveLanguage,
+  });
+}
+
+interface CodeFenceProps {
+  text: string;
+  lang: string;
+  look: CodeBlockLook;
+  highlight: boolean;
+  resolveLanguage?: MarkdownProps['resolveLanguage'];
+}
+
+/**
+ * A fenced block of code. A component rather than a render function so
+ * that it keeps a tokenizer between renders (`CodeBlockRunCache`): a fence
+ * being streamed is tokenized again from the line that changed, where it
+ * was tokenized whole for every token a model wrote.
+ */
+function CodeFence(props: CodeFenceProps): ReactElement {
+  const { text, lang, look, highlight, resolveLanguage } = props;
+  const cache = React.useRef<CodeBlockRunCache | null>(null);
+  cache.current ??= new CodeBlockRunCache();
+  React.useEffect(() => () => cache.current?.dispose(), []);
+  const runs = cache.current.runs(text, look, {
+    lang,
+    highlight,
+    ...(resolveLanguage ? { resolveLanguage } : null),
   });
   // The block scrolls horizontally rather than wrapping — code is code.
   return hx(
     'box',
     {
-      key,
       style: {
-        ...codeBlockStyle(code),
+        ...codeBlockStyle(look),
         overflow: 'scroll',
         flexDirection: 'column',
       },
     },
-    richtext('code', runs, codeTextStyle(code, false), false),
+    // in blocks of lines, so a fence that streams lays out the block its
+    // new lines land in (`../internal/codelines.ts`)
+    h(CodeLines, {
+      runs,
+      style: codeTextStyle(look, false),
+      wrap: false,
+    }),
   );
 }
 
@@ -609,35 +643,100 @@ function renderTable(
   ctx: RenderCtx,
   key: number,
 ): ReactNode {
-  const look = ctx.look;
+  return h(MarkdownTable, { key, table, look: ctx.look, fonts: ctx.fonts });
+}
+
+interface MarkdownTableProps {
+  table: TableBlock;
+  look: Look;
+  fonts: FontsMeasureLike | null;
+}
+
+/** What a table keeps between renders. */
+interface TableKept {
+  look: Look;
+  fonts: FontsMeasureLike | null;
+  /** Each cell's measured width, by what the cell holds. */
+  widthOf: Map<string, number>;
+  /** The column widths the rows were built at. */
+  widths: string;
+  /** Each row's element, by where it is and what it holds. */
+  rows: Map<string, ReactElement>;
+}
+
+/**
+ * A table. A component rather than a render function so that it keeps its
+ * rows between renders: a table that streams is a block whose source
+ * changes with every row, and it was measured cell by cell and rebuilt row
+ * by row for each — 115 ms a row at 800 rows, laying every row out again.
+ * Now a cell is measured once for what it holds, and a row keeps its
+ * element while it holds the same cells at the same column widths.
+ */
+function MarkdownTable(props: MarkdownTableProps): ReactElement {
+  const { table, look, fonts } = props;
   const size = look.inline.size;
   const padX = Math.round(size * 0.6);
   const padY = Math.round(size * 0.35);
   const cols = table.align.length;
 
+  const keptRef = React.useRef<TableKept | null>(null);
+  if (
+    !keptRef.current ||
+    keptRef.current.look !== look ||
+    keptRef.current.fonts !== fonts
+  ) {
+    keptRef.current = {
+      look,
+      fonts,
+      widthOf: new Map(),
+      widths: '',
+      rows: new Map(),
+    };
+  }
+  const kept = keptRef.current;
+
   // Column widths: max-content per column, measured through the app's font
   // manager, capped so one long cell cannot starve the rest. Without a
   // font manager (the mock backend) an even fallback keeps the shape.
   const widths: number[] = new Array<number>(cols).fill(0);
-  const headStyles = inlineStyles(ctx, { weight: 700 });
-  const measure = (cells: InlineNode[][], s: InlineStyles): void => {
+  const headStyles: InlineStyles = { ...look.inline, weight: 700 };
+  const widthOf = new Map<string, number>();
+  const measure = (
+    cells: InlineNode[][],
+    s: InlineStyles,
+    head: boolean,
+  ): string[] => {
+    const keys: string[] = [];
     for (let c = 0; c < cols; c += 1) {
-      let w: number;
-      if (ctx.fonts) {
-        w = ctx.fonts.layout(runsOf(cells[c], s), {
-          family: s.family,
-          size: s.size,
-        }).width;
-      } else {
-        w = plainTextOf(cells[c]).length * size * 0.55;
+      const cellKey = `${head ? 'h' : 'b'}${JSON.stringify(cells[c])}`;
+      keys.push(cellKey);
+      let w = widthOf.get(cellKey) ?? kept.widthOf.get(cellKey);
+      if (w === undefined) {
+        if (fonts) {
+          w = fonts.layout(runsOf(cells[c], s), {
+            family: s.family,
+            size: s.size,
+          }).width;
+        } else {
+          w = plainTextOf(cells[c]).length * size * 0.55;
+        }
       }
+      widthOf.set(cellKey, w);
       widths[c] = Math.max(widths[c], Math.min(Math.ceil(w), size * 26));
     }
+    return keys;
   };
-  measure(table.header, headStyles);
-  for (const row of table.rows) measure(row, look.inline);
+  const headKeys = measure(table.header, headStyles, true);
+  const rowKeys = table.rows.map((row) => measure(row, look.inline, false));
+  kept.widthOf = widthOf;
   for (let c = 0; c < cols; c += 1)
     widths[c] = Math.max(widths[c] + padX * 2 + 2, size * 2.5);
+  // a column that grew is every row laid out again
+  const widthsKey = `${widths.join(',')}|${table.align.join(',')}`;
+  if (widthsKey !== kept.widths) {
+    kept.widths = widthsKey;
+    kept.rows = new Map();
+  }
 
   // Nothing here says "these are cells and those are rows": a copy reads the
   // boxes below, where two cells share a band of pixels and the next row
@@ -648,7 +747,7 @@ function renderTable(
     rowKey: string | number,
     bg?: string,
     divided?: boolean,
-  ): ReactNode =>
+  ): ReactElement =>
     hx(
       'box',
       {
@@ -676,17 +775,37 @@ function renderTable(
       ),
     );
 
-  const children: ReactNode[] = [];
-  children.push(renderRow(table.header, headStyles, 'h', look.headerBg));
-  table.rows.forEach((row, r) => {
-    children.push(renderRow(row, look.inline, r, undefined, true));
+  const rows = new Map<string, ReactElement>();
+  const row = (
+    id: string,
+    cellKeys: string[],
+    make: () => ReactElement,
+  ): ReactElement => {
+    const rowKey = `${id}|${cellKeys.join('|')}`;
+    const element = kept.rows.get(rowKey) ?? make();
+    rows.set(rowKey, element);
+    return element;
+  };
+  const children: ReactElement[] = [];
+  children.push(
+    row('h', headKeys, () =>
+      renderRow(table.header, headStyles, 'h', look.headerBg),
+    ),
+  );
+  table.rows.forEach((cells, r) => {
+    children.push(
+      row(String(r), rowKeys[r]!, () =>
+        renderRow(cells, look.inline, r, undefined, true),
+      ),
+    );
   });
+  kept.rows = rows;
 
   // A wide table scrolls inside its own viewport instead of forcing the
   // document wider (the root stays vertical-only).
   return hx(
     'box',
-    { key, style: { overflow: 'scroll', flexDirection: 'column' } },
+    { style: { overflow: 'scroll', flexDirection: 'column' } },
     hx(
       'box',
       {

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

@@ -53,7 +53,7 @@ import type { Style } from 'react-x11/style';
 import { redo, undo } from 'prosemirror-history';
 import { Fragment, Slice } from 'prosemirror-model';
 import type { Node as PMNode, Schema } from 'prosemirror-model';
-import { EditorState, Selection } from 'prosemirror-state';
+import { EditorState } from 'prosemirror-state';
 import type { Command, Plugin, Transaction } from 'prosemirror-state';
 import type { EditorProps, EditorView } from 'prosemirror-view';
 
@@ -85,6 +85,7 @@ import { docFromText, markdownCodec, textFromDoc } from './markdown.js';
 import type { MarkdownCodec } from './markdown.js';
 import { registerEditorElements, ROOT_ELEMENT, TEXT_ELEMENT } from './nodes.js';
 import { renderBlockRange, renderBlocks } from './render.js';
+import { replaceDocumentTr } from './replace.js';
 import type { ImageInfo, NodeViewProps, RenderContext } from './render.js';
 import type { RunStyle } from './inline.js';
 import { schema as defaultSchema } from './schema.js';
@@ -338,16 +339,7 @@ function replaceDocument(
   doc: PMNode,
   addToHistory: boolean,
 ): void {
-  const { state } = view;
-  const tr = state.tr.replaceWith(0, state.doc.content.size, doc.content);
-  // 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);
-  view.dispatch(tr);
+  view.dispatch(replaceDocumentTr(view.state, doc, addToHistory));
 }
 
 function inListOrCode(state: EditorState): boolean {