ompchamber 0.6.0 → 0.8.0

package/src/client/components/common/code-editor/index.tsx

@@ -1,6 +1,17 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 import type { CSSProperties, Ref, TargetedKeyboardEvent } from 'preact';
 
+import {
+  continuesTyping,
+  createHistory,
+  mergeTyping,
+  pushEdit,
+  pushRecord,
+  stepHistory,
+  type HistoryRecord,
+} from '@/client/components/common/code-editor/history';
+import type { CodeWindow, LineWindow } from '@/shared/lib/code/lazy-window';
+
 /**
  * Preact hand-roll of the textarea-over-<pre> highlighting editor
  * (the pattern react-simple-code-editor popularized), trimmed to the
@@ -9,28 +20,18 @@ import type { CSSProperties, Ref, TargetedKeyboardEvent } from 'preact';
  * How it works: a transparent <textarea> sits on top of a syntax-highlighted
  * <pre>. Typing, selecting and copying hit the native textarea; the <pre>
  * below just mirrors the text with Shiki markup.
+ *
+ * For a long document only a window of lines is mirrored (`virtual`): the
+ * textarea still holds every line, so editing, selection and copy are
+ * untouched, while the `<pre>` carries just the visible ones and reserves the
+ * rest as padding — the alignment that keeps the caret over its own row.
  */
 
