@bendyline/squisq-editor-react 1.5.3 → 1.6.1

package/src/__tests__/codeContextSectionView.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render } from '@testing-library/react';
+import { CodeContextSectionView } from '../codeContext/CodeContextSectionView';
+
+const noop = () => {};
+
+const baseSection = {
+  id: 'foo@10',
+  summaryMarkdown: '**foo** — does things · ↓2 imported-by',
+  markdown: 'Body text with [`a.ts`](gezel-nav:src%2Fa.ts) and [line 4](#L4).',
+};
+
+function renderView(over: Partial<Parameters<typeof CodeContextSectionView>[0]> = {}) {
+  const props = {
+    section: baseSection,
+    expanded: false,
+    onToggle: vi.fn(),
+    linkSchemes: ['gezel-nav'] as const,
+    onLinkClick: vi.fn(),
+    onRevealLine: vi.fn(),
+    onMeasure: noop,
+    ...over,
+  };
+  const utils = render(<CodeContextSectionView {...props} />);
+  return { ...utils, props };
+}
+
+describe('<CodeContextSectionView>', () => {
+  it('renders the strip collapsed, body absent (lazy)', () => {
+    const { container } = renderView();
+    expect(container.querySelector('.squisq-ccx-strip')).toBeTruthy();
+    expect(container.textContent).toContain('foo');
+    expect(container.querySelector('.squisq-ccx-body')).toBeNull();
+  });
+
+  it('strip click calls onToggle with the section id', () => {
+    const { container, props } = renderView();
+    fireEvent.click(container.querySelector('.squisq-ccx-strip')!);
+    expect(props.onToggle).toHaveBeenCalledWith('foo@10');
+  });
+
+  it('expanded body renders markdown with host-scheme links as real anchors', () => {
+    const { container } = renderView({ expanded: true });
+    const body = container.querySelector('.squisq-ccx-body')!;
+    expect(body.textContent).toContain('Body text');
+    const anchors = [...body.querySelectorAll('a')].map((a) => a.getAttribute('href'));
+    expect(anchors).toContain('gezel-nav:src%2Fa.ts');
+    expect(anchors).toContain('#L4');
+  });
+
+  it('expanded without markdown shows the loading row', () => {
+    const { container } = renderView({
+      expanded: true,
+      section: { ...baseSection, markdown: undefined },
+    });
+    expect(container.querySelector('.squisq-ccx-body--loading')?.textContent).toBe('Loading…');
+  });
+
+  it('link clicks are intercepted: handled by default, defaulted on false', () => {
+    const onLinkClick = vi.fn(() => undefined);
+    const { container } = renderView({ expanded: true, onLinkClick });
+    const nav = [...container.querySelectorAll('a')].find(
+      (a) => a.getAttribute('href') === 'gezel-nav:src%2Fa.ts',
+    )!;
+    const first = fireEvent.click(nav);
+    expect(onLinkClick).toHaveBeenCalledWith('gezel-nav:src%2Fa.ts', { sectionId: 'foo@10' });
+    expect(first).toBe(false); // preventDefault was called
+
+    onLinkClick.mockReturnValue(false as unknown as undefined);
+    const second = fireEvent.click(nav);
+    expect(second).toBe(true); // host declined — default navigation allowed
+  });
+
+  it('#L links reveal natively and never reach onLinkClick', () => {
+    const onLinkClick = vi.fn();
+    const onRevealLine = vi.fn();
+    const { container } = renderView({ expanded: true, onLinkClick, onRevealLine });
+    const line = [...container.querySelectorAll('a')].find(
+      (a) => a.getAttribute('href') === '#L4',
+    )!;
+    fireEvent.click(line);
+    expect(onRevealLine).toHaveBeenCalledWith(4);
+    expect(onLinkClick).not.toHaveBeenCalled();
+  });
+
+  it('without linkSchemes, custom-scheme links render blocked (no anchor)', () => {
+    const { container } = renderView({ expanded: true, linkSchemes: undefined });
+    const anchors = [...container.querySelectorAll('a')].map((a) => a.getAttribute('href'));
+    expect(anchors).not.toContain('gezel-nav:src%2Fa.ts');
+    expect(container.querySelector('.squisq-md-link--blocked')).toBeTruthy();
+  });
+});

