@bendyline/squisq-editor-react 1.6.0 → 1.6.2

package/src/__tests__/editorShellProps.test.tsx

@@ -0,0 +1,363 @@
+/**
+ * @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 { 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[] = [];
+
+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';
+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;
+  // 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');
+  });
+});
+
+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');
+  });
+});