@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/__tests__/templateContentPreview.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest';
+import { DEFAULT_THEME, markdownToDoc } from '@bendyline/squisq/doc';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import { VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
+import {
+  resolveTemplateContentPreview,
+  resolveTemplateContentPreviewResult,
+  type TemplatePreviewSource,
+} from '../templateContentPreviewResolver';
+
+function previewSource(markdown: string): TemplatePreviewSource {
+  const doc = markdownToDoc(parseMarkdown(markdown), { autoTemplates: false });
+  const block = doc.blocks[0];
+  if (!block) throw new Error('expected markdown to produce a block');
+  return {
+    block,
+    theme: DEFAULT_THEME,
+    viewport: VIEWPORT_PRESETS.landscape,
+    basePath: '/',
+  };
+}
+
+describe('template content previews', () => {
+  it('renders a candidate preview from the active block content', () => {
+    const visual = resolveTemplateContentPreview(
+      'list',
+      previewSource(`## Launch Steps
+
+- Draft the outline
+- Review the visuals
+- Publish the page
+`),
+    );
+
+    expect(visual).toBeTruthy();
+    expect(JSON.stringify(visual?.layers)).toContain('Draft the outline');
+  });
+
+  it('falls back for content-specific templates when the block is too sparse', () => {
+    const visual = resolveTemplateContentPreview('list', previewSource('## About Squisq'));
+
+    expect(visual).toBeNull();
+  });
+
+  it('reports why stat and date previews cannot be derived', () => {
+    expect(
+      resolveTemplateContentPreviewResult('statHighlight', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No stat found in this block',
+    });
+
+    expect(
+      resolveTemplateContentPreviewResult('dateEvent', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No date found in this block',
+    });
+  });
+
+  it('reports why image previews cannot be derived', () => {
+    expect(
+      resolveTemplateContentPreviewResult('imageWithCaption', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No image found in this block',
+    });
+  });
+
+  it('reports why video previews cannot be derived without media', () => {
+    expect(
+      resolveTemplateContentPreviewResult('videoWithCaption', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No audio/video found in this block',
+    });
+
+    expect(
+      resolveTemplateContentPreviewResult('videoPullQuote', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No audio/video found in this block',
+    });
+  });
+
+  it('does not warn about missing media when an audio or video tag is present', () => {
+    expect(
+      resolveTemplateContentPreviewResult(
+        'videoWithCaption',
+        previewSource('## Demo\n\n<video src="media/demo.mp4" controls></video>'),
+      ).warning,
+    ).toBeUndefined();
+
+    expect(
+      resolveTemplateContentPreviewResult(
+        'videoPullQuote',
+        previewSource('## Narration\n\n<audio src="audio/narration.webm" controls></audio>'),
+      ).warning,
+    ).toBeUndefined();
+  });
+});

package/src/__tests__/templatePickerPortal.test.tsx

@@ -0,0 +1,62 @@
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { TEMPLATE_GALLERY_PORTAL_SELECTOR, TemplateBadgePopover } from '../TemplatePicker';
+
+const anchorRect = new DOMRect(20, 20, 80, 24);
+const originalElementsFromPoint = document.elementsFromPoint;
+
+function badge(key: string) {
+  return (
+    <TemplateBadgePopover
+      key={key}
+      anchorRect={anchorRect}
+      value=""
+      onChange={vi.fn()}
+      onClose={vi.fn()}
+    />
+  );
+}
+
+beforeEach(() => {
+  Object.defineProperty(document, 'elementsFromPoint', {
+    configurable: true,
+    value: () => [],
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  Object.defineProperty(document, 'elementsFromPoint', {
+    configurable: true,
+    value: originalElementsFromPoint,
+  });
+});
+
+describe('template gallery portal ids', () => {
+  it('uses an instance-scoped id for a single open heading-badge gallery', () => {
+    render(badge('only'));
+
+    const gallery = document.querySelector(TEMPLATE_GALLERY_PORTAL_SELECTOR);
+    expect(gallery).not.toBeNull();
+    expect(gallery?.id).toMatch(/^squisq-template-gallery-portal-\S+$/);
+    expect(gallery?.id).not.toBe('squisq-template-gallery-portal');
+  });
+
+  it('keeps concurrent editor galleries unique and preserves the survivor id', () => {
+    const view = render(
+      <>
+        {badge('first')}
+        {badge('second')}
+      </>,
+    );
+
+    const galleries = [...document.querySelectorAll(TEMPLATE_GALLERY_PORTAL_SELECTOR)];
+    expect(galleries).toHaveLength(2);
+    expect(new Set(galleries.map((gallery) => gallery.id)).size).toBe(2);
+    const survivorId = galleries[1].id;
+
+    view.rerender(<>{badge('second')}</>);
+    const survivor = document.querySelector(TEMPLATE_GALLERY_PORTAL_SELECTOR);
+    expect(survivor?.id).toBe(survivorId);
+  });
+});

package/src/__tests__/tiptapBridge.test.ts

@@ -17,6 +17,22 @@ describe('markdownToTiptap', () => {
     expect(html).toContain('Hello world');
   });
 
+  it('preserves extra blank lines as empty paragraphs', () => {
+    expect(markdownToTiptap('Alpha\n\nBeta')).toBe('<p>Alpha</p><p>Beta</p>');
+    expect(markdownToTiptap('Alpha\n\n\nBeta')).toBe('<p>Alpha</p><p></p><p>Beta</p>');
+    expect(markdownToTiptap('Alpha\n\n\n\nBeta')).toBe('<p>Alpha</p><p></p><p></p><p>Beta</p>');
+  });
+
+  it('preserves trailing extra blank lines as empty paragraphs', () => {
+    expect(markdownToTiptap('Alpha\n')).toBe('<p>Alpha</p>');
+    expect(markdownToTiptap('Alpha\n\n')).toBe('<p>Alpha</p><p></p>');
+  });
+
+  it('preserves leading paragraph spaces as visible HTML whitespace', () => {
+    expect(markdownToTiptap('  indented')).toBe('<p>&nbsp;&nbsp;indented</p>');
+    expect(markdownToTiptap('Alpha\n\n   Beta')).toBe('<p>Alpha</p><p>&nbsp;&nbsp;&nbsp;Beta</p>');
+  });
+
   it('converts headings h1-h3', () => {
     expect(markdownToTiptap('# Title')).toContain('<h1');
     expect(markdownToTiptap('## Subtitle')).toContain('<h2');
@@ -193,6 +209,22 @@ describe('tiptapToMarkdown', () => {
     expect(md).toContain('Hello world');
   });
 
+  it('preserves empty paragraphs as extra blank lines', () => {
+    expect(tiptapToMarkdown('<p>Alpha</p><p>Beta</p>')).toBe('Alpha\n\nBeta\n');
+    expect(tiptapToMarkdown('<p>Alpha</p><p></p><p>Beta</p>')).toBe('Alpha\n\n\nBeta\n');
+    expect(tiptapToMarkdown('<p>Alpha</p><p></p><p></p><p>Beta</p>')).toBe('Alpha\n\n\n\nBeta\n');
+  });
+
+  it('preserves trailing empty paragraphs', () => {
+    expect(tiptapToMarkdown('<p>Alpha</p><p></p>')).toBe('Alpha\n\n');
+  });
+
+  it('restores leading paragraph spaces from visible HTML whitespace', () => {
+    expect(tiptapToMarkdown('<p>&nbsp;&nbsp;indented</p>')).toBe('  indented\n');
+    expect(tiptapToMarkdown('<p>\u00a0\u00a0indented</p>')).toBe('  indented\n');
+    expect(tiptapToMarkdown('<p>&#160;&#xA0;indented</p>')).toBe('  indented\n');
+  });
+
   it('converts headings', () => {
     expect(tiptapToMarkdown('<h1>Title</h1>')).toContain('# Title');
     expect(tiptapToMarkdown('<h2>Sub</h2>')).toContain('## Sub');
@@ -251,6 +283,29 @@ describe('tiptapToMarkdown', () => {
     expect(md).toContain('plain code');
   });
 
+  it('converts code blocks when <pre> carries attributes (real getHTML shape)', () => {
+    // StarterKit is configured with codeBlock HTMLAttributes, so real
+    // editor.getHTML() output puts class="squisq-code-block" on <pre>.
+    const md = tiptapToMarkdown(
+      '<pre class="squisq-code-block"><code class="language-js">const x = 1;</code></pre>',
+    );
+    expect(md).toContain('```js');
+    expect(md).toContain('const x = 1;');
+  });
+
+  it('converts attribute-bearing code blocks without language', () => {
+    const md = tiptapToMarkdown('<pre class="squisq-code-block"><code>plain code</code></pre>');
+    expect(md).toContain('```\nplain code\n```');
+  });
+
+  it('extracts language regardless of surrounding attributes on <code>', () => {
+    const md = tiptapToMarkdown(
+      '<pre class="squisq-code-block"><code spellcheck="false" class="language-python">x = 1</code></pre>',
+    );
+    expect(md).toContain('```python');
+    expect(md).toContain('x = 1');
+  });
+
   it('converts blockquotes', () => {
     const md = tiptapToMarkdown('<blockquote><p>A wise quote</p></blockquote>');
     expect(md).toContain('> ');
@@ -430,6 +485,21 @@ describe('round-trip: markdownToTiptap → tiptapToMarkdown', () => {
     expect(result).not.toContain('- [x] buy milk');
   });
 
+  it('preserves extra blank lines between paragraphs exactly', () => {
+    expect(roundTrip('Alpha\n\nBeta\n')).toBe('Alpha\n\nBeta\n');
+    expect(roundTrip('Alpha\n\n\nBeta\n')).toBe('Alpha\n\n\nBeta\n');
+    expect(roundTrip('Alpha\n\n\n\nBeta\n')).toBe('Alpha\n\n\n\nBeta\n');
+  });
+
+  it('preserves trailing empty paragraphs exactly', () => {
+    expect(roundTrip('Alpha\n\n')).toBe('Alpha\n\n');
+  });
+
+  it('preserves leading paragraph spaces exactly', () => {
+    expect(roundTrip('  indented\n')).toBe('  indented\n');
+    expect(roundTrip('Alpha\n\n   Beta\n')).toBe('Alpha\n\n   Beta\n');
+  });
+
   it('preserves quoted template params with spaces', () => {
     const result = roundTrip(
       '## Gallery {[imageWithCaption src=photo.jpg caption="Beach at sunset"]}',

package/src/__tests__/tiptapCodeBlockRoundTrip.test.ts

@@ -0,0 +1,109 @@
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { describe, expect, it } from 'vitest';
+import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
+import { HeadingWithTemplate } from '../TemplateAnnotation';
+
+/**
+ * Code-fence round-trip through a REAL tiptap editor.
+ *
+ * The string-level bridge tests feed hand-written `<pre><code>` HTML, but
+ * the production editor configures StarterKit's codeBlock with
+ * `HTMLAttributes: { class: 'squisq-code-block' }`, which tiptap renders
+ * onto the <pre>. The serializer regex used to require a bare `<pre><code`
+ * and silently dropped every fence on save. These tests exercise the real
+ * `getHTML()` output so that shape can never regress unnoticed.
+ */
+
+function roundTripThroughEditor(md: string): string {
+  const editor = new Editor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
+      }),
+      HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+    ],
+    content: markdownToTiptap(md),
+  });
+  const html = editor.getHTML();
+  editor.destroy();
+  return tiptapToMarkdown(html);
+}
+
+describe('code fences through a real editor (getHTML → markdown)', () => {
+  it('emits class="squisq-code-block" on <pre> (the shape the serializer must accept)', () => {
+    const editor = new Editor({
+      extensions: [
+        StarterKit.configure({
+          heading: false,
+          codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
+        }),
+        HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+      ],
+      content: markdownToTiptap('```js\nconst x = 1;\n```\n'),
+    });
+    const html = editor.getHTML();
+    editor.destroy();
+    expect(html).toContain('<pre class="squisq-code-block">');
+  });
+
+  it('round-trips a fence with a language byte-for-byte', () => {
+    const md = '```js\nconst x = 1;\n```\n';
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips a fence without a language byte-for-byte', () => {
+    const md = '```\nplain text content\n```\n';
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips a fence surrounded by prose', () => {
+    const md = 'Before the code.\n\n```python\nprint("hi")\n```\n\nAfter the code.\n';
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips HTML-significant characters inside a fence', () => {
+    const md = '```\nif (a < b && c > d) { echo "&nbsp;"; }\n```\n';
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips trailing spaces inside fence lines', () => {
+    const md = '```\nline with trailing   \nspaces\n```\n';
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips a blank last line inside a fence', () => {
+    const md = '```\nfoo\n\n```\n';
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips Unicode box-drawing art byte-for-byte', () => {
+    const md = [
+      '```',
+      '┌────────┐    ┌────────┐',
+      '│  CLI   │    │  MCP   │',
+      '└───┬────┘    └───┬────┘',
+      '    │             │',
+      '    ▼             ▼',
+      '┌──────────────────────┐',
+      '│        kernel        │',
+      '└──────────────────────┘',
+      '```',
+      '',
+    ].join('\n');
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips +--+ ASCII art byte-for-byte', () => {
+    const md = [
+      '```text',
+      '+--------+     +--------+',
+      '| Input  | --> | Output |',
+      '+--------+     +--------+',
+      '```',
+      '',
+    ].join('\n');
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+});

package/src/__tests__/transformStyleId.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+import { resolvePersistedTransformStyleId } from '../transformStyleId';
+
+describe('resolvePersistedTransformStyleId', () => {
+  it('accepts canonical ids and canonicalizes the legacy wire value', () => {
+    expect(resolvePersistedTransformStyleId('data-driven')).toBe('data-driven');
+    expect(resolvePersistedTransformStyleId('dataDriven')).toBe('data-driven');
+  });
+
+  it('does not turn an unknown id into the default transform', () => {
+    expect(resolvePersistedTransformStyleId('not-a-style')).toBeNull();
+  });
+});

package/src/__tests__/useImageEditor.test.tsx

@@ -12,6 +12,14 @@ import {
 } from '@bendyline/squisq/imageEdit';
 import { useImageEditor } from '../imageEditor/useImageEditor.js';
 
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((res) => {
+    resolve = res;
+  });
+  return { promise, resolve };
+}
+
 beforeEach(() => {
   // jsdom doesn't implement createObjectURL or HTMLImageElement loading.
   // Stub both so the hook can complete its asset-resolution path.
@@ -131,6 +139,65 @@ describe('useImageEditor', () => {
     expect(persisted?.canvas.width).toBe(25);
   });
 
+  it('does not mark a newer edit clean when an older write resolves', async () => {
+    const container = new MemoryContentContainer();
+    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
+    const originalWrite = container.writeFile.bind(container);
+    const gate = deferred<void>();
+    const started = deferred<void>();
+    let writes = 0;
+    vi.spyOn(container, 'writeFile').mockImplementation(async (...args) => {
+      writes += 1;
+      if (writes === 1) {
+        started.resolve();
+        await gate.promise;
+      }
+      return originalWrite(...args);
+    });
+    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
+    await waitFor(() => expect(result.current.ready).toBe(true));
+
+    act(() => result.current.dispatch({ type: 'set-canvas', canvas: { width: 20, height: 20 } }));
+    await started.promise;
+    act(() => result.current.dispatch({ type: 'set-canvas', canvas: { width: 30, height: 30 } }));
+    gate.resolve();
+
+    await waitFor(() => expect(result.current.state?.dirty).toBe(false));
+    expect((await readImageEditDoc(container))?.canvas.width).toBe(30);
+  });
+
+  it('flushes a dirty debounce when the editor unmounts', async () => {
+    const container = new MemoryContentContainer();
+    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
+    const { result, unmount } = renderHook(() =>
+      useImageEditor({ container, persistDebounceMs: 100000 }),
+    );
+    await waitFor(() => expect(result.current.ready).toBe(true));
+    act(() => result.current.dispatch({ type: 'set-canvas', canvas: { width: 44, height: 44 } }));
+    unmount();
+    await waitFor(async () => expect((await readImageEditDoc(container))?.canvas.width).toBe(44));
+  });
+
+  it('does not populate the URL cache after unmount', async () => {
+    const container = new MemoryContentContainer();
+    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
+    await container.writeFile('assets/late.png', new Uint8Array([1]).buffer, 'image/png');
+    const { result, unmount } = renderHook(() => useImageEditor({ container }));
+    await waitFor(() => expect(result.current.ready).toBe(true));
+    const originalRead = container.readFile.bind(container);
+    const gate = deferred<ArrayBuffer | null>();
+    vi.spyOn(container, 'readFile').mockImplementation((path) =>
+      path === 'assets/late.png' ? gate.promise : originalRead(path),
+    );
+    const create = vi.mocked(URL.createObjectURL);
+    const before = create.mock.calls.length;
+    const pending = result.current.resolveAssetUrl('assets/late.png');
+    unmount();
+    gate.resolve(new Uint8Array([1]).buffer);
+    await expect(pending).rejects.toThrow(/cancelled/);
+    expect(create).toHaveBeenCalledTimes(before);
+  });
+
   it('versioning is null when allowVersioning is false', async () => {
     const container = new MemoryContentContainer();
     await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));

package/src/__tests__/useMediaRecorder.test.ts

@@ -50,6 +50,7 @@ interface FakeRecorderHandle {
 }
 
 let lastRecorder: FakeRecorderHandle | null = null;
+let lastStream: FakeMediaStream | null = null;
 
 class FakeMediaRecorder implements FakeRecorderHandle {
   state: 'recording' | 'inactive' = 'inactive';
@@ -90,6 +91,7 @@ beforeEach(() => {
   lastRecorder = null;
   (globalThis as { MediaRecorder?: unknown }).MediaRecorder = FakeMediaRecorder;
   const fakeStream = new FakeMediaStream([new FakeMediaStreamTrack('audio')]);
+  lastStream = fakeStream;
   Object.defineProperty(globalThis, 'navigator', {
     value: {
       mediaDevices: {
@@ -224,4 +226,77 @@ describe('useMediaRecorder lifecycle', () => {
     expect(result.current.stream).toBeNull();
     expect(tracks.every((t) => t.stop.mock.calls.length > 0)).toBe(true);
   });
+
+  it('deduplicates concurrent permission requests', async () => {
+    let resolve!: (stream: FakeMediaStream) => void;
+    const pending = new Promise<FakeMediaStream>((res) => {
+      resolve = res;
+    });
+    const getUserMedia = vi.fn().mockReturnValue(pending);
+    Object.defineProperty(globalThis, 'navigator', {
+      configurable: true,
+      value: { mediaDevices: { getUserMedia } },
+    });
+    const stream = new FakeMediaStream([new FakeMediaStreamTrack('audio')]);
+    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
+    let first!: Promise<void>;
+    let second!: Promise<void>;
+    act(() => {
+      first = result.current.request();
+      second = result.current.request();
+    });
+    expect(getUserMedia).toHaveBeenCalledTimes(1);
+    resolve(stream);
+    await act(async () => Promise.all([first, second]));
+    expect(result.current.state).toBe('ready');
+  });
+
+  it('releases an acquired stream when recorder construction fails', async () => {
+    class ThrowingRecorder {
+      static isTypeSupported() {
+        return true;
+      }
+      constructor() {
+        throw new Error('construction failed');
+      }
+    }
+    (globalThis as { MediaRecorder?: unknown }).MediaRecorder = ThrowingRecorder;
+    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
+    await act(async () => {
+      await expect(result.current.request()).rejects.toThrow('construction failed');
+    });
+    expect(lastStream?.getTracks().every((track) => track.stop.mock.calls.length > 0)).toBe(true);
+  });
+
+  it('ignores a late onstop event after cancel', async () => {
+    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
+    await act(async () => result.current.request());
+    act(() => result.current.start());
+    const lateOnStop = lastRecorder?.onstop;
+    act(() => result.current.cancel());
+    act(() => lateOnStop?.());
+    expect(result.current.state).toBe('idle');
+    expect(result.current.blob).toBeNull();
+  });
+
+  it('returns the same in-flight stop promise to repeated callers', async () => {
+    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
+    await act(async () => result.current.request());
+    act(() => result.current.start());
+    const recorder = lastRecorder!;
+    const complete = recorder.onstop!;
+    recorder.stop = vi.fn(() => {
+      recorder.state = 'inactive';
+    });
+    let first!: Promise<Blob | null>;
+    let second!: Promise<Blob | null>;
+    act(() => {
+      first = result.current.stop();
+      second = result.current.stop();
+    });
+    expect(second).toBe(first);
+    act(() => complete());
+    await first;
+    expect(result.current.state).toBe('stopped');
+  });
 });