package/src/__tests__/codeContextZoneManager.test.ts

@@ -0,0 +1,127 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Exercises the zone manager against a fake Monaco editor with a recording
+ * changeViewZones accessor — batch semantics, delegate mutation on move and
+ * height changes, model-change rebuild, and dispose cleanup.
+ */
+import { describe, expect, it, vi } from 'vitest';
+import type { editor as MonacoEditorNs } from 'monaco-editor';
+import { CodeContextZoneManager } from '../codeContext/CodeContextZoneManager';
+
+type Zone = MonacoEditorNs.IViewZone & { ordinal?: number };
+
+function fakeEditor() {
+  const zones = new Map<string, Zone>();
+  const layoutCalls: string[] = [];
+  let counter = 0;
+  let batches = 0;
+  let modelCb: (() => void) | null = null;
+  const accessor = {
+    addZone: (zone: Zone) => {
+      const id = `z${++counter}`;
+      zones.set(id, zone);
+      return id;
+    },
+    removeZone: (id: string) => {
+      zones.delete(id);
+    },
+    layoutZone: (id: string) => {
+      layoutCalls.push(id);
+    },
+  };
+  const editor = {
+    changeViewZones: (cb: (a: typeof accessor) => void) => {
+      batches++;
+      cb(accessor);
+    },
+    onDidChangeModel: (cb: () => void) => {
+      modelCb = cb;
+      return { dispose: vi.fn() };
+    },
+  } as unknown as MonacoEditorNs.IStandaloneCodeEditor;
+  return {
+    editor,
+    zones,
+    layoutCalls,
+    get batches() {
+      return batches;
+    },
+    fireModelChange: () => modelCb?.(),
+  };
+}
+
+describe('CodeContextZoneManager', () => {
+  it('creates zones above the anchor line in one batch, with dom nodes', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([
+      { id: 'file', line: 0, ordinal: 0 },
+      { id: 'foo@10', line: 10, ordinal: 1 },
+    ]);
+    expect(fake.batches).toBe(1);
+    expect(fake.zones.size).toBe(2);
+    const list = [...fake.zones.values()];
+    expect(list.map((z) => z.afterLineNumber)).toEqual([0, 9]);
+    expect(list.map((z) => z.ordinal)).toEqual([0, 1]);
+    expect(list.every((z) => z.suppressMouseDown)).toBe(true);
+    expect(mgr.getDomNode('foo@10')?.className).toBe('squisq-ccx-zone');
+  });
+
+  it('sync with no changes performs no batch', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    expect(fake.batches).toBe(1);
+  });
+
+  it('moves mutate the delegate and layoutZone — dom node survives', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    const nodeBefore = mgr.getDomNode('a');
+    mgr.sync([{ id: 'a', line: 8, ordinal: 1 }]);
+    expect(fake.zones.size).toBe(1);
+    expect([...fake.zones.values()][0]!.afterLineNumber).toBe(7);
+    expect(fake.layoutCalls.length).toBe(1);
+    expect(mgr.getDomNode('a')).toBe(nodeBefore);
+  });
+
+  it('setHeight mutates heightInPx and lays out; sub-pixel deltas are ignored', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    mgr.setHeight('a', 120);
+    expect([...fake.zones.values()][0]!.heightInPx).toBe(120);
+    expect(fake.layoutCalls.length).toBe(1);
+    mgr.setHeight('a', 119.5); // ceils back to 120 — no relayout
+    expect(fake.layoutCalls.length).toBe(1);
+  });
+
+  it('a model change drops bookkeeping; the next sync recreates zones', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    const onChange = vi.fn();
+    mgr.onDidChangeZones(onChange);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    fake.fireModelChange();
+    expect(onChange).toHaveBeenCalledTimes(2); // sync + model change
+    expect(mgr.getDomNode('a')).toBeUndefined();
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    expect(mgr.getDomNode('a')).toBeDefined();
+  });
+
+  it('dispose removes every zone and goes inert', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([
+      { id: 'a', line: 1, ordinal: 1 },
+      { id: 'b', line: 2, ordinal: 2 },
+    ]);
+    mgr.dispose();
+    expect(fake.zones.size).toBe(0);
+    mgr.sync([{ id: 'c', line: 3, ordinal: 1 }]);
+    expect(fake.zones.size).toBe(0);
+  });
+});

