@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/__tests__/mediaBinDrop.test.tsx

@@ -0,0 +1,90 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { MediaEntry, MediaProvider } from '@bendyline/squisq/schemas';
+import { MediaBin } from '../MediaBin.js';
+
+function createProvider(): { provider: MediaProvider; added: string[] } {
+  const entries: MediaEntry[] = [];
+  const added: string[] = [];
+  return {
+    added,
+    provider: {
+      async addMedia(name, data, mimeType) {
+        const relativePath = `attachments/${name}`;
+        added.push(relativePath);
+        entries.push({
+          name: relativePath,
+          mimeType,
+          size: data instanceof Blob ? data.size : data.byteLength,
+        });
+        return relativePath;
+      },
+      async resolveUrl(path) {
+        return `blob:${path}`;
+      },
+      async listMedia() {
+        return [...entries];
+      },
+      async removeMedia() {},
+      dispose() {},
+    },
+  };
+}
+
+function dataTransfer(files: File[], itemTypes: string[]) {
+  return {
+    files,
+    items: itemTypes.map((type) => ({ kind: 'file', type })),
+    types: ['Files'],
+    dropEffect: 'none',
+  };
+}
+
+describe('MediaBin image drop target', () => {
+  it('shows a drop affordance and uploads a dropped image through the normal callback', async () => {
+    const { provider, added } = createProvider();
+    const onMediaUploaded = vi.fn();
+    const image = new File([new Uint8Array([1, 2, 3])], 'photo.png', { type: 'image/png' });
+    Object.defineProperty(image, 'arrayBuffer', {
+      configurable: true,
+      value: async () => new Uint8Array([1, 2, 3]).buffer,
+    });
+
+    const { container } = render(
+      <MediaBin mediaProvider={provider} isDark onMediaUploaded={onMediaUploaded} />,
+    );
+    const bin = container.querySelector('.squisq-media-bin') as HTMLElement;
+    const transfer = dataTransfer([image], ['image/png']);
+    await screen.findByText('No files yet.');
+
+    fireEvent.dragEnter(bin, { dataTransfer: transfer });
+    expect(bin.classList.contains('squisq-media-bin--drop-active')).toBe(true);
+    expect(screen.getByText('Drop images here')).toBeTruthy();
+
+    fireEvent.drop(bin, { dataTransfer: transfer });
+
+    await waitFor(() => expect(added).toEqual(['attachments/photo.png']));
+    expect(onMediaUploaded).toHaveBeenCalledWith('attachments/photo.png', 'photo.png', 'image/png');
+    expect(await screen.findByText('photo.png')).toBeTruthy();
+    expect(screen.queryByText('Drop images here')).toBeNull();
+  });
+
+  it('does not activate or upload for a non-image file', async () => {
+    const { provider, added } = createProvider();
+    const text = new File(['notes'], 'notes.txt', { type: 'text/plain' });
+    const { container } = render(<MediaBin mediaProvider={provider} isDark={false} />);
+    const bin = container.querySelector('.squisq-media-bin') as HTMLElement;
+    const transfer = dataTransfer([text], ['text/plain']);
+    await screen.findByText('No files yet.');
+
+    fireEvent.dragEnter(bin, { dataTransfer: transfer });
+    fireEvent.drop(bin, { dataTransfer: transfer });
+
+    expect(bin.classList.contains('squisq-media-bin--drop-active')).toBe(false);
+    expect(screen.queryByText('Drop images here')).toBeNull();
+    await waitFor(() => expect(added).toEqual([]));
+  });
+});

package/src/__tests__/narrationSave.test.ts

@@ -0,0 +1,148 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, expect, it } from 'vitest';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import { markdownToDoc } from '@bendyline/squisq/doc';
+import {
+  buildNarrationScript,
+  parseNarrationTimingJson,
+  type NarrationAlignment,
+} from '@bendyline/squisq/narration';
+import {
+  insertNarrationPreamble,
+  narrationAnnotationLine,
+} from '../teleprompter/recording/insertPreamble';
+import { buildNarrationSavePlan } from '../teleprompter/recording/narrationSave';
+
+describe('insertNarrationPreamble', () => {
+  it('inserts at the top of a plain document', () => {
+    const next = insertNarrationPreamble('# Title\n\nBody.\n', 'audio/narration-1.webm', null);
+    expect(next.startsWith('{[audio src=audio/narration-1.webm anchor=document]}\n\n# Title')).toBe(
+      true,
+    );
+  });
+
+  it('inserts after the frontmatter fence', () => {
+    const source = '---\ntitle: Doc\n---\n\n# Title\n\nBody.\n';
+    const next = insertNarrationPreamble(source, 'audio/narration-1.webm', null);
+    const lines = next.split('\n');
+    expect(lines[2]).toBe('---');
+    expect(next).toContain(
+      '---\n\n{[audio src=audio/narration-1.webm anchor=document]}\n\n# Title',
+    );
+  });
+
+  it('replaces a previous take (and its camera line) on retake', () => {
+    const withTake = insertNarrationPreamble(
+      '# Title\n\nBody.\n',
+      'audio/narration-old.webm',
+      'video/narration-cam-old.webm',
+    );
+    expect(withTake).toContain('narration-old');
+    expect(withTake).toContain('<video src="video/narration-cam-old.webm"');
+
+    const retaken = insertNarrationPreamble(withTake, 'audio/narration-new.webm', null);
+    expect(retaken).not.toContain('narration-old');
+    expect(retaken).not.toContain('narration-cam-old');
+    expect(retaken).toContain('{[audio src=audio/narration-new.webm anchor=document]}');
+    // No duplicate annotations.
+    expect(retaken.match(/\{\[audio /g)?.length).toBe(1);
+  });
+
+  it('adds the camera companion as an inline video line', () => {
+    const next = insertNarrationPreamble(
+      '# Title\n\nBody.\n',
+      'audio/narration-1.webm',
+      'video/narration-cam-1.webm',
+    );
+    expect(next).toContain('{[audio src=audio/narration-1.webm anchor=document]}');
+    expect(next).toContain('<video src="video/narration-cam-1.webm" controls width="240"></video>');
+  });
+
+  it('quotes srcs with spaces', () => {
+    expect(narrationAnnotationLine('audio/my take.webm')).toBe(
+      '{[audio src="audio/my take.webm" anchor=document]}',
+    );
+  });
+
+  it('round-trips through markdownToDoc as documentMedia', () => {
+    const next = insertNarrationPreamble(
+      '---\ntitle: Doc\n---\n\n# Title\n\nBody.\n',
+      'audio/narration-1.webm',
+      null,
+    );
+    const doc = markdownToDoc(parseMarkdown(next));
+    expect(doc.documentMedia?.length).toBe(1);
+    expect(doc.documentMedia![0].src).toBe('audio/narration-1.webm');
+    expect(doc.documentMedia![0].anchor).toBe('document');
+  });
+});
+
+describe('buildNarrationSavePlan', () => {
+  const script = buildNarrationScript(
+    markdownToDoc(parseMarkdown('# One\n\nAlpha beta.\n\n# Two\n\nGamma delta.\n')),
+  );
+  const alignment: NarrationAlignment = {
+    words: script.tokens.map((_, i) => ({ tokenIndex: i, tSec: i * 0.4, interpolated: false })),
+    blocks: script.blocks.map((range, i) => ({
+      blockId: range.blockId,
+      blockIndex: i,
+      charStart: range.charStart,
+      charEnd: range.charEnd,
+      startSec: i * 5,
+      endSec: (i + 1) * 5,
+    })),
+    detectedSyllables: script.totalSyllables,
+    cost: 0,
+  };
+
+  it('produces recorder-convention paths and a v3 sidecar the parser accepts', () => {
+    const plan = buildNarrationSavePlan({
+      script,
+      alignment,
+      durationSec: 10,
+      audioExt: '.webm',
+      cameraExt: '.webm',
+      baseWpm: 150,
+      cameraOffsetSec: 0.02,
+    });
+    expect(plan.audioRelativeName).toMatch(/^audio\/narration-.*\.webm$/);
+    expect(plan.cameraRelativeName).toMatch(/^video\/narration-cam.*\.webm$/);
+    expect(plan.sidecarPathFor('audio/renamed.webm')).toBe('audio/renamed.webm.timing.json');
+
+    const parsed = parseNarrationTimingJson(JSON.stringify(plan.sidecarPayload));
+    expect(parsed).not.toBeNull();
+    expect(parsed!.blocks.length).toBe(script.blocks.length);
+    expect(parsed!.bookmarks.length).toBe(script.tokens.length);
+    expect(parsed!.cameraOffsetSec).toBeCloseTo(0.02, 6);
+  });
+
+  it('degrades to an empty-timing sidecar when alignment failed', () => {
+    const plan = buildNarrationSavePlan({
+      script,
+      alignment: null,
+      durationSec: 10,
+      audioExt: '.webm',
+      cameraExt: null,
+      baseWpm: 150,
+    });
+    expect(plan.cameraRelativeName).toBeNull();
+    expect(plan.sidecarPayload.blocks).toEqual([]);
+    expect(plan.sidecarPayload.bookmarks).toEqual([]);
+    expect(plan.sidecarPayload.sourceText).toBe(script.sourceText);
+  });
+
+  it('nextMarkdown composes the preamble from one snapshot', () => {
+    const plan = buildNarrationSavePlan({
+      script,
+      alignment,
+      durationSec: 10,
+      audioExt: '.webm',
+      cameraExt: null,
+      baseWpm: 150,
+    });
+    const next = plan.nextMarkdown('# One\n\nAlpha beta.\n', 'audio/narration-x.webm', null);
+    expect(next).toContain('{[audio src=audio/narration-x.webm anchor=document]}');
+  });
+});

package/src/__tests__/outlinePanel.test.tsx

@@ -1,6 +1,6 @@
-import { describe, expect, it, beforeAll } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { EditorProvider } from '../EditorContext';
+import { describe, expect, it, beforeAll, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { EditorProvider, useEditorContext } from '../EditorContext';
 import { OutlinePanel } from '../OutlinePanel';
 
 // jsdom lacks ResizeObserver — the pane wires one up to track the editor's
@@ -23,6 +23,33 @@ function renderOutline(markdown: string) {
   );
 }
 
+function SourceProbe() {
+  const { markdownSource } = useEditorContext();
+  return <output data-testid="markdown-source">{markdownSource}</output>;
+}
+
+function renderOutlineWithSource(markdown: string, readOnly = false) {
+  return render(
+    <EditorProvider initialMarkdown={markdown} initialView="wysiwyg" articleId="test">
+      <OutlinePanel readOnly={readOnly} />
+      <SourceProbe />
+    </EditorProvider>,
+  );
+}
+
+function makeDataTransfer(): DataTransfer {
+  const values = new Map<string, string>();
+  return {
+    effectAllowed: 'uninitialized',
+    dropEffect: 'none',
+    setData: vi.fn((type: string, value: string) => values.set(type, value)),
+    getData: vi.fn((type: string) => values.get(type) ?? ''),
+    get types() {
+      return [...values.keys()];
+    },
+  } as unknown as DataTransfer;
+}
+
 describe('OutlinePanel', () => {
   it('renders the empty placeholder when the doc has no headings', async () => {
     renderOutline('Just a paragraph, no headings.\n');
@@ -76,4 +103,67 @@ describe('OutlinePanel', () => {
     expect(chip).not.toBeNull();
     expect(chip!.textContent).toContain('Title');
   });
+
+  it('drags a section after a sibling and rewrites the underlying markdown', async () => {
+    const source = '# Alpha\n\nalpha\n\n# Bravo\n\nbravo\n';
+    const expected = '# Bravo\n\nbravo\n\n# Alpha\n\nalpha\n';
+    const { container } = renderOutlineWithSource(source);
+    const alpha = await screen.findByRole('button', { name: 'Alpha' });
+    const bravo = await screen.findByRole('button', { name: 'Bravo' });
+    const bravoWrap = bravo.closest<HTMLElement>('.squisq-outline-row-wrap');
+    expect(bravoWrap).not.toBeNull();
+    vi.spyOn(bravoWrap!, 'getBoundingClientRect').mockReturnValue({
+      x: 0,
+      y: 0,
+      top: 0,
+      right: 200,
+      bottom: 20,
+      left: 0,
+      width: 200,
+      height: 20,
+      toJSON: () => ({}),
+    });
+    const transfer = makeDataTransfer();
+
+    fireEvent.dragStart(alpha, { dataTransfer: transfer });
+    expect(transfer.effectAllowed).toBe('move');
+    expect(transfer.setData).toHaveBeenCalledWith('text/plain', expect.any(String));
+
+    fireEvent.dragOver(bravoWrap!, { dataTransfer: transfer, clientY: 18 });
+    expect(transfer.dropEffect).toBe('move');
+    expect(bravo.closest('.squisq-outline-item')?.classList).toContain(
+      'squisq-outline-item--drop-after',
+    );
+
+    fireEvent.drop(bravoWrap!, { dataTransfer: transfer, clientY: 18 });
+    expect(container.querySelector('.squisq-outline-item--drop-after')).toBeNull();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('markdown-source').textContent).toBe(expected);
+      const labels = Array.from(container.querySelectorAll('.squisq-outline-row-text')).map(
+        (row) => row.textContent,
+      );
+      expect(labels).toEqual(['Bravo', 'Alpha']);
+    });
+  });
+
+  it('disables outline mutations in read-only mode', async () => {
+    const source = '# Alpha\n\nalpha\n\n# Bravo\n\nbravo\n';
+    renderOutlineWithSource(source, true);
+    const alpha = await screen.findByRole('button', { name: 'Alpha' });
+    const bravo = await screen.findByRole('button', { name: 'Bravo' });
+    const bravoWrap = bravo.closest<HTMLElement>('.squisq-outline-row-wrap');
+    const transfer = makeDataTransfer();
+
+    expect(alpha.getAttribute('draggable')).toBe('false');
+    expect(
+      screen
+        .getAllByRole('button', { name: /demote heading \(currently h1\)/i })[0]
+        .hasAttribute('disabled'),
+    ).toBe(true);
+    fireEvent.dragStart(alpha, { dataTransfer: transfer });
+    fireEvent.drop(bravoWrap!, { dataTransfer: transfer, clientY: 100 });
+
+    expect(screen.getByTestId('markdown-source').textContent).toBe(source);
+  });
 });

package/src/__tests__/outlineSource.test.ts

@@ -0,0 +1,217 @@
+import { describe, expect, it } from 'vitest';
+import { moveHeadingSectionInSource } from '../outlineSource';
+
+function lineOf(source: string, heading: string): number {
+  const index = source.indexOf(heading);
+  if (index < 0) throw new Error(`Missing heading: ${heading}`);
+  return source.slice(0, index).split(/\r\n|\r|\n/).length;
+}
+
+describe('moveHeadingSectionInSource', () => {
+  it('moves a parent section with its body and nested subsections', () => {
+    const source = [
+      '# Document',
+      '',
+      'Intro.',
+      '',
+      '## First',
+      '',
+      'First body.',
+      '',
+      '### First child',
+      '',
+      'Child body.',
+      '',
+      '## Second',
+      '',
+      'Second body.',
+      '',
+      '### Second child',
+      '',
+      'Second child body.',
+      '',
+      '## Third',
+      '',
+      'Third body.',
+      '',
+    ].join('\n');
+
+    const next = moveHeadingSectionInSource(
+      source,
+      lineOf(source, '## First'),
+      lineOf(source, '## Second'),
+      'after',
+    );
+
+    expect(next).toBe(
+      [
+        '# Document',
+        '',
+        'Intro.',
+        '',
+        '## Second',
+        '',
+        'Second body.',
+        '',
+        '### Second child',
+        '',
+        'Second child body.',
+        '',
+        '## First',
+        '',
+        'First body.',
+        '',
+        '### First child',
+        '',
+        'Child body.',
+        '',
+        '## Third',
+        '',
+        'Third body.',
+        '',
+      ].join('\n'),
+    );
+  });
+
+  it('moves a later section before an earlier sibling', () => {
+    const source = '# A\n\na\n\n# B\n\nb\n\n# C\n\nc\n';
+    expect(
+      moveHeadingSectionInSource(source, lineOf(source, '# C'), lineOf(source, '# A'), 'before'),
+    ).toBe('# C\n\nc\n\n# A\n\na\n\n# B\n\nb\n');
+  });
+
+  it('preserves CRLF and the absence of a final newline', () => {
+    const source = '# A\r\n\r\na\r\n\r\n# B\r\n\r\nb';
+    expect(
+      moveHeadingSectionInSource(source, lineOf(source, '# B'), lineOf(source, '# A'), 'before'),
+    ).toBe('# B\r\n\r\nb\r\n\r\n# A\r\n\r\na');
+  });
+
+  it('leaves frontmatter and preamble bytes in place', () => {
+    const source = [
+      '---',
+      'title: Example',
+      '---',
+      '',
+      'Preamble stays here.',
+      '',
+      '# A {[sectionHeader]}',
+      '',
+      'a',
+      '',
+      '# B {#custom .wide}',
+      '',
+      'b',
+      '',
+    ].join('\n');
+    const prefix = source.slice(0, source.indexOf('# A'));
+
+    const next = moveHeadingSectionInSource(
+      source,
+      lineOf(source, '# B'),
+      lineOf(source, '# A'),
+      'before',
+    );
+
+    expect(next?.startsWith(prefix)).toBe(true);
+    expect(next).toContain('# B {#custom .wide}\n\nb\n\n# A {[sectionHeader]}\n\na\n');
+  });
+
+  it('ignores heading lookalikes inside fenced code', () => {
+    const source = ['# A', '', '```md', '# not an outline heading', '```', '', '# B', '', 'b'].join(
+      '\n',
+    );
+
+    const next = moveHeadingSectionInSource(
+      source,
+      lineOf(source, '# A'),
+      lineOf(source, '# B'),
+      'after',
+    );
+
+    expect(next).toBe(
+      ['# B', '', 'b', '', '# A', '', '```md', '# not an outline heading', '```'].join('\n'),
+    );
+    expect(
+      moveHeadingSectionInSource(
+        source,
+        lineOf(source, '# not an outline heading'),
+        lineOf(source, '# B'),
+        'before',
+      ),
+    ).toBeNull();
+  });
+
+  it('supports duplicate heading text and Setext headings by source line', () => {
+    const source = [
+      'Document',
+      '========',
+      '',
+      'First duplicate',
+      '---------------',
+      '',
+      'one',
+      '',
+      'First duplicate',
+      '---------------',
+      '',
+      'two',
+    ].join('\n');
+    const firstLine = lineOf(source, 'First duplicate');
+    const secondLine = source
+      .slice(0, source.lastIndexOf('First duplicate'))
+      .split(/\r\n|\r|\n/).length;
+
+    const next = moveHeadingSectionInSource(source, secondLine, firstLine, 'before');
+
+    expect(next).toBe(
+      [
+        'Document',
+        '========',
+        '',
+        'First duplicate',
+        '---------------',
+        '',
+        'two',
+        '',
+        'First duplicate',
+        '---------------',
+        '',
+        'one',
+      ].join('\n'),
+    );
+  });
+
+  it('rejects hierarchy changes, stale lines, self-drops, and adjacent no-ops', () => {
+    const source = [
+      '# Parent A',
+      '',
+      '## Child A',
+      '',
+      '### Detail',
+      '',
+      '# Parent B',
+      '',
+      '## Child B',
+      '',
+      '### Skipped sibling',
+      '',
+      '## Last child',
+    ].join('\n');
+    const parentA = lineOf(source, '# Parent A');
+    const parentB = lineOf(source, '# Parent B');
+    const childA = lineOf(source, '## Child A');
+    const childB = lineOf(source, '## Child B');
+    const detail = lineOf(source, '### Detail');
+    const skipped = lineOf(source, '### Skipped sibling');
+    const lastChild = lineOf(source, '## Last child');
+
+    expect(moveHeadingSectionInSource(source, parentA, parentA, 'before')).toBeNull();
+    expect(moveHeadingSectionInSource(source, childA, detail, 'before')).toBeNull();
+    expect(moveHeadingSectionInSource(source, childA, childB, 'before')).toBeNull();
+    expect(moveHeadingSectionInSource(source, skipped, lastChild, 'before')).toBeNull();
+    expect(moveHeadingSectionInSource(source, parentA, parentB, 'before')).toBeNull();
+    expect(moveHeadingSectionInSource(source, parentB, parentA, 'after')).toBeNull();
+    expect(moveHeadingSectionInSource(source, 999, parentA, 'before')).toBeNull();
+  });
+});

package/src/__tests__/plainHtmlPreview.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type { MediaProvider } from '@bendyline/squisq/schemas';
 import { resolveTheme } from '@bendyline/squisq/schemas';
 import { PlainHtmlPreview } from '../PlainHtmlPreview';
@@ -26,6 +26,22 @@ describe('PlainHtmlPreview', () => {
     expect(sandbox).not.toContain('allow-scripts');
   });
 
+  it('globally scrolls the iframe with up and down arrows when enabled', () => {
+    render(<PlainHtmlPreview markdown={'# Scroll me'} globalKeyboardShortcuts />);
+    const iframe = screen.getByTestId('plain-html-preview') as HTMLIFrameElement;
+    const scrollBy = vi.fn();
+    Object.defineProperty(iframe.contentWindow, 'scrollBy', {
+      configurable: true,
+      value: scrollBy,
+    });
+
+    fireEvent.keyDown(document, { key: 'ArrowDown' });
+    fireEvent.keyDown(document, { key: 'ArrowUp' });
+
+    expect(scrollBy).toHaveBeenNthCalledWith(1, { top: 64, behavior: 'smooth' });
+    expect(scrollBy).toHaveBeenNthCalledWith(2, { top: -64, behavior: 'smooth' });
+  });
+
   it('applies pre-resolved images via the images prop', async () => {
     render(
       <PlainHtmlPreview