@bendyline/squisq-editor-react 1.4.0 → 1.5.0

package/src/__tests__/recorderFormats.test.ts

@@ -0,0 +1,146 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  buildFilename,
+  resolveFormat,
+  supportsDisplayMedia,
+  supportsMediaRecorder,
+  supportsUserMedia,
+} from '../recorder/formats.js';
+
+/**
+ * Most of these probes touch global APIs that jsdom doesn't implement.
+ * Each test installs the minimum stub needed to exercise the probe and
+ * cleans up after itself so probes in other suites stay independent.
+ */
+
+const originalMediaRecorder = (globalThis as { MediaRecorder?: unknown }).MediaRecorder;
+const originalNavigator = globalThis.navigator;
+
+afterEach(() => {
+  if (originalMediaRecorder === undefined) {
+    delete (globalThis as { MediaRecorder?: unknown }).MediaRecorder;
+  } else {
+    (globalThis as { MediaRecorder?: unknown }).MediaRecorder = originalMediaRecorder;
+  }
+  Object.defineProperty(globalThis, 'navigator', {
+    value: originalNavigator,
+    configurable: true,
+  });
+});
+
+function installMediaRecorderStub(supported: readonly string[]) {
+  const stub = {
+    isTypeSupported: (mime: string) => supported.includes(mime),
+  };
+  (globalThis as { MediaRecorder?: unknown }).MediaRecorder = stub;
+}
+
+describe('supportsMediaRecorder', () => {
+  it('is false when MediaRecorder is undefined', () => {
+    delete (globalThis as { MediaRecorder?: unknown }).MediaRecorder;
+    expect(supportsMediaRecorder()).toBe(false);
+  });
+
+  it('is true when a MediaRecorder global exists', () => {
+    installMediaRecorderStub(['audio/webm']);
+    expect(supportsMediaRecorder()).toBe(true);
+  });
+});
+
+describe('supportsUserMedia / supportsDisplayMedia', () => {
+  it('is false when navigator.mediaDevices is unavailable', () => {
+    Object.defineProperty(globalThis, 'navigator', {
+      value: {},
+      configurable: true,
+    });
+    expect(supportsUserMedia()).toBe(false);
+    expect(supportsDisplayMedia()).toBe(false);
+  });
+
+  it('is true only for the methods that exist', () => {
+    Object.defineProperty(globalThis, 'navigator', {
+      value: { mediaDevices: { getUserMedia: vi.fn() } },
+      configurable: true,
+    });
+    expect(supportsUserMedia()).toBe(true);
+    expect(supportsDisplayMedia()).toBe(false);
+
+    Object.defineProperty(globalThis, 'navigator', {
+      value: { mediaDevices: { getUserMedia: vi.fn(), getDisplayMedia: vi.fn() } },
+      configurable: true,
+    });
+    expect(supportsUserMedia()).toBe(true);
+    expect(supportsDisplayMedia()).toBe(true);
+  });
+});
+
+describe('resolveFormat', () => {
+  it('picks the first supported audio candidate', () => {
+    installMediaRecorderStub(['audio/webm;codecs=opus', 'audio/webm']);
+    const fmt = resolveFormat('audio');
+    expect(fmt.mimeType).toBe('audio/webm;codecs=opus');
+    expect(fmt.extension).toBe('.webm');
+    expect(fmt.directory).toBe('audio');
+  });
+
+  it('picks the first supported video candidate', () => {
+    installMediaRecorderStub(['video/mp4;codecs=avc1.42E01E,mp4a.40.2']);
+    const fmt = resolveFormat('video');
+    expect(fmt.mimeType).toBe('video/mp4;codecs=avc1.42E01E,mp4a.40.2');
+    expect(fmt.extension).toBe('.mp4');
+    expect(fmt.directory).toBe('video');
+  });
+
+  it('honors a caller-supplied preferred MIME when supported', () => {
+    installMediaRecorderStub(['audio/webm', 'audio/ogg;codecs=opus']);
+    const fmt = resolveFormat('audio', 'audio/ogg;codecs=opus');
+    expect(fmt.mimeType).toBe('audio/ogg;codecs=opus');
+    expect(fmt.extension).toBe('.ogg');
+  });
+
+  it('falls through the candidate list when the preferred MIME is unsupported', () => {
+    installMediaRecorderStub(['audio/webm']);
+    const fmt = resolveFormat('audio', 'audio/aac');
+    expect(fmt.mimeType).toBe('audio/webm');
+  });
+
+  it('returns an empty MIME with a .webm extension fallback when nothing matches', () => {
+    installMediaRecorderStub([]);
+    const fmt = resolveFormat('video');
+    expect(fmt.mimeType).toBe('');
+    expect(fmt.extension).toBe('.webm');
+  });
+
+  it('returns the .webm fallback extension when MediaRecorder is absent entirely', () => {
+    delete (globalThis as { MediaRecorder?: unknown }).MediaRecorder;
+    const fmt = resolveFormat('audio');
+    expect(fmt.mimeType).toBe('');
+    expect(fmt.extension).toBe('.webm');
+    expect(fmt.directory).toBe('audio');
+  });
+});
+
+describe('buildFilename', () => {
+  it('uses the basename when supplied, prefixed with the chosen extension', () => {
+    expect(buildFilename('audio', '.webm', 'intro')).toBe('intro.webm');
+  });
+
+  it('sanitizes filesystem-hostile characters', () => {
+    expect(buildFilename('video', '.mp4', 'my recording: take/2?')).toBe(
+      'my-recording--take-2-.mp4',
+    );
+  });
+
+  it('falls back to a timestamped name when no basename is supplied', () => {
+    const name = buildFilename('audio', '.webm');
+    expect(name.startsWith('narration-')).toBe(true);
+    expect(name.endsWith('.webm')).toBe(true);
+    // Format is narration-YYYYMMDD-HHMMSS.webm — 15 chars after the prefix.
+    expect(name).toMatch(/^narration-\d{8}-\d{6}\.webm$/);
+  });
+
+  it('uses the recording-* prefix for video sources', () => {
+    const name = buildFilename('video', '.mp4');
+    expect(name).toMatch(/^recording-\d{8}-\d{6}\.mp4$/);
+  });
+});

package/src/__tests__/recorderTimingJson.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+import { buildTimingJson, encodeTimingJson, timingPathFor } from '../recorder/timingJson.js';
+
+describe('buildTimingJson', () => {
+  it('returns a payload matching what resolveAudioMapping() expects', () => {
+    const timing = buildTimingJson('Hello world.', 12.5);
+    expect(timing).toEqual({
+      sourceText: 'Hello world.',
+      duration: 12.5,
+      bookmarks: [],
+    });
+  });
+
+  it('coerces missing or negative durations to 0', () => {
+    expect(buildTimingJson('script', Number.NaN).duration).toBe(0);
+    expect(buildTimingJson('script', -5).duration).toBe(0);
+    expect(buildTimingJson('script', Number.POSITIVE_INFINITY).duration).toBe(0);
+  });
+
+  it('treats empty sourceText as an empty string, not undefined', () => {
+    expect(buildTimingJson('', 1).sourceText).toBe('');
+  });
+});
+
+describe('encodeTimingJson', () => {
+  it('emits valid pretty-printed JSON', () => {
+    const bytes = encodeTimingJson(buildTimingJson('Hi.', 3));
+    const text = new TextDecoder().decode(bytes);
+    const parsed: unknown = JSON.parse(text);
+    expect(parsed).toEqual({ sourceText: 'Hi.', duration: 3, bookmarks: [] });
+    // Pretty-printed means newlines and indentation are present.
+    expect(text).toContain('\n');
+  });
+});
+
+describe('timingPathFor', () => {
+  it('appends .timing.json to the audio path verbatim', () => {
+    expect(timingPathFor('audio/narration.webm')).toBe('audio/narration.webm.timing.json');
+    expect(timingPathFor('intro.mp3')).toBe('intro.mp3.timing.json');
+  });
+});

package/src/__tests__/templateAnnotationRoundTrip.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
+
+describe('Template annotation round-trip', () => {
+  it('extracts {[template]} into data-template on markdownToTiptap', () => {
+    const html = markdownToTiptap('## Getting Started {[comparisonBar]}');
+    expect(html).toContain('data-template="comparisonBar"');
+    expect(html).toContain('Getting Started');
+    expect(html).not.toContain('{[comparisonBar]}'); // raw text stripped
+  });
+
+  it('round-trips markdown → HTML → markdown losslessly', () => {
+    const original = '## Getting Started {[comparisonBar]}';
+    const html = markdownToTiptap(original);
+    const back = tiptapToMarkdown(html);
+    expect(back.trim()).toBe(original);
+  });
+
+  it('preserves template annotation through Tiptap-rendered HTML (with badge spans)', () => {
+    // Simulates HTML that Tiptap actually renders after parse: includes the
+    // squisq-heading-content + squisq-template-badge wrapper spans.
+    const tiptapRendered =
+      '<h2 data-template="comparisonBar">' +
+      '<span class="squisq-heading-content">Getting Started</span>' +
+      '<span class="squisq-template-badge" contenteditable="false" data-template="comparisonBar" data-template-label="Comparison Bar"></span>' +
+      '</h2>';
+    const md = tiptapToMarkdown(tiptapRendered);
+    expect(md).toContain('## Getting Started');
+    expect(md).toContain('{[comparisonBar]}');
+    // No literal badge spans should leak into markdown
+    expect(md).not.toContain('squisq-template-badge');
+    expect(md).not.toContain('Comparison Bar'); // CSS-rendered label shouldn't bleed
+  });
+});

package/src/__tests__/tiptapBridge.test.ts

@@ -74,6 +74,21 @@ describe('markdownToTiptap', () => {
     expect(back.trim()).toBe(md);
   });
 
+  it('converts FontAwesome inline icons to <i data-icon> tags', () => {
+    const html = markdownToTiptap('{[angellist]}');
+    expect(html).toContain('data-icon="angellist"');
+    expect(html).toContain('data-family="brands"');
+    expect(html).toContain('data-name="angellist"');
+    expect(html).toContain('class="fa-brands fa-angellist"');
+  });
+
+  it('round-trips FA inline icons through markdown↔HTML', () => {
+    const md = 'Repo {[github]} and {[angellist]}.';
+    const html = markdownToTiptap(md);
+    const back = tiptapToMarkdown(html);
+    expect(back.trim()).toBe(md);
+  });
+
   it('converts images', () => {
     const html = markdownToTiptap('![Logo](logo.png)');
     expect(html).toContain('alt="Logo"');

package/src/__tests__/useImageEditor.test.tsx

@@ -0,0 +1,159 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { MemoryContentContainer } from '@bendyline/squisq/storage';
+import {
+  IMAGE_EDIT_STATE_FILENAME,
+  readImageEditDoc,
+  writeImageEditDoc,
+  createEmptyImageEditDoc,
+} from '@bendyline/squisq/imageEdit';
+import { useImageEditor } from '../imageEditor/useImageEditor.js';
+
+beforeEach(() => {
+  // jsdom doesn't implement createObjectURL or HTMLImageElement loading.
+  // Stub both so the hook can complete its asset-resolution path.
+  if (typeof URL.createObjectURL !== 'function') {
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn(() => 'blob:stub'),
+    });
+  } else {
+    vi.spyOn(URL, 'createObjectURL').mockImplementation(() => 'blob:stub');
+  }
+  if (typeof URL.revokeObjectURL !== 'function') {
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+  }
+});
+
+describe('useImageEditor', () => {
+  it('loads an existing state.json from the container', async () => {
+    const container = new MemoryContentContainer();
+    const doc = createEmptyImageEditDoc(120, 80);
+    await writeImageEditDoc(container, doc);
+
+    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
+
+    await waitFor(() => expect(result.current.ready).toBe(true));
+    expect(result.current.state?.doc.canvas.width).toBe(120);
+    expect(result.current.error).toBe(null);
+  });
+
+  it('seeds an empty doc when no state.json and no initialSrc', async () => {
+    const container = new MemoryContentContainer();
+    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
+
+    await waitFor(() => expect(result.current.ready).toBe(true));
+    expect(result.current.state?.doc.layers).toHaveLength(0);
+    // The seed should have been written back to the container.
+    const persisted = await readImageEditDoc(container);
+    expect(persisted).not.toBeNull();
+  });
+
+  it('persists state.json after a debounced action', async () => {
+    const container = new MemoryContentContainer();
+    await writeImageEditDoc(container, createEmptyImageEditDoc(50, 50));
+
+    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
+    await waitFor(() => expect(result.current.ready).toBe(true));
+
+    act(() => {
+      result.current.dispatch({
+        type: 'add-layer',
+        layer: {
+          type: 'shape',
+          position: { x: 0, y: 0, width: 10, height: 10 },
+          content: { shape: 'rect', fill: '#000' },
+        },
+      });
+    });
+
+    await waitFor(() => expect(result.current.state?.dirty).toBe(false), {
+      timeout: 500,
+    });
+
+    const persisted = await readImageEditDoc(container);
+    expect(persisted?.layers).toHaveLength(1);
+  });
+
+  it('uploadAsset writes bytes under assets/ and returns the path', async () => {
+    const container = new MemoryContentContainer();
+    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
+
+    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
+    await waitFor(() => expect(result.current.ready).toBe(true));
+
+    const bytes = new Uint8Array([1, 2, 3, 4]);
+    // jsdom's Blob predates the arrayBuffer() method on some versions, so
+    // shim a minimal Blob-like that the hook only needs `.arrayBuffer()`
+    // and `.type` from.
+    const file = {
+      type: 'image/png',
+      arrayBuffer: async () => bytes.buffer,
+    } as unknown as Blob;
+    let path = '';
+    await act(async () => {
+      path = await result.current.uploadAsset(file, 'pic.png');
+    });
+    expect(path).toMatch(/^assets\/.+\.png$/);
+    const written = await container.readFile(path);
+    expect(written).not.toBeNull();
+    expect(written!.byteLength).toBe(4);
+  });
+
+  it('flush writes synchronously and clears dirty', async () => {
+    const container = new MemoryContentContainer();
+    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
+
+    const { result } = renderHook(
+      () => useImageEditor({ container, persistDebounceMs: 100000 }), // effectively disabled
+    );
+    await waitFor(() => expect(result.current.ready).toBe(true));
+
+    act(() => {
+      result.current.dispatch({
+        type: 'set-canvas',
+        canvas: { width: 25, height: 25 },
+      });
+    });
+    expect(result.current.state?.dirty).toBe(true);
+
+    await act(async () => {
+      await result.current.flush();
+    });
+    expect(result.current.state?.dirty).toBe(false);
+    const persisted = await readImageEditDoc(container);
+    expect(persisted?.canvas.width).toBe(25);
+  });
+
+  it('versioning is null when allowVersioning is false', async () => {
+    const container = new MemoryContentContainer();
+    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
+    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
+    await waitFor(() => expect(result.current.ready).toBe(true));
+    expect(result.current.versioning).toBe(null);
+  });
+
+  it('versioning manager is exposed when allowVersioning is true', async () => {
+    const container = new MemoryContentContainer();
+    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
+    const { result } = renderHook(() =>
+      useImageEditor({
+        container,
+        persistDebounceMs: 5,
+        allowVersioning: true,
+        versioningAutoSaveIdleMs: 0, // disable autosave
+      }),
+    );
+    await waitFor(() => expect(result.current.ready).toBe(true));
+    expect(result.current.versioning).not.toBe(null);
+  });
+});
+
+// Ensure constants are referenced so unused-import lint stays quiet.
+void IMAGE_EDIT_STATE_FILENAME;

package/src/__tests__/useMediaRecorder.test.ts

@@ -0,0 +1,186 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useMediaRecorder } from '../recorder/hooks/useMediaRecorder.js';
+
+/**
+ * Lifecycle test for the recorder hook with stubbed browser APIs.
+ * Drives request → start → stop and verifies the surface contract:
+ * state transitions, blob production, and cleanup on cancel.
+ */
+
+class FakeMediaStreamTrack {
+  readyState: 'live' | 'ended' = 'live';
+  kind: 'audio' | 'video';
+  stop = vi.fn(() => {
+    this.readyState = 'ended';
+  });
+  constructor(kind: 'audio' | 'video') {
+    this.kind = kind;
+  }
+}
+
+class FakeMediaStream {
+  tracks: FakeMediaStreamTrack[];
+  constructor(tracks: FakeMediaStreamTrack[] = []) {
+    this.tracks = tracks;
+  }
+  get active() {
+    return this.tracks.some((t) => t.readyState === 'live');
+  }
+  getTracks() {
+    return this.tracks;
+  }
+  getAudioTracks() {
+    return this.tracks.filter((t) => t.kind === 'audio');
+  }
+  getVideoTracks() {
+    return this.tracks.filter((t) => t.kind === 'video');
+  }
+}
+
+interface FakeRecorderHandle {
+  state: 'recording' | 'inactive';
+  mimeType: string;
+  stream: FakeMediaStream;
+  ondataavailable: ((event: { data: Blob }) => void) | null;
+  onstop: (() => void) | null;
+  onerror: ((event: unknown) => void) | null;
+  start(): void;
+  stop(): void;
+}
+
+let lastRecorder: FakeRecorderHandle | null = null;
+
+class FakeMediaRecorder implements FakeRecorderHandle {
+  state: 'recording' | 'inactive' = 'inactive';
+  mimeType: string;
+  stream: FakeMediaStream;
+  ondataavailable: ((event: { data: Blob }) => void) | null = null;
+  onstop: (() => void) | null = null;
+  onerror: ((event: unknown) => void) | null = null;
+  constructor(stream: FakeMediaStream, options?: { mimeType?: string }) {
+    this.stream = stream;
+    this.mimeType = options?.mimeType ?? 'audio/webm';
+    // Expose the most recent instance to the test body so assertions can
+    // poke at its state/event handlers. Not a `const self = this` alias
+    // pattern — `lastRecorder` is a module-level slot, not a workaround
+    // for arrow-function-vs-method `this` confusion.
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    lastRecorder = this;
+  }
+  static isTypeSupported(mime: string): boolean {
+    return mime.startsWith('audio/webm') || mime.startsWith('video/webm');
+  }
+  start() {
+    this.state = 'recording';
+  }
+  stop() {
+    if (this.state === 'inactive') return;
+    this.state = 'inactive';
+    // Emit a fake data chunk then resolve.
+    this.ondataavailable?.({ data: new Blob(['hello'], { type: this.mimeType }) });
+    this.onstop?.();
+  }
+}
+
+const originalMediaRecorder = (globalThis as { MediaRecorder?: unknown }).MediaRecorder;
+const originalNavigator = globalThis.navigator;
+
+beforeEach(() => {
+  lastRecorder = null;
+  (globalThis as { MediaRecorder?: unknown }).MediaRecorder = FakeMediaRecorder;
+  const fakeStream = new FakeMediaStream([new FakeMediaStreamTrack('audio')]);
+  Object.defineProperty(globalThis, 'navigator', {
+    value: {
+      mediaDevices: {
+        getUserMedia: vi.fn().mockResolvedValue(fakeStream),
+      },
+    },
+    configurable: true,
+  });
+});
+
+afterEach(() => {
+  if (originalMediaRecorder === undefined) {
+    delete (globalThis as { MediaRecorder?: unknown }).MediaRecorder;
+  } else {
+    (globalThis as { MediaRecorder?: unknown }).MediaRecorder = originalMediaRecorder;
+  }
+  Object.defineProperty(globalThis, 'navigator', {
+    value: originalNavigator,
+    configurable: true,
+  });
+});
+
+describe('useMediaRecorder lifecycle', () => {
+  it('walks idle → ready → recording → stopped and produces a blob', async () => {
+    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
+
+    expect(result.current.state).toBe('idle');
+
+    await act(async () => {
+      await result.current.request();
+    });
+    expect(result.current.state).toBe('ready');
+    expect(result.current.stream).not.toBeNull();
+    expect(result.current.mimeType).toMatch(/^audio\/webm/);
+    expect(result.current.extension).toBe('.webm');
+    expect(result.current.directory).toBe('audio');
+
+    act(() => {
+      result.current.start();
+    });
+    expect(result.current.state).toBe('recording');
+    expect(lastRecorder?.state).toBe('recording');
+
+    let blob: Blob | null = null;
+    await act(async () => {
+      blob = await result.current.stop();
+    });
+    expect(result.current.state).toBe('stopped');
+    expect(blob).toBeInstanceOf(Blob);
+    expect(result.current.blob).toBeInstanceOf(Blob);
+  });
+
+  it('reset() returns to ready when the underlying stream is still live (discard & re-record)', async () => {
+    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
+
+    await act(async () => {
+      await result.current.request();
+    });
+    act(() => {
+      result.current.start();
+    });
+    await act(async () => {
+      await result.current.stop();
+    });
+    expect(result.current.state).toBe('stopped');
+
+    act(() => {
+      result.current.reset();
+    });
+
+    expect(result.current.state).toBe('ready');
+    expect(result.current.blob).toBeNull();
+    expect(result.current.stream).not.toBeNull();
+  });
+
+  it('cancel() tears down state and stops the stream tracks', async () => {
+    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
+
+    await act(async () => {
+      await result.current.request();
+    });
+    const stream = result.current.stream as unknown as FakeMediaStream;
+    expect(stream).not.toBeNull();
+    const tracks = stream.getTracks();
+
+    act(() => {
+      result.current.cancel();
+    });
+
+    expect(result.current.state).toBe('idle');
+    expect(result.current.stream).toBeNull();
+    expect(tracks.every((t) => t.stop.mock.calls.length > 0)).toBe(true);
+  });
+});