@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/__tests__/previewControls.test.tsx

@@ -2,7 +2,8 @@
  * @vitest-environment jsdom
  */
 import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { compileTheme } from '@bendyline/squisq/schemas';
 import { EditorProvider, useEditorContext } from '../EditorContext';
 import {
   PreviewModeSwitch,
@@ -10,10 +11,25 @@ import {
   PreviewToolbarControls,
   usePreviewSettings,
 } from '../PreviewControls';
+import { Toolbar } from '../Toolbar';
+import {
+  clearThemeLibrary,
+  CustomThemeProvider,
+  saveLibraryTheme,
+  useDocCustomThemes,
+} from '../customThemes';
 
 function ModeProbe() {
-  const { activeDisplayMode } = usePreviewSettings();
-  return <div data-testid="active-mode">{activeDisplayMode}</div>;
+  const { activeDisplayMode, activeThemeId, activeTransformStyle } = usePreviewSettings();
+  return (
+    <div
+      data-testid="active-mode"
+      data-theme-id={activeThemeId}
+      data-transform-style={activeTransformStyle}
+    >
+      {activeDisplayMode}
+    </div>
+  );
 }
 
 function PreviewHarness() {
@@ -35,6 +51,112 @@ function PreviewToolbarHarness() {
   );
 }
 
+function UseTabHarness() {
+  const { activeView, doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <Toolbar />
+      <ModeProbe />
+      <div data-testid="active-view">{activeView}</div>
+    </PreviewSettingsProvider>
+  );
+}
+
+function LibraryThemeProbe() {
+  const { activeTheme, setSelectedThemeId } = usePreviewSettings();
+  const { markdownSource } = useEditorContext();
+  return (
+    <>
+      <button type="button" onClick={() => setSelectedThemeId('library-theme')}>
+        Select library theme
+      </button>
+      <div data-testid="active-theme-name">{activeTheme.name}</div>
+      <pre data-testid="markdown-source">{markdownSource}</pre>
+    </>
+  );
+}
+
+function LibraryThemeHarness() {
+  const { doc } = useEditorContext();
+  const { docThemes, onDocThemesChange } = useDocCustomThemes();
+  return (
+    <CustomThemeProvider docThemes={docThemes} onDocThemesChange={onDocThemesChange}>
+      <PreviewSettingsProvider doc={doc}>
+        <LibraryThemeProbe />
+      </PreviewSettingsProvider>
+    </CustomThemeProvider>
+  );
+}
+
+function CoverSlideProbe() {
+  const { activeCoverSlide, setCoverSlideEnabled } = usePreviewSettings();
+  const { markdownSource } = useEditorContext();
+  return (
+    <>
+      <button type="button" onClick={() => setCoverSlideEnabled(false)}>
+        Hide cover slide
+      </button>
+      <button type="button" onClick={() => setCoverSlideEnabled(true)}>
+        Use default cover slide
+      </button>
+      <div data-testid="active-cover-slide">{String(activeCoverSlide)}</div>
+      <pre data-testid="markdown-source">{markdownSource}</pre>
+    </>
+  );
+}
+
+function CoverSlideHarness() {
+  const { doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <CoverSlideProbe />
+    </PreviewSettingsProvider>
+  );
+}
+
+function ManagedDefaultsProbe() {
+  const {
+    activeThemeId,
+    activeTransformStyle,
+    activeCaptionStyle,
+    activeCaptionsEnabled,
+    setSelectedThemeId,
+    setSelectedTransformStyle,
+    setCaptionMode,
+  } = usePreviewSettings();
+  const { markdownSource } = useEditorContext();
+  return (
+    <>
+      <button type="button" onClick={() => setSelectedThemeId('standard')}>
+        Use default theme
+      </button>
+      <button type="button" onClick={() => setSelectedTransformStyle('')}>
+        Use default transform
+      </button>
+      <button type="button" onClick={() => setCaptionMode('standard')}>
+        Use default captions
+      </button>
+      <div
+        data-testid="managed-defaults"
+        data-theme={activeThemeId}
+        data-transform={activeTransformStyle}
+        data-caption-style={activeCaptionStyle}
+        data-captions-enabled={String(activeCaptionsEnabled)}
+      />
+      <pre data-testid="markdown-source">{markdownSource}</pre>
+    </>
+  );
+}
+
+function ManagedDefaultsHarness() {
+  const { doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <ManagedDefaultsProbe />
+    </PreviewSettingsProvider>
+  );
+}
+
 function renderPreviewControls(markdown: string) {
   render(
     <EditorProvider initialMarkdown={markdown}>
@@ -51,7 +173,10 @@ function renderPreviewToolbar(markdown: string) {
   );
 }
 
-afterEach(() => cleanup());
+afterEach(() => {
+  cleanup();
+  clearThemeLibrary();
+});
 
 describe('PreviewModeSwitch', () => {
   it('labels the plain document preview as Document and the styled view as Page', () => {
@@ -62,7 +187,8 @@ describe('PreviewModeSwitch', () => {
       .map((button) => button.textContent)
       .filter(Boolean);
 
-    expect(labels).toEqual(['Video', 'Slideshow', 'Page', 'Document']);
+    expect(labels).toEqual(['Slideshow', 'Video', 'Page', 'Document', 'Narrate']);
+    expect(screen.getByTestId('active-mode').textContent).toBe('slideshow');
 
     fireEvent.click(screen.getByRole('button', { name: 'Document' }));
     expect(screen.getByTestId('active-mode').textContent).toBe('page');
@@ -89,9 +215,178 @@ describe('PreviewModeSwitch', () => {
     });
     expect(screen.getByRole('button', { name: 'Page' }).getAttribute('aria-pressed')).toBe('true');
   });
+
+  it('uses the shared squisq-theme, themeId, theme fallback order', async () => {
+    renderPreviewControls('---\nthemeId: bold\ntheme: cinematic\n---\n\n# Hello');
+
+    await waitFor(() => {
+      expect(screen.getByTestId('active-mode').getAttribute('data-theme-id')).toBe('bold');
+    });
+  });
+
+  it('canonicalizes the stored dataDriven transform id', async () => {
+    renderPreviewControls('---\nsquisq-transform: dataDriven\n---\n\n# Hello');
+
+    await waitFor(() => {
+      expect(screen.getByTestId('active-mode').getAttribute('data-transform-style')).toBe(
+        'data-driven',
+      );
+    });
+  });
+
+  it('copies a selected browser-library theme into the document atomically', async () => {
+    saveLibraryTheme(
+      compileTheme({
+        id: 'library-theme',
+        name: 'Library Theme',
+        seedColors: { primary: '#456789' },
+      }),
+    );
+    render(
+      <EditorProvider initialMarkdown="# Hello">
+        <LibraryThemeHarness />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Select library theme' }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('active-theme-name').textContent).toBe('Library Theme');
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).toContain('squisq-theme: library-theme');
+      expect(source).toContain('squisq-custom-themes:');
+      expect(source).toContain('library-theme');
+    });
+  });
+});
+
+describe('cover-slide frontmatter', () => {
+  it('writes the non-default as a boolean and removes the default value', async () => {
+    render(
+      <EditorProvider initialMarkdown="# Hello">
+        <CoverSlideHarness />
+      </EditorProvider>,
+    );
+
+    expect(screen.getByTestId('active-cover-slide').textContent).toBe('true');
+    fireEvent.click(screen.getByRole('button', { name: 'Hide cover slide' }));
+
+    await waitFor(() => {
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).toContain('squisq-cover-slide: false');
+      expect(source).not.toContain('squisq-cover-slide: "false"');
+    });
+    expect(screen.getByTestId('active-cover-slide').textContent).toBe('false');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Use default cover slide' }));
+
+    await waitFor(() => {
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).not.toContain('squisq-cover-slide');
+      expect(source).not.toContain('---');
+    });
+    expect(screen.getByTestId('active-cover-slide').textContent).toBe('true');
+  });
+
+  it('removes a legacy cover-slide override when restoring the default', async () => {
+    render(
+      <EditorProvider initialMarkdown={'---\ncover-slide: false\ntitle: Hello\n---\n\n# Hello'}>
+        <CoverSlideHarness />
+      </EditorProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('active-cover-slide').textContent).toBe('false');
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Use default cover slide' }));
+
+    await waitFor(() => {
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).not.toContain('cover-slide');
+      expect(source).toContain('title: Hello');
+    });
+    expect(screen.getByTestId('active-cover-slide').textContent).toBe('true');
+  });
+});
+
+describe('managed preview-setting defaults', () => {
+  it('removes default theme, transform, and caption values plus their legacy aliases', async () => {
+    const markdown = `---
+squisq-theme: documentary
+themeId: bold
+theme: cinematic
+squisq-transform: documentary
+transform-style: magazine
+squisq-captions: social
+caption-style: off
+title: Hello
+---
+
+# Hello`;
+    render(
+      <EditorProvider initialMarkdown={markdown}>
+        <ManagedDefaultsHarness />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Use default theme' }));
+    await waitFor(() => {
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).not.toMatch(/^(?:squisq-theme|themeId|theme):/m);
+    });
+    expect(screen.getByTestId('managed-defaults').getAttribute('data-theme')).toBe('standard');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Use default transform' }));
+    await waitFor(() => {
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).not.toMatch(/^(?:squisq-transform|transform-style):/m);
+    });
+    expect(screen.getByTestId('managed-defaults').getAttribute('data-transform')).toBe('');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Use default captions' }));
+    await waitFor(() => {
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).not.toMatch(/^(?:squisq-captions|caption-style):/m);
+      expect(source).toContain('title: Hello');
+    });
+    const defaults = screen.getByTestId('managed-defaults');
+    expect(defaults.getAttribute('data-caption-style')).toBe('standard');
+    expect(defaults.getAttribute('data-captions-enabled')).toBe('true');
+  });
 });
 
 describe('PreviewToolbarControls', () => {
+  it('presents transforms as summarization without implying the source is changed', () => {
+    const originalResizeObserver = globalThis.ResizeObserver;
+    class ResizeObserverStub implements ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+
+    globalThis.ResizeObserver = ResizeObserverStub;
+    try {
+      renderPreviewToolbar('# Hello');
+
+      const summarizeLabels = screen.getAllByText('Summarize:');
+      expect(summarizeLabels.length).toBeGreaterThan(0);
+      for (const label of summarizeLabels) {
+        expect(label.getAttribute('title')).toBe(
+          'Extract and summarize content for presentation with these Use modes. Your underlying content is not changed.',
+        );
+      }
+      expect(screen.queryByText('Transform:')).toBeNull();
+      expect(document.querySelector('[role="group"][aria-label="Display mode"]')).toBeNull();
+      expect(document.querySelector('[role="group"][aria-label="Aspect ratio"]')).not.toBeNull();
+    } finally {
+      if (originalResizeObserver) {
+        globalThis.ResizeObserver = originalResizeObserver;
+      } else {
+        Reflect.deleteProperty(globalThis, 'ResizeObserver');
+      }
+    }
+  });
+
   it('keeps the overflow popover inside the left viewport edge', async () => {
     const originalResizeObserver = globalThis.ResizeObserver;
     const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
@@ -161,3 +456,85 @@ describe('PreviewToolbarControls', () => {
     }
   });
 });
+
+describe('Use tab mode menu', () => {
+  it('lists the Use modes beside the tab and selects a mode without a toolbar radio group', () => {
+    render(
+      <EditorProvider initialMarkdown="# Hello" initialView="wysiwyg" allowRecording={false}>
+        <UseTabHarness />
+      </EditorProvider>,
+    );
+
+    const useTab = screen.getByRole('tab', { name: 'Slideshow' });
+    expect(screen.queryByRole('tab', { name: 'Use' })).toBeNull();
+    const tabGroup = useTab.parentElement;
+    expect(tabGroup).not.toBeNull();
+    expect(within(tabGroup!).getByRole('button', { name: 'Choose Use mode' })).toBeTruthy();
+
+    // The first click enters Use; once active, clicking the tab again opens
+    // the mode menu.
+    fireEvent.click(useTab);
+    expect(screen.getByTestId('active-view').textContent).toBe('preview');
+    expect(screen.queryByRole('menu', { name: 'Use mode' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Slideshow' }));
+
+    const menu = screen.getByRole('menu', { name: 'Use mode' });
+    expect(
+      within(menu)
+        .getAllByRole('menuitemradio')
+        .map((item) => item.querySelector('.squisq-use-mode-menu-label')?.textContent),
+    ).toEqual(['Slideshow', 'Video', 'Page', 'Document', 'Narrate']);
+    const slideshowItem = within(menu).getByRole('menuitemradio', { name: 'Slideshow' });
+    expect(slideshowItem.getAttribute('aria-checked')).toBe('true');
+    expect(within(slideshowItem).getByText('Present designed slides one at a time.')).toBeTruthy();
+
+    fireEvent.click(within(menu).getByRole('menuitemradio', { name: 'Document' }));
+    expect(screen.getByTestId('active-mode').textContent).toBe('page');
+    expect(screen.getByTestId('active-view').textContent).toBe('preview');
+    expect(screen.getByRole('tab', { name: 'Document' })).toBeTruthy();
+    expect(screen.queryByRole('menu', { name: 'Use mode' })).toBeNull();
+  });
+});
+
+describe('Narrate mode gating', () => {
+  function renderWithNarrateGate(markdown: string, allowNarrate: boolean) {
+    render(
+      <EditorProvider initialMarkdown={markdown} allowNarrate={allowNarrate}>
+        <PreviewHarness />
+      </EditorProvider>,
+    );
+  }
+
+  it('selects narrate from the switch and resolves teleprompter frontmatter aliases', async () => {
+    renderPreviewControls('# Hello');
+    fireEvent.click(screen.getByRole('button', { name: 'Narrate' }));
+    expect(screen.getByTestId('active-mode').textContent).toBe('narrate');
+
+    cleanup();
+    renderPreviewControls('---\ndisplay-mode: teleprompter\n---\n\n# Hello');
+    await waitFor(() => {
+      expect(screen.getByTestId('active-mode').textContent).toBe('narrate');
+    });
+    expect(screen.getByRole('button', { name: 'Narrate' }).getAttribute('aria-pressed')).toBe(
+      'true',
+    );
+  });
+
+  it('allowNarrate=false hides the button and clamps frontmatter-forced narrate to video', async () => {
+    renderWithNarrateGate('---\ndisplay-mode: narrate\n---\n\n# Hello', false);
+
+    expect(screen.queryByRole('button', { name: 'Narrate' })).toBeNull();
+    // Give the frontmatter parse a tick, then confirm the clamp held.
+    await waitFor(() => {
+      expect(screen.getByTestId('active-mode').textContent).toBe('video');
+    });
+  });
+
+  it('allowNarrate=true (default) honors frontmatter narrate', async () => {
+    renderWithNarrateGate('---\ndisplay-mode: narrate\n---\n\n# Hello', true);
+    await waitFor(() => {
+      expect(screen.getByTestId('active-mode').textContent).toBe('narrate');
+    });
+  });
+});

package/src/__tests__/previewPanelAudioFailure.test.tsx

@@ -0,0 +1,46 @@
+/** @vitest-environment jsdom */
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { MemoryContentContainer } from '@bendyline/squisq/storage';
+
+const resolveAudioMapping = vi.hoisted(() =>
+  vi.fn(async () => {
+    throw new Error('timing.json is corrupt');
+  }),
+);
+
+vi.mock('@bendyline/squisq/doc', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@bendyline/squisq/doc')>()),
+  resolveAudioMapping,
+}));
+
+import { EditorProvider, useEditorContext } from '../EditorContext';
+import { PreviewSettingsProvider } from '../PreviewControls';
+import { PreviewPanel } from '../PreviewPanel';
+
+function Harness({ container }: { container: MemoryContentContainer }) {
+  const { doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <PreviewPanel workspaceContainer={container} />
+    </PreviewSettingsProvider>
+  );
+}
+
+describe('PreviewPanel optional audio mapping', () => {
+  it('keeps the synchronous preview when audio discovery rejects', async () => {
+    const load = vi.spyOn(HTMLMediaElement.prototype, 'load').mockImplementation(() => undefined);
+    const container = new MemoryContentContainer();
+    const view = render(
+      <EditorProvider initialMarkdown="# Preview\n\nBody" initialView="preview">
+        <Harness container={container} />
+      </EditorProvider>,
+    );
+    await waitFor(() => expect(resolveAudioMapping).toHaveBeenCalled());
+    await waitFor(() => {
+      expect(screen.getByTestId('preview-panel').textContent).not.toContain('No content');
+    });
+    view.unmount();
+    load.mockRestore();
+  });
+});

package/src/__tests__/previewPanelPresentation.test.tsx

@@ -0,0 +1,126 @@
+/** @vitest-environment jsdom */
+
+import { useRef } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { Doc } from '@bendyline/squisq/schemas';
+import type { DocPlayerProps, PlaybackState } from '@bendyline/squisq-react';
+
+vi.mock('@bendyline/squisq-react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@bendyline/squisq-react')>();
+  const { useEffect } = await import('react');
+  const state: PlaybackState = {
+    isPlaying: false,
+    currentTime: 0,
+    totalDuration: 10,
+    isCoverVisible: true,
+    currentBlockIndex: 0,
+    totalBlocks: 2,
+    docProgress: 0,
+    hasCaptions: false,
+    captionsEnabled: false,
+    captionMode: 'off',
+    currentSegmentIndex: 0,
+    currentSegmentName: null,
+    currentBlock: null,
+  };
+  function MockDocPlayer(props: DocPlayerProps & { doc: Doc }) {
+    const { onPlaybackStateChange, onControlsReady } = props;
+    useEffect(() => {
+      if (props.audioController) return;
+      onPlaybackStateChange?.(state);
+      onControlsReady?.({
+        play: () => undefined,
+        pause: () => undefined,
+        toggle: () => undefined,
+        restart: () => undefined,
+        seekTo: () => undefined,
+        setCaptionsEnabled: () => undefined,
+        cycleCaptionMode: () => undefined,
+      });
+    }, [onControlsReady, onPlaybackStateChange, props.audioController]);
+    return (
+      <div
+        data-testid="mock-doc-player"
+        data-article={props.doc.articleId}
+        data-audience={props.audioController ? 'true' : 'false'}
+        data-controls={props.showControls ? 'true' : 'false'}
+        data-cover={String(props.coverVisible)}
+      />
+    );
+  }
+  return {
+    ...actual,
+    useMediaProvider: () => null,
+    DocPlayer: MockDocPlayer,
+  };
+});
+
+import { EditorProvider, useEditorContext } from '../EditorContext';
+import { PreviewSettingsProvider } from '../PreviewControls';
+import { PreviewPanel } from '../PreviewPanel';
+import {
+  PresentationModeControl,
+  PresentationModeProvider,
+} from '../presentation/PresentationMode';
+
+function Harness() {
+  const { doc } = useEditorContext();
+  const rootRef = useRef<HTMLDivElement>(null);
+  return (
+    <div ref={rootRef}>
+      <PreviewSettingsProvider doc={doc}>
+        <PresentationModeProvider rootRef={rootRef}>
+          <PresentationModeControl />
+          <PreviewPanel />
+        </PresentationModeProvider>
+      </PreviewSettingsProvider>
+    </div>
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe('PreviewPanel presentation audience', () => {
+  it('renders a clockless, controlled audience follower in the popup', async () => {
+    const popupDocument = document.implementation.createHTMLDocument('');
+    const popupEvents = new EventTarget();
+    let closed = false;
+    const popup = {
+      document: popupDocument,
+      get closed() {
+        return closed;
+      },
+      close: vi.fn(() => {
+        closed = true;
+      }),
+      focus: vi.fn(),
+      addEventListener: popupEvents.addEventListener.bind(popupEvents),
+      removeEventListener: popupEvents.removeEventListener.bind(popupEvents),
+    } as unknown as Window;
+    vi.spyOn(window, 'open').mockReturnValue(popup);
+
+    render(
+      <EditorProvider initialMarkdown="# Audience mirror\n\nBody" initialView="preview">
+        <Harness />
+      </EditorProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId('mock-doc-player')).toBeTruthy());
+    fireEvent.click(screen.getByRole('button', { name: 'Presentation options' }));
+    fireEvent.click(screen.getByRole('menuitemradio', { name: /New window/ }));
+    fireEvent.click(screen.getByRole('button', { name: 'Present: New window' }));
+
+    await waitFor(() => {
+      const audience = popupDocument.querySelector<HTMLElement>(
+        '[data-testid="mock-doc-player"][data-audience="true"]',
+      );
+      expect(audience).toBeTruthy();
+      expect(audience?.dataset.controls).toBe('false');
+      expect(audience?.dataset.cover).toBe('true');
+    });
+  });
+});