ompchamber 2.0.2 → 3.1.0

package/src/shared/lib/code/editor/commands.ts

@@ -0,0 +1,260 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The editor's text commands — everything a keybinding does to the buffer that
+ * is not typing: line comment toggle, line move/duplicate/delete, insert line,
+ * the ⌘D occurrence selection, and the edit replication that makes a
+ * multi-selection actually editable.
+ *
+ * All of it is pure string arithmetic, so the rules are testable without a DOM
+ * and the component keeps only the parts that need one (reading the textarea,
+ * committing through the undo history).
+ *
+ * MULTI-SELECTION MODEL: the textarea owns exactly one selection — the
+ * "primary" — and every other range lives in `occurrences`. Painting them is
+ * the highlight layer's job (they are marked like a find match); editing them
+ * works by REPLICATION: the browser performs the user's keystroke at the
+ * primary range, the resulting edit is diffed out of the new buffer, and the
+ * same replacement is applied to every other range in one pass. That is why a
+ * keystroke, a paste and an IME composition all need no special case here.
+ */
+
+import { lineRangesInSelection, type TextRange } from '@/shared/lib/code/editor/lines';
+
+export type { TextRange };
+export { deleteLines, duplicateLines, insertLine, lineEdges, moveLines } from '@/shared/lib/code/editor/line-edits';
+
+/** One edit the browser made, as the difference between two buffers. */
+export interface EditDiff {
+  /** Range in the OLD buffer that was replaced. */
+  start: number;
+  end: number;
+  /** Text that took its place (empty for a deletion). */
+  inserted: string;
+}
+
+/** Cap on occurrences a single command may select — a one-character ⌘⇧L on a big file must not build 100k ranges. */
+export const MAX_OCCURRENCES = 2_000;
+
+/**
+ * The single edit that turns `before` into `after`, as a common-prefix /
+ * common-suffix diff. This is what recovers "what did the user just type" from
+ * a textarea `input` event, which reports a whole buffer rather than a keystroke.
+ *
+ * A prefix/suffix diff is ambiguous on repetitive text: deleting the first `a`
+ * of `aab` and deleting the second both yield `ab`, and the plain diff always
+ * reports the LAST one. `limit` is the caller's knowledge of where the edit
+ * happened — the primary selection before the keystroke — and the reported
+ * region is widened to contain it. The result is always a valid diff (applying
+ * it reproduces `after`) and never claims the edit happened away from the
+ * caret.
+ */
+export function diffEdit(before: string, after: string, limit?: TextRange): EditDiff {
+  const max = Math.min(before.length, after.length);
+  let prefix = 0;
+  while (prefix < max && before[prefix] === after[prefix]) prefix++;
+
+  let suffix = 0;
+  while (suffix < max - prefix && before[before.length - 1 - suffix] === after[after.length - 1 - suffix]) {
+    suffix++;
+  }
+
+  let start = prefix;
+  let end = before.length - suffix;
+  if (limit) {
+    start = Math.min(start, limit.start);
+    end = Math.max(end, limit.end);
+  }
+  return { start, end, inserted: after.slice(start, after.length - (before.length - end)) };
+}
+
+/**
+ * Apply `inserted` at every range and return the new buffer with each range
+ * collapsed to a caret after its own insertion.
+ *
+ * Ranges are replaced back-to-front so an earlier replacement cannot move the
+ * offsets of a later one, while the carets are accumulated front-to-back —
+ * each one sits after every insertion that precedes it in the new buffer.
+ */
+export function replicateEdit(
+  text: string,
+  ranges: readonly TextRange[],
+  inserted: string,
+): { value: string; carets: number[] } {
+  const ordered = [...ranges].sort((a, b) => a.start - b.start);
+  let value = text;
+  for (let index = ordered.length - 1; index >= 0; index--) {
+    const range = ordered[index];
+    value = value.slice(0, range.start) + inserted + value.slice(range.end);
+  }
+  const carets: number[] = new Array(ordered.length);
+  let shift = 0;
+  for (let index = 0; index < ordered.length; index++) {
+    const range = ordered[index];
+    const insertedLength = inserted.length - (range.end - range.start);
+    carets[index] = range.start + shift + inserted.length;
+    shift += insertedLength;
+  }
+  return { value, carets };
+}
+
+/**
+ * The word the caret sits on: an identifier-ish run of `[\w$]`, with the
+ * caret allowed at either edge (⌘D pressed just after a word selects it).
+ * Returns null when the caret is not on a word, which is the caller's cue to do
+ * nothing rather than to guess at a line.
+ */
+export function wordRangeAt(text: string, offset: number): TextRange | null {
+  const isWord = (char: string | undefined) => char !== undefined && /[\w$]/.test(char);
+  let start = Math.min(offset, text.length);
+  let end = start;
+  if (!isWord(text[start]) && isWord(text[start - 1])) start--;
+  if (!isWord(text[start])) return null;
+  end = start;
+  while (isWord(text[start - 1])) start--;
+  while (isWord(text[end])) end++;
+  return { start, end };
+}
+
+/** Every occurrence of `query` in `text`, in document order. */
+export function occurrenceRanges(text: string, query: string, limit: number = MAX_OCCURRENCES): TextRange[] {
+  if (!query) return [];
+  const ranges: TextRange[] = [];
+  for (let index = text.indexOf(query); index !== -1; index = text.indexOf(query, index + query.length)) {
+    ranges.push({ start: index, end: index + query.length });
+    if (ranges.length >= limit) break;
+  }
+  return ranges;
+}
+
+/**
+ * The next occurrence after the last selected range, wrapping to the first one
+ * that is not already selected. Null when the document holds no further
+ * occurrence — the caller then leaves the selection alone instead of cycling
+ * silently.
+ */
+export function nextOccurrence(text: string, query: string, selected: readonly TextRange[]): TextRange | null {
+  const all = occurrenceRanges(text, query);
+  if (all.length === 0) return null;
+  const taken = new Set(selected.map((range) => `${range.start}:${range.end}`));
+  const after = selected.reduce((max, range) => Math.max(max, range.end), -1);
+  const found = all.findIndex((range) => range.start >= after);
+  const from = found === -1 ? 0 : found;
+  for (let step = 0; step < all.length; step++) {
+    const range = all[(from + step) % all.length];
+    if (!taken.has(`${range.start}:${range.end}`)) return range;
+  }
+  return null;
+}
+
+/** A line-comment syntax: a prefix per line, or a wrapper for languages that have only block comments. */
+export type CommentSyntax = { line: string } | { block: readonly [string, string] };
+
+/**
+ * How each language's line comment is written. The default is `//`, which is
+ * the right answer for every C-family grammar; the exceptions are the ones a
+ * wrong token would visibly break (`#` in YAML would be a syntax error, not a
+ * comment). Languages that only have block comments get the wrapper — a `//`
+ * inserted into CSS comments out nothing and breaks the rule it was added to.
+ */
+const COMMENT_SYNTAX: Record<string, CommentSyntax> = {
+  python: { line: '#' },
+  bash: { line: '#' },
+  yaml: { line: '#' },
+  toml: { line: '#' },
+  ruby: { line: '#' },
+  perl: { line: '#' },
+  r: { line: '#' },
+  makefile: { line: '#' },
+  dockerfile: { line: '#' },
+  ini: { line: '#' },
+  properties: { line: '#' },
+  elixir: { line: '#' },
+  graphql: { line: '#' },
+  nix: { line: '#' },
+  sql: { line: '--' },
+  lua: { line: '--' },
+  haskell: { line: '--' },
+  css: { block: ['/*', '*/'] },
+  scss: { block: ['/*', '*/'] },
+  less: { block: ['/*', '*/'] },
+  sass: { block: ['/*', '*/'] },
+  stylus: { block: ['/*', '*/'] },
+  html: { block: ['<!--', '-->'] },
+  xml: { block: ['<!--', '-->'] },
+  markdown: { block: ['<!--', '-->'] },
+};
+
+export function commentSyntaxFor(language: string): CommentSyntax {
+  return COMMENT_SYNTAX[language] ?? { line: '//' };
+}
+
+/** The lines a selection touches, as ranges that INCLUDE their newline. */
+function selectionLines(text: string, selection: TextRange): TextRange[] {
+  return lineRangesInSelection(text, selection);
+}
+
+/** Whether every line's content already begins with `token`. */
+function allCommented(text: string, lines: readonly TextRange[], token: string): boolean {
+  return lines.every((line) => text.slice(line.start, line.end).trimStart().startsWith(token));
+}
+
+/**
+ * Toggle line comments over every line the selection touches.
+ *
+ * Adding puts the token at the first non-space character, so indentation
+ * survives; removing takes the token and the single space an add would have
+ * written, which is what makes the toggle idempotent. For a block-only language
+ * the whole selection is wrapped instead, once.
+ */
+export function toggleLineComment(
+  text: string,
+  selection: TextRange,
+  syntax: CommentSyntax,
+): { value: string; selectionStart: number; selectionEnd: number } {
+  if ('block' in syntax) {
+    const [open, close] = syntax.block;
+    const before = text.slice(0, selection.start);
+    const body = text.slice(selection.start, selection.end);
+    const wrapped = `${open} ${body} ${close}`;
+    return {
+      value: before + wrapped + text.slice(selection.end),
+      selectionStart: selection.start,
+      selectionEnd: selection.start + wrapped.length,
+    };
+  }
+
+  const token = syntax.line;
+  const lines = selectionLines(text, selection);
+  const remove = allCommented(text, lines, token);
+  let value = text;
+  for (let index = lines.length - 1; index >= 0; index--) {
+    const line = lines[index];
+    const content = text.slice(line.start, line.end);
+    const indentLength = content.length - content.trimStart().length;
+    const at = line.start + indentLength;
+    if (remove) {
+      const after = value.slice(at + token.length);
+      const withSpace = after.startsWith(' ') ? after.slice(1) : after;
+      value = value.slice(0, at) + withSpace;
+    } else {
+      value = value.slice(0, at) + `${token} ` + value.slice(at);
+    }
+  }
+
+  // The selection keeps covering the same text: adding shifts both edges by the
+  // token (plus its space) per touched line, removing shifts them back.
+  const delta = token.length + 1;
+  const touched = lines.length;
+  const shift = remove ? -delta * touched : delta * touched;
+  const startShift = remove ? Math.min(0, shift) : shift;
+  return {
+    value,
+    selectionStart: Math.max(0, selection.start + (remove ? shift : startShift)),
+    selectionEnd: Math.max(0, selection.end + shift),
+  };
+}
+

