@react-x11/components 0.10.0 → 0.12.0

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/richtext/node.ts

@@ -129,6 +129,13 @@ export interface TextRun {
    *  either side of an inline box's margin, border or padding. ntk's, from
    *  8.14.2. */
   shapeApart?: boolean;
+  /** Kerned with the runs either side of it though its letter spacing is
+   *  not theirs: the spacing a justified line or `word-spacing` gives a
+   *  space is in addition to kerning and no element's (CSS Text 3, 7.2,
+   *  7.3), where a run of an element's own letter spacing is shaped apart,
+   *  as a browser shapes it. ntk's, from 8.15.0; CoreText takes a spaced
+   *  glyph's spacing in place of its pairs either way. */
+  kernAcross?: boolean;
 }
 
 /** The props `<richtext>` takes. */

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