@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/__tests__/buildDocumentPreviewMarkdown.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest';
+import type { Block, Doc } from '@bendyline/squisq/schemas';
+import { buildDocumentPreviewMarkdown } from '../buildDocumentPreviewMarkdown';
+
+function docWith(blocks: Block[]): Doc {
+  return {
+    articleId: 'summary-doc',
+    duration: 10,
+    blocks,
+    audio: { segments: [] },
+    frontmatter: { title: 'Quarterly Report' },
+  };
+}
+
+describe('buildDocumentPreviewMarkdown', () => {
+  it('serializes programmatic transform blocks as readable document content', () => {
+    const markdown = buildDocumentPreviewMarkdown(
+      docWith([
+        {
+          id: 'transform-stat',
+          template: 'statHighlight',
+          startTime: 0,
+          duration: 5,
+          audioSegment: 0,
+          stat: '42%',
+          description: 'Year-over-year growth',
+        } as Block,
+        {
+          id: 'transform-list',
+          template: 'list',
+          startTime: 5,
+          duration: 5,
+          audioSegment: 0,
+          title: 'Priorities',
+          items: ['Reliability', 'Speed'],
+        } as Block,
+      ]),
+    );
+
+    expect(markdown).toContain('# Quarterly Report');
+    expect(markdown).toContain('## 42%');
+    expect(markdown).toContain('Year-over-year growth');
+    expect(markdown).toContain('## Priorities');
+    expect(markdown).toContain('Reliability');
+    expect(markdown).toContain('Speed');
+    expect(markdown).not.toContain('{[statHighlight');
+  });
+
+  it('preserves authored blocks that a conservative transform kept', () => {
+    const markdown = buildDocumentPreviewMarkdown(
+      docWith([
+        {
+          id: 'authored',
+          startTime: 0,
+          duration: 5,
+          audioSegment: 0,
+          sourceHeading: {
+            type: 'heading',
+            depth: 2,
+            children: [{ type: 'text', value: 'Context' }],
+          },
+          contents: [
+            {
+              type: 'paragraph',
+              children: [{ type: 'text', value: 'Original supporting detail.' }],
+            },
+          ],
+        },
+      ]),
+    );
+
+    expect(markdown).toContain('## Context');
+    expect(markdown).toContain('Original supporting detail.');
+  });
+});

package/src/__tests__/buildPreviewDocContent.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { markdownToDoc, materializeBlockLayers } from '@bendyline/squisq/doc';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import type { DocBlock, TextLayer } from '@bendyline/squisq/schemas';
+import { buildPreviewDoc } from '../buildPreviewDoc';
+
+function firstPreviewSlide(markdown: string): Record<string, unknown> {
+  const source = markdownToDoc(parseMarkdown(markdown), {
+    articleId: 'stat-content-test',
+    generateCoverBlock: false,
+  });
+  return buildPreviewDoc(source).blocks[0] as unknown as Record<string, unknown>;
+}
+
+describe('buildPreviewDoc content mapping', () => {
+  it('maps the leading bold metric to the large stat layer', () => {
+    const slide = firstPreviewSlide(`### The Big Number {[statHighlight colorScheme=green]}
+
+**42%** of teams prefer visual blocks over raw slides.`);
+
+    expect(slide).toMatchObject({
+      title: 'The Big Number',
+      stat: '42%',
+      description: 'of teams prefer visual blocks over raw slides.',
+      colorScheme: 'green',
+    });
+
+    const { layers } = materializeBlockLayers(slide as unknown as DocBlock);
+    const stat = layers.find((layer) => layer.id === 'stat') as TextLayer;
+    const description = layers.find((layer) => layer.id === 'description') as TextLayer;
+
+    expect(stat.content.text).toBe('42%');
+    expect(description.content.text).toBe('of teams prefer visual blocks over raw slides.');
+    expect(stat.content.style.fontSize).toBeGreaterThan(description.content.style.fontSize);
+  });
+
+  it('lets explicit annotation inputs override Markdown-derived defaults', () => {
+    const slide = firstPreviewSlide(
+      '### The Big Number {[statHighlight stat="99%" description="Pinned description"]}\n\n' +
+        '**42%** derived description.',
+    );
+
+    expect(slide).toMatchObject({
+      stat: '99%',
+      description: 'Pinned description',
+    });
+  });
+});