package/src/shared/lib/code/editor/edits.test.ts

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The editor's indent edits, which are the rules a reader notices only when
+ * they are wrong: Tab indents every line the selection touches, ⇧Tab removes
+ * one level, and the selection's own edges move with the text so a selection
+ * that does not start at a line start is not silently shortened.
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { editForBackspace, editForEnter, editForTab, TAB_CHARACTER } from '@/shared/lib/code/editor/edits';
+
+describe('editForTab', () => {
+  test('inserts one indent at the caret and lands after it', () => {
+    const edit = editForTab('const a = 1;', 6, 6, false);
+
+    expect(edit.value).toBe(`const ${TAB_CHARACTER}a = 1;`);
+    expect([edit.selectionStart, edit.selectionEnd]).toEqual([8, 8]);
+  });
+
+  test('indents every line the selection touches', () => {
+    const edit = editForTab('one\ntwo\nthree', 0, 7, false);
+
+    expect(edit.value).toBe(`${TAB_CHARACTER}one\n${TAB_CHARACTER}two\nthree`);
+    // The end moves by one indent per touched line, so the selection still
+    // covers the same text.
+    expect(edit.selectionEnd).toBe(7 + TAB_CHARACTER.length * 2);
+  });
+
+  test('an indent moves a selection that starts on a line with content', () => {
+    // The indent is inserted BEFORE the selection start, so the selection has
+    // to move with its own text or it would silently cover different bytes.
+    const midLine = editForTab('one\ntwo', 1, 5, false);
+    expect(midLine.value).toBe(`${TAB_CHARACTER}one\n${TAB_CHARACTER}two`);
+    expect(midLine.selectionStart).toBe(1 + TAB_CHARACTER.length);
+    expect(midLine.selectionEnd).toBe(5 + TAB_CHARACTER.length * 2);
+  });
+
+  test('unindents only the lines that carry an indent', () => {
+    const edit = editForTab(`${TAB_CHARACTER}one\ntwo`, 0, 9, true);
+
+    expect(edit.value).toBe('one\ntwo');
+    expect(edit.selectionStart).toBe(0);
+    expect(edit.selectionEnd).toBe(9 - TAB_CHARACTER.length);
+  });
+
+  test('unindenting a selection whose first line has no indent keeps the start', () => {
+    const edit = editForTab(`one\n${TAB_CHARACTER}two`, 0, 9, true);
+
+    expect(edit.value).toBe('one\ntwo');
+    expect(edit.selectionStart).toBe(0);
+  });
+
+  test('⇧Tab with nothing selected leaves the buffer alone', () => {
+    const edit = editForTab('one', 2, 2, true);
+
+    expect(edit.value).toBe('one');
+    expect([edit.selectionStart, edit.selectionEnd]).toEqual([2, 2]);
+  });
+});
+
+describe('editForBackspace', () => {
+  test('removes a whole indent unit', () => {
+    const edit = editForBackspace(`${TAB_CHARACTER}one`, TAB_CHARACTER.length, TAB_CHARACTER.length);
+
+    expect(edit?.value).toBe('one');
+    expect(edit?.selectionStart).toBe(0);
+  });
+
+  test('leaves a partial indent to the browser', () => {
+    // One space of an indent is an ordinary character deletion.
+    expect(editForBackspace(' one', 1, 1)).toBeNull();
+    expect(editForBackspace('one', 3, 3)).toBeNull();
+  });
+
+  test('never fires over a selection', () => {
+    expect(editForBackspace('  one', 0, 2)).toBeNull();
+  });
+});
+
+describe('editForEnter', () => {
+  test('keeps the current line’s leading whitespace', () => {
+    const edit = editForEnter('  one', 5, 5);
+
+    expect(edit?.value).toBe('  one\n  ');
+    expect(edit?.selectionStart).toBe(8);
+  });
+
+  test('a line with no indent is left to the browser', () => {
+    expect(editForEnter('one', 3, 3)).toBeNull();
+  });
+
+  test('a selection is never auto-indented', () => {
+    expect(editForEnter('  one', 2, 5)).toBeNull();
+  });
+});