-const HISTORY_LIMIT = 100;
-const HISTORY_TIME_GAP = 3000;
-
-interface HistoryRecord {
-  value: string;
-  selectionStart: number;
-  selectionEnd: number;
-  timestamp: number;
-}
-
-interface History {
-  stack: HistoryRecord[];
-  offset: number;
-}
-
 export interface CodeEditorProps {
   value: string;
   onValueChange: (value: string) => void;
-  /** Return the Shiki-highlighted HTML for the given code. */
-  highlight: (code: string) => string;
+  /** Return the Shiki-highlighted HTML for `code`, limited to `range` when the surface is windowed. */
+  highlight: (code: string, range: LineWindow | null) => string;
   padding?: number;
   /** Class applied to the inner <pre> holding the highlighted code. */
   preClassName?: string;
@@ -44,6 +45,8 @@ export interface CodeEditorProps {
   placeholder?: string;
   readOnly?: boolean;
   autoFocus?: boolean;
+  /** Renders only this window of lines, with the rest reserved as space. Omit to mirror the whole value. */
+  virtual?: CodeWindow | null;
 }
 
 const BASE_TEXTAREA_CLASS = 'code-editor-native-textarea';
@@ -80,9 +83,10 @@ export function CodeEditor({
   placeholder,
   readOnly,
   autoFocus,
+  virtual,
 }: CodeEditorProps) {
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
-  const historyRef = useRef<History>({ stack: [], offset: -1 });
+  const historyRef = useRef(createHistory());
   const [captureTab, setCaptureTab] = useState(true);
 
   // Re-record when the controlled value is replaced from the outside
@@ -90,18 +94,12 @@ export function CodeEditor({
   useEffect(() => {
     const input = inputRef.current;
     if (!input) return;
-    const record: HistoryRecord = {
+    pushRecord(historyRef.current, {
       value: input.value,
       selectionStart: input.selectionStart,
       selectionEnd: input.selectionEnd,
       timestamp: Date.now(),
-    };
-    const { stack, offset } = historyRef.current;
-    if (stack.length && offset > -1) {
-      historyRef.current.stack = stack.slice(0, offset + 1);
-    }
-    historyRef.current.stack.push(record);
-    historyRef.current.offset = historyRef.current.stack.length - 1;
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
@@ -109,19 +107,15 @@ export function CodeEditor({
     const input = inputRef.current;
     const last = historyRef.current.stack[historyRef.current.offset];
     if (last && input) {
+      // The entry on top is about to be superseded: keep where its caret was,
+      // so undo returns to the selection this edit replaced.
       historyRef.current.stack[historyRef.current.offset] = {
         ...last,
         selectionStart: input.selectionStart,
         selectionEnd: input.selectionEnd,
       };
     }
-    historyRef.current.stack.push({ ...record, timestamp: Date.now() });
-    historyRef.current.offset = historyRef.current.stack.length - 1;
-    if (historyRef.current.stack.length > HISTORY_LIMIT) {
-      const extras = historyRef.current.stack.length - HISTORY_LIMIT;
-      historyRef.current.stack = historyRef.current.stack.slice(extras);
-      historyRef.current.offset = Math.max(historyRef.current.offset - extras, 0);
-    }
+    pushEdit(historyRef.current, { ...record, timestamp: Date.now() });
     onValueChange(record.value);
     if (input) {
       input.value = record.value;
@@ -220,14 +214,12 @@ export function CodeEditor({
     const undoKey = isMac ? e.metaKey && e.key.toLowerCase() === 'z' : e.ctrlKey && e.key.toLowerCase() === 'z';
     if (undoKey && !e.shiftKey && !e.altKey) {
       e.preventDefault();
-      const { stack, offset } = historyRef.current;
-      const record = stack[offset - 1];
+      const record = stepHistory(historyRef.current, 'undo');
       if (record && inputRef.current) {
         inputRef.current.value = record.value;
         inputRef.current.selectionStart = record.selectionStart;
         inputRef.current.selectionEnd = record.selectionEnd;
         onValueChange(record.value);
-        historyRef.current.offset = Math.max(offset - 1, 0);
       }
       return;
     }
@@ -239,14 +231,12 @@ export function CodeEditor({
         : e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'z';
     if (redoKey && !e.altKey) {
       e.preventDefault();
-      const { stack, offset } = historyRef.current;
-      const record = stack[offset + 1];
+      const record = stepHistory(historyRef.current, 'redo');
       if (record && inputRef.current) {
         inputRef.current.value = record.value;
         inputRef.current.selectionStart = record.selectionStart;
         inputRef.current.selectionEnd = record.selectionEnd;
         onValueChange(record.value);
-        historyRef.current.offset = Math.min(offset + 1, stack.length - 1);
       }
       return;
     }
@@ -261,37 +251,18 @@ export function CodeEditor({
   const handleChange = (e: Event) => {
     const input = e.target as HTMLTextAreaElement;
     const { value: next, selectionStart, selectionEnd } = input;
-    const { stack, offset } = historyRef.current;
+    const history = historyRef.current;
     const timestamp = Date.now();
-    if (stack.length && offset > -1) {
-      historyRef.current.stack = stack.slice(0, offset + 1);
-    }
-    const last = historyRef.current.stack[historyRef.current.offset];
     // Merge typing bursts into one word-level undo entry.
-    if (last && timestamp - last.timestamp < HISTORY_TIME_GAP) {
-      const re = /[^a-z0-9]([a-z0-9]+)$/i;
-      const previous = getLines(last.value, last.selectionStart).pop()?.match(re);
-      const current = getLines(next, selectionStart).pop()?.match(re);
-      if (previous?.[1] && current?.[1]?.startsWith(previous[1])) {
-        historyRef.current.stack[historyRef.current.offset] = { value: next, selectionStart, selectionEnd, timestamp };
-        onValueChange(next);
-        return;
-      }
+    if (continuesTyping(history.stack[history.offset], next, selectionStart, timestamp)) {
+      mergeTyping(history, next, selectionStart, selectionEnd, timestamp);
+      onValueChange(next);
+      return;
     }
-    historyRef.current.stack.push({ value: next, selectionStart, selectionEnd, timestamp });
-    historyRef.current.offset = historyRef.current.stack.length - 1;
+    pushRecord(history, { value: next, selectionStart, selectionEnd, timestamp });
     onValueChange(next);
   };
 
-  const contentStyle: CSSProperties = {
-    paddingTop: padding,
-    paddingRight: padding,
-    paddingBottom: padding,
-    paddingLeft: padding,
-  };
-
-  const highlighted = highlight(value);
-
   const layerStyle: CSSProperties = {
     margin: 0,
     border: 0,
@@ -314,14 +285,33 @@ export function CodeEditor({
     overflowWrap: 'break-word',
   };
 
+  // The textarea owns the full document, so its padding is the plain inset and
+  // its lines land exactly where the geometry says line 0 starts.
+  const contentStyle: CSSProperties = {
+    paddingTop: padding,
+    paddingRight: padding,
+    paddingBottom: padding,
+    paddingLeft: padding,
+  };
+
+  // The `<pre>` carries only the window; the lines it is not given are reserved
+  // as padding, so the aligned layers stay aligned.
+  const windowStyle: CSSProperties = {
+    ...contentStyle,
+    paddingTop: padding + (virtual?.top ?? 0),
+    paddingBottom: padding + (virtual?.bottom ?? 0),
+  };
+
+  const highlighted = highlight(value, virtual ?? null);
+
   return (
     <div className={className} style={{ position: 'relative', textAlign: 'left', boxSizing: 'border-box', padding: 0, overflow: 'hidden', ...style }}>
       <pre
         ref={preRef}
         className={preClassName}
         aria-hidden="true"
-        style={{ ...layerStyle, ...contentStyle, position: 'relative', pointerEvents: 'none' }}
-        dangerouslySetInnerHTML={{ __html: highlighted + '<br />' }}
+        style={{ ...layerStyle, ...windowStyle, position: 'relative', pointerEvents: 'none' }}
+        dangerouslySetInnerHTML={{ __html: highlighted + (virtual && !virtual.breakAtEnd ? '' : '<br />') }}
       />
       <textarea
         ref={inputRef}

package/src/client/components/common/code-surface/index.tsx

@@ -1,13 +1,30 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
 import type { CSSProperties } from 'preact';
+
 import { CodeEditor } from '@/client/components/common/code-editor';
-import { measureWrappedLines, type WrappedLines } from '@/client/components/common/code-surface/measure';
-import { highlightCode } from '@/shared/lib/code/syntax-highlight';
+import { measureRowHeight, measureWrappedLines, type WrappedLines } from '@/client/components/common/code-surface/measure';
+import { useCodeWindow } from '@/client/hooks/editor/use-code-window';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import {
+  measuredGeometry,
+  shouldWindow,
+  uniformGeometry,
+  type LineGeometry,
+  type LineWindow,
+} from '@/shared/lib/code/lazy-window';
+import { highlightCode } from '@/shared/lib/code/syntax-highlight';
+import { highlightCodeWindow } from '@/shared/lib/code/windowed-highlight';
 
 const WRAP_ON = '!whitespace-pre-wrap !break-words';
 const WRAP_OFF = '!whitespace-pre !break-normal';
 
+/** Line count without materializing every line — a 20 000-line value per render is a megabyte of strings. */
+function countLines(text: string): number {
+  let count = 1;
+  for (let index = text.indexOf('\n'); index !== -1; index = text.indexOf('\n', index + 1)) count++;
+  return count;
+}
+
 interface CodeSurfaceProps {
   value: string;
   onValueChange: (value: string) => void;
@@ -47,6 +64,12 @@ function sameWrappedLines(previous: WrappedLines | null, next: WrappedLines | nu
  * The gutter spaces its numbers from the editor's measured wrap layout: with
  * word wrap on, a long line covers several rows and every number below it has
  * to move down by the same amount.
+ *
+ * A long document is drawn lazily: only the lines inside the scroll container's
+ * viewport are highlighted and numbered, and the space of everything else is
+ * reserved from the same geometry the caret is aligned to. That keeps opening a
+ * 20 000-line file from spending minutes in the tokenizer, and a keystroke in it
+ * from re-tokenizing the file at all.
  */
 export function CodeSurface({
   value,
@@ -64,16 +87,29 @@ export function CodeSurface({
 }: CodeSurfaceProps) {
   const wrapClass = wordWrap ? WRAP_ON : WRAP_OFF;
   const preRef = useRef<HTMLPreElement | null>(null);
+  const rootRef = useRef<HTMLDivElement | null>(null);
   const [wrapped, setWrapped] = useState<WrappedLines | null>(null);
+  const [rowHeight, setRowHeight] = useState<number | null>(null);
+  /** Lines the last measurement pass described; -1 before the first one runs. */
+  const [measuredLines, setMeasuredLines] = useState(-1);
   useSyntaxReady();
 
+  const lineCount = useMemo(() => countLines(value), [value]);
+
   // Re-measured on the inputs that move a wrap point: the text, the wrap
   // preference, and the editor's font size / padding.
   const measure = useCallback(() => {
     const pre = preRef.current;
-    const next = wordWrap && pre ? measureWrappedLines(pre, value) : null;
+    if (!pre) return;
+    // Wrapped heights are only needed with word wrap on; without it every line
+    // is one row and the row height alone describes the document.
+    const next = wordWrap ? measureWrappedLines(pre, value) : null;
     setWrapped((previous) => (sameWrappedLines(previous, next) ? previous : next));
-  }, [value, wordWrap, editorPadding, editorStyle?.fontSize]);
+    const height = next?.rowHeight ?? measureRowHeight(pre);
+    setRowHeight((previous) => (previous === height ? previous : height));
+    setMeasuredLines(lineCount);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, lineCount, wordWrap, editorPadding, editorStyle?.fontSize]);
 
   useLayoutEffect(() => {
     measure();
@@ -92,16 +128,52 @@ export function CodeSurface({
     return () => observer.disconnect();
   }, []);
 
+  const geometry = useMemo<LineGeometry | null>(() => {
+    if (rowHeight === null) return null;
+    return wrapped
+      ? measuredGeometry(wrapped.heights, wrapped.rowHeight, lineCount)
+      : uniformGeometry(rowHeight, lineCount);
+  }, [rowHeight, wrapped, lineCount]);
+
+  // Windowing costs a scroll listener and a spacer; a document short enough to
+  // draw in one pass keeps the plain surface.
+  const lazy = shouldWindow(lineCount, value.length);
+  const virtual = useCodeWindow({
+    rootRef,
+    lineCount,
+    geometry,
+    // A document whose geometry could not be measured still falls back to the
+    // plain surface — but one whose measurement has not run *yet* must not:
+    // that path would draw the whole file, which is what windowing exists to
+    // avoid. `measuredLines` is why switching files (which leaves a geometry
+    // for the previous document behind) does not take it either.
+    enabled: lazy && (measuredLines !== lineCount || geometry !== null),
+  });
+
+  const highlight = useCallback(
+    (code: string, range: LineWindow | null) =>
+      range ? highlightCodeWindow(code, language, range) : highlightCode(code, language),
+    [language],
+  );
+
+  const firstLine = virtual ? virtual.start : 0;
+  const lastLine = virtual ? Math.min(virtual.end, lineCount) : lineCount;
+  const rows: number[] = [];
+  for (let i = firstLine; i < lastLine; i++) rows.push(i);
+  // Row heights are only usable for the document they were measured against.
+  const lineHeights = wrapped && wrapped.heights.length === lineCount ? wrapped.heights : null;
+
   return (
-    <div className={rootClassName}>
+    <div className={rootClassName} ref={rootRef}>
       <div className={gutterClassName} style={gutterStyle}>
-        {value.split('\n').map((_, i) => (
+        {virtual && virtual.top > 0 ? <div style={{ height: virtual.top, flexShrink: 0 }} aria-hidden="true" /> : null}
+        {rows.map((index) => (
           <div
-            key={i + 1}
+            key={index + 1}
             className={gutterLineClassName}
-            style={wrapped ? { height: wrapped.heights[i], flexShrink: 0 } : undefined}
+            style={lineHeights ? { height: lineHeights[index], flexShrink: 0 } : undefined}
           >
-            {i + 1}
+            {index + 1}
           </div>
         ))}
       </div>
@@ -109,13 +181,14 @@ export function CodeSurface({
         <CodeEditor
           value={value}
           onValueChange={onValueChange}
-          highlight={(code) => highlightCode(code, language)}
+          highlight={highlight}
           padding={editorPadding}
           preRef={preRef}
           textareaClassName={`focus:outline-none ${wrapClass}`}
           preClassName={wrapClass}
           style={editorStyle}
           className={editorClassName}
+          virtual={virtual}
         />
       </div>
     </div>

package/src/client/components/common/code-surface/measure.ts

@@ -8,6 +8,11 @@
  * width the editor actually got — so it is measured rather than estimated: the
  * same lines are laid out once in a hidden mirror that copies the editor's
  * typography, and each line's height is read back.
+ *
+ * Measuring every line on every keystroke is linear in the document, which no
+ * long file can afford, so heights are cached per line *text*: an edit re-reads
+ * the one line it touched, and a document whose lines all fit on one row is
+ * never mirrored at all.
  */
 
 /**
@@ -34,6 +39,13 @@ const MIRRORED_PROPERTIES = [
   'wordSpacing',
 ] as const;
 
+/**
+ * Newest-first ceiling on the height cache. A long editing session mints one
+ * entry per keystroke, so the oldest entries are dropped once it is reached;
+ * whatever leaves the cache is simply measured again on the next pass.
+ */
+const HEIGHT_CACHE_LIMIT = 100_000;
+
 export interface WrappedLines {
   /** Height in px of a single visual row. */
   rowHeight: number;
@@ -43,6 +55,11 @@ export interface WrappedLines {
 
 let mirrorHost: HTMLDivElement | null = null;
 let mirrorLines: HTMLDivElement[] = [];
+/** The column the cached heights were measured in; a new one re-wraps every line. */
+let mirrorSignature = '';
+const heightByLine = new Map<string, number>();
+/** Line indexes awaiting a mirror read this pass; reused to keep the pass allocation-free. */
+const pendingLines: number[] = [];
 
 /** Off-screen mirror, reused across measurements (one per page). */
 function getMirrorHost(): HTMLDivElement {
@@ -57,16 +74,22 @@ function getMirrorHost(): HTMLDivElement {
   return mirrorHost;
 }
 
+/** Height in px of `source`'s line box, or null while it cannot be measured (SSR, `line-height: normal`). */
+export function measureRowHeight(source: HTMLPreElement): number | null {
+  if (typeof document === 'undefined' || !source.isConnected) return null;
+  const rowHeight = Number.parseFloat(getComputedStyle(source).lineHeight);
+  return Number.isFinite(rowHeight) && rowHeight > 0 ? rowHeight : null;
+}
+
 /**
  * Height each line of `value` occupies in `source`'s wrap layout, or null when
  * the layout is not measurable yet (SSR, zero width, unresolved line-height) —
  * callers then fall back to one row per line.
  */
 export function measureWrappedLines(source: HTMLPreElement, value: string): WrappedLines | null {
-  if (typeof document === 'undefined' || !source.isConnected) return null;
+  const rowHeight = measureRowHeight(source);
+  if (rowHeight === null) return null;
   const computed = getComputedStyle(source);
-  const rowHeight = Number.parseFloat(computed.lineHeight);
-  if (!Number.isFinite(rowHeight) || rowHeight <= 0) return null;
   // The editor's text column: its padding is the gutter's offset, not text area.
   const width =
     source.clientWidth -
@@ -79,21 +102,47 @@ export function measureWrappedLines(source: HTMLPreElement, value: string): Wrap
   host.style.lineHeight = `${rowHeight}px`;
   host.style.width = `${width}px`;
 
+  const signature = `${width}|${rowHeight}|${MIRRORED_PROPERTIES.map((property) => computed[property]).join('|')}`;
+  if (signature !== mirrorSignature) {
+    mirrorSignature = signature;
+    heightByLine.clear();
+  }
+
   const lines = value.split('\n');
-  while (mirrorLines.length > lines.length) mirrorLines.pop()?.remove();
-  while (mirrorLines.length < lines.length) {
-    const line = document.createElement('div');
-    host.appendChild(line);
-    mirrorLines.push(line);
+  const heights = new Array<number>(lines.length);
+  let pending = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const cached = heightByLine.get(lines[i]);
+    if (cached === undefined) pendingLines[pending++] = i;
+    else heights[i] = cached;
   }
-  // Write the whole text first, then read the whole layout: interleaving the
-  // two would force a re-layout per line.
-  for (let i = 0; i < lines.length; i++) mirrorLines[i].textContent = lines[i];
-  const heights = mirrorLines.map((line) => {
-    const height = line.getBoundingClientRect().height;
-    // An empty line has no line box at all, and sub-pixel wrapping would
-    // otherwise leave the gutter fractions of a row out of step.
-    return height > rowHeight ? Math.round(height / rowHeight) * rowHeight : rowHeight;
-  });
+
+  if (pending > 0) {
+    while (mirrorLines.length < pending) {
+      const line = document.createElement('div');
+      host.appendChild(line);
+      mirrorLines.push(line);
+    }
+    // Write the whole batch first, then read the whole layout: interleaving the
+    // two would force a re-layout per line.
+    for (let k = 0; k < pending; k++) mirrorLines[k].textContent = lines[pendingLines[k]];
+    for (let k = 0; k < pending; k++) {
+      const index = pendingLines[k];
+      const height = mirrorLines[k].getBoundingClientRect().height;
+      // An empty line has no line box at all, and sub-pixel wrapping would
+      // otherwise leave the gutter fractions of a row out of step.
+      const rows = height > rowHeight ? Math.round(height / rowHeight) * rowHeight : rowHeight;
+      heights[index] = rows;
+      heightByLine.set(lines[index], rows);
+    }
+    if (heightByLine.size > HEIGHT_CACHE_LIMIT) {
+      let drop = heightByLine.size - HEIGHT_CACHE_LIMIT / 2;
+      for (const key of heightByLine.keys()) {
+        if (drop-- <= 0) break;
+        heightByLine.delete(key);
+      }
+    }
+  }
+
   return { rowHeight, heights };
 }