@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/__tests__/tiptapBridge.test.ts

@@ -1,4 +1,6 @@
 import { describe, it, expect } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
 import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
 
 // ---------------------------------------------------------------------------
@@ -66,25 +68,25 @@ describe('markdownToTiptap', () => {
   });
 
   it('converts mentions to chip spans', () => {
-    const html = markdownToTiptap('Hey @[Leo](gezel:leo), take a look.');
+    const html = markdownToTiptap('Hey @[Leo](person:leo), take a look.');
     expect(html).toContain('data-mention="true"');
-    expect(html).toContain('data-kind="gezel"');
+    expect(html).toContain('data-kind="person"');
     expect(html).toContain('data-id="leo"');
     expect(html).toContain('data-label="Leo"');
     // "@Leo" appears inside the chip — NOT as a broken link
-    expect(html).not.toContain('href="gezel:leo"');
+    expect(html).not.toContain('href="person:leo"');
   });
 
   it('tolerates the backslash-escaped colon remark emits', () => {
-    // remark-stringify sometimes emits `gezel\:leo` to disambiguate
+    // remark-stringify sometimes emits `person\:leo` to disambiguate
     // from autolink syntax. The bridge should still recognize it.
-    const html = markdownToTiptap('Hey @[Leo](gezel\\:leo).');
-    expect(html).toContain('data-kind="gezel"');
+    const html = markdownToTiptap('Hey @[Leo](person\\:leo).');
+    expect(html).toContain('data-kind="person"');
     expect(html).toContain('data-id="leo"');
   });
 
   it('round-trips mentions back to markdown', () => {
-    const md = 'Hey @[Leo](gezel:leo), ping @[Tess](gezel:tess) too.';
+    const md = 'Hey @[Leo](person:leo), ping @[Tess](person:tess) too.';
     const html = markdownToTiptap(md);
     const back = tiptapToMarkdown(html);
     expect(back.trim()).toBe(md);
@@ -158,6 +160,12 @@ describe('markdownToTiptap', () => {
     expect(html).toContain('This is a quote');
   });
 
+  it('groups consecutive quote lines into one visual blockquote', () => {
+    const html = markdownToTiptap('> A wise quote\n> -- Ada');
+    expect(html.match(/<blockquote>/g)).toHaveLength(1);
+    expect(html).toContain('<blockquote><p>A wise quote</p><p>-- Ada</p></blockquote>');
+  });
+
   it('converts horizontal rules', () => {
     const md = 'Before\n\n---\n\nAfter';
     const html = markdownToTiptap(md);
@@ -283,12 +291,42 @@ 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('> ');
     expect(md).toContain('A wise quote');
   });
 
+  it('keeps adjacent blockquote nodes on adjacent markdown lines', () => {
+    const md = tiptapToMarkdown(
+      '<blockquote><p>A wise quote</p></blockquote><blockquote><p>-- Ada</p></blockquote>',
+    );
+    expect(md).toBe('> A wise quote\n> -- Ada\n');
+  });
+
   it('converts horizontal rules', () => {
     const md = tiptapToMarkdown('<p>Before</p><hr><p>After</p>');
     expect(md).toContain('---');
@@ -443,6 +481,32 @@ describe('round-trip: markdownToTiptap → tiptapToMarkdown', () => {
     expect(roundTrip('> Important note')).toContain('> Important note');
   });
 
+  it('does not add a blank line before a quote attribution', () => {
+    const md = [
+      '### A Famous Quote {[quote]}',
+      '',
+      '> "The best way to predict the future is to invent it."',
+      '> -- Alan Kay',
+    ].join('\n');
+
+    expect(roundTrip(md)).toBe(md + '\n');
+  });
+
+  it('does not add a blank line after Tiptap normalizes a quote attribution', () => {
+    const md = ['> "The best way to predict the future is to invent it."', '> -- Alan Kay'].join(
+      '\n',
+    );
+    const editor = new Editor({
+      extensions: [StarterKit],
+      content: markdownToTiptap(md),
+    });
+
+    const normalizedHtml = editor.getHTML();
+    expect(normalizedHtml.match(/<blockquote>/g)).toHaveLength(1);
+    expect(tiptapToMarkdown(normalizedHtml)).toBe(md + '\n');
+    editor.destroy();
+  });
+
   it('preserves unordered lists', () => {
     const result = roundTrip('- Alpha\n- Beta');
     expect(result).toContain('- Alpha');

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__/tiptapImageRoundTrip.test.ts

@@ -12,7 +12,7 @@ import { tiptapToMarkdown } from '../tiptapBridge';
  *   when a pasted / uploaded image is inserted into the tiptap
  *   editor via `setImage({src, alt})`, does the markdown we serialize
  *   out (via `getHTML()` + `tiptapToMarkdown`) contain
- *   `![alt](src)` — the shape the gezel service's image-attachment
+ *   `![alt](src)` — the shape the downstream service's image-attachment
  *   extractor expects?
  *
  * Unit tests on the regex alone have been green the whole time, and

package/src/__tests__/toolbarSelectionConversion.test.tsx

@@ -0,0 +1,164 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+import { EditorProvider, useEditorContext, type EditorContextValue } from '../EditorContext';
+import { Toolbar } from '../Toolbar';
+import { tiptapToMarkdown } from '../tiptapBridge';
+
+let currentContext: EditorContextValue | null = null;
+
+function ContextProbe() {
+  currentContext = useEditorContext();
+  return null;
+}
+
+function context(): EditorContextValue {
+  if (!currentContext) throw new Error('EditorContext has not mounted');
+  return currentContext;
+}
+
+function monacoWithSelection(selectedText: string) {
+  const selection = {
+    startLineNumber: 1,
+    startColumn: 1,
+    endLineNumber: selectedText.split('\n').length,
+    endColumn: 1,
+  };
+  const model = {
+    getValueInRange: () => selectedText,
+    getLineContent: () => selectedText.split('\n')[0] ?? '',
+  };
+  const disposable = { dispose: vi.fn() };
+  const executeEdits = vi.fn();
+  const editor = {
+    getSelection: () => selection,
+    getModel: () => model,
+    getPosition: () => ({ lineNumber: 1, column: 1 }),
+    onDidChangeCursorPosition: () => disposable,
+    onDidChangeModelContent: () => disposable,
+    executeEdits,
+    focus: vi.fn(),
+  };
+  return { editor, executeEdits, selection };
+}
+
+beforeEach(() => {
+  currentContext = null;
+  if (typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: () => ({
+        matches: false,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      }),
+    });
+  }
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class ResizeObserverStub {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver;
+  }
+});
+
+describe('<Toolbar> selection conversion menu', () => {
+  it('shows Convert above Insert and replaces a delimited Monaco selection', async () => {
+    const source = 'Name,Role\nAda,Engineer\n';
+    const { editor, executeEdits, selection } = monacoWithSelection(source);
+    render(
+      <EditorProvider initialMarkdown={source} initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <ContextProbe />
+      </EditorProvider>,
+    );
+    act(() => context().setMonacoEditor(editor as never));
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    const menu = await screen.findByRole('menu');
+    expect(
+      within(menu)
+        .getAllByText(/^(Convert|Insert)$/)
+        .map((node) => node.textContent),
+    ).toEqual(['Convert', 'Insert']);
+
+    fireEvent.click(within(menu).getByRole('menuitem', { name: 'Convert selection to Table' }));
+
+    expect(executeEdits).toHaveBeenCalledWith('toolbar-convert-selection', [
+      {
+        range: selection,
+        text: '| Name | Role |\n| --- | --- |\n| Ada | Engineer |\n',
+      },
+    ]);
+  });
+
+  it('does not show Convert without selected text', async () => {
+    const { editor } = monacoWithSelection('');
+    render(
+      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <ContextProbe />
+      </EditorProvider>,
+    );
+    act(() => context().setMonacoEditor(editor as never));
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    const menu = await screen.findByRole('menu');
+    expect(within(menu).queryByText('Convert')).toBeNull();
+    expect(within(menu).queryByRole('menuitem', { name: 'Convert selection to Table' })).toBeNull();
+  });
+
+  it('replaces fully selected Write paragraphs without leaving a blank paragraph', async () => {
+    const editor = new Editor({
+      extensions: [StarterKit, TaskList, TaskItem],
+      content: '<p>First</p><p>Second</p><p>Third</p><h2>After</h2>',
+    });
+    const paragraphs: Array<{ pos: number; contentSize: number }> = [];
+    editor.state.doc.descendants((node, pos) => {
+      if (node.type.name === 'paragraph') {
+        paragraphs.push({ pos, contentSize: node.content.size });
+      }
+    });
+    const first = paragraphs[0];
+    const third = paragraphs[2];
+    expect(first).toBeDefined();
+    expect(third).toBeDefined();
+    editor.commands.setTextSelection({
+      from: first.pos + 1,
+      to: third.pos + 1 + third.contentSize,
+    });
+
+    render(
+      <EditorProvider
+        initialMarkdown="First\n\nSecond\n\nThird\n\n## After"
+        initialView="wysiwyg"
+        allowRecording={false}
+      >
+        <Toolbar />
+        <ContextProbe />
+      </EditorProvider>,
+    );
+    act(() => context().setTiptapEditor(editor));
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    fireEvent.click(
+      await screen.findByRole('menuitem', { name: 'Convert selection to Task List' }),
+    );
+
+    await waitFor(() => {
+      expect(editor.getJSON().content?.map((node) => node.type)).toEqual(['taskList', 'heading']);
+    });
+    expect(tiptapToMarkdown(editor.getHTML())).toBe(
+      '- [ ] First\n- [ ] Second\n- [ ] Third\n\n## After\n',
+    );
+    editor.destroy();
+  });
+});

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');
+  });
 });