package/src/shared/lib/code/editor/edits.ts

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The text edits the editor's own keydown handler performs — Tab/⇧Tab indent,
+ * backspace over an indent, and Enter's auto-indent.
+ *
+ * These are pure functions of the buffer and the selection, so they are
+ * testable without a DOM, and the component keeps only the part that needs one
+ * (reading the `<textarea>` and committing the result through the undo
+ * history). Each returns `null` when the key should be left to the browser.
+ */
+
+/** What an edit produces: the new buffer and where the selection lands. */
+export interface EditorEdit {
+  value: string;
+  selectionStart: number;
+  selectionEnd: number;
+}
+
+export const TAB_CHARACTER = '  ';
+
+/** The whole line containing `offset`, newline included. */
+function lineRangeAt(text: string, offset: number): { start: number; end: number } {
+  const before = text.slice(0, Math.min(offset, text.length));
+  const start = before.lastIndexOf('\n') + 1;
+  const nextBreak = text.indexOf('\n', start);
+  return { start, end: nextBreak === -1 ? text.length : nextBreak + 1 };
+}
+
+/** Lines `[startLine, endLine]` of `text`, as offsets of their first characters. */
+function lineRange(text: string, selectionStart: number, selectionEnd: number): { startLine: number; endLine: number; lines: string[] } {
+  const lines = text.split('\n');
+  let startLine = 0;
+  for (let index = text.indexOf('\n'); index !== -1 && index < selectionStart; index = text.indexOf('\n', index + 1)) {
+    startLine++;
+  }
+  let endLine = startLine;
+  for (let index = text.indexOf('\n', selectionStart); index !== -1 && index < selectionEnd; index = text.indexOf('\n', index + 1)) {
+    endLine++;
+  }
+  return { startLine, endLine, lines };
+}
+
+/**
+ * Tab on a selection indents every line it touches; ⇧Tab removes one level.
+ *
+ * The selection's own edges move with the edit — an indent inserts before the
+ * caret and at each line start, so a selection that is not at a line start
+ * would otherwise shrink by one indent per line.
+ */
+export function editForTab(text: string, selectionStart: number, selectionEnd: number, unindent: boolean): EditorEdit {
+  if (selectionStart === selectionEnd) {
+    if (unindent) {
+      // ⇧Tab on a bare caret outdents the line it sits on, which is what the
+      // key means in VS Code — treating it as a no-op left ⌘[ (the same
+      // command, reached from the keymap) doing nothing at all.
+      const line = lineRangeAt(text, selectionStart);
+      const content = text.slice(line.start, line.end);
+      if (!content.startsWith(TAB_CHARACTER)) return { value: text, selectionStart, selectionEnd };
+      const caret = Math.max(line.start, selectionStart - TAB_CHARACTER.length);
+      return {
+        value: text.slice(0, line.start) + content.slice(TAB_CHARACTER.length) + text.slice(line.end),
+        selectionStart: caret,
+        selectionEnd: caret,
+      };
+    }
+    const caret = selectionStart + TAB_CHARACTER.length;
+    return { value: text.slice(0, selectionStart) + TAB_CHARACTER + text.slice(selectionEnd), selectionStart: caret, selectionEnd: caret };
+  }
+
+  const { startLine, endLine, lines } = lineRange(text, selectionStart, selectionEnd);
+  if (unindent) {
+    const next = lines.map((line, index) =>
+      index >= startLine && index <= endLine && line.startsWith(TAB_CHARACTER) ? line.slice(TAB_CHARACTER.length) : line,
+    );
+    const nextValue = next.join('\n');
+    const firstHadIndent = lines[startLine]?.startsWith(TAB_CHARACTER) ?? false;
+    return {
+      value: nextValue,
+      // Clamped: a selection beginning INSIDE the indent it removes shifts
+      // before the buffer's own start (`0 - 2`), which only ever looked correct
+      // because assigning a negative offset to a textarea clamps to zero.
+      selectionStart: firstHadIndent ? Math.max(0, selectionStart - TAB_CHARACTER.length) : selectionStart,
+      selectionEnd: selectionEnd - (text.length - nextValue.length),
+    };
+  }
+
+  const next = lines.map((line, index) => (index >= startLine && index <= endLine ? TAB_CHARACTER + line : line));
+  const firstLineText = lines[startLine];
+  return {
+    value: next.join('\n'),
+    // The indent lands before the selection start, so a selection that begins
+    // on a line with content moves with its text.
+    selectionStart: firstLineText && /\S/.test(firstLineText) ? selectionStart + TAB_CHARACTER.length : selectionStart,
+    selectionEnd: selectionEnd + TAB_CHARACTER.length * (endLine - startLine + 1),
+  };
+}
+
+/** Backspace over a whole indent unit removes it; otherwise the browser handles the key. */
+export function editForBackspace(text: string, selectionStart: number, selectionEnd: number): EditorEdit | null {
+  if (selectionStart !== selectionEnd) return null;
+  if (!text.slice(0, selectionStart).endsWith(TAB_CHARACTER)) return null;
+  const caret = selectionStart - TAB_CHARACTER.length;
+  return { value: text.slice(0, caret) + text.slice(selectionEnd), selectionStart: caret, selectionEnd: caret };
+}
+
+/** Enter keeps the current line's leading whitespace; the browser handles an unindented line. */
+export function editForEnter(text: string, selectionStart: number, selectionEnd: number): EditorEdit | null {
+  if (selectionStart !== selectionEnd) return null;
+  const line = text.slice(0, selectionStart).split('\n').pop();
+  const indent = line?.match(/^\s+/)?.[0];
+  if (!indent) return null;
+  const caret = selectionStart + indent.length + 1;
+  return {
+    value: `${text.slice(0, selectionStart)}\n${indent}${text.slice(selectionEnd)}`,
+    selectionStart: caret,
+    selectionEnd: caret,
+  };
+}