package/src/__tests__/createShapeLayer.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { createShapeLayer } from '../imageEditor/createShapeLayer';
+
+describe('createShapeLayer', () => {
+  it('maps native primitives to ShapeLayer, centered on the drop point', () => {
+    const rect = createShapeLayer('rectangle', 100, 100);
+    expect(rect.type).toBe('shape');
+    if (rect.type === 'shape') expect(rect.content.shape).toBe('rect');
+    // 120×80 box centered at (100,100) → top-left (40, 60).
+    expect(rect.position).toMatchObject({ x: 40, y: 60, width: 120, height: 80 });
+
+    expect(createShapeLayer('circle', 0, 0).type).toBe('shape');
+    const line = createShapeLayer('line', 0, 0);
+    if (line.type === 'shape') expect(line.content.shape).toBe('line');
+  });
+
+  it('maps named shapes to a PathLayer carrying shapeKind + derived d', () => {
+    const diamond = createShapeLayer('diamond', 100, 100);
+    expect(diamond.type).toBe('path');
+    if (diamond.type === 'path') {
+      expect(diamond.content.shapeKind).toBe('diamond');
+      expect(diamond.content.d.length).toBeGreaterThan(0);
+      expect(diamond.content.fill).toBeTruthy();
+    }
+  });
+
+  it('maps the line arrow to a PathLayer with an end marker (no shapeKind)', () => {
+    const arrow = createShapeLayer('arrow', 50, 50);
+    expect(arrow.type).toBe('path');
+    if (arrow.type === 'path') {
+      expect(arrow.content.endMarker).toBe('arrow');
+      expect(arrow.content.shapeKind).toBeUndefined();
+      expect(arrow.content.fill).toBe('none');
+    }
+  });
+
+  it('maps the text shape to a TextLayer', () => {
+    const text = createShapeLayer('text', 10, 10);
+    expect(text.type).toBe('text');
+  });
+
+  it('prettifies multi-word kinds for the layer name', () => {
+    expect(createShapeLayer('arrow-right', 0, 0).name).toBe('Arrow Right');
+    expect(createShapeLayer('right-triangle', 0, 0).name).toBe('Right Triangle');
+  });
+});

package/src/__tests__/diffContextSections.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import { diffContextSections, type ZoneSpec } from '../codeContext/diffContextSections';
+
+const spec = (id: string, line: number, ordinal = 0): ZoneSpec => ({ id, line, ordinal });
+
+describe('diffContextSections', () => {
+  it('adds everything on first sync', () => {
+    const d = diffContextSections([], [spec('a', 1), spec('b', 5)]);
+    expect(d.add.map((z) => z.id)).toEqual(['a', 'b']);
+    expect(d.remove).toEqual([]);
+    expect(d.move).toEqual([]);
+  });
+
+  it('is a no-op for identical specs', () => {
+    const specs = [spec('a', 1, 1), spec('b', 5, 2)];
+    const d = diffContextSections(
+      specs,
+      specs.map((s) => ({ ...s })),
+    );
+    expect(d.add).toEqual([]);
+    expect(d.remove).toEqual([]);
+    expect(d.move).toEqual([]);
+  });
+
+  it('moves when a line or ordinal changes, removes vanished ids', () => {
+    const d = diffContextSections(
+      [spec('a', 1, 1), spec('b', 5, 2), spec('c', 9, 3)],
+      [spec('a', 2, 1), spec('b', 5, 4)],
+    );
+    expect(d.move.map((z) => z.id)).toEqual(['a', 'b']);
+    expect(d.remove).toEqual(['c']);
+    expect(d.add).toEqual([]);
+  });
+
+  it('duplicate ids in next: first occurrence wins, no double-add', () => {
+    const d = diffContextSections([], [spec('a', 1), spec('a', 7)]);
+    expect(d.add).toEqual([spec('a', 1)]);
+  });
+});

package/src/__tests__/drawingShapeRoundTrip.test.ts

@@ -0,0 +1,49 @@
+/**
+ * Drawing shape headings round-trip through the markdown ↔ Tiptap bridge.
+ *
+ * The drawing editor writes shapes as `### label {#id} {[shape …]}` child
+ * headings; these tests pin the editor's serialization seam — the same
+ * `data-template` / `data-template-params` / `data-block-attrs` attributes
+ * the DrawingAdapter reads back — without standing up a full editor.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
+
+const DRAWING = [
+  '## Org chart {[drawing]}',
+  '',
+  '### CEO {#ceo} {[rectangle x=21 y=25 width=100 height=100]}',
+  '',
+  '### reports to {[arrow from=ceo to=dev]}',
+  '',
+  '### Developer {#dev} {[rectangle x=21 y=190 width=100 height=100]}',
+].join('\n');
+
+describe('Drawing shape heading round-trip', () => {
+  it('extracts a shape annotation into the template + block-attr data attributes', () => {
+    const html = markdownToTiptap('### CEO {#ceo} {[rectangle x=21 y=25 width=100 height=100]}');
+    expect(html).toContain('data-template="rectangle"');
+    expect(html).toContain('data-template-params="x=21 y=25 width=100 height=100"');
+    expect(html).toContain('data-block-attrs="#ceo"');
+    expect(html).not.toContain('{[rectangle'); // raw annotation text stripped
+  });
+
+  it('extracts a connector annotation (from/to) into data-template-params', () => {
+    const html = markdownToTiptap('### reports to {[arrow from=ceo to=dev]}');
+    expect(html).toContain('data-template="arrow"');
+    expect(html).toContain('data-template-params="from=ceo to=dev"');
+  });
+
+  it('round-trips a full drawing (shapes + connector) losslessly and idempotently', () => {
+    const back = tiptapToMarkdown(markdownToTiptap(DRAWING));
+    expect(back).toContain('## Org chart {[drawing]}');
+    expect(back).toContain('### CEO {#ceo} {[rectangle x=21 y=25 width=100 height=100]}');
+    expect(back).toContain('### reports to {[arrow from=ceo to=dev]}');
+    expect(back).toContain('### Developer {#dev} {[rectangle x=21 y=190 width=100 height=100]}');
+    // No base64 layers blob anywhere.
+    expect(back).not.toContain('layers=');
+    // Stable: a second pass reproduces the first exactly.
+    expect(tiptapToMarkdown(markdownToTiptap(back))).toBe(back);
+  });
+});

package/src/__tests__/editorShellCodeContext.test.tsx

@@ -0,0 +1,86 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Prop-contract test for `codeContext`: the shell threads it to the
+ * CodeContextZones bridge in code mode only (mirrors the submitOnEnter
+ * threading tests). Heavy surfaces are stubbed.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import type { CodeContext } from '../codeContext/types';
+
+const zoneOptions: CodeContext[] = [];
+
+vi.mock('../RawEditor', () => ({
+  RawEditor: () => <div data-testid="raw-editor-stub" />,
+}));
+vi.mock('../WysiwygEditor', () => ({
+  WysiwygEditor: () => <div data-testid="wysiwyg-editor-stub" />,
+}));
+vi.mock('../PreviewPanel', () => ({
+  PreviewPanel: () => <div data-testid="preview-stub" />,
+}));
+vi.mock('../codeContext/CodeContextZones', () => ({
+  CodeContextZones: ({ options }: { options: CodeContext }) => {
+    zoneOptions.push(options);
+    return <div data-testid="code-context-stub" />;
+  },
+}));
+
+import { EditorShell } from '../EditorShell';
+
+beforeEach(() => {
+  zoneOptions.length = 0;
+  if (typeof window !== 'undefined' && typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(() => false),
+      }),
+    });
+  }
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class ResizeObserverStub {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    (globalThis as unknown as { ResizeObserver: typeof ResizeObserverStub }).ResizeObserver =
+      ResizeObserverStub;
+  }
+});
+
+const codeContext: CodeContext = {
+  sections: [{ id: 'foo@2', line: 2, summaryMarkdown: '**foo**', markdown: 'body' }],
+};
+
+describe('<EditorShell> codeContext prop', () => {
+  it('mounts CodeContextZones with the options in code mode', () => {
+    const { queryByTestId } = render(
+      <EditorShell initialMarkdown="const x = 1;" fileName="a.ts" codeContext={codeContext} />,
+    );
+    expect(queryByTestId('code-context-stub')).toBeTruthy();
+    expect(zoneOptions[0]).toBe(codeContext);
+  });
+
+  it('does not mount without the prop', () => {
+    const { queryByTestId } = render(
+      <EditorShell initialMarkdown="const x = 1;" fileName="a.ts" />,
+    );
+    expect(queryByTestId('code-context-stub')).toBeNull();
+  });
+
+  it('ignores codeContext in markdown mode', () => {
+    const { queryByTestId } = render(
+      <EditorShell initialMarkdown="# hi" fileName="a.md" codeContext={codeContext} />,
+    );
+    expect(queryByTestId('code-context-stub')).toBeNull();
+  });
+});

package/src/__tests__/editorShellProps.test.tsx

@@ -0,0 +1,96 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Prop-contract tests for the v1.5 naming renames:
+ *   - `<EditorShell>`'s light/dark chrome prop is `colorScheme` (was
+ *     `theme`), and it drives the `data-theme` attribute on the shell root.
+ *   - `<RawEditor>`'s Monaco theme-string prop is `monacoTheme` (was
+ *     `theme`); the shell maps `colorScheme` → `monacoTheme` (`'dark'` →
+ *     `'vs-dark'`, `'light'` → `'vs'`).
+ *
+ * The heavy editing surfaces are stubbed so the shell mounts under jsdom
+ * without dragging in monaco-editor or Tiptap. The RawEditor stub records
+ * the props it receives so we can assert `monacoTheme` reaches it.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import type { RawEditorProps } from '../RawEditor';
+
+// Records the props the shell passes to RawEditor on each render.
+const rawEditorProps: RawEditorProps[] = [];
+
+vi.mock('../RawEditor', () => ({
+  RawEditor: (props: RawEditorProps) => {
+    rawEditorProps.push(props);
+    return <div data-testid="raw-editor-stub" />;
+  },
+}));
+vi.mock('../WysiwygEditor', () => ({
+  WysiwygEditor: () => <div data-testid="wysiwyg-editor-stub" />,
+}));
+vi.mock('../PreviewPanel', () => ({
+  PreviewPanel: () => <div data-testid="preview-stub" />,
+}));
+
+import { EditorShell } from '../EditorShell';
+
+beforeEach(() => {
+  rawEditorProps.length = 0;
+  // jsdom lacks matchMedia / ResizeObserver, which the Toolbar uses.
+  if (typeof window !== 'undefined' && typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(() => false),
+      }),
+    });
+  }
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class ResizeObserverStub {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    (globalThis as unknown as { ResizeObserver: typeof ResizeObserverStub }).ResizeObserver =
+      ResizeObserverStub;
+  }
+});
+
+describe('<EditorShell> colorScheme prop', () => {
+  it('applies dark chrome via data-theme when colorScheme="dark"', () => {
+    const { container } = render(
+      <EditorShell initialMarkdown="# hi" initialView="raw" colorScheme="dark" />,
+    );
+    const shell = container.querySelector('.squisq-editor-shell');
+    expect(shell?.getAttribute('data-theme')).toBe('dark');
+  });
+
+  it('defaults to light chrome when colorScheme is omitted', () => {
+    const { container } = render(<EditorShell initialMarkdown="# hi" initialView="raw" />);
+    const shell = container.querySelector('.squisq-editor-shell');
+    expect(shell?.getAttribute('data-theme')).toBe('light');
+  });
+});
+
+describe('RawEditor monacoTheme prop', () => {
+  it('maps colorScheme="dark" to monacoTheme="vs-dark"', () => {
+    render(<EditorShell initialMarkdown="# hi" initialView="raw" colorScheme="dark" />);
+    expect(screen.getByTestId('raw-editor-stub')).toBeTruthy();
+    const last = rawEditorProps[rawEditorProps.length - 1];
+    expect(last?.monacoTheme).toBe('vs-dark');
+  });
+
+  it('maps colorScheme="light" to monacoTheme="vs"', () => {
+    render(<EditorShell initialMarkdown="# hi" initialView="raw" colorScheme="light" />);
+    expect(screen.getByTestId('raw-editor-stub')).toBeTruthy();
+    const last = rawEditorProps[rawEditorProps.length - 1];
+    expect(last?.monacoTheme).toBe('vs');
+  });
+});

package/src/__tests__/embeddedMedia.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import { markdownToDoc } from '@bendyline/squisq/doc';
+import { collectEmbeddedMedia, mediaKindFromUrl } from '../embeddedMedia';
+
+function block(md: string) {
+  return markdownToDoc(parseMarkdown(md), { articleId: 't' }).blocks[0];
+}
+
+describe('mediaKindFromUrl', () => {
+  it('classifies by extension', () => {
+    expect(mediaKindFromUrl('a/clip.webm')).toBe('video');
+    expect(mediaKindFromUrl('take1.mp3')).toBe('audio');
+    expect(mediaKindFromUrl('photo.png')).toBeNull();
+    expect(mediaKindFromUrl('https://x.com/page')).toBeNull();
+  });
+});
+
+describe('collectEmbeddedMedia', () => {
+  it('finds a recorder <video> HTML tag with its source line', () => {
+    const found = collectEmbeddedMedia(
+      block('# Tips\n\n<video src="video/recording.webm" controls></video>\n'),
+    );
+    expect(found).toEqual([{ src: 'video/recording.webm', kind: 'video', sourceLine: 3 }]);
+  });
+
+  it('finds an <audio> tag', () => {
+    const found = collectEmbeddedMedia(block('# Intro\n\n<audio src="audio/take.mp3"></audio>\n'));
+    expect(found[0]).toMatchObject({ src: 'audio/take.mp3', kind: 'audio' });
+  });
+
+  it('finds a markdown link/image to media', () => {
+    expect(collectEmbeddedMedia(block('# B\n\n[clip](v/r.webm)\n'))[0]).toMatchObject({
+      src: 'v/r.webm',
+      kind: 'video',
+    });
+    expect(collectEmbeddedMedia(block('# B\n\n![v](clip.mp4)\n'))[0]).toMatchObject({
+      src: 'clip.mp4',
+      kind: 'video',
+    });
+  });
+
+  it('ignores plain images and non-media links', () => {
+    expect(
+      collectEmbeddedMedia(block('# B\n\n![p](pic.png)\n\n[docs](https://x.com/y)\n')),
+    ).toEqual([]);
+  });
+});