package/src/__tests__/buildPreviewDocTransition.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { parseMarkdown } from '@bendyline/squisq/markdown';
 import { markdownToDoc } from '@bendyline/squisq/doc';
-import type { Transition } from '@bendyline/squisq/schemas';
+import type { Doc, Transition } from '@bendyline/squisq/schemas';
 import { buildPreviewDoc } from '../buildPreviewDoc';
 
 function previewSlides(md: string) {
@@ -69,4 +69,24 @@ describe('buildPreviewDoc transition mapping', () => {
       expect(slides[1].transition).toEqual({ type: 'push', direction: 'left', duration: 0.8 });
     });
   });
+
+  it('preserves document-wide fields and mapped audio', () => {
+    const source = markdownToDoc(parseMarkdown('# Intro'), { articleId: 'full' }) as Doc;
+    const enriched = {
+      ...source,
+      frontmatter: { owner: 'team' },
+      customThemes: [{ id: 'custom-theme' }],
+      persistentLayers: { layers: [] },
+      documentMedia: [{ id: 'bed', kind: 'audio', src: 'bed.mp3', startTime: 0 }],
+      audio: {
+        segments: [{ src: 'narration.mp3', name: 'narration', duration: 4, startTime: 0 }],
+      },
+    } as unknown as Doc;
+    const preview = buildPreviewDoc(enriched);
+    expect(preview.frontmatter).toEqual({ owner: 'team' });
+    expect(preview.customThemes).toBe(enriched.customThemes);
+    expect(preview.persistentLayers).toBe(enriched.persistentLayers);
+    expect(preview.documentMedia).toBe(enriched.documentMedia);
+    expect(preview.audio).toBe(enriched.audio);
+  });
 });

package/src/__tests__/canvasSurfaceTextEditing.test.tsx

@@ -0,0 +1,60 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import type { ImageEditDoc } from '@bendyline/squisq/schemas';
+import { CanvasSurface } from '../imageEditor/CanvasSurface.js';
+import type { ImageEditorAction } from '../imageEditor/state.js';
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('CanvasSurface text editing', () => {
+  it('uses one tightly measured edit box and applies SVG zoom only once', async () => {
+    const context = {
+      font: '',
+      measureText: (text: string) => ({ width: text.length * 10 }),
+    } as unknown as CanvasRenderingContext2D;
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(() => context);
+
+    const doc: ImageEditDoc = {
+      version: 1,
+      canvas: { width: 640, height: 480 },
+      layers: [
+        {
+          id: 'text-1',
+          type: 'text',
+          name: 'Text',
+          position: { x: 100, y: 80, width: 240, height: 48 },
+          content: {
+            text: 'hello',
+            style: { fontSize: 20, lineHeight: 1.4, color: '#111111' },
+          },
+        },
+      ],
+    };
+
+    const { container } = render(
+      <CanvasSurface
+        doc={doc}
+        selectedLayerId="text-1"
+        tool="select"
+        resolveAssetUrl={async (path) => path}
+        dispatch={vi.fn<(action: ImageEditorAction) => void>()}
+        requestEditLayerId="text-1"
+        zoom={2}
+      />,
+    );
+
+    const textarea = (await screen.findByRole('textbox')) as HTMLTextAreaElement;
+    const editBox = container.querySelector('foreignObject');
+
+    expect(editBox?.getAttribute('width')).toBe('50');
+    expect(textarea.style.fontSize).toBe('20px');
+    await waitFor(() => {
+      expect(container.querySelector('.squisq-image-editor-selection-handles')).toBeNull();
+    });
+  });
+});

package/src/__tests__/codeContextSectionView.test.tsx