package/src/shared/lib/code/editor/find-status.test.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The find widget's readouts.
+ *
+ * These are the two messages the widget exists to keep apart: "No results" and
+ * "your pattern does not compile" are different answers, and a match list that
+ * stopped at the cap has to say so rather than report a total it never counted.
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { findCounterLabel, findStatusLabel } from '@/shared/lib/code/editor/find-status';
+
+describe('findCounterLabel', () => {
+  test('counts from one, the way a reader does', () => {
+    expect(findCounterLabel({ total: 7, current: 2, truncated: false })).toBe('3 of 7');
+  });
+
+  test('a capped list is reported with a plus, never as a total', () => {
+    // The scan stopped at the cap; printing "1 of 5000" would claim the
+    // document holds exactly 5000 matches.
+    expect(findCounterLabel({ total: 5000, current: 0, truncated: true })).toBe('1 of 5000+');
+  });
+
+  test('says nothing when there is nothing to count', () => {
+    expect(findCounterLabel({ total: 0, current: -1, truncated: false })).toBe('');
+  });
+});
+
+describe('findStatusLabel', () => {
+  test('names an uncompilable pattern as such', () => {
+    expect(findStatusLabel('a(', true, { total: 0, current: -1, truncated: false })).toBe('Invalid pattern');
+  });
+
+  test('a query with no matches says so', () => {
+    expect(findStatusLabel('zzz', false, { total: 0, current: -1, truncated: false })).toBe('No results');
+  });
+
+  test('an empty query says nothing — an untouched field is not a failed search', () => {
+    expect(findStatusLabel('', false, { total: 0, current: -1, truncated: false })).toBe('');
+  });
+
+  test('otherwise it is the counter', () => {
+    expect(findStatusLabel('alpha', false, { total: 5, current: 0, truncated: false })).toBe('1 of 5');
+  });
+});

package/src/shared/lib/code/editor/find-status.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The find widget's readouts, as rules rather than JSX conditionals.
+ *
+ * Two of these are the widget's whole reason for being honest: "No results" and
+ * "your pattern does not compile" are different answers, and a match list that
+ * stopped at the cap has to say so rather than report a total it never counted.
+ */
+
+/** Ceiling on collected matches; past it the count is reported with a `+`. */
+export interface FindCounts {
+  total: number;
+  current: number;
+  truncated: boolean;
+}
+
+/** `3 of 7`, `1 of 5000+`, or an empty string when there is nothing to say. */
+export function findCounterLabel({ total, current, truncated }: FindCounts): string {
+  if (total === 0) return '';
+  return `${current + 1} of ${total}${truncated ? '+' : ''}`;
+}
+
+/**
+ * The status line: an uncompilable pattern is named as such, a query with no
+ * matches says so, and an empty query says nothing at all (a "0 results" over
+ * an untouched field is noise).
+ */
+export function findStatusLabel(query: string, invalid: boolean, counts: FindCounts): string {
+  if (invalid) return 'Invalid pattern';
+  if (counts.total === 0) return query ? 'No results' : '';
+  return findCounterLabel(counts);
+}