@bendyline/squisq-editor-react 1.6.1 → 1.6.2

package/src/TransitionPicker.tsx

@@ -32,7 +32,14 @@ export interface TransitionPickerProps {
   onChange: (next: TransitionFields) => void;
 }
 
-const FLYOUT_ID = 'squisq-transition-flyout-portal';
+/**
+ * DOM id of the portaled transition flyout. Exported so hosts that embed the
+ * picker inside their own popovers (e.g. the toolbar overflow menu) can treat
+ * clicks inside the flyout as "inside" in their outside-click handling.
+ */
+export const TRANSITION_FLYOUT_PORTAL_ID = 'squisq-transition-flyout-portal';
+
+const FLYOUT_ID = TRANSITION_FLYOUT_PORTAL_ID;
 
 export function TransitionPicker({ value, onChange }: TransitionPickerProps) {
   const [open, setOpen] = useState(false);

package/src/ViewSwitcher.tsx

@@ -1,15 +1,15 @@
 /**
  * ViewSwitcher
  *
- * Tab bar for switching between Raw, WYSIWYG, and Preview editor views.
+ * Tab bar for switching between Write, Source, and Use editor views.
  */
 
 import { useEditorContext, type EditorView } from './EditorContext';
 
 const VIEWS: { id: EditorView; label: string; shortLabel?: string; shortcut: string }[] = [
-  { id: 'raw', label: 'Markdown', shortLabel: 'MD', shortcut: '⌘1' },
-  { id: 'wysiwyg', label: 'Editor', shortcut: '⌘2' },
-  { id: 'preview', label: 'Preview', shortcut: '⌘3' },
+  { id: 'wysiwyg', label: 'Write', shortcut: '⌘1' },
+  { id: 'raw', label: 'Source', shortcut: '⌘2' },
+  { id: 'preview', label: 'Use', shortcut: '⌘3' },
 ];
 
 export interface ViewSwitcherProps {

package/src/WysiwygEditor.tsx

@@ -22,7 +22,9 @@ import TaskList from '@tiptap/extension-task-list';
 import TaskItem from '@tiptap/extension-task-item';
 import Link from '@tiptap/extension-link';
 import Placeholder from '@tiptap/extension-placeholder';
-import { resolveFontFamily, FONT_FALLBACKS } from '@bendyline/squisq/schemas';
+import { resolveFontFamily, FONT_FALLBACKS, VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
+import { DEFAULT_THEME, flattenBlocks, markdownToDoc } from '@bendyline/squisq/doc';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
 import { HeadingWithTemplate } from './TemplateAnnotation';
 import { DiagramExtension } from './diagram/DiagramExtension';
 import { SceneBlockExtension } from './scene/SceneBlockExtension';
@@ -108,6 +110,8 @@ export function WysiwygEditor({
     mentionProvider,
     blockTagsVisible,
     themeInheritance,
+    colorScheme,
+    bumpMediaRevision,
   } = useEditorContext();
   // Custom templates inlined in the active doc's frontmatter + the
   // persist callback that writes a new list back into the source.
@@ -257,7 +261,7 @@ export function WysiwygEditor({
         const imageFiles = filesFromClipboard(clipboard);
         if (imageFiles.length > 0 && mediaProviderRef.current) {
           event.preventDefault();
-          uploadAndInsertImages(view, imageFiles, mediaProviderRef.current);
+          uploadAndInsertImages(view, imageFiles, mediaProviderRef.current, bumpMediaRevision);
           return true;
         }
 
@@ -326,7 +330,7 @@ export function WysiwygEditor({
 
         event.preventDefault();
         moveSelectionToDropPoint(view, event);
-        uploadAndInsertImages(view, imageFiles, mediaProviderRef.current);
+        uploadAndInsertImages(view, imageFiles, mediaProviderRef.current, bumpMediaRevision);
         return true;
       },
     },
@@ -467,6 +471,29 @@ export function WysiwygEditor({
   // a PreviewSettingsProvider in scope).
   const previewSettings = usePreviewSettingsOptional();
   const activeTheme = previewSettings?.activeTheme;
+  const badgePreviewSource = useMemo(() => {
+    if (!badgeMenu) return undefined;
+    try {
+      const previewDoc = markdownToDoc(parseMarkdown(editorSource), { autoTemplates: false });
+      const block = flattenBlocks(previewDoc.blocks)[badgeMenu.headingIndex];
+      if (!block) return undefined;
+      return {
+        block,
+        theme: previewSettings?.activeTheme ?? DEFAULT_THEME,
+        viewport: previewSettings?.activeViewport ?? VIEWPORT_PRESETS.landscape,
+        basePath: '/',
+        mediaProvider,
+      };
+    } catch {
+      return undefined;
+    }
+  }, [
+    badgeMenu,
+    editorSource,
+    mediaProvider,
+    previewSettings?.activeTheme,
+    previewSettings?.activeViewport,
+  ]);
   const themeStyle = useMemo<CSSProperties>(() => {
     if (themeInheritance === 'none' || !activeTheme) return {};
     const out: Record<string, string> = {
@@ -507,6 +534,7 @@ export function WysiwygEditor({
           <TemplateBadgePopover
             anchorRect={badgeMenu.rect}
             value={badgeMenu.template}
+            colorScheme={colorScheme}
             recommended={(() => {
               // `headingIndex` is counted within the mounted Tiptap doc, which
               // reflects `editorSource` — the active block's slice in block
@@ -516,6 +544,7 @@ export function WysiwygEditor({
               const profile = profileBlockContents(slice);
               return recommendTemplatesForBlock(profile, TEMPLATE_NAMES).recommended;
             })()}
+            previewSource={badgePreviewSource}
             onOpenDesigner={() => {
               setBadgeMenu(null);
               setDesignerState({});
@@ -546,6 +575,17 @@ export function WysiwygEditor({
               });
               editor.view.dispatch(tr);
             }}
+            onAnnotationChange={(next) => {
+              if (!editor) return;
+              const current = editor.state.doc.nodeAt(propsMenu.headingPos);
+              if (!current || current.type.name !== 'heading') return;
+              const tr = editor.state.tr.setNodeMarkup(propsMenu.headingPos, undefined, {
+                ...current.attrs,
+                dataBlockAttrs: next.blockAttrsInner,
+                dataTemplateParams: next.templateParams,
+              });
+              editor.view.dispatch(tr);
+            }}
             onClose={() => setPropsMenu(null)}
           />
         )}
@@ -631,6 +671,7 @@ async function uploadAndInsertImages(
   view: any,
   files: File[],
   mediaProvider: import('@bendyline/squisq/schemas').MediaProvider,
+  onMediaUploaded?: () => void,
 ): Promise<void> {
   for (const file of files) {
     try {
@@ -643,6 +684,7 @@ async function uploadAndInsertImages(
       const relativePath = await mediaProvider.addMedia(name, buffer, mimeType);
       const altText = name.replace(/\.[^.]+$/, '').replace(/[-_]/g, ' ');
       insertImageNode(view, relativePath, altText);
+      onMediaUploaded?.();
     } catch (err) {
       console.error('Failed to upload dropped image:', err);
     }

package/src/__tests__/buildPreviewDocTransition.test.ts

@@ -11,8 +11,7 @@ function previewSlides(md: string) {
 
 describe('buildPreviewDoc transition mapping', () => {
   it('carries an authored transition through to the player slide', () => {
-    // Transition written the way the toolbar / properties palette writes it:
-    // into the heading's Pandoc `{…}` attribute block.
+    // Legacy Pandoc transition syntax remains supported.
     const md = ['# Intro', '', '# Second {transition=vortex}', '', 'body'].join('\n');
     const slides = previewSlides(md);
     expect(slides[1].transition).toEqual({ type: 'vortex' });

package/src/__tests__/editorShellProps.test.tsx

@@ -13,8 +13,9 @@
  * 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 { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type { RawEditorProps } from '../RawEditor';
+import type { MediaEntry, MediaProvider } from '@bendyline/squisq/schemas';
 
 // Records the props the shell passes to RawEditor on each render.
 const rawEditorProps: RawEditorProps[] = [];
@@ -33,6 +34,94 @@ vi.mock('../PreviewPanel', () => ({
 }));
 
 import { EditorShell } from '../EditorShell';
+import { EditorProvider, useEditorContext } from '../EditorContext';
+import { Toolbar } from '../Toolbar';
+
+function MarkdownSourceProbe() {
+  const { markdownSource } = useEditorContext();
+  return <pre data-testid="markdown-source">{markdownSource}</pre>;
+}
+
+function mediaProviderWith(count: number): MediaProvider {
+  const entries: MediaEntry[] = Array.from({ length: count }, (_, i) => ({
+    name: `file-${i + 1}.png`,
+    mimeType: 'image/png',
+    size: i + 1,
+  }));
+  return {
+    async addMedia(name: string) {
+      return name;
+    },
+    async resolveUrl(relPath: string) {
+      return relPath;
+    },
+    async listMedia() {
+      return entries;
+    },
+    async removeMedia() {
+      /* no-op */
+    },
+    dispose() {
+      /* no-op */
+    },
+  };
+}
+
+function mediaProviderWithCounts(counts: number[]): MediaProvider {
+  let callCount = 0;
+  return {
+    async addMedia(name: string) {
+      return name;
+    },
+    async resolveUrl(relPath: string) {
+      return relPath;
+    },
+    async listMedia() {
+      const count = counts[Math.min(callCount, counts.length - 1)] ?? 0;
+      callCount += 1;
+      return Array.from({ length: count }, (_, i) => ({
+        name: `file-${i + 1}.png`,
+        mimeType: 'image/png',
+        size: i + 1,
+      }));
+    },
+    async removeMedia() {
+      /* no-op */
+    },
+    dispose() {
+      /* no-op */
+    },
+  };
+}
+
+function mutableMediaProviderWith(entries: MediaEntry[]): {
+  provider: MediaProvider;
+  removed: string[];
+} {
+  let current = [...entries];
+  const removed: string[] = [];
+  return {
+    removed,
+    provider: {
+      async addMedia(name: string) {
+        return name;
+      },
+      async resolveUrl(relPath: string) {
+        return relPath;
+      },
+      async listMedia() {
+        return current;
+      },
+      async removeMedia(relPath: string) {
+        removed.push(relPath);
+        current = current.filter((entry) => entry.name !== relPath);
+      },
+      dispose() {
+        /* no-op */
+      },
+    },
+  };
+}
 
 beforeEach(() => {
   rawEditorProps.length = 0;
@@ -94,3 +183,181 @@ describe('RawEditor monacoTheme prop', () => {
     expect(last?.monacoTheme).toBe('vs');
   });
 });
+
+describe('<EditorShell> Files badge', () => {
+  it('shows the mediaProvider file count on the paperclip button', async () => {
+    const { container } = render(
+      <EditorShell initialMarkdown="# hi" initialView="raw" mediaProvider={mediaProviderWith(3)} />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 3 files')).toBeTruthy();
+    });
+    expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('3');
+  });
+
+  it('compacts large visible counts while keeping the full count in the label', async () => {
+    const { container } = render(
+      <EditorShell
+        initialMarkdown="# hi"
+        initialView="raw"
+        mediaProvider={mediaProviderWith(120)}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 120 files')).toBeTruthy();
+    });
+    expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('99+');
+  });
+
+  it('uses the MediaBin scan count when the panel discovers files', async () => {
+    const { container } = render(
+      <EditorShell
+        initialMarkdown="# hi"
+        initialView="raw"
+        mediaProvider={mediaProviderWithCounts([0, 1])}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel')).toBeTruthy();
+    });
+    fireEvent.click(screen.getByLabelText('Toggle Files panel'));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 1 file')).toBeTruthy();
+    });
+    expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('1');
+  });
+
+  it('removes a media file and matching markdown refs from the files context menu', async () => {
+    const { provider, removed } = mutableMediaProviderWith([
+      {
+        name: 'attachments/pasted.png',
+        mimeType: 'image/png',
+        size: 1024,
+      },
+    ]);
+    const changes: string[] = [];
+    const initialMarkdown = [
+      'Before',
+      '',
+      '![Screenshot](attachments/pasted.png)',
+      '',
+      'After',
+    ].join('\n');
+
+    render(
+      <EditorShell
+        initialMarkdown={initialMarkdown}
+        initialView="raw"
+        mediaProvider={provider}
+        onChange={(source) => changes.push(source)}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 1 file')).toBeTruthy();
+    });
+
+    fireEvent.click(screen.getByLabelText('Toggle Files panel, 1 file'));
+    const item = (await screen.findByText('pasted.png')).closest('.squisq-media-bin-item');
+    expect(item).toBeTruthy();
+
+    fireEvent.contextMenu(item as HTMLElement, { clientX: 24, clientY: 32 });
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Remove image' }));
+
+    await waitFor(() => {
+      expect(removed).toEqual(['attachments/pasted.png']);
+    });
+    await waitFor(() => {
+      expect(screen.queryByText('pasted.png')).toBeNull();
+    });
+    await waitFor(() => {
+      expect(changes[changes.length - 1]).toBe(['Before', '', '', 'After'].join('\n'));
+    });
+  });
+
+  it('marks files as unused when the document does not reference them', async () => {
+    const { container } = render(
+      <EditorShell
+        initialMarkdown={'![Used](attachments/used.png)\n\n# Notes'}
+        initialView="raw"
+        mediaProvider={
+          mutableMediaProviderWith([
+            {
+              name: 'attachments/used.png',
+              mimeType: 'image/png',
+              size: 100,
+            },
+            {
+              name: 'attachments/unused.png',
+              mimeType: 'image/png',
+              size: 200,
+            },
+          ]).provider
+        }
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 2 files')).toBeTruthy();
+    });
+    fireEvent.click(screen.getByLabelText('Toggle Files panel, 2 files'));
+
+    await screen.findByText('used.png');
+    await screen.findByText('unused.png');
+
+    const items = Array.from(container.querySelectorAll('.squisq-media-bin-item'));
+    const itemNamed = (name: string) =>
+      items.find((item) => item.querySelector('.squisq-media-bin-name')?.textContent === name);
+    const usedItem = itemNamed('used.png');
+    const unusedItem = itemNamed('unused.png');
+
+    expect(usedItem?.querySelector('.squisq-media-bin-unused-badge')).toBeNull();
+    expect(unusedItem?.querySelector('.squisq-media-bin-unused-badge')?.textContent).toBe('Unused');
+  });
+});
+
+describe('<Toolbar> Files badge', () => {
+  it('self-scans mediaProvider when fileCount is not controlled by a parent', async () => {
+    const { container } = render(
+      <EditorProvider
+        initialMarkdown="# hi"
+        initialView="raw"
+        mediaProvider={mediaProviderWith(2)}
+        allowRecording={false}
+      >
+        <Toolbar onToggleFiles={() => {}} />
+      </EditorProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 2 files')).toBeTruthy();
+    });
+    expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('2');
+  });
+});
+
+describe('<Toolbar> Insert menu', () => {
+  it('adds a default task list from the Insert menu in raw fallback mode', async () => {
+    render(
+      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <MarkdownSourceProbe />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    const item = await screen.findByRole('menuitem', { name: /Task List/i });
+
+    fireEvent.click(item);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('markdown-source').textContent).toBe(
+        ['Intro', '- [ ] Task 1', '- [ ] Task 2', '- [ ] Task 3', ''].join('\n'),
+      );
+    });
+  });
+});

package/src/__tests__/headingTransition.test.ts

@@ -3,6 +3,7 @@ import {
   readHeadingLineTransition,
   setHeadingLineTransition,
   readBlockAttrsTransition,
+  setHeadingAttrsTransition,
   setBlockAttrsTransition,
   EMPTY_TRANSITION,
 } from '../headingTransition';
@@ -40,6 +41,14 @@ describe('readHeadingLineTransition', () => {
     });
   });
 
+  it('reads a transition from a param-only {[…]} annotation', () => {
+    expect(readHeadingLineTransition('## Tips {[transition=zoom]}')).toEqual({
+      type: 'zoom',
+      direction: '',
+      duration: '',
+    });
+  });
+
   it('prefers the Pandoc block over the template params when both set it', () => {
     expect(
       readHeadingLineTransition('## Tips {transition=fade} {[title transition=zoom]}'),
@@ -48,32 +57,42 @@ describe('readHeadingLineTransition', () => {
 });
 
 describe('setHeadingLineTransition', () => {
-  it('adds a Pandoc block to a plain heading', () => {
+  it('adds a squiggly annotation to a plain heading', () => {
     expect(setHeadingLineTransition('## Tips', { type: 'fade', direction: '', duration: '' })).toBe(
-      '## Tips {transition=fade}',
+      '## Tips {[transition=fade]}',
     );
   });
 
-  it('writes the Pandoc block before an existing {[…]} template annotation', () => {
+  it('folds into an existing {[…]} template annotation', () => {
     expect(
       setHeadingLineTransition('## Tips {[title]}', { type: 'fade', direction: '', duration: '' }),
-    ).toBe('## Tips {transition=fade} {[title]}');
+    ).toBe('## Tips {[title transition=fade]}');
   });
 
   it('includes direction and duration when present', () => {
     expect(
       setHeadingLineTransition('## Tips', { type: 'push', direction: 'up', duration: '1.2' }),
-    ).toBe('## Tips {transition=push transitionDirection=up transitionDuration=1.2}');
+    ).toBe('## Tips {[transition=push transitionDirection=up transitionDuration=1.2]}');
   });
 
-  it('updates an existing transition in place, preserving other params and the id', () => {
+  it('migrates an existing Pandoc transition, preserving other params and the id', () => {
     expect(
       setHeadingLineTransition('## Tips {#intro transition=fade x=10}', {
         type: 'zoom',
         direction: '',
         duration: '',
       }),
-    ).toBe('## Tips {#intro x=10 transition=zoom}');
+    ).toBe('## Tips {#intro x=10} {[transition=zoom]}');
+  });
+
+  it('migrates into an existing template annotation without duplicating channels', () => {
+    expect(
+      setHeadingLineTransition('## Tips {#intro transition=fade} {[title color=blue]}', {
+        type: 'zoom',
+        direction: '',
+        duration: '',
+      }),
+    ).toBe('## Tips {#intro} {[title color=blue transition=zoom]}');
   });
 
   it('removes the transition (and an empty block) when set to none', () => {
@@ -125,13 +144,44 @@ describe('block-attrs (WYSIWYG) helpers', () => {
     });
   });
 
-  it('writes a fresh inner when none exists', () => {
+  it('writes transition edits to dataTemplateParams by default', () => {
+    expect(
+      setHeadingAttrsTransition(null, null, { type: 'fade', direction: '', duration: '' }),
+    ).toEqual({
+      blockAttrsInner: null,
+      templateParams: 'transition=fade',
+    });
+  });
+
+  it('migrates legacy dataBlockAttrs transitions to dataTemplateParams', () => {
+    expect(
+      setHeadingAttrsTransition('#intro transition=fade', 'color=blue', {
+        type: 'zoom',
+        direction: '',
+        duration: '',
+      }),
+    ).toEqual({
+      blockAttrsInner: '#intro',
+      templateParams: 'color=blue transition=zoom',
+    });
+  });
+
+  it('clears transitions from both WYSIWYG channels', () => {
+    expect(
+      setHeadingAttrsTransition('#intro transition=fade', 'transition=zoom', EMPTY_TRANSITION),
+    ).toEqual({
+      blockAttrsInner: '#intro',
+      templateParams: null,
+    });
+  });
+
+  it('legacy single-channel writer still writes a fresh inner when none exists', () => {
     expect(setBlockAttrsTransition(null, { type: 'fade', direction: '', duration: '' })).toBe(
       'transition=fade',
     );
   });
 
-  it('preserves the id and clears to null when emptied', () => {
+  it('legacy single-channel writer preserves the id and clears to null when emptied', () => {
     expect(setBlockAttrsTransition('transition=fade', EMPTY_TRANSITION)).toBeNull();
     expect(setBlockAttrsTransition('#intro transition=fade', EMPTY_TRANSITION)).toBe('#intro');
   });

package/src/__tests__/imageEditorShell.test.tsx

@@ -9,6 +9,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import { MemoryContentContainer, scopeContainer } from '@bendyline/squisq/storage';
 import { writeImageEditDoc, createEmptyImageEditDoc } from '@bendyline/squisq/imageEdit';
+import { DARK_SURFACE } from '@bendyline/squisq/schemas';
 import { ImageEditor } from '../ImageEditor.js';
 
 beforeEach(() => {
@@ -54,4 +55,26 @@ describe('<ImageEditor>', () => {
     render(<ImageEditor filesContainer={sidecar} />);
     expect(screen.getByText(/loading image editor/i)).toBeTruthy();
   });
+
+  it('applies an explicit dark surface to the editor chrome', async () => {
+    const parent = new MemoryContentContainer();
+    const sidecar = scopeContainer(parent, 'pic_files');
+    await writeImageEditDoc(sidecar, createEmptyImageEditDoc(64, 48));
+
+    render(<ImageEditor filesContainer={sidecar} surface={DARK_SURFACE} />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('image-editor')).toBeTruthy();
+    });
+
+    const editor = screen.getByTestId('image-editor');
+    expect(editor.style.getPropertyValue('--squisq-image-editor-bg')).toBe(DARK_SURFACE.background);
+    expect(editor.style.getPropertyValue('--squisq-image-editor-text')).toBe(DARK_SURFACE.text);
+    expect(editor.style.getPropertyValue('--squisq-image-editor-panel-bg')).toBe(
+      `color-mix(in srgb, ${DARK_SURFACE.background} 92%, ${DARK_SURFACE.text} 8%)`,
+    );
+    expect(editor.style.getPropertyValue('--squisq-image-editor-control-bg')).toBe(
+      `color-mix(in srgb, ${DARK_SURFACE.background} 86%, ${DARK_SURFACE.text} 14%)`,
+    );
+  });
 });

package/src/__tests__/mediaReferences.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import {
+  collectMediaReferencesFromMarkdown,
+  removeMediaReferencesFromMarkdown,
+} from '../mediaReferences';
+
+describe('collectMediaReferencesFromMarkdown', () => {
+  it('collects markdown image/link and html media references', () => {
+    const refs = collectMediaReferencesFromMarkdown(
+      [
+        '![One](attachments/one.png)',
+        '[Two](attachments/two.pdf)',
+        '<video src="video/clip.webm" poster="video/poster.png"></video>',
+        '<a href="attachments/three.txt">Three</a>',
+      ].join('\n'),
+    );
+
+    expect([...refs].sort()).toEqual([
+      'attachments/one.png',
+      'attachments/three.txt',
+      'attachments/two.pdf',
+      'video/clip.webm',
+      'video/poster.png',
+    ]);
+  });
+
+  it('collects media references from squiggly annotations', () => {
+    const refs = collectMediaReferencesFromMarkdown(
+      [
+        '## Intro {[audio=audio/take.mp3]}',
+        '{[video src="video/clip with spaces.webm"]}',
+        '### Image {#hero} {[image src=images/hero.png alt="Hero"]}',
+      ].join('\n'),
+    );
+
+    expect([...refs].sort()).toEqual([
+      'audio/take.mp3',
+      'images/hero.png',
+      'video/clip with spaces.webm',
+    ]);
+  });
+});
+
+describe('removeMediaReferencesFromMarkdown', () => {
+  it('removes standalone image references to the media path', () => {
+    const source = ['Before', '', '![Screenshot](attachments/pasted.png)', '', 'After'].join('\n');
+
+    expect(removeMediaReferencesFromMarkdown(source, 'attachments/pasted.png')).toBe(
+      ['Before', '', '', 'After'].join('\n'),
+    );
+  });
+
+  it('removes inline image and link references without touching similar paths', () => {
+    const source = [
+      'Keep ![Other](attachments/pasted.png.backup).',
+      'Drop ![Screenshot](attachments/pasted.png) and [file](attachments/pasted.png).',
+    ].join('\n');
+
+    expect(removeMediaReferencesFromMarkdown(source, 'attachments/pasted.png')).toBe(
+      ['Keep ![Other](attachments/pasted.png.backup).', 'Drop  and .'].join('\n'),
+    );
+  });
+
+  it('supports angle-wrapped destinations and markdown titles', () => {
+    const source =
+      'Drop ![A](<attachments/my pasted image.png>) and [A](attachments/simple.png "title").';
+
+    expect(removeMediaReferencesFromMarkdown(source, 'attachments/my pasted image.png')).toBe(
+      'Drop  and [A](attachments/simple.png "title").',
+    );
+    expect(removeMediaReferencesFromMarkdown(source, 'attachments/simple.png')).toBe(
+      'Drop ![A](<attachments/my pasted image.png>) and .',
+    );
+  });
+
+  it('removes resized raw HTML image tags and raw HTML anchors', () => {
+    const source =
+      '<img alt="Screenshot" src="attachments/pasted.png" width="320">\n<a href="attachments/pasted.png">Screenshot</a>';
+
+    expect(removeMediaReferencesFromMarkdown(source, 'attachments/pasted.png')).toBe('\n');
+  });
+});