markers.html
diff --git a/packages/diffs/test/e2e/folding.pw.ts b/packages/diffs/test/e2e/folding.pw.ts
new file mode 100644
index 000000000..ec373a823
--- /dev/null
+++ b/packages/diffs/test/e2e/folding.pw.ts
@@ -0,0 +1,147 @@
+import { expect, type Page, test } from '@playwright/test';
+
+const GUTTER = '[data-code][data-folding] [data-gutter]';
+const CONTENT_ROWS = '[data-content] > [data-line]';
+const OUTER_TOGGLE = '[data-column-number="1"] [data-fold-toggle]';
+const OUTER_INDICATOR =
+ '[data-content] > [data-line="1"] > [data-fold-indicator]';
+
+async function openFixture(page: Page): Promise {
+ await page.goto('/test/e2e/fixtures/folding.html');
+ await page.waitForFunction(() => window.__foldingReady === true);
+}
+
+async function openReadOnlyFixture(page: Page): Promise {
+ await page.goto('/test/e2e/fixtures/folding-readonly.html');
+ await page.waitForFunction(() => window.__foldingReady === true);
+}
+
+const renderedLineNumbers = (page: Page): Promise =>
+ page
+ .locator(CONTENT_ROWS)
+ .evaluateAll((rows) =>
+ rows.map((row) => Number((row as HTMLElement).dataset.line))
+ );
+
+const firstTokenColor = (page: Page): Promise =>
+ page
+ .locator('[data-content] > [data-line="1"] [data-char]')
+ .first()
+ .evaluate((element) => getComputedStyle(element).color);
+
+test.describe('editor folding controls', () => {
+ test('reveal on hover and fold or unfold the outer block', async ({
+ page,
+ }) => {
+ await openFixture(page);
+
+ const gutter = page.locator(GUTTER);
+ let toggle = page.locator(OUTER_TOGGLE);
+ await expect(toggle.locator('use')).toHaveAttribute(
+ 'href',
+ '#diffs-icon-fold-chevron-down'
+ );
+ await expect(toggle).toHaveCSS('opacity', '0');
+
+ await gutter.hover();
+ await expect(toggle).toHaveCSS('opacity', '0.5');
+
+ await toggle.hover();
+ await expect(toggle).toHaveCSS('opacity', '0.75');
+
+ await toggle.click();
+ await expect.poll(() => renderedLineNumbers(page)).toEqual([1, 7, 8]);
+
+ await page.mouse.move(1150, 780);
+ toggle = page.locator(OUTER_TOGGLE);
+ await expect(toggle).toHaveAttribute('data-folded', '');
+ await expect(toggle.locator('use')).toHaveAttribute(
+ 'href',
+ '#diffs-icon-fold-chevron-right'
+ );
+ await expect(toggle).toHaveCSS('opacity', '0.5');
+
+ const indicator = page.locator(OUTER_INDICATOR);
+ const ellipsis = indicator.locator('[data-fold-ellipsis]');
+ await expect(indicator).toBeVisible();
+ await expect(ellipsis.locator('use')).toHaveAttribute(
+ 'href',
+ '#diffs-icon-fold-ellipsis'
+ );
+ expect(await indicator.getAttribute('data-fold-end-text')).toBeNull();
+ await expect(indicator).toHaveText('');
+ await expect(page.locator('[data-content] > [data-line="7"]')).toHaveText(
+ '}'
+ );
+
+ const ellipsisBox = await ellipsis.boundingBox();
+ const indicatorBox = await indicator.boundingBox();
+ expect(ellipsisBox).not.toBeNull();
+ expect(indicatorBox).not.toBeNull();
+ expect(indicatorBox!.width).toBeCloseTo(ellipsisBox!.width, 5);
+
+ const darkTokenColor = await firstTokenColor(page);
+ await ellipsis.focus();
+ await expect(ellipsis).toBeFocused();
+ await page.evaluate(() => window.__setFoldingTheme?.());
+ await expect.poll(() => firstTokenColor(page)).not.toBe(darkTokenColor);
+ await expect(ellipsis).toBeFocused();
+
+ await ellipsis.click();
+ await expect
+ .poll(() => renderedLineNumbers(page))
+ .toEqual([1, 2, 3, 4, 5, 6, 7, 8]);
+ await expect(indicator).toHaveCount(0);
+
+ await page.mouse.move(1150, 780);
+ toggle = page.locator(OUTER_TOGGLE);
+ await expect(toggle).not.toHaveAttribute('data-folded', '');
+ await expect(toggle.locator('use')).toHaveAttribute(
+ 'href',
+ '#diffs-icon-fold-chevron-down'
+ );
+ await expect(toggle).toHaveCSS('opacity', '0');
+ });
+});
+
+test.describe('read-only folding controls', () => {
+ test('fold and unfold without an editor and skip line selection', async ({
+ page,
+ }) => {
+ await openReadOnlyFixture(page);
+
+ const gutter = page.locator(GUTTER);
+ const toggle = page.locator(OUTER_TOGGLE);
+ await expect(toggle.locator('use')).toHaveAttribute(
+ 'href',
+ '#diffs-icon-fold-chevron-down'
+ );
+
+ await gutter.hover();
+ await expect(toggle).toHaveCSS('opacity', '0.5');
+
+ await toggle.click();
+ await expect.poll(() => renderedLineNumbers(page)).toEqual([1, 7, 8]);
+ await expect(toggle).toHaveAttribute('data-folded', '');
+
+ // The toggle click must not have reached the line-number handler.
+ expect(await page.evaluate(() => window.__lineNumberClicks ?? [])).toEqual(
+ []
+ );
+
+ const indicator = page.locator(OUTER_INDICATOR);
+ const ellipsis = indicator.locator('[data-fold-ellipsis]');
+ await expect(indicator).toBeVisible();
+ await ellipsis.click();
+ await expect
+ .poll(() => renderedLineNumbers(page))
+ .toEqual([1, 2, 3, 4, 5, 6, 7, 8]);
+ await expect(indicator).toHaveCount(0);
+
+ // A plain line-number click still selects.
+ await page.locator('[data-column-number="8"]').click();
+ await expect
+ .poll(() => page.evaluate(() => window.__lineNumberClicks ?? []))
+ .toEqual([8]);
+ });
+});
diff --git a/packages/diffs/test/editorFolding.test.ts b/packages/diffs/test/editorFolding.test.ts
new file mode 100644
index 000000000..7dc149832
--- /dev/null
+++ b/packages/diffs/test/editorFolding.test.ts
@@ -0,0 +1,643 @@
+import { afterAll, describe, expect, test } from 'bun:test';
+
+import { File, type FileOptions } from '../src/components/File';
+import { FileDiff } from '../src/components/FileDiff';
+import { DEFAULT_THEMES } from '../src/constants';
+import { Editor, type EditorOptions } from '../src/editor/editor';
+import { disposeHighlighter } from '../src/highlighter/shared_highlighter';
+import type { FileContents, LineRange } from '../src/types';
+import { installDom, wait, waitFor } from './domHarness';
+
+afterAll(async () => {
+ await disposeHighlighter();
+});
+
+const FOLDABLE_CONTENTS = [
+ 'function outer() {',
+ ' const before = 1;',
+ ' if (before) {',
+ ' console.log(before);',
+ ' }',
+ ' return before;',
+ '}',
+ 'const after = true;',
+].join('\n');
+
+interface FileEditorFixture {
+ cleanup(): void;
+ container: HTMLElement;
+ editor: Editor;
+ file: File;
+}
+
+async function waitForEditableContent(container: HTMLElement): Promise {
+ const hasEditableContent = (): boolean =>
+ [
+ ...(container.shadowRoot?.querySelectorAll(
+ '[data-content]'
+ ) ?? []),
+ ].some(
+ (content) =>
+ content.contentEditable === 'true' ||
+ content.getAttribute('contenteditable') === 'true'
+ );
+
+ await waitFor(hasEditableContent, { timeout: 3000 });
+
+ expect(hasEditableContent()).toBe(true);
+}
+
+interface FileEditorFixtureProps {
+ editorOptions?: EditorOptions;
+ fileOptions?: Partial>;
+ contents?: string;
+}
+
+async function createFileEditorFixture({
+ editorOptions,
+ fileOptions,
+ contents = FOLDABLE_CONTENTS,
+}: FileEditorFixtureProps = {}): Promise {
+ const dom = installDom();
+ const container = document.createElement('div');
+ document.body.appendChild(container);
+
+ const file = new File({
+ disableFileHeader: true,
+ theme: DEFAULT_THEMES,
+ ...fileOptions,
+ });
+ const editor = new Editor(editorOptions);
+ const fileContents: FileContents = {
+ name: 'foldable.ts',
+ contents,
+ };
+
+ file.render({
+ file: fileContents,
+ fileContainer: container,
+ forceRender: true,
+ });
+ editor.edit(file);
+ await waitForEditableContent(container);
+
+ return {
+ cleanup() {
+ editor.cleanUp();
+ file.cleanUp();
+ dom.cleanup();
+ },
+ container,
+ editor,
+ file,
+ };
+}
+
+function shadowRoot(container: HTMLElement): ShadowRoot {
+ const shadow = container.shadowRoot;
+ if (shadow == null) {
+ throw new Error('file container has no shadow root');
+ }
+ return shadow;
+}
+
+function renderedLineNumbers(container: HTMLElement): number[] {
+ return [
+ ...shadowRoot(container).querySelectorAll(
+ '[data-content] > [data-line]'
+ ),
+ ].map((line) => Number(line.dataset.line));
+}
+
+function gutterRow(
+ container: HTMLElement,
+ oneIndexedLine: number
+): HTMLElement {
+ const row = shadowRoot(container).querySelector(
+ `[data-column-number="${oneIndexedLine}"]`
+ );
+ if (row == null) {
+ throw new Error(`no gutter row found for line ${oneIndexedLine}`);
+ }
+ return row;
+}
+
+function foldToggle(
+ container: HTMLElement,
+ oneIndexedLine: number
+): HTMLButtonElement {
+ const toggle = gutterRow(container, oneIndexedLine).querySelector(
+ '[data-fold-toggle]'
+ );
+ if (!(toggle instanceof HTMLButtonElement)) {
+ throw new Error(`no fold toggle found for line ${oneIndexedLine}`);
+ }
+ return toggle;
+}
+
+function foldIconHref(toggle: HTMLButtonElement): string | null {
+ return toggle.querySelector('use')?.getAttribute('href') ?? null;
+}
+
+function foldIndicator(
+ container: HTMLElement,
+ oneIndexedLine: number
+): HTMLElement {
+ const indicator = shadowRoot(container).querySelector(
+ `[data-content] > [data-line="${oneIndexedLine}"] > [data-fold-indicator]`
+ );
+ if (indicator == null) {
+ throw new Error(`no fold indicator found for line ${oneIndexedLine}`);
+ }
+ return indicator;
+}
+
+function foldEllipsis(
+ container: HTMLElement,
+ oneIndexedLine: number
+): HTMLButtonElement {
+ const ellipsis = foldIndicator(container, oneIndexedLine).querySelector(
+ '[data-fold-ellipsis]'
+ );
+ if (!(ellipsis instanceof HTMLButtonElement)) {
+ throw new Error(`no fold ellipsis found for line ${oneIndexedLine}`);
+ }
+ return ellipsis;
+}
+
+function recordFoldRangeUpdates(file: File): LineRange[][] {
+ const updates: LineRange[][] = [];
+ const setFoldRanges = file.__setFoldRanges.bind(file);
+ file.__setFoldRanges = (ranges) => {
+ updates.push(ranges.map((range) => ({ ...range })));
+ setFoldRanges(ranges);
+ };
+ return updates;
+}
+
+async function waitForLines(
+ container: HTMLElement,
+ expected: number[]
+): Promise {
+ await waitFor(
+ () =>
+ JSON.stringify(renderedLineNumbers(container)) ===
+ JSON.stringify(expected),
+ { timeout: 3000 }
+ );
+ expect(renderedLineNumbers(container)).toEqual(expected);
+}
+
+describe('editor folding on File', () => {
+ test('is enabled by default and folds or unfolds a block from the gutter', async () => {
+ const { cleanup, container } = await createFileEditorFixture();
+ try {
+ const shadow = shadowRoot(container);
+ const firstGutterRow = gutterRow(container, 1);
+ const foldZone = firstGutterRow.querySelector(':scope > [data-fold]');
+ const initialToggle = foldToggle(container, 1);
+
+ expect(shadow.querySelector('[data-code][data-folding]')).not.toBe(null);
+ expect(foldZone?.parentElement).toBe(firstGutterRow);
+ expect(firstGutterRow.closest('[data-gutter]')).not.toBe(null);
+ expect(foldZone?.contains(initialToggle)).toBe(true);
+ expect(initialToggle.getAttribute('aria-expanded')).toBe('true');
+ expect(foldIconHref(initialToggle)).toBe('#diffs-icon-fold-chevron-down');
+
+ initialToggle.focus();
+ initialToggle.click();
+ await waitForLines(container, [1, 7, 8]);
+
+ const foldedToggle = foldToggle(container, 1);
+ expect(shadow.activeElement).toBe(foldedToggle);
+ expect(foldedToggle.hasAttribute('data-folded')).toBe(true);
+ expect(foldedToggle.getAttribute('aria-expanded')).toBe('false');
+ expect(foldIconHref(foldedToggle)).toBe('#diffs-icon-fold-chevron-right');
+
+ const indicator = foldIndicator(container, 1);
+ const ellipsis = foldEllipsis(container, 1);
+ expect(indicator.parentElement?.dataset.line).toBe('1');
+ expect(indicator.getAttribute('contenteditable')).toBe('false');
+ expect(ellipsis.ariaLabel).toBe('Unfold line 1');
+ expect(foldIconHref(ellipsis)).toBe('#diffs-icon-fold-ellipsis');
+ expect(indicator.dataset.foldEndText).toBeUndefined();
+ expect(indicator.children.length).toBe(1);
+ expect(indicator.firstElementChild).toBe(ellipsis);
+ expect(indicator.textContent).toBe('');
+
+ ellipsis.click();
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 7, 8]);
+ expect(shadow.querySelector('[data-fold-indicator]')).toBe(null);
+
+ const unfoldedToggle = foldToggle(container, 1);
+ expect(shadow.activeElement).toBe(unfoldedToggle);
+ expect(unfoldedToggle.hasAttribute('data-folded')).toBe(false);
+ expect(foldIconHref(unfoldedToggle)).toBe(
+ '#diffs-icon-fold-chevron-down'
+ );
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('can be disabled through the file options', async () => {
+ const { cleanup, container } = await createFileEditorFixture({
+ fileOptions: { folding: false },
+ });
+ try {
+ const shadow = shadowRoot(container);
+ expect(shadow.querySelector('[data-code][data-folding]')).toBe(null);
+ expect(shadow.querySelector('[data-fold]')).toBe(null);
+ expect(shadow.querySelector('[data-fold-toggle]')).toBe(null);
+ expect(renderedLineNumbers(container)).toEqual([1, 2, 3, 4, 5, 6, 7, 8]);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('responds to folding option changes at runtime', async () => {
+ const { cleanup, container, file } = await createFileEditorFixture({
+ fileOptions: { folding: false },
+ });
+ const setFolding = (folding: boolean): void => {
+ file.setOptions({ ...file.options, folding });
+ };
+ try {
+ setFolding(true);
+ await waitFor(() => foldToggle(container, 1) != null);
+
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+
+ setFolding(false);
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 7, 8]);
+ expect(shadowRoot(container).querySelector('[data-fold-toggle]')).toBe(
+ null
+ );
+
+ setFolding(true);
+ expect(foldToggle(container, 1)).toBeInstanceOf(HTMLButtonElement);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('preserves a nested fold while its outer fold is toggled', async () => {
+ const { cleanup, container } = await createFileEditorFixture();
+ try {
+ foldToggle(container, 3).click();
+ await waitForLines(container, [1, 2, 3, 5, 6, 7, 8]);
+
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 2, 3, 5, 6, 7, 8]);
+
+ const nestedToggle = foldToggle(container, 3);
+ expect(nestedToggle.hasAttribute('data-folded')).toBe(true);
+ expect(foldIconHref(nestedToggle)).toBe('#diffs-icon-fold-chevron-right');
+
+ nestedToggle.click();
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 7, 8]);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('round-trips nested fold state and ignores stale ranges', async () => {
+ const { cleanup, container, editor } = await createFileEditorFixture();
+ try {
+ foldToggle(container, 3).click();
+ await waitForLines(container, [1, 2, 3, 5, 6, 7, 8]);
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+
+ expect(editor.getState().foldRanges).toEqual([
+ { startLine: 0, endLine: 5 },
+ { startLine: 2, endLine: 3 },
+ ]);
+
+ editor.setState({ foldRanges: [] });
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 7, 8]);
+
+ editor.setState({
+ foldRanges: [
+ { startLine: 0, endLine: 6 },
+ { startLine: 2, endLine: 3 },
+ { startLine: 0, endLine: 5 },
+ { startLine: 2, endLine: 4 },
+ { startLine: 2, endLine: 3 },
+ { startLine: -1, endLine: 5 },
+ { startLine: 7, endLine: 9 },
+ ],
+ });
+ await waitForLines(container, [1, 7, 8]);
+ expect(editor.getState().foldRanges).toEqual([
+ { startLine: 0, endLine: 5 },
+ { startLine: 2, endLine: 3 },
+ ]);
+
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 2, 3, 5, 6, 7, 8]);
+ expect(foldToggle(container, 3).hasAttribute('data-folded')).toBe(true);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('reveals a folded caret restored through setState', async () => {
+ const { cleanup, container, editor } = await createFileEditorFixture();
+ try {
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+
+ editor.setState({
+ selections: [
+ {
+ start: { line: 3, character: 4 },
+ end: { line: 3, character: 4 },
+ direction: 0,
+ },
+ ],
+ });
+
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 7, 8]);
+ expect(editor.getState().selections?.at(-1)?.start).toEqual({
+ line: 3,
+ character: 4,
+ });
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('keeps a fold when restoring a caret on its visible delimiter', async () => {
+ const { cleanup, container, editor } = await createFileEditorFixture();
+ try {
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+
+ editor.setState({
+ foldRanges: [{ startLine: 0, endLine: 5 }],
+ selections: [
+ {
+ start: { line: 6, character: 0 },
+ end: { line: 6, character: 0 },
+ direction: 0,
+ },
+ ],
+ });
+
+ await waitForLines(container, [1, 7, 8]);
+ expect(editor.getState().foldRanges).toEqual([
+ { startLine: 0, endLine: 5 },
+ ]);
+ expect(editor.getState().selections?.at(-1)?.start).toEqual({
+ line: 6,
+ character: 0,
+ });
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('keeps a fold between line-changing edits in a net-zero batch', async () => {
+ const contents = [
+ 'const first = {',
+ ' value: 1,',
+ '};',
+ 'const middle = true;',
+ 'const second = {',
+ ' value: 2,',
+ '};',
+ 'removeMe();',
+ 'keepMe();',
+ ].join('\n');
+ const { cleanup, container, editor } = await createFileEditorFixture({
+ contents,
+ });
+ try {
+ foldToggle(container, 5).click();
+ await waitForLines(container, [1, 2, 3, 4, 5, 7, 8, 9]);
+
+ editor.applyEdits([
+ {
+ range: {
+ start: { line: 3, character: 0 },
+ end: { line: 3, character: 0 },
+ },
+ newText: 'inserted();\n',
+ },
+ {
+ range: {
+ start: { line: 7, character: 0 },
+ end: { line: 8, character: 0 },
+ },
+ newText: '',
+ },
+ ]);
+
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 8, 9]);
+ const shiftedToggle = foldToggle(container, 6);
+ expect(shiftedToggle.hasAttribute('data-folded')).toBe(true);
+ expect(foldIconHref(shiftedToggle)).toBe(
+ '#diffs-icon-fold-chevron-right'
+ );
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('shifts a fold when a newline is inserted before its header', async () => {
+ const { cleanup, container, editor } = await createFileEditorFixture();
+ try {
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+ let foldRangesDuringChange: LineRange[] | undefined;
+ editor.setOptions({
+ onChange: () => {
+ foldRangesDuringChange = editor.getState().foldRanges;
+ },
+ });
+
+ editor.applyEdits([
+ {
+ range: {
+ start: { line: 0, character: 0 },
+ end: { line: 0, character: 0 },
+ },
+ newText: '\n',
+ },
+ ]);
+
+ await waitForLines(container, [1, 2, 8, 9]);
+ const shiftedToggle = foldToggle(container, 2);
+ expect(shiftedToggle.hasAttribute('data-folded')).toBe(true);
+ expect(foldIconHref(shiftedToggle)).toBe(
+ '#diffs-icon-fold-chevron-right'
+ );
+ expect(foldRangesDuringChange).toEqual([{ startLine: 1, endLine: 6 }]);
+ expect(editor.getState().foldRanges).toEqual([
+ { startLine: 1, endLine: 6 },
+ ]);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('shifts a fold when whole lines are deleted before its header', async () => {
+ const { cleanup, container, editor } = await createFileEditorFixture({
+ contents: `removeMe();\n${FOLDABLE_CONTENTS}`,
+ });
+ try {
+ foldToggle(container, 2).click();
+ await waitForLines(container, [1, 2, 8, 9]);
+
+ editor.applyEdits([
+ {
+ range: {
+ start: { line: 0, character: 0 },
+ end: { line: 1, character: 0 },
+ },
+ newText: '',
+ },
+ ]);
+
+ await waitForLines(container, [1, 7, 8]);
+ expect(foldToggle(container, 1).hasAttribute('data-folded')).toBe(true);
+ expect(editor.getState().foldRanges).toEqual([
+ { startLine: 0, endLine: 5 },
+ ]);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('retains active fold controls across ordinary character edits', async () => {
+ const { cleanup, container, editor, file } =
+ await createFileEditorFixture();
+ try {
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+ await wait(0);
+
+ const outerToggle = foldToggle(container, 1);
+ const outerIndicator = foldIndicator(container, 1);
+ const foldRangeUpdates = recordFoldRangeUpdates(file);
+
+ editor.applyEdits([
+ {
+ range: {
+ start: { line: 0, character: 9 },
+ end: { line: 0, character: 14 },
+ },
+ newText: 'inner',
+ },
+ ]);
+
+ await waitFor(() => editor.getText().includes('function inner() {'));
+ expect(foldToggle(container, 1)).toBe(outerToggle);
+ expect(foldIndicator(container, 1)).toBe(outerIndicator);
+ expect(outerToggle.isConnected).toBe(true);
+ expect(outerToggle.hasAttribute('data-folded')).toBe(true);
+ expect(foldRangeUpdates).toEqual([]);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('recomputes a fold when its closing delimiter gains a suffix', async () => {
+ const { cleanup, container, editor } = await createFileEditorFixture({
+ contents: ['section {', ' child', '', '}', 'after'].join('\n'),
+ });
+ try {
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 4, 5]);
+
+ editor.applyEdits([
+ {
+ range: {
+ start: { line: 3, character: 1 },
+ end: { line: 3, character: 1 },
+ },
+ newText: ' // comment',
+ },
+ ]);
+
+ await waitForLines(container, [1, 3, 4, 5]);
+ expect(editor.getState().foldRanges).toEqual([
+ { startLine: 0, endLine: 1 },
+ ]);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('syncs each fold toggle to the host once', async () => {
+ const { cleanup, container, file } = await createFileEditorFixture();
+ try {
+ const foldRangeUpdates = recordFoldRangeUpdates(file);
+
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+ await wait(0);
+ expect(foldRangeUpdates).toEqual([[{ startLine: 1, endLine: 5 }]]);
+
+ foldRangeUpdates.length = 0;
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 7, 8]);
+ await wait(0);
+ expect(foldRangeUpdates).toEqual([[]]);
+ } finally {
+ cleanup();
+ }
+ });
+});
+
+describe('editor folding on FileDiff', () => {
+ test('does not render fold controls even when folding is enabled', async () => {
+ const dom = installDom();
+ const container = document.createElement('div');
+ document.body.appendChild(container);
+ const fileDiff = new FileDiff({
+ disableFileHeader: true,
+ diffStyle: 'split',
+ theme: DEFAULT_THEMES,
+ folding: true,
+ });
+ const editor = new Editor();
+ const oldFile: FileContents = {
+ name: 'foldable.ts',
+ contents: FOLDABLE_CONTENTS,
+ };
+ const newFile: FileContents = {
+ name: 'foldable.ts',
+ contents: FOLDABLE_CONTENTS.replace(
+ ' return before;',
+ ' return before + 1;'
+ ),
+ };
+
+ try {
+ fileDiff.render({
+ oldFile,
+ newFile,
+ fileContainer: container,
+ forceRender: true,
+ });
+ editor.edit(fileDiff);
+ await waitForEditableContent(container);
+
+ const shadow = shadowRoot(container);
+ expect(shadow.querySelector('[data-code][data-folding]')).toBe(null);
+ expect(shadow.querySelector('[data-fold]')).toBe(null);
+ expect(shadow.querySelector('[data-fold-toggle]')).toBe(null);
+ } finally {
+ await wait(10);
+ editor.cleanUp();
+ fileDiff.cleanUp();
+ dom.cleanup();
+ }
+ });
+});
diff --git a/packages/diffs/test/editorFoldingRanges.test.ts b/packages/diffs/test/editorFoldingRanges.test.ts
new file mode 100644
index 000000000..247ac65ea
--- /dev/null
+++ b/packages/diffs/test/editorFoldingRanges.test.ts
@@ -0,0 +1,171 @@
+import { describe, expect, test } from 'bun:test';
+
+import { TextDocument } from '../src/editor/textDocument';
+import {
+ computeIndentFoldingRanges,
+ LineRangeIndex,
+ mergeHiddenLineRanges,
+} from '../src/managers/FoldManager';
+
+function document(text: string) {
+ return new TextDocument('inmemory://folding', text);
+}
+
+describe('computeIndentFoldingRanges', () => {
+ test('returns nested ranges in start-line order and excludes standalone closing delimiters', () => {
+ const ranges = computeIndentFoldingRanges(
+ document(
+ ['const value = {', ' nested: {', ' ok: true,', ' },', '};'].join(
+ '\n'
+ )
+ )
+ );
+
+ expect(ranges).toEqual([
+ { startLine: 0, endLine: 3 },
+ { startLine: 1, endLine: 2 },
+ ]);
+ });
+
+ test('uses the next nonblank line and excludes trailing blank lines', () => {
+ const ranges = computeIndentFoldingRanges(
+ document(['section', '', ' child', '', 'sibling', '', ''].join('\n'))
+ );
+
+ expect(ranges).toEqual([{ startLine: 0, endLine: 2 }]);
+ });
+
+ test('includes blank lines before a visible closing delimiter', () => {
+ const ranges = computeIndentFoldingRanges(
+ document(['section {', ' child', '', '}'].join('\n'))
+ );
+
+ expect(ranges).toEqual([{ startLine: 0, endLine: 2 }]);
+ });
+
+ test('uses tab stops when comparing indentation', () => {
+ const ranges = computeIndentFoldingRanges(
+ document(['root', '\tchild', ' sibling', 'next'].join('\n')),
+ 4
+ );
+
+ expect(ranges).toEqual([{ startLine: 0, endLine: 2 }]);
+ });
+
+ test('returns no range when nonblank indentation never increases', () => {
+ expect(
+ computeIndentFoldingRanges(document(['first', '', 'second'].join('\n')))
+ ).toEqual([]);
+ });
+
+ test('only emits ranges that contain at least one child line', () => {
+ const ranges = computeIndentFoldingRanges(
+ document(['root', ' child', 'next', ' final child'].join('\n'))
+ );
+
+ expect(ranges).toEqual([
+ { startLine: 0, endLine: 1 },
+ { startLine: 2, endLine: 3 },
+ ]);
+ expect(ranges.every((range) => range.endLine > range.startLine)).toBeTrue();
+ });
+});
+
+describe('mergeHiddenLineRanges', () => {
+ test('merges the bodies of selected overlapping and adjacent folds', () => {
+ const hiddenRanges = mergeHiddenLineRanges(
+ [
+ { startLine: 0, endLine: 4 },
+ { startLine: 2, endLine: 6 },
+ { startLine: 6, endLine: 8 },
+ { startLine: 10, endLine: 10 },
+ { startLine: 12, endLine: 14 },
+ ],
+ new Set([0, 2, 6, 10])
+ );
+
+ expect(hiddenRanges).toEqual([{ startLine: 1, endLine: 8 }]);
+ });
+});
+
+describe('LineRangeIndex', () => {
+ const index = new LineRangeIndex([
+ { startLine: 7, endLine: 8 },
+ { startLine: 3, endLine: 4 },
+ { startLine: 2, endLine: 3 },
+ ]);
+
+ test('finds hidden lines and their merged containing range', () => {
+ expect(index.isHidden(1)).toBe(false);
+ expect(index.isHidden(2)).toBe(true);
+ expect(index.isHidden(4)).toBe(true);
+ expect(index.isHidden(5)).toBe(false);
+ expect(index.containingRange(3)).toEqual({ startLine: 2, endLine: 4 });
+ expect(index.containingRange(6)).toBeUndefined();
+ });
+
+ test('jumps past a hidden range without creating a range object', () => {
+ expect(index.lineAfterHiddenRange(1)).toBeUndefined();
+ expect(index.lineAfterHiddenRange(2)).toBe(5);
+ expect(index.lineAfterHiddenRange(4)).toBe(5);
+ expect(index.lineAfterHiddenRange(7)).toBe(9);
+ expect(index.lineAfterHiddenRange(9)).toBeUndefined();
+ });
+
+ test('normalizes ranges that are already ordered', () => {
+ const orderedIndex = new LineRangeIndex([
+ { startLine: 2, endLine: 3 },
+ { startLine: 3, endLine: 5 },
+ { startLine: 8, endLine: 9 },
+ ]);
+
+ expect(orderedIndex.containingRange(4)).toEqual({
+ startLine: 2,
+ endLine: 5,
+ });
+ expect(orderedIndex.lineAtVisibleIndex(2, 12)).toBe(6);
+ });
+
+ test('counts hidden and visible lines at boundaries', () => {
+ expect(index.hiddenCountBefore(0)).toBe(0);
+ expect(index.hiddenCountBefore(2)).toBe(0);
+ expect(index.hiddenCountBefore(3)).toBe(1);
+ expect(index.hiddenCountBefore(5)).toBe(3);
+ expect(index.hiddenCountBefore(7)).toBe(3);
+ expect(index.hiddenCountBefore(8)).toBe(4);
+ expect(index.hiddenCountBefore(9)).toBe(5);
+ expect(index.visibleLineCount(12)).toBe(7);
+ });
+
+ test('maps visible indexes back to document lines', () => {
+ expect(
+ Array.from({ length: index.visibleLineCount(12) }, (_, visibleIndex) =>
+ index.lineAtVisibleIndex(visibleIndex, 12)
+ )
+ ).toEqual([0, 1, 5, 6, 9, 10, 11]);
+ expect(index.lineAtVisibleIndex(-1, 12)).toBeUndefined();
+ expect(index.lineAtVisibleIndex(7, 12)).toBeUndefined();
+ });
+
+ test('finds the nearest visible line in the requested direction', () => {
+ expect(index.nearestVisibleLine(3, 'up', 12)).toBe(1);
+ expect(index.nearestVisibleLine(3, 'down', 12)).toBe(5);
+ expect(index.nearestVisibleLine(5, 'up', 12)).toBe(5);
+ expect(index.nearestVisibleLine(7, 'up', 12)).toBe(6);
+ expect(index.nearestVisibleLine(7, 'down', 12)).toBe(9);
+ expect(index.nearestVisibleLine(-1, 'down', 12)).toBe(0);
+ expect(index.nearestVisibleLine(-1, 'up', 12)).toBeUndefined();
+ expect(index.nearestVisibleLine(12, 'up', 12)).toBe(11);
+ expect(index.nearestVisibleLine(12, 'down', 12)).toBeUndefined();
+ });
+
+ test('returns undefined when a hidden edge has no visible line beyond it', () => {
+ const hiddenStart = new LineRangeIndex([{ startLine: 0, endLine: 2 }]);
+ const hiddenEnd = new LineRangeIndex([{ startLine: 9, endLine: 20 }]);
+
+ expect(hiddenStart.nearestVisibleLine(1, 'up', 12)).toBeUndefined();
+ expect(hiddenStart.nearestVisibleLine(1, 'down', 12)).toBe(3);
+ expect(hiddenEnd.nearestVisibleLine(10, 'up', 12)).toBe(8);
+ expect(hiddenEnd.nearestVisibleLine(10, 'down', 12)).toBeUndefined();
+ });
+});
diff --git a/packages/diffs/test/editorPersistStateLifecycle.test.ts b/packages/diffs/test/editorPersistStateLifecycle.test.ts
index 9b479f52d..ef4d09747 100644
--- a/packages/diffs/test/editorPersistStateLifecycle.test.ts
+++ b/packages/diffs/test/editorPersistStateLifecycle.test.ts
@@ -5,7 +5,7 @@ import { FileDiff } from '../src/components/FileDiff';
import { DEFAULT_THEMES } from '../src/constants';
import { Editor, type IStateStorage } from '../src/edit';
import { disposeHighlighter } from '../src/highlighter/shared_highlighter';
-import type { EditorState, FileContents } from '../src/types';
+import type { EditorState, FileContents, LineRange } from '../src/types';
import { installDom, wait, waitFor } from './domHarness';
afterAll(async () => {
@@ -18,6 +18,21 @@ const ORIGINAL_FILE: FileContents = {
cacheKey: 'persisted.ts',
};
+const FOLDABLE_FILE: FileContents = {
+ name: 'foldable.ts',
+ contents: [
+ 'function outer() {',
+ ' const before = 1;',
+ ' if (before) {',
+ ' console.log(before);',
+ ' }',
+ ' return before;',
+ '}',
+ 'const after = true;',
+ ].join('\n'),
+ cacheKey: 'foldable.ts',
+};
+
interface AttachedFile {
container: HTMLElement;
file: File;
@@ -97,7 +112,110 @@ function savedCaret(character: number): EditorState {
};
}
+function foldToggle(
+ attached: AttachedFile,
+ oneIndexedLine: number
+): HTMLButtonElement {
+ const toggle = attached.container.shadowRoot?.querySelector(
+ `[data-column-number="${oneIndexedLine}"] [data-fold-toggle]`
+ );
+ if (!(toggle instanceof HTMLButtonElement)) {
+ throw new Error(`no fold toggle found for line ${oneIndexedLine}`);
+ }
+ return toggle;
+}
+
+function renderedLineNumbers(attached: AttachedFile): number[] {
+ return [
+ ...(attached.container.shadowRoot?.querySelectorAll(
+ '[data-content] > [data-line]'
+ ) ?? []),
+ ].map((line) => Number(line.dataset.line));
+}
+
+async function waitForFoldRanges(
+ editor: Editor,
+ expected: LineRange[]
+): Promise {
+ await waitFor(
+ () =>
+ JSON.stringify(editor.getState().foldRanges) === JSON.stringify(expected)
+ );
+ expect(editor.getState().foldRanges).toEqual(expected);
+}
+
describe('Editor persisted state lifecycle', () => {
+ test('restores nested folds after switching files', async () => {
+ const dom = installDom();
+ const editor = new Editor({ persistState: true });
+ let attached: AttachedFile | undefined;
+ const nestedFold = { startLine: 2, endLine: 3 };
+ const outerFold = { startLine: 0, endLine: 5 };
+
+ try {
+ attached = await attachFile(editor, { ...FOLDABLE_FILE });
+
+ foldToggle(attached, 3).click();
+ await waitForFoldRanges(editor, [nestedFold]);
+ foldToggle(attached, 1).click();
+ await waitForFoldRanges(editor, [outerFold, nestedFold]);
+
+ await renderFile(editor, attached, {
+ name: 'next.ts',
+ contents: 'next\n',
+ cacheKey: 'next.ts',
+ });
+ await renderFile(editor, attached, { ...FOLDABLE_FILE });
+
+ await waitForFoldRanges(editor, [outerFold, nestedFold]);
+ expect(renderedLineNumbers(attached)).toEqual([1, 7, 8]);
+
+ foldToggle(attached, 1).click();
+ await waitForFoldRanges(editor, [nestedFold]);
+ expect(renderedLineNumbers(attached)).toEqual([1, 2, 3, 5, 6, 7, 8]);
+ } finally {
+ editor.cleanUp();
+ attached?.file.cleanUp();
+ dom.cleanup();
+ }
+ });
+
+ test('a pending async restore cannot overwrite a newer fold toggle', async () => {
+ const dom = installDom();
+ const pendingState = createDeferred();
+ const storage: IStateStorage = {
+ get() {
+ return pendingState.promise;
+ },
+ set() {},
+ };
+ const editor = new Editor({
+ persistState: true,
+ persistStateStorage: storage,
+ });
+ let attached: AttachedFile | undefined;
+ const nestedFold = { startLine: 2, endLine: 3 };
+
+ try {
+ attached = await attachFile(editor, { ...FOLDABLE_FILE });
+
+ foldToggle(attached, 3).click();
+ await waitForFoldRanges(editor, [nestedFold]);
+
+ pendingState.resolve({
+ foldRanges: [{ startLine: 0, endLine: 5 }],
+ });
+ await wait(0);
+
+ expect(editor.getState().foldRanges).toEqual([nestedFold]);
+ expect(renderedLineNumbers(attached)).toEqual([1, 2, 3, 5, 6, 7, 8]);
+ } finally {
+ editor.cleanUp();
+ attached?.file.cleanUp();
+ dom.cleanup();
+ }
+ });
+
test('an async restore survives an unchanged file rerender', async () => {
const dom = installDom();
const pendingState = createDeferred();
diff --git a/packages/diffs/test/editorSelection.test.ts b/packages/diffs/test/editorSelection.test.ts
index 34f419782..b894c9cf5 100644
--- a/packages/diffs/test/editorSelection.test.ts
+++ b/packages/diffs/test/editorSelection.test.ts
@@ -375,6 +375,30 @@ describe('convertSelection', () => {
);
});
+ test('maps an inline fold indicator to the folded header end', () => {
+ const icon = element('SVG', [element('USE')]);
+ const ellipsis = element('BUTTON', [icon]);
+ const indicator = element('SPAN', [ellipsis]);
+ indicator.dataset.foldIndicator = '';
+ indicator.dataset.foldCharacter = '18';
+ const renderedLine = pre(6, [span('function outer() {', 0), indicator]);
+
+ expect(
+ convertSelection(composedRange(renderedLine as unknown as Node, 2))
+ ).toEqual({
+ start: { line: 6, character: 18 },
+ end: { line: 6, character: 18 },
+ direction: DirectionNone,
+ });
+ expect(
+ convertSelection(composedRange(ellipsis as unknown as Node, 0))
+ ).toEqual({
+ start: { line: 6, character: 18 },
+ end: { line: 6, character: 18 },
+ direction: DirectionNone,
+ });
+ });
+
test('maps a text node inside a nested diff-span token', () => {
const diffToken = span('_diff', 15);
const diff = diffSpan(diffToken, span(':', 20), span(' FileMetadata', 22));
diff --git a/packages/diffs/test/fileFolding.test.ts b/packages/diffs/test/fileFolding.test.ts
new file mode 100644
index 000000000..b60e05227
--- /dev/null
+++ b/packages/diffs/test/fileFolding.test.ts
@@ -0,0 +1,307 @@
+import { afterAll, describe, expect, test } from 'bun:test';
+
+import { File, type FileOptions } from '../src/components/File';
+import { DEFAULT_THEMES } from '../src/constants';
+import { Editor } from '../src/editor/editor';
+import { disposeHighlighter } from '../src/highlighter/shared_highlighter';
+import type { FileContents } from '../src/types';
+import { installDom, waitFor } from './domHarness';
+
+afterAll(async () => {
+ await disposeHighlighter();
+});
+
+const FOLDABLE_CONTENTS = [
+ 'function outer() {',
+ ' const before = 1;',
+ ' if (before) {',
+ ' console.log(before);',
+ ' }',
+ ' return before;',
+ '}',
+ 'const after = true;',
+].join('\n');
+
+interface ReadOnlyFileFixture {
+ cleanup(): void;
+ container: HTMLElement;
+ file: File;
+}
+
+async function createReadOnlyFileFixture(
+ fileOptions?: Partial>,
+ contents = FOLDABLE_CONTENTS
+): Promise {
+ const dom = installDom();
+ const container = document.createElement('div');
+ document.body.appendChild(container);
+
+ const file = new File({
+ disableFileHeader: true,
+ theme: DEFAULT_THEMES,
+ ...fileOptions,
+ });
+ const fileContents: FileContents = {
+ name: 'foldable.ts',
+ contents,
+ };
+
+ file.render({
+ file: fileContents,
+ fileContainer: container,
+ forceRender: true,
+ });
+ await waitFor(() => renderedLineNumbers(container).length > 0, {
+ timeout: 3000,
+ });
+
+ return {
+ cleanup() {
+ file.cleanUp();
+ dom.cleanup();
+ },
+ container,
+ file,
+ };
+}
+
+function shadowRoot(container: HTMLElement): ShadowRoot {
+ const shadow = container.shadowRoot;
+ if (shadow == null) {
+ throw new Error('file container has no shadow root');
+ }
+ return shadow;
+}
+
+function renderedLineNumbers(container: HTMLElement): number[] {
+ return [
+ ...(container.shadowRoot?.querySelectorAll(
+ '[data-content] > [data-line]'
+ ) ?? []),
+ ].map((line) => Number(line.dataset.line));
+}
+
+function gutterRow(
+ container: HTMLElement,
+ oneIndexedLine: number
+): HTMLElement {
+ const row = shadowRoot(container).querySelector(
+ `[data-column-number="${oneIndexedLine}"]`
+ );
+ if (row == null) {
+ throw new Error(`no gutter row found for line ${oneIndexedLine}`);
+ }
+ return row;
+}
+
+function foldToggle(
+ container: HTMLElement,
+ oneIndexedLine: number
+): HTMLButtonElement {
+ const toggle = gutterRow(container, oneIndexedLine).querySelector(
+ '[data-fold-toggle]'
+ );
+ if (!(toggle instanceof HTMLButtonElement)) {
+ throw new Error(`no fold toggle found for line ${oneIndexedLine}`);
+ }
+ return toggle;
+}
+
+function foldIconHref(button: HTMLButtonElement): string | null {
+ return button.querySelector('use')?.getAttribute('href') ?? null;
+}
+
+function foldEllipsis(
+ container: HTMLElement,
+ oneIndexedLine: number
+): HTMLButtonElement {
+ const ellipsis = shadowRoot(container).querySelector(
+ `[data-content] > [data-line="${oneIndexedLine}"] > [data-fold-indicator] > [data-fold-ellipsis]`
+ );
+ if (!(ellipsis instanceof HTMLButtonElement)) {
+ throw new Error(`no fold ellipsis found for line ${oneIndexedLine}`);
+ }
+ return ellipsis;
+}
+
+async function waitForLines(
+ container: HTMLElement,
+ expected: number[]
+): Promise {
+ await waitFor(
+ () =>
+ JSON.stringify(renderedLineNumbers(container)) ===
+ JSON.stringify(expected),
+ { timeout: 3000 }
+ );
+ expect(renderedLineNumbers(container)).toEqual(expected);
+}
+
+describe('read-only File folding', () => {
+ test('renders fold controls by default and folds or unfolds from the gutter', async () => {
+ const { cleanup, container } = await createReadOnlyFileFixture();
+ try {
+ const shadow = shadowRoot(container);
+ await waitFor(() => foldToggle(container, 1) != null);
+
+ expect(shadow.querySelector('[data-code][data-folding]')).not.toBe(null);
+ const initialToggle = foldToggle(container, 1);
+ expect(initialToggle.getAttribute('aria-expanded')).toBe('true');
+ expect(foldIconHref(initialToggle)).toBe('#diffs-icon-fold-chevron-down');
+ // The context lines (return statement, closing brace) are not foldable.
+ expect(gutterRow(container, 6).querySelector('[data-fold-toggle]')).toBe(
+ null
+ );
+
+ initialToggle.click();
+ await waitForLines(container, [1, 7, 8]);
+
+ const foldedToggle = foldToggle(container, 1);
+ expect(foldedToggle.hasAttribute('data-folded')).toBe(true);
+ expect(foldedToggle.getAttribute('aria-expanded')).toBe('false');
+ expect(foldIconHref(foldedToggle)).toBe('#diffs-icon-fold-chevron-right');
+
+ const ellipsis = foldEllipsis(container, 1);
+ expect(ellipsis.getAttribute('aria-label')).toBe('Unfold line 1');
+ expect(foldIconHref(ellipsis)).toBe('#diffs-icon-fold-ellipsis');
+
+ ellipsis.click();
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 7, 8]);
+ expect(shadow.querySelector('[data-fold-indicator]')).toBe(null);
+ expect(foldToggle(container, 1).hasAttribute('data-folded')).toBe(false);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('preserves a nested fold while its outer fold is toggled', async () => {
+ const { cleanup, container } = await createReadOnlyFileFixture();
+ try {
+ await waitFor(() => foldToggle(container, 3) != null);
+
+ foldToggle(container, 3).click();
+ await waitForLines(container, [1, 2, 3, 5, 6, 7, 8]);
+
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 2, 3, 5, 6, 7, 8]);
+ expect(foldToggle(container, 3).hasAttribute('data-folded')).toBe(true);
+
+ foldToggle(container, 3).click();
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 7, 8]);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('renders no fold controls when the folding option is off', async () => {
+ const { cleanup, container } = await createReadOnlyFileFixture({
+ folding: false,
+ });
+ try {
+ const shadow = shadowRoot(container);
+ expect(shadow.querySelector('[data-code][data-folding]')).toBe(null);
+ expect(shadow.querySelector('[data-fold]')).toBe(null);
+ expect(shadow.querySelector('[data-fold-toggle]')).toBe(null);
+ expect(renderedLineNumbers(container)).toEqual([1, 2, 3, 4, 5, 6, 7, 8]);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('unfolds and removes controls when folding is disabled at runtime', async () => {
+ const { cleanup, container, file } = await createReadOnlyFileFixture();
+ try {
+ await waitFor(() => foldToggle(container, 1) != null);
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+
+ file.setOptions({ ...file.options, folding: false });
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 7, 8]);
+ expect(shadowRoot(container).querySelector('[data-fold-toggle]')).toBe(
+ null
+ );
+
+ file.setOptions({ ...file.options, folding: true });
+ file.rerender();
+ await waitFor(() => foldToggle(container, 1) != null);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('resets fold state when the rendered file changes', async () => {
+ const { cleanup, container, file } = await createReadOnlyFileFixture();
+ try {
+ await waitFor(() => foldToggle(container, 1) != null);
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+
+ file.render({
+ file: {
+ name: 'foldable.ts',
+ contents: `// changed\n${FOLDABLE_CONTENTS}`,
+ },
+ forceRender: true,
+ });
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 7, 8, 9]);
+ expect(shadowRoot(container).querySelector('[data-folded]')).toBe(null);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('does not trigger line callbacks when a fold control is clicked', async () => {
+ const lineNumberClicks: number[] = [];
+ const { cleanup, container } = await createReadOnlyFileFixture({
+ enableLineSelection: true,
+ onLineNumberClick: (props) => {
+ lineNumberClicks.push(props.lineNumber);
+ },
+ });
+ try {
+ await waitFor(() => foldToggle(container, 1) != null);
+
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+ expect(lineNumberClicks).toEqual([]);
+
+ // Clicking the gutter cell outside the toggle still reaches the
+ // line-number handler.
+ gutterRow(container, 8).click();
+ expect(lineNumberClicks).toEqual([8]);
+ } finally {
+ cleanup();
+ }
+ });
+
+ test('hands folding to an attached editor and restores it on detach', async () => {
+ const { cleanup, container, file } = await createReadOnlyFileFixture();
+ const editor = new Editor();
+ try {
+ await waitFor(() => foldToggle(container, 1) != null);
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+
+ editor.edit(file);
+ // Attaching unfolds the read-only state; the editor owns folding now.
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 7, 8]);
+
+ await waitFor(() => foldToggle(container, 1) != null);
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+
+ editor.cleanUp();
+ // Editor teardown clears its folds; read-only controls keep working.
+ await waitForLines(container, [1, 2, 3, 4, 5, 6, 7, 8]);
+ await waitFor(() => foldToggle(container, 1) != null);
+ foldToggle(container, 1).click();
+ await waitForLines(container, [1, 7, 8]);
+ } finally {
+ editor.cleanUp();
+ cleanup();
+ }
+ });
+});