ompchamber 3.0.0 → 3.1.0

package/src/client/hooks/editor/scroll-container.test.ts

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The scroll-container walk, shared by the editor's lazy window and the find
+ * widget's reveal.
+ *
+ * The two must agree: one resolves which lines to draw from the visible band,
+ * the other moves that band. Two copies of this walk would let the widget scroll
+ * a container the window never reads — the match would be marked somewhere
+ * nobody can see. Exercised against a real DOM (happy-dom) because the answer is
+ * a computed style.
+ */
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+
+import { findScrollContainer } from '@/client/hooks/editor/scroll-container';
+
+const installed: Record<string, unknown> = {};
+const displaced: Record<string, unknown> = {};
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  for (const key of ['window', 'document', 'Node', 'Element', 'HTMLElement', 'getComputedStyle']) {
+    displaced[key] = (globalThis as Record<string, unknown>)[key];
+    installed[key] = (win as unknown as Record<string, unknown>)[key];
+    (globalThis as Record<string, unknown>)[key] = installed[key];
+  }
+});
+
+afterAll(() => {
+  for (const key of Object.keys(installed)) {
+    if (displaced[key] === undefined) delete (globalThis as Record<string, unknown>)[key];
+    else (globalThis as Record<string, unknown>)[key] = displaced[key];
+  }
+});
+
+/** An element whose computed style reports `overflow-y`, with a scrollable height. */
+function makeElement(overflowY: string, scrollable: boolean): HTMLElement {
+  const element = document.createElement('div');
+  element.style.overflowY = overflowY;
+  if (scrollable) {
+    // happy-dom reports clientHeight 0, so the walk's `scrollHeight > clientHeight`
+    // test needs a stubbed pair to describe a container that can actually scroll.
+    Object.defineProperty(element, 'scrollHeight', { value: 400, configurable: true });
+    Object.defineProperty(element, 'clientHeight', { value: 100, configurable: true });
+  }
+  return element;
+}
+
+describe('findScrollContainer', () => {
+  test('finds the nearest ancestor that scrolls', () => {
+    const outer = makeElement('auto', true);
+    const inner = makeElement('visible', false);
+    const surface = document.createElement('div');
+    inner.appendChild(surface);
+    outer.appendChild(inner);
+    document.body.appendChild(outer);
+
+    expect(findScrollContainer(surface)).toBe(outer);
+    outer.remove();
+  });
+
+  test('skips a container that cannot actually scroll', () => {
+    // `overflow: auto` on a box whose content fits is not a scroller: returning
+    // it would make `revealOffset` write scrollTop onto a box that ignores it.
+    const outer = makeElement('auto', true);
+    const fitted = makeElement('auto', false);
+    const surface = document.createElement('div');
+    fitted.appendChild(surface);
+    outer.appendChild(fitted);
+    document.body.appendChild(outer);
+
+    expect(findScrollContainer(surface)).toBe(outer);
+    outer.remove();
+  });
+
+  test('reports nothing when no ancestor scrolls', () => {
+    const plain = document.createElement('div');
+    const surface = document.createElement('div');
+    plain.appendChild(surface);
+    document.body.appendChild(plain);
+
+    expect(findScrollContainer(surface)).toBeNull();
+    plain.remove();
+  });
+
+  test('prefers the nearest scroller, so a nested panel scrolls itself', () => {
+    const outer = makeElement('auto', true);
+    const inner = makeElement('scroll', true);
+    const surface = document.createElement('div');
+    inner.appendChild(surface);
+    outer.appendChild(inner);
+    document.body.appendChild(outer);
+
+    expect(findScrollContainer(surface)).toBe(inner);
+    outer.remove();
+  });
+});

package/src/client/hooks/editor/scroll-container.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The ancestor a code surface actually scrolls inside.
+ *
+ * The lazy editor window and the find widget's "scroll to this match" both need
+ * this answer, and they must agree: one resolves which lines to draw from the
+ * visible band, the other moves that band. Two copies of the walk would let the
+ * widget scroll a container the window never reads.
+ *
+ * Walks up rather than taking a ref: the surface is mounted under different
+ * scrollers (the desktop editor panel, the phone's full-screen editor) and is
+ * also mounted inside a page that scrolls itself, which is the `null` case.
+ */
+export function findScrollContainer(element: HTMLElement): HTMLElement | null {
+  for (let node = element.parentElement; node; node = node.parentElement) {
+    const overflowY = getComputedStyle(node).overflowY;
+    if ((overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') && node.scrollHeight > node.clientHeight) {
+      return node;
+    }
+  }
+  return null;
+}

package/src/client/hooks/editor/use-code-window.ts

@@ -1,15 +1,8 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import type { RefObject } from 'preact';
 
-import {
-  codeWindow,
-  firstWindow,
-  resolveWindow,
-  sameWindow,
-  type CodeWindow,
-  type LineGeometry,
-  type LineWindow,
-} from '@/shared/lib/code/lazy-window';
+import { codeWindow, firstWindow, resolveWindow, sameWindow, type CodeWindow, type LineGeometry, type LineWindow } from '@/shared/lib/code/lazy-window';
+import { findScrollContainer } from '@/client/hooks/editor/scroll-container';
 
 export interface UseCodeWindowOptions {
   /** The surface's root box: the frame every line offset in `geometry` is measured from. */
@@ -22,17 +15,6 @@ export interface UseCodeWindowOptions {
   enabled: boolean;
 }
 
-/** Nearest ancestor the document scrolls inside, or null when the page itself scrolls. */
-function findScrollContainer(element: HTMLElement): HTMLElement | null {
-  for (let node = element.parentElement; node; node = node.parentElement) {
-    const overflowY = getComputedStyle(node).overflowY;
-    if ((overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') && node.scrollHeight > node.clientHeight) {
-      return node;
-    }
-  }
-  return null;
-}
-
 /**
  * The lines visible inside the scroll container `root` lives in.
  *

package/src/client/hooks/editor/use-editor-find-write.test.ts

@@ -0,0 +1,170 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * `useEditorFind` — writing.
+ *
+ * The rules asserted here are the ones a user notices when they break: a
+ * replacement is ONE undoable write that re-aims at the match after the text it
+ * just inserted, "replace all" reharness.writes every match, and a replacement that
+ * changes nothing harness.writes nothing at all.
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { createFindHarness } from '@/client/hooks/editor/find-harness.test-util';
+
+const harness = await createFindHarness();
+harness.install();
+
+describe('useEditorFind replacing', () => {
+  test('replace harness.writes one undoable edit and re-aims past the inserted text', async () => {
+    await harness.act(async () => {
+      harness.find?.openReplace();
+    });
+    await harness.act(async () => {
+      harness.find?.setReplacement('OMEGA');
+    });
+    await harness.act(async () => {
+      harness.find?.replaceCurrent();
+    });
+
+    expect(harness.writes[0].value).toBe('OMEGA beta alpha');
+    expect(harness.writes[0].caretStart).toBe(5);
+  });
+
+  test('replace all reharness.writes every match', async () => {
+    await harness.act(async () => {
+      harness.find?.openReplace();
+    });
+    await harness.act(async () => {
+      harness.find?.setReplacement('X');
+    });
+    await harness.act(async () => {
+      harness.find?.replaceAll();
+    });
+
+    expect(harness.writes[0].value).toBe('X beta X');
+  });
+
+  test('replace all on an unchanged buffer harness.writes nothing', async () => {
+    await harness.act(async () => {
+      harness.find?.openReplace();
+    });
+    await harness.act(async () => {
+      harness.find?.setQuery('beta');
+    });
+    await harness.act(async () => {
+      harness.find?.setReplacement('beta');
+    });
+    await harness.act(async () => {
+      harness.find?.replaceAll();
+    });
+
+    expect(harness.writes).toEqual([]);
+  });
+
+  test('replace with no current match harness.writes nothing', async () => {
+    await harness.act(async () => {
+      harness.find?.openReplace();
+    });
+    await harness.act(async () => {
+      harness.find?.setQuery('zzz');
+    });
+    await harness.act(async () => {
+      harness.find?.replaceCurrent();
+    });
+
+    expect(harness.writes).toEqual([]);
+  });
+});
+
+describe('useEditorFind options', () => {
+  test('toggling match case narrows the matches', async () => {
+    await harness.act(async () => {
+      harness.find?.openFind();
+    });
+    await harness.act(async () => {
+      harness.find?.setQuery('ALPHA');
+    });
+    expect(harness.find?.matches.length).toBe(2);
+
+    await harness.act(async () => {
+      harness.find?.toggleOption('matchCase');
+    });
+
+    expect(harness.find?.matches.length).toBe(0);
+  });
+
+  test('an invalid pattern is reported as such, not as an empty result', async () => {
+    await harness.act(async () => {
+      harness.find?.openFind();
+    });
+    await harness.act(async () => {
+      harness.find?.toggleOption('isRegex');
+    });
+    await harness.act(async () => {
+      harness.find?.setQuery('a(');
+    });
+
+    expect(harness.find?.invalid).toBe(true);
+    expect(harness.find?.matches).toEqual([]);
+  });
+});
+
+describe('useEditorFind commands', () => {
+  test('runCommand routes a find-bar chord to the bar’s own action', async () => {
+    await harness.act(async () => {
+      harness.find?.runCommand('find');
+    });
+    expect(harness.find?.open).toBe(true);
+
+    await harness.act(async () => {
+      harness.find?.runCommand('replace');
+    });
+    expect(harness.find?.replaceOpen).toBe(true);
+  });
+
+  test('an editor command the bar does not own is ignored, not misrouted', async () => {
+    await harness.act(async () => {
+      harness.find?.openFind();
+    });
+    await harness.act(async () => {
+      harness.find?.runCommand('deleteLine');
+    });
+
+    expect(harness.writes).toEqual([]);
+    expect(harness.find?.open).toBe(true);
+  });
+
+  test('closing puts focus back on the current match', async () => {
+    await harness.act(async () => {
+      harness.find?.openFind();
+    });
+    harness.selections.length = 0;
+
+    await harness.act(async () => {
+      harness.find?.close();
+    });
+
+    expect(harness.find?.open).toBe(false);
+    expect(harness.selections).toEqual([[0, 5, true]]);
+  });
+
+  test('a new document re-aims at the top instead of keeping the old offset', async () => {
+    await harness.act(async () => {
+      harness.find?.openFind();
+    });
+    await harness.act(async () => {
+      harness.find?.step(1);
+    });
+    expect(harness.find?.currentIndex).toBe(1);
+
+    harness.input.documentKey = 'file-2';
+    await harness.rerender();
+
+    expect(harness.find?.currentIndex).toBe(0);
+  });
+});

package/src/client/hooks/editor/use-editor-find.test.ts

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * `useEditorFind` — opening and stepping.
+ *
+ * The rules asserted here are the ones a user notices when they break: the query
+ * seeds from the selection (VS Code's behaviour, and the reason ⌘F on a word is
+ * one keystroke), ⌘F on an open bar refocuses the field instead of overwriting
+ * what is in it, and a new document re-aims at the top rather than keeping an
+ * offset that means something else in this file.
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { createFindHarness } from '@/client/hooks/editor/find-harness.test-util';
+
+const harness = await createFindHarness();
+harness.install();
+
+describe('useEditorFind opening', () => {
+  test('⌘F seeds the query from the selection and jumps to the first match', async () => {
+    await harness.act(async () => {
+      harness.find?.openFind();
+    });
+
+    expect(harness.find?.open).toBe(true);
+    expect(harness.find?.query).toBe('alpha');
+    expect(harness.find?.matches.length).toBe(2);
+    expect(harness.find?.currentIndex).toBe(0);
+    expect(harness.reveals).toEqual([0]);
+  });
+
+  test('an empty or multi-line selection does not seed a query', async () => {
+    harness.input.selection = { start: 0, end: 0 };
+    await harness.act(async () => {
+      harness.find?.openFind();
+    });
+
+    expect(harness.find?.query).toBe('');
+    expect(harness.find?.open).toBe(true);
+  });
+
+  test('⌘F on an open bar keeps the query rather than re-seeding it', async () => {
+    // The bar keeps the current match selected in the document, so re-seeding
+    // would overwrite what the user typed with that match's text.
+    await harness.act(async () => {
+      harness.find?.openFind();
+    });
+    await harness.act(async () => {
+      harness.find?.setQuery('beta');
+    });
+    harness.input.selection = { start: 0, end: 5 };
+
+    await harness.act(async () => {
+      harness.find?.openFind();
+    });
+
+    expect(harness.find?.query).toBe('beta');
+  });
+
+  test('opening replace shows the second row and keeps the same match', async () => {
+    await harness.act(async () => {
+      harness.find?.openReplace();
+    });
+
+    expect(harness.find?.open).toBe(true);
+    expect(harness.find?.replaceOpen).toBe(true);
+    expect(harness.find?.currentIndex).toBe(0);
+  });
+});
+
+describe('useEditorFind stepping', () => {
+  test('F3 moves to the next match and wraps', async () => {
+    await harness.act(async () => {
+      harness.find?.openFind();
+    });
+    await harness.act(async () => {
+      harness.find?.step(1);
+    });
+    expect(harness.find?.currentIndex).toBe(1);
+
+    await harness.act(async () => {
+      harness.find?.step(1);
+    });
+    expect(harness.find?.currentIndex).toBe(0);
+  });
+
+  test('⇧F3 moves back, wrapping to the last match', async () => {
+    await harness.act(async () => {
+      harness.find?.openFind();
+    });
+    await harness.act(async () => {
+      harness.find?.step(-1);
+    });
+
+    expect(harness.find?.currentIndex).toBe(1);
+  });
+
+  test('stepping with no matches does nothing', async () => {
+    await harness.act(async () => {
+      harness.find?.openFind();
+    });
+    await harness.act(async () => {
+      harness.find?.setQuery('zzz');
+    });
+    const before = harness.find?.currentIndex;
+
+    await harness.act(async () => {
+      harness.find?.step(1);
+    });
+
+    expect(harness.find?.currentIndex).toBe(before);
+    expect(harness.find?.matches.length).toBe(0);
+  });
+});