ompchamber 2.0.2 → 3.1.0

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

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Line arithmetic over a buffer.
+ *
+ * Extracted from the find module because the editor's line commands (delete,
+ * move, duplicate, comment) and the highlighter need the same two facts — which
+ * line an offset is on, and where that line begins — and neither of them is a
+ * find concern. Keeping one implementation is what stops a line command from
+ * disagreeing with the gutter about where line 12 starts.
+ */
+
+/** Half-open `[start, end)` offset range in a document. */
+export interface TextRange {
+  start: number;
+  end: number;
+}
+
+/** Index of the line containing `offset` (0-based). */
+export function lineIndexAt(text: string, offset: number): number {
+  const limit = Math.min(Math.max(offset, 0), text.length);
+  let line = 0;
+  for (let index = text.indexOf('\n'); index !== -1 && index < limit; index = text.indexOf('\n', index + 1)) {
+    line++;
+  }
+  return line;
+}
+
+/** Offset of the first character of line `lineIndex` (0-based). */
+export function lineStartOffset(text: string, lineIndex: number): number {
+  let offset = 0;
+  for (let i = 0; i < lineIndex; i++) {
+    const next = text.indexOf('\n', offset);
+    if (next === -1) return text.length;
+    offset = next + 1;
+  }
+  return offset;
+}
+
+/** How many lines `text` holds; a trailing newline opens one more (empty) line. */
+export 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;
+}
+
+/**
+ * The whole line containing `offset`, INCLUDING its trailing newline.
+ *
+ * Including the newline is what makes the range directly usable by the line
+ * commands: deleting it removes the line rather than blanking it, and moving it
+ * carries the line's own separator with it. A caret on the empty line a
+ * trailing newline opens (`"a\n"` at offset 2) yields an empty range there,
+ * which the commands treat as "the newline above" — the honest reading of a
+ * position that has no characters of its own.
+ */
+export function lineRangeAt(text: string, offset: number): TextRange {
+  const lineStart = lineStartOffset(text, lineIndexAt(text, offset));
+  const lineEnd = text.indexOf('\n', lineStart);
+  if (lineEnd === -1) return { start: lineStart, end: text.length };
+  return { start: lineStart, end: lineEnd + 1 };
+}
+
+/**
+ * The ranges of every line a selection touches, in document order.
+ *
+ * A selection ending exactly at a line start does not touch that line — the
+ * same rule VS Code applies, and the one that keeps ⌘⇧L on a whole-line
+ * selection from splitting off an empty trailing entry.
+ */
+export function lineRangesInSelection(text: string, selection: TextRange): TextRange[] {
+  const startLine = lineIndexAt(text, selection.start);
+  const lastOffset = selection.end > selection.start && text[selection.end - 1] === '\n' ? selection.end - 1 : selection.end;
+  const endLine = lineIndexAt(text, lastOffset);
+  const ranges: TextRange[] = [];
+  for (let line = startLine; line <= endLine; line++) {
+    ranges.push(lineRangeAt(text, lineStartOffset(text, line)));
+  }
+  return ranges;
+}

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

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Find marks spliced into the highlighter's token markup.
+ *
+ * The cases that matter are the ones a naive implementation gets wrong: a match
+ * that spans several tokens (`const alpha` is three), a token that holds two
+ * matches, and text that has to be escaped on the way in. Every assertion is on
+ * the TEXT of the marks, because a match broken across tokens is several
+ * fragments by construction.
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { tokenMarkup, MARK_CURRENT_OPEN, MARK_OPEN } from '@/shared/lib/code/editor/marks';
+
+/** The text of every mark in `html`, in order. */
+function marked(html: string): string[] {
+  return Array.from(html.matchAll(/<mark class="find-match"[^>]*>(.*?)<\/mark>/g), (match) => match[1]);
+}
+
+describe('tokenMarkup', () => {
+  test('returns escaped content unchanged when there are no marks', () => {
+    expect(tokenMarkup('a < b', 0, undefined, -1)).toBe('a &lt; b');
+    expect(tokenMarkup('a < b', 0, [], -1)).toBe('a &lt; b');
+  });
+
+  test('wraps the part of the token the match covers', () => {
+    expect(tokenMarkup('alpha', 0, [{ start: 0, end: 5 }], 0)).toBe(`${MARK_CURRENT_OPEN}alpha</mark>`);
+  });
+
+  test('splits a token that holds two matches', () => {
+    const html = tokenMarkup('a a', 0, [{ start: 0, end: 1 }, { start: 2, end: 3 }], -1);
+
+    expect(marked(html)).toEqual(['a', 'a']);
+    expect(html.match(/<mark/g)?.length).toBe(2);
+  });
+
+  test('clips a match that starts before the token', () => {
+    // `const alpha` spans three tokens; the fragment inside `alpha` is the tail
+    // of one match, and the markup must not repeat the part already emitted.
+    const html = tokenMarkup('alpha', 6, [{ start: 0, end: 11 }], 0);
+
+    expect(marked(html)).toEqual(['alpha']);
+  });
+
+  test('clips a match that runs past the token', () => {
+    const html = tokenMarkup('const', 0, [{ start: 0, end: 11 }], -1);
+
+    expect(marked(html)).toEqual(['const']);
+  });
+
+  test('escapes the matched text it wraps', () => {
+    expect(tokenMarkup('<', 0, [{ start: 0, end: 1 }], -1)).toContain('&lt;');
+  });
+
+  test('the current match and an extra selection are painted differently', () => {
+    // The caret can only be in the primary range, so the two must not look
+    // alike — the user has to see where their keystrokes will land.
+    expect(tokenMarkup('a', 0, [{ start: 0, end: 1 }], 0)).toContain('data-find-current');
+    expect(tokenMarkup('a', 0, [{ start: 0, end: 1 }], -1, 0)).toContain('data-occurrence');
+    expect(tokenMarkup('a', 0, [{ start: 0, end: 1 }], -1, 0)).not.toContain('data-find-current');
+  });
+
+  test('a plain match is neither current nor an occurrence', () => {
+    const html = tokenMarkup('a', 0, [{ start: 0, end: 1 }], -1);
+
+    expect(html).toContain(MARK_OPEN);
+    expect(html).not.toContain('data-');
+  });
+
+  test('marks are read in document order, so a match before the token is skipped', () => {
+    // The loop stops at the first mark that begins after the token: anything
+    // earlier cannot intersect it.
+    const html = tokenMarkup('beta', 6, [{ start: 0, end: 5 }, { start: 6, end: 10 }], -1);
+
+    expect(marked(html)).toEqual(['beta']);
+  });
+
+  test('a zero-width mark paints nothing', () => {
+    expect(marked(tokenMarkup('alpha', 0, [{ start: 2, end: 2 }], -1))).toEqual([]);
+  });
+});

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

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Find matches spliced into the highlighter's own markup.
+ *
+ * The find widget's highlights ride on the same layer the tokens do, so a mark
+ * can never drift from the text it belongs to. That means walking each token's
+ * content and inserting `<mark>` around the parts of it a match covers — a
+ * match routinely spans several tokens (`const alpha` is three) and a token
+ * routinely holds several matches.
+ *
+ * `<mark>` is not decoration: it is an INLINE element with a background and no
+ * padding or border, which is what keeps the transparent `<textarea>` above the
+ * layer aligned with the glyphs underneath. Anything that changes the box —
+ * a block display, a border, an outline with an offset — moves the text under
+ * the caret and breaks editing.
+ *
+ * Kept out of `syntax-highlight.ts` so the tokenizer module stays under the
+ * repository's line ceiling and because this is the find feature's concern
+ * inside the highlight pipeline, not the highlighter's.
+ */
+
+import { escapeCode } from '@/shared/lib/code/highlighter';
+import type { FindMatch } from '@/shared/lib/code/editor/find';
+
+/**
+ * How `highlightLines` paints its marks. Declared here rather than in the
+ * highlighter because the marks ARE this module's concern; the highlighter
+ * imports the type.
+ */
+export interface HighlightLinesOptions {
+  /**
+   * Lines at or above this length are emitted as plain text instead of being
+   * tokenized — the guard a minified bundle (one line of hundreds of KB) needs.
+   */
+  maxLineLength?: number;
+  /**
+   * Match ranges (absolute offsets in `code`) to wrap in `<mark class="find-match">`.
+   * The find widget's highlights ride on the same markup the tokens do, so a
+   * match cannot drift from the text it belongs to — and an inline `<mark>`
+   * paints a background without moving the glyphs, which is what keeps the
+   * transparent `<textarea>` above aligned with this layer.
+   */
+  marks?: readonly FindMatch[];
+  /** Index into `marks` of the current match, marked `data-find-current`. */
+  currentMark?: number;
+  /**
+   * Marks from this index on are extra ⌘D SELECTIONS rather than find matches,
+   * and are painted as such. The caller appends them after the matches, so one
+   * index is all the split needs.
+   */
+  occurrenceFrom?: number;
+}
+
+export const MARK_OPEN = '<mark class="find-match">';
+/** The current match is the one the caret/next-step is aimed at; the CSS paints it darker. */
+export const MARK_CURRENT_OPEN = '<mark class="find-match" data-find-current="">';
+/**
+ * An extra ⌘D range. It is not a find match — it is a second SELECTION, and it
+ * has to read as one: the caret can only be in the primary range, so painting
+ * them alike would leave the user unable to tell which one their keystrokes go
+ * to. The two differ only in colour; the geometry is shared, which is what
+ * keeps the layers aligned.
+ */
+export const MARK_OCCURRENCE_OPEN = '<mark class="find-match" data-occurrence="">';
+
+/**
+ * `content` with every intersecting mark spliced in, HTML-escaped.
+ *
+ * `tokenStart` is the token's absolute offset in the document; `marks` are in
+ * document order, which is what lets the loop stop at the first mark that
+ * begins after the token rather than scanning the whole list per token.
+ */
+export function tokenMarkup(
+  content: string,
+  tokenStart: number,
+  marks: readonly FindMatch[] | undefined,
+  currentMark: number,
+  occurrenceFrom = -1,
+): string {
+  const tokenEnd = tokenStart + content.length;
+  if (!marks || marks.length === 0) return escapeCode(content);
+  let html = '';
+  let cursor = 0;
+  for (let index = 0; index < marks.length; index++) {
+    const mark = marks[index];
+    // Marks and tokens are both in document order: anything that ended before
+    // this token cannot intersect it.
+    if (mark.end <= tokenStart) continue;
+    if (mark.start >= tokenEnd) break;
+    // A zero-width range has no text to paint; emitting one produced an empty
+    // `<mark></mark>`, which is invisible but still a DOM node per occurrence.
+    if (mark.end <= mark.start) continue;
+    const from = Math.max(mark.start, tokenStart) - tokenStart;
+    const to = Math.min(mark.end, tokenEnd) - tokenStart;
+    if (to <= cursor) continue;
+    html += escapeCode(content.slice(cursor, from));
+    const open = index === currentMark ? MARK_CURRENT_OPEN : index >= occurrenceFrom && occurrenceFrom >= 0 ? MARK_OCCURRENCE_OPEN : MARK_OPEN;
+    html += open + escapeCode(content.slice(from, to)) + '</mark>';
+    cursor = to;
+  }
+  return html + escapeCode(content.slice(cursor));
+}

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

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The multi-selection rules.
+ *
+ * ⌘D's two-stage behaviour is the one users notice immediately: the first press
+ * selects the word, the second adds the next occurrence. Getting that wrong
+ * leaves the word selected once and its neighbour selected twice, which reads
+ * as a duplicated cursor.
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  growToNextOccurrence,
+  offsetBelow,
+  replicateAtRanges,
+  selectAllOccurrences,
+} from '@/shared/lib/code/editor/occurrences';
+
+describe('growToNextOccurrence', () => {
+  const text = 'alpha beta alpha gamma alpha';
+
+  test('the first press on a bare caret selects the word and adds nothing', () => {
+    expect(growToNextOccurrence(text, { start: 2, end: 2 }, [])).toEqual({
+      primary: { start: 0, end: 5 },
+      extras: [],
+    });
+  });
+
+  test('the second press adds the next occurrence', () => {
+    const grown = growToNextOccurrence(text, { start: 0, end: 5 }, []);
+    expect(grown?.primary).toEqual({ start: 0, end: 5 });
+    expect(grown?.extras).toEqual([{ start: 11, end: 16 }]);
+  });
+
+  test('each further press adds the one after it, never a duplicate', () => {
+    const grown = growToNextOccurrence(text, { start: 0, end: 5 }, [{ start: 11, end: 16 }]);
+    expect(grown?.extras).toEqual([
+      { start: 11, end: 16 },
+      { start: 23, end: 28 },
+    ]);
+  });
+
+  test('reports nothing when every occurrence is already selected', () => {
+    const extras = [
+      { start: 11, end: 16 },
+      { start: 23, end: 28 },
+    ];
+    expect(growToNextOccurrence(text, { start: 0, end: 5 }, extras)).toBeNull();
+  });
+
+  test('reports nothing on whitespace with no word beside it', () => {
+    expect(growToNextOccurrence('   ', { start: 1, end: 1 }, [])).toBeNull();
+  });
+});
+
+describe('selectAllOccurrences', () => {
+  test('the first occurrence is the primary, the rest are extras', () => {
+    const all = selectAllOccurrences('alpha beta alpha', { start: 0, end: 5 });
+
+    expect(all?.primary).toEqual({ start: 0, end: 5 });
+    expect(all?.extras).toEqual([{ start: 11, end: 16 }]);
+  });
+
+  test('a bare caret takes the word under it', () => {
+    const all = selectAllOccurrences('alpha beta alpha', { start: 2, end: 2 });
+    expect(all?.primary).toEqual({ start: 0, end: 5 });
+  });
+
+  test('a one-off word yields the selection alone', () => {
+    const all = selectAllOccurrences('alpha beta', { start: 0, end: 5 });
+    expect(all?.primary).toEqual({ start: 0, end: 5 });
+    expect(all?.extras).toEqual([]);
+  });
+});
+
+describe('offsetBelow', () => {
+  test('keeps the column', () => {
+    expect(offsetBelow('one\ntwo\nthree', 1)).toBe(5);
+  });
+
+  test('clamps to the end of a shorter next line', () => {
+    // Column 6 does not exist on `ab`; the caret lands at its end rather than
+    // on a character the line never had.
+    expect(offsetBelow('longer line\nab\nnext', 6)).toBe(14);
+  });
+
+  test('reports nothing on the last line', () => {
+    expect(offsetBelow('one\ntwo', 5)).toBeNull();
+  });
+});
+
+describe('replicateAtRanges', () => {
+  test('reports nothing when there are no extra ranges', () => {
+    expect(replicateAtRanges('abc', 'abXc', { start: 2, end: 2 }, [])).toBeNull();
+  });
+
+  test('replays one insertion at every range and collapses them to carets', () => {
+    const applied = replicateAtRanges('alpha alpha', 'Xalpha alpha', { start: 0, end: 0 }, [{ start: 6, end: 6 }]);
+
+    expect(applied?.value).toBe('Xalpha Xalpha');
+    expect(applied?.caret).toBe(1);
+    expect(applied?.rest).toEqual([{ start: 8, end: 8 }]);
+  });
+
+  test('replays a replacement over the selected text', () => {
+    const applied = replicateAtRanges('alpha beta alpha', 'Z beta alpha', { start: 0, end: 5 }, [{ start: 11, end: 16 }]);
+
+    expect(applied?.value).toBe('Z beta Z');
+    // The caret sits after the inserted `Z`, which now ends the buffer.
+    expect(applied?.rest).toEqual([{ start: 8, end: 8 }]);
+  });
+});

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

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The multi-selection rules: what ⌘D, ⌘⇧L and ⌘⇧D do to a buffer, and how one
+ * browser edit is replayed at every range.
+ *
+ * Pure on purpose. The hook that owns the ranges is a ref and a notify call;
+ * every decision about WHERE a range goes and what the buffer becomes lives
+ * here, so it is testable without a DOM and cannot drift between the keyboard
+ * path and the palette path (both call the same functions).
+ *
+ * The replication rule is the load-bearing one. The browser applies a keystroke
+ * at the primary range and reports the whole new buffer; diffing that against
+ * the old one recovers "what was typed", and the same replacement is replayed
+ * at every other range in one pass. Typing, pasting, deleting and IME
+ * composition therefore need no branch per case.
+ */
+
+import {
+  diffEdit,
+  nextOccurrence,
+  occurrenceRanges,
+  replicateEdit,
+  wordRangeAt,
+  type TextRange,
+} from '@/shared/lib/code/editor/commands';
+
+/** What a selection command did: the primary range plus the extra ones. */
+export interface OccurrenceSelection {
+  primary: TextRange;
+  extras: TextRange[];
+}
+
+/**
+ * ⌘D. With a bare caret the first press selects the word under it and stops —
+ * "select this word" and "and the next one too" are two different asks, and
+ * adding a range on the first press would leave the word selected once and its
+ * neighbour selected twice. With a selection, the next unselected occurrence is
+ * added.
+ *
+ * Null when there is no word and no selection, or when every occurrence is
+ * already selected: the caller then leaves the selection alone rather than
+ * cycling silently.
+ */
+export function growToNextOccurrence(
+  text: string,
+  primary: TextRange,
+  extras: readonly TextRange[],
+): OccurrenceSelection | null {
+  const hasSelection = primary.end > primary.start;
+  const seed = hasSelection ? primary : wordRangeAt(text, primary.start);
+  if (!seed) return null;
+  const word = text.slice(seed.start, seed.end);
+  if (!word) return null;
+
+  if (!hasSelection) return { primary: seed, extras: [...extras] };
+
+  const next = nextOccurrence(text, word, [primary, ...extras]);
+  if (!next) return null;
+  return { primary, extras: [...extras, next] };
+}
+
+/**
+ * ⌘⇧L. Every occurrence becomes a range: the first is the primary (the textarea
+ * can only hold one selection) and the rest are extras. Null when there is
+ * nothing to select.
+ */
+export function selectAllOccurrences(text: string, primary: TextRange): OccurrenceSelection | null {
+  const seed = primary.end > primary.start ? primary : wordRangeAt(text, primary.start);
+  if (!seed) return null;
+  const word = text.slice(seed.start, seed.end);
+  if (!word) return null;
+  const [first, ...rest] = occurrenceRanges(text, word);
+  if (!first) return null;
+  return { primary: first, extras: rest };
+}
+
+/**
+ * ⌘⇧D. The offset directly below `offset`, keeping the column — and clamped to
+ * that line's end, so a caret at the end of a short line lands at the end of the
+ * next one rather than on a character it never had. Null on the last line.
+ */
+export function offsetBelow(text: string, offset: number): number | null {
+  const lineEnd = text.indexOf('\n', offset);
+  if (lineEnd === -1) return null;
+  const column = offset - (text.lastIndexOf('\n', offset - 1) + 1);
+  const nextLineStart = lineEnd + 1;
+  const nextLineEnd = text.indexOf('\n', nextLineStart);
+  return Math.min(nextLineStart + column, nextLineEnd === -1 ? text.length : nextLineEnd);
+}
+
+/**
+ * Replay the browser's edit (`before` → `after`, applied at `primaryBefore`) at
+ * every extra range. Null when there are no extras, which is the caller's cue to
+ * keep the ordinary single-selection path.
+ */
+export function replicateAtRanges(
+  before: string,
+  after: string,
+  primaryBefore: TextRange,
+  extras: readonly TextRange[],
+): { value: string; caret: number; rest: TextRange[] } | null {
+  if (extras.length === 0) return null;
+  const diff = diffEdit(before, after, primaryBefore);
+  const applied = replicateEdit(before, [{ start: diff.start, end: diff.end }, ...extras], diff.inserted);
+  const [caret, ...rest] = applied.carets;
+  return { value: applied.value, caret, rest: rest.map((offset) => ({ start: offset, end: offset })) };
+}

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

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The command palette's list.
+ *
+ * The palette is a VIEW of the keymap, so the property that matters is that it
+ * cannot list something the keymap does not bind — an entry that does nothing
+ * reads as a broken editor rather than a missing feature. The filter is the
+ * other half: a reader looks for a command by its name OR by the shortcut they
+ * already know, and both have to find it.
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { buildPaletteEntries, filterPaletteEntries } from '@/shared/lib/code/editor/palette';
+import { EDITOR_KEY_BINDINGS } from '@/shared/lib/code/editor/keymap';
+
+describe('buildPaletteEntries', () => {
+  test('every entry is a bound command, labelled with the keymap’s own words', () => {
+    const entries = buildPaletteEntries(true);
+
+    expect(entries.length).toBeGreaterThan(0);
+    for (const entry of entries) {
+      const binding = EDITOR_KEY_BINDINGS.find((candidate) => candidate.command === entry.command);
+      expect(binding).toBeDefined();
+      expect(entry.label).toBe(binding!.label);
+      // The chord is derived from the same stroke the handler matches, so a
+      // listed shortcut is one that actually fires.
+      expect(entry.chord.length).toBeGreaterThan(0);
+    }
+  });
+
+  test('the chord shown is the platform’s own', () => {
+    const mac = buildPaletteEntries(true).find((entry) => entry.command === 'selectNextOccurrence');
+    const other = buildPaletteEntries(false).find((entry) => entry.command === 'selectNextOccurrence');
+
+    expect(mac?.chord).toBe('⌘D');
+    expect(other?.chord).toBe('Ctrl+D');
+  });
+
+  test('no command is listed twice', () => {
+    const commands = buildPaletteEntries(true).map((entry) => entry.command);
+    expect(new Set(commands).size).toBe(commands.length);
+  });
+
+  test('a command the keymap does not bind is not listed', () => {
+    // `selectWord` has no binding by design; listing it would promise a chord.
+    const commands = buildPaletteEntries(true).map((entry) => entry.command);
+    expect(commands).not.toContain('selectWord');
+    expect(commands).not.toContain('escape');
+  });
+});
+
+describe('filterPaletteEntries', () => {
+  const entries = buildPaletteEntries(true);
+
+  test('an empty query lists everything, in the palette’s own order', () => {
+    expect(filterPaletteEntries(entries, '')).toBe(entries);
+    expect(filterPaletteEntries(entries, '   ')).toBe(entries);
+  });
+
+  test('matches on the label', () => {
+    const found = filterPaletteEntries(entries, 'occurrence').map((entry) => entry.command);
+    expect(found).toContain('selectNextOccurrence');
+    expect(found).toContain('selectAllOccurrences');
+  });
+
+  test('matches on the shortcut, which is how a reader who knows the chord looks', () => {
+    const found = filterPaletteEntries(entries, '⌘D').map((entry) => entry.command);
+    expect(found).toContain('selectNextOccurrence');
+  });
+
+  test('every word has to match, so a two-word query narrows', () => {
+    const broad = filterPaletteEntries(entries, 'line');
+    const narrow = filterPaletteEntries(entries, 'line up');
+
+    expect(narrow.length).toBeLessThan(broad.length);
+    expect(narrow.map((entry) => entry.command)).toContain('moveLineUp');
+  });
+
+  test('a query nothing matches yields an empty list rather than everything', () => {
+    expect(filterPaletteEntries(entries, 'zzzz')).toEqual([]);
+  });
+
+  test('matching ignores case', () => {
+    expect(filterPaletteEntries(entries, 'UNDO').map((entry) => entry.command)).toEqual(['undo']);
+  });
+});

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

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The command palette's list, as data.
+ *
+ * The palette is a VIEW of the keymap rather than a second list to maintain, so
+ * the rules live here — pure, testable, and shared with the component. The
+ * property that matters most is negative: an entry the keymap does not bind must
+ * never appear, because a palette entry that does nothing reads as a broken
+ * editor rather than a missing feature.
+ */
+
+import { EDITOR_KEY_BINDINGS, type EditorCommand } from '@/shared/lib/code/editor/keymap';
+import { describeBinding } from '@/shared/lib/ui/key-binding';
+
+export interface PaletteEntry {
+  command: EditorCommand;
+  label: string;
+  chord: string;
+}
+
+/**
+ * The palette's running order: what a reader reaches for most, first. The
+ * commands are named here rather than derived from the keymap's own order, which
+ * groups chords by family for readability rather than by frequency of use.
+ */
+export const PALETTE_ORDER: readonly EditorCommand[] = [
+  'find',
+  'replace',
+  'selectNextOccurrence',
+  'selectAllOccurrences',
+  'insertCursorBelow',
+  'toggleComment',
+  'moveLineUp',
+  'moveLineDown',
+  'copyLineUp',
+  'copyLineDown',
+  'deleteLine',
+  'insertLineBelow',
+  'insertLineAbove',
+  'indent',
+  'outdent',
+  'toggleWordWrap',
+  'toggleCaseSensitive',
+  'toggleWholeWord',
+  'toggleRegex',
+  'undo',
+  'redo',
+  'lineStart',
+  'lineEnd',
+  'documentStart',
+  'documentEnd',
+  'selectToLineStart',
+  'selectToLineEnd',
+  'selectToDocumentStart',
+  'selectToDocumentEnd',
+  'nextMatch',
+  'previousMatch',
+  'replaceOne',
+  'replaceAll',
+];
+
+/**
+ * The entries, built from the keymap so a command cannot be listed and unbound.
+ * A command in `PALETTE_ORDER` that the keymap dropped is skipped rather than
+ * rendered with an empty chord.
+ */
+export function buildPaletteEntries(isMac: boolean): PaletteEntry[] {
+  return PALETTE_ORDER.flatMap((command) => {
+    const binding = EDITOR_KEY_BINDINGS.find((entry) => entry.command === command);
+    if (!binding) return [];
+    return [{ command, label: binding.label, chord: describeBinding(binding, isMac) }];
+  });
+}
+
+/**
+ * The entries a query matches. Matched on the label, the chord and the command
+ * name: typing `⌘d` finds the same command as typing `occurrence`, which is how
+ * a reader who already knows the shortcut looks for it.
+ */
+export function filterPaletteEntries(entries: readonly PaletteEntry[], query: string): readonly PaletteEntry[] {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return entries;
+  const parts = needle.split(/\s+/);
+  return entries.filter((entry) => {
+    const haystack = `${entry.label} ${entry.chord} ${entry.command}`.toLowerCase();
+    return parts.every((part) => haystack.includes(part));
+  });
+}