@react-x11/components 0.10.0 → 0.11.0

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 {

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/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/terminal-output/index.ts

@@ -32,6 +32,7 @@ import { ansiPalette, parseAnsi } from '../ansi/index.js';
 import type {
   AnsiDocument,
   AnsiInput,
+  AnsiLine,
   AnsiPaletteOptions,
 } from '../ansi/index.js';
 import {
@@ -40,13 +41,13 @@ import {
   useLinkClicks,
   useSelectionMenu,
 } from '../richtext/index.js';
-import type { RichTextProps, TextRun } from '../richtext/index.js';
+import type { RichTextProps } from '../richtext/index.js';
 import {
   codeBlockLook,
   codeBlockStyle,
   codeTextStyle,
 } from '../codeblock/index.js';
-import { documentRuns } from './runs.js';
+import { linesRuns } from './runs.js';
 import { hx } from './hx.js';
 import { useFontPrewarm } from '../internal/prewarm.js';
 
@@ -56,6 +57,27 @@ const h = React.createElement;
 // the note in `../richtext/node.ts`.
 registerRichText();
 
+/**
+ * Lines a block of output holds.
+ *
+ * The output is a column of blocks rather than one element, so an append
+ * lays out again the block it lands in and not the whole capture: one
+ * `<richtext>` for all of it was laid out whole for every line appended,
+ * 0.9 s an append at 20,000 lines. A block keeps its element while its lines
+ * are the same objects, which the parser shares from one snapshot to the
+ * next. Blocks start at multiples of this in the capture's own numbering,
+ * `truncated` counted in, so `maxLines` dropping lines off the top changes
+ * only the first block.
+ */
+const BLOCK_LINES = 256;
+
+/** One block's lines, and the elements they were drawn as. */
+interface Block {
+  lines: readonly AnsiLine[];
+  output: ReactElement;
+  gutter: ReactElement | null;
+}
+
 /** What `data` accepts on top of raw bytes: a document parsed elsewhere. */
 export type TerminalOutputSource = AnsiInput | AnsiDocument;
 
@@ -273,41 +295,105 @@ export function TerminalOutput(props: TerminalOutputProps): ReactElement {
     [colors, look.color, theme.background],
   );
 
-  const runs: TextRun[] = React.useMemo(
-    () =>
-      documentRuns(document, { family: look.family, size: look.size }, palette),
-    [document, look.family, look.size, palette],
-  );
-
-  const outputProps: RichTextProps = {
-    runs,
-    style: codeTextStyle(look, wrap),
+  // Kept across renders while what a block is drawn with holds.
+  const blocks = React.useRef<{
+    look: typeof look;
+    palette: typeof palette;
+    wrap: boolean;
+    lineNumbers: boolean;
+    byIndex: Map<number, Block>;
+  } | null>(null);
+  if (
+    blocks.current?.look !== look ||
+    blocks.current.palette !== palette ||
+    blocks.current.wrap !== wrap ||
+    blocks.current.lineNumbers !== lineNumbers
+  ) {
+    blocks.current = { look, palette, wrap, lineNumbers, byIndex: new Map() };
+  }
+  const byIndex = blocks.current.byIndex;
+  const font = { family: look.family, size: look.size };
+  const outputStyle = codeTextStyle(look, wrap);
+  const gutterStyle: Style = {
+    lineHeight: look.lineHeight,
+    textAlign: 'right',
   };
-  if (!wrap) outputProps.wrap = false;
 
-  const lineCount = document.lines.length;
+  // The capture's own numbering: the first line shown is the one after
+  // every line `maxLines` has dropped.
+  const first = document.truncated;
+  const end = first + document.lines.length;
+  const outputs: ReactElement[] = [];
+  const gutters: ReactElement[] = [];
+  const kept = new Set<number>();
+  for (
+    let start = first - (first % BLOCK_LINES);
+    start < end || outputs.length === 0;
+    start += BLOCK_LINES
+  ) {
+    const index = start / BLOCK_LINES;
+    const from = Math.max(start, first) - first;
+    const to = Math.min(start + BLOCK_LINES, end) - first;
+    const lines = document.lines.slice(from, to);
+    let block = byIndex.get(index);
+    if (!block || !sameLines(block.lines, lines)) {
+      const outputProps: RichTextProps = {
+        runs: linesRuns(lines, font, palette),
+        style: outputStyle,
+      };
+      if (!wrap) outputProps.wrap = false;
+      block = {
+        lines,
+        output: h(RICHTEXT_ELEMENT, {
+          key: index,
+          ...outputProps,
+        } as Record<string, unknown>),
+        gutter: lineNumbers
+          ? h(RICHTEXT_ELEMENT, {
+              key: index,
+              // The numbers are chrome, not text: `selectable={false}` keeps
+              // them out of a drag and out of the copied text.
+              selectable: false,
+              runs: lines.map((_, i) => ({
+                text:
+                  i === lines.length - 1
+                    ? `${first + from + i + 1}`
+                    : `${first + from + i + 1}\n`,
+                family: look.family,
+                size: look.size,
+                color: look.dim,
+              })),
+              wrap: false,
+              style: gutterStyle,
+            } as Record<string, unknown>)
+          : null,
+      };
+      byIndex.set(index, block);
+    }
+    kept.add(index);
+    outputs.push(block.output);
+    if (block.gutter) gutters.push(block.gutter);
+  }
+  for (const index of byIndex.keys()) {
+    if (!kept.has(index)) byIndex.delete(index);
+  }
+
+  // One column of numbers per column of output, block beside block: the
+  // same font and line height keep them in register.
   const gutter = lineNumbers
-    ? h(RICHTEXT_ELEMENT, {
-        // One richtext for all the numbers: same font, same line height, so
-        // it stays in register with the output beside it. `selectable={false}`
-        // is what keeps it out of a drag and out of the copied text.
-        selectable: false,
-        runs: Array.from({ length: lineCount }, (_, i) => ({
-          text: i === lineCount - 1 ? `${i + 1}` : `${i + 1}\n`,
-          family: look.family,
-          size: look.size,
-          color: look.dim,
-        })),
-        wrap: false,
-        style: {
-          lineHeight: look.lineHeight,
-          textAlign: 'right',
-          minWidth:
-            Math.max(String(lineCount).length, 2) * Math.ceil(look.size * 0.62),
-          marginRight: look.padding,
-          flexShrink: 0,
+    ? hx(
+        'box',
+        {
+          style: {
+            flexDirection: 'column',
+            minWidth:
+              Math.max(String(end).length, 2) * Math.ceil(look.size * 0.62),
+            marginRight: look.padding,
+            flexShrink: 0,
+          },
         },
-      } as Record<string, unknown>)
+        ...gutters,
+      )
     : null;
 
   const rootStyle: Style = {
@@ -339,7 +425,14 @@ export function TerminalOutput(props: TerminalOutputProps): ReactElement {
     hx(
       'box',
       { style: { overflow: 'scroll', flexDirection: 'column', flexGrow: 1 } },
-      h(RICHTEXT_ELEMENT, outputProps as unknown as Record<string, unknown>),
+      ...outputs,
     ),
   );
 }
+
+/** Whether two runs of lines are the same objects, one for one. */
+function sameLines(a: readonly AnsiLine[], b: readonly AnsiLine[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}

package/src/terminal-output/runs.ts

@@ -5,7 +5,12 @@
 // parser said "ANSI 2", `../ansi/palette.ts` said which pixels that is, and
 // here it becomes a run the text layout can take.
 import { resolveAnsiColors } from '../ansi/index.js';
-import type { AnsiDocument, AnsiPalette, AnsiSpan } from '../ansi/index.js';
+import type {
+  AnsiDocument,
+  AnsiLine,
+  AnsiPalette,
+  AnsiSpan,
+} from '../ansi/index.js';
 import type { TextRun } from '../richtext/index.js';
 
 /** The font a capture is set in. The palette is separate because it changes
@@ -64,9 +69,18 @@ export function documentRuns(
   document: AnsiDocument,
   font: OutputFont,
   palette: AnsiPalette,
+): TextRun[] {
+  return linesRuns(document.lines, font, palette);
+}
+
+/** Some of a document's lines as runs, the way {@link documentRuns} makes
+ *  all of them: a block of `<TerminalOutput>`'s output. */
+export function linesRuns(
+  lines: readonly AnsiLine[],
+  font: OutputFont,
+  palette: AnsiPalette,
 ): TextRun[] {
   const runs: TextRun[] = [];
-  const { lines } = document;
   for (let i = 0; i < lines.length; i++) {
     for (const span of lines[i]!.spans) {
       if (span.text) runs.push(spanRun(span, font, palette));