@@ -10,7 +10,7 @@ const noop = () => {};
 const baseSection = {
   id: 'foo@10',
   summaryMarkdown: '**foo** — does things · ↓2 imported-by',
-  markdown: 'Body text with [`a.ts`](gezel-nav:src%2Fa.ts) and [line 4](#L4).',
+  markdown: 'Body text with [`a.ts`](workspace-nav:src%2Fa.ts) and [line 4](#L4).',
 };
 
 function renderView(over: Partial<Parameters<typeof CodeContextSectionView>[0]> = {}) {
@@ -18,7 +18,7 @@ function renderView(over: Partial<Parameters<typeof CodeContextSectionView>[0]>
     section: baseSection,
     expanded: false,
     onToggle: vi.fn(),
-    linkSchemes: ['gezel-nav'] as const,
+    linkSchemes: ['workspace-nav'] as const,
     onLinkClick: vi.fn(),
     onRevealLine: vi.fn(),
     onMeasure: noop,
@@ -47,7 +47,7 @@ describe('<CodeContextSectionView>', () => {
     const body = container.querySelector('.squisq-ccx-body')!;
     expect(body.textContent).toContain('Body text');
     const anchors = [...body.querySelectorAll('a')].map((a) => a.getAttribute('href'));
-    expect(anchors).toContain('gezel-nav:src%2Fa.ts');
+    expect(anchors).toContain('workspace-nav:src%2Fa.ts');
     expect(anchors).toContain('#L4');
   });
 
@@ -63,10 +63,12 @@ describe('<CodeContextSectionView>', () => {
     const onLinkClick = vi.fn(() => undefined);
     const { container } = renderView({ expanded: true, onLinkClick });
     const nav = [...container.querySelectorAll('a')].find(
-      (a) => a.getAttribute('href') === 'gezel-nav:src%2Fa.ts',
+      (a) => a.getAttribute('href') === 'workspace-nav:src%2Fa.ts',
     )!;
     const first = fireEvent.click(nav);
-    expect(onLinkClick).toHaveBeenCalledWith('gezel-nav:src%2Fa.ts', { sectionId: 'foo@10' });
+    expect(onLinkClick).toHaveBeenCalledWith('workspace-nav:src%2Fa.ts', {
+      sectionId: 'foo@10',
+    });
     expect(first).toBe(false); // preventDefault was called
 
     onLinkClick.mockReturnValue(false as unknown as undefined);
@@ -89,7 +91,7 @@ describe('<CodeContextSectionView>', () => {
   it('without linkSchemes, custom-scheme links render blocked (no anchor)', () => {
     const { container } = renderView({ expanded: true, linkSchemes: undefined });
     const anchors = [...container.querySelectorAll('a')].map((a) => a.getAttribute('href'));
-    expect(anchors).not.toContain('gezel-nav:src%2Fa.ts');
+    expect(anchors).not.toContain('workspace-nav:src%2Fa.ts');
     expect(container.querySelector('.squisq-md-link--blocked')).toBeTruthy();
   });
 });

package/src/__tests__/customLayoutManagerTheme.test.tsx

@@ -0,0 +1,34 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('../EditorContext', () => ({
+  useEditorContext: () => ({
+    colorScheme: 'dark',
+    mediaProvider: null,
+    doc: null,
+    markdownSource: '',
+    setMarkdownSource: vi.fn(),
+  }),
+}));
+
+// The regression is at the manager's portaled theme boundary; the designer's
+// interaction surface is unrelated and expensive to mount for this assertion.
+vi.mock('../customTemplates/TemplateDesigner', () => ({
+  TemplateDesigner: () => <div data-testid="template-designer" />,
+}));
+
+import { CustomLayoutManager } from '../customTemplates/CustomLayoutManager';
+
+describe('CustomLayoutManager theme propagation', () => {
+  it('copies the editor dark scheme onto its portaled theme scope', () => {
+    render(<CustomLayoutManager onClose={vi.fn()} />);
+
+    const dialog = screen.getByRole('dialog', { name: 'Custom layouts' });
+    expect(dialog.getAttribute('data-theme')).toBe('dark');
+    expect(dialog.classList.contains('squisq-editor-shell')).toBe(true);
+    expect(screen.getByTestId('template-designer')).toBeTruthy();
+  });
+});

package/src/__tests__/documentSettingsDialog.test.tsx

@@ -26,7 +26,7 @@ function pickTheme(name: string) {
   // Scope the option lookup to the popover — the Transform <select> in
   // the same dialog also exposes role="option" entries (one of which is
   // literally "Documentary"), so a global query would collide.
-  const popover = document.getElementById('squisq-theme-picker-popover')!;
+  const popover = document.querySelector<HTMLElement>('.squisq-theme-picker-popover')!;
   fireEvent.click(within(popover).getByRole('option', { name }));
 }
 
@@ -99,6 +99,20 @@ describe('DocumentSettingsDialog', () => {
     expect(next).not.toMatch(/^theme:/m);
   });
 
+  it('reads themeId and canonicalizes both legacy theme keys on save', () => {
+    const onSave = vi.fn();
+    const src = '---\nthemeId: bold\ntheme: cinematic\n---\n\n# Doc\n';
+    open(src, onSave);
+
+    expect(screen.getByLabelText('Theme').textContent).toContain('Bold');
+    clickSave();
+
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).toContain('squisq-theme: bold');
+    expect(next).not.toMatch(/^themeId:/m);
+    expect(next).not.toMatch(/^theme:/m);
+  });
+
   it('removes squisq-theme when reverting to default', () => {
     const onSave = vi.fn();
     const src = '---\nsquisq-theme: documentary\n---\n\n# Doc\n';
@@ -109,6 +123,28 @@ describe('DocumentSettingsDialog', () => {
     expect(next).not.toContain('squisq-theme');
   });
 
+  it('removes explicit managed defaults and their legacy aliases on save', () => {
+    const onSave = vi.fn();
+    const src = `---
+squisq-theme: standard
+themeId: standard
+theme: standard
+squisq-captions: standard
+caption-style: standard
+author: Keep
+---
+
+# Doc
+`;
+    open(src, onSave);
+    clickSave();
+
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).not.toMatch(/^(?:squisq-theme|themeId|theme):/m);
+    expect(next).not.toMatch(/^(?:squisq-captions|caption-style):/m);
+    expect(next).toContain('author: Keep');
+  });
+
   it('writes squisq-transform when a transform is picked', () => {
     const onSave = vi.fn();
     open('# Doc\n', onSave);
@@ -122,6 +158,20 @@ describe('DocumentSettingsDialog', () => {
     expect(next).toContain(`squisq-transform: ${first.value}`);
   });
 
+  it('canonicalizes a stored dataDriven transform id', () => {
+    const onSave = vi.fn();
+    open('---\ntransform-style: dataDriven\n---\n\n# Doc\n', onSave);
+
+    const select = screen.getByLabelText('Transform') as HTMLSelectElement;
+    expect(select.value).toBe('data-driven');
+    clickSave();
+
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).toContain('squisq-transform: data-driven');
+    expect(next).not.toContain('dataDriven');
+    expect(next).not.toContain('transform-style');
+  });
+
   it('writes squisq-captions when picked', () => {
     const onSave = vi.fn();
     open('# Doc\n', onSave);

package/src/__tests__/editorScrollHandoff.test.tsx

@@ -0,0 +1,102 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { EditorProvider, useEditorContext, type EditorContextValue } from '../EditorContext';
+
+let currentContext: EditorContextValue | null = null;
+let animationFrames: FrameRequestCallback[] = [];
+
+function ContextProbe() {
+  currentContext = useEditorContext();
+  return null;
+}
+
+function context(): EditorContextValue {
+  if (!currentContext) throw new Error('EditorContext has not mounted');
+  return currentContext;
+}
+
+function wysiwygEditor(
+  scrollTop: number,
+  scrollHeight: number,
+  clientHeight: number,
+): { editor: unknown; container: HTMLElement } {
+  const container = document.createElement('div');
+  container.className = 'squisq-wysiwyg-container';
+  Object.defineProperties(container, {
+    scrollTop: { value: scrollTop, writable: true },
+    scrollHeight: { value: scrollHeight },
+    clientHeight: { value: clientHeight },
+  });
+  const dom = document.createElement('div');
+  container.append(dom);
+  return { editor: { view: { dom } }, container };
+}
+
+function flushAnimationFrame(): void {
+  const callback = animationFrames.shift();
+  if (callback) act(() => callback(0));
+}
+
+beforeEach(() => {
+  currentContext = null;
+  animationFrames = [];
+  vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+    animationFrames.push(callback);
+    return animationFrames.length;
+  });
+  vi.stubGlobal('cancelAnimationFrame', vi.fn());
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe('EditorProvider scroll handoff', () => {
+  it('restores proportional positions from Write to Source and back', () => {
+    render(
+      <EditorProvider initialMarkdown="# One\n\nBody" initialView="wysiwyg">
+        <ContextProbe />
+      </EditorProvider>,
+    );
+
+    const write = wysiwygEditor(300, 1100, 100);
+    act(() => context().setTiptapEditor(write.editor as never));
+
+    act(() => {
+      context().setActiveView('raw');
+      context().setTiptapEditor(null);
+    });
+
+    let sourceScrollTop = 1500;
+    const setSourceScrollTop = vi.fn();
+    const source = {
+      getScrollTop: () => sourceScrollTop,
+      getScrollHeight: () => 2100,
+      getLayoutInfo: () => ({ height: 100 }),
+      setScrollTop: setSourceScrollTop,
+    };
+    act(() => context().setMonacoEditor(source as never));
+    flushAnimationFrame();
+
+    // Write was 30% through its scrollable range, so Source lands at 30%.
+    expect(setSourceScrollTop).toHaveBeenCalledWith(600);
+
+    // A real Monaco instance reports the new position after setScrollTop.
+    sourceScrollTop = 1500;
+    act(() => {
+      context().setActiveView('wysiwyg');
+      context().setMonacoEditor(null);
+    });
+
+    const nextWrite = wysiwygEditor(0, 1300, 100);
+    act(() => context().setTiptapEditor(nextWrite.editor as never));
+    flushAnimationFrame();
+
+    // Source was 75% through; the newly mounted Write surface lands at 75%.
+    expect(nextWrite.container.scrollTop).toBe(900);
+  });
+});

package/src/__tests__/editorScrollSync.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it, vi } from 'vitest';
+import {
+  readMonacoScrollRatio,
+  readWysiwygScrollRatio,
+  restoreMonacoScrollRatio,
+  restoreWysiwygScrollRatio,
+  scrollRatio,
+  scrollTopForRatio,
+} from '../editorScrollSync';
+
+function scrollElement(scrollTop: number, scrollHeight: number, clientHeight: number): HTMLElement {
+  const container = document.createElement('div');
+  container.className = 'squisq-wysiwyg-container';
+  Object.defineProperties(container, {
+    scrollTop: { value: scrollTop, writable: true },
+    scrollHeight: { value: scrollHeight },
+    clientHeight: { value: clientHeight },
+  });
+  return container;
+}
+
+describe('editor scroll synchronization', () => {
+  it('converts pixel offsets to a normalized position and back', () => {
+    expect(scrollRatio(450, 1000, 100)).toBe(0.5);
+    expect(scrollTopForRatio(0.5, 2100, 100)).toBe(1000);
+  });
+
+  it('clamps positions and handles documents that do not scroll', () => {
+    expect(scrollRatio(-20, 1000, 100)).toBe(0);
+    expect(scrollRatio(1200, 1000, 100)).toBe(1);
+    expect(scrollRatio(20, 100, 100)).toBe(0);
+    expect(scrollTopForRatio(Number.NaN, 1000, 100)).toBe(0);
+  });
+
+  it('reads and restores Monaco using its scrollable height', () => {
+    const setScrollTop = vi.fn();
+    const editor = {
+      getScrollTop: () => 450,
+      getScrollHeight: () => 1000,
+      getLayoutInfo: () => ({ height: 100 }),
+      setScrollTop,
+    };
+
+    expect(readMonacoScrollRatio(editor)).toBe(0.5);
+    restoreMonacoScrollRatio(editor, 0.25);
+    expect(setScrollTop).toHaveBeenCalledWith(225);
+  });
+
+  it('reads and restores the WYSIWYG scroll container', () => {
+    const container = scrollElement(300, 1100, 100);
+    const editorDom = document.createElement('div');
+    container.append(editorDom);
+    const editor = { view: { dom: editorDom } };
+
+    expect(readWysiwygScrollRatio(editor)).toBe(0.3);
+    expect(restoreWysiwygScrollRatio(editor, 0.8)).toBe(true);
+    expect(container.scrollTop).toBe(800);
+  });
+
+  it('declines WYSIWYG restoration when the editor is detached', () => {
+    const editor = { view: { dom: document.createElement('div') } };
+    expect(readWysiwygScrollRatio(editor)).toBeNull();
+    expect(restoreWysiwygScrollRatio(editor, 0.5)).toBe(false);
+  });
+});