@bendyline/squisq-editor-react 1.6.0 → 1.6.2

package/src/__tests__/previewControls.test.tsx

@@ -0,0 +1,163 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { EditorProvider, useEditorContext } from '../EditorContext';
+import {
+  PreviewModeSwitch,
+  PreviewSettingsProvider,
+  PreviewToolbarControls,
+  usePreviewSettings,
+} from '../PreviewControls';
+
+function ModeProbe() {
+  const { activeDisplayMode } = usePreviewSettings();
+  return <div data-testid="active-mode">{activeDisplayMode}</div>;
+}
+
+function PreviewHarness() {
+  const { doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <PreviewModeSwitch />
+      <ModeProbe />
+    </PreviewSettingsProvider>
+  );
+}
+
+function PreviewToolbarHarness() {
+  const { doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <PreviewToolbarControls />
+    </PreviewSettingsProvider>
+  );
+}
+
+function renderPreviewControls(markdown: string) {
+  render(
+    <EditorProvider initialMarkdown={markdown}>
+      <PreviewHarness />
+    </EditorProvider>,
+  );
+}
+
+function renderPreviewToolbar(markdown: string) {
+  render(
+    <EditorProvider initialMarkdown={markdown}>
+      <PreviewToolbarHarness />
+    </EditorProvider>,
+  );
+}
+
+afterEach(() => cleanup());
+
+describe('PreviewModeSwitch', () => {
+  it('labels the plain document preview as Document and the styled view as Page', () => {
+    renderPreviewControls('# Hello');
+
+    const labels = screen
+      .getAllByRole('button')
+      .map((button) => button.textContent)
+      .filter(Boolean);
+
+    expect(labels).toEqual(['Video', 'Slideshow', 'Page', 'Document']);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Document' }));
+    expect(screen.getByTestId('active-mode').textContent).toBe('page');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Page' }));
+    expect(screen.getByTestId('active-mode').textContent).toBe('linear');
+  });
+
+  it('maps product-facing display-mode frontmatter to the correct renderer values', async () => {
+    renderPreviewControls('---\ndisplay-mode: document\n---\n\n# Hello');
+
+    await waitFor(() => {
+      expect(screen.getByTestId('active-mode').textContent).toBe('page');
+    });
+    expect(screen.getByRole('button', { name: 'Document' }).getAttribute('aria-pressed')).toBe(
+      'true',
+    );
+
+    cleanup();
+    renderPreviewControls('---\ndisplay-mode: page\n---\n\n# Hello');
+
+    await waitFor(() => {
+      expect(screen.getByTestId('active-mode').textContent).toBe('linear');
+    });
+    expect(screen.getByRole('button', { name: 'Page' }).getAttribute('aria-pressed')).toBe('true');
+  });
+});
+
+describe('PreviewToolbarControls', () => {
+  it('keeps the overflow popover inside the left viewport edge', async () => {
+    const originalResizeObserver = globalThis.ResizeObserver;
+    const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+    const originalClientWidth = Object.getOwnPropertyDescriptor(
+      HTMLElement.prototype,
+      'clientWidth',
+    );
+
+    class ResizeObserverStub implements ResizeObserver {
+      readonly callback: ResizeObserverCallback;
+
+      constructor(callback: ResizeObserverCallback) {
+        this.callback = callback;
+      }
+
+      observe() {
+        this.callback([], this);
+      }
+
+      unobserve() {}
+
+      disconnect() {}
+    }
+
+    globalThis.ResizeObserver = ResizeObserverStub;
+    HTMLElement.prototype.getBoundingClientRect = function getBoundingClientRect() {
+      if (this.classList.contains('squisq-preview-controls-popover')) {
+        return new DOMRect(0, 0, 220, 240);
+      }
+      if (this.getAttribute('aria-label') === 'More preview settings') {
+        return new DOMRect(6, 20, 28, 28);
+      }
+      if (this.classList.contains('squisq-preview-control')) {
+        return new DOMRect(0, 0, 100, 24);
+      }
+      return new DOMRect(0, 0, 0, 0);
+    };
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      get() {
+        return this.classList.contains('squisq-preview-controls') ? 40 : 0;
+      },
+    });
+
+    try {
+      renderPreviewToolbar('# Hello');
+
+      fireEvent.click(await screen.findByRole('button', { name: 'More preview settings' }));
+
+      await waitFor(() => {
+        const popover = document.querySelector<HTMLElement>('.squisq-preview-controls-popover');
+        expect(popover).not.toBeNull();
+        expect(popover?.style.left).toBe('8px');
+      });
+    } finally {
+      if (originalResizeObserver) {
+        globalThis.ResizeObserver = originalResizeObserver;
+      } else {
+        Reflect.deleteProperty(globalThis, 'ResizeObserver');
+      }
+      HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+      if (originalClientWidth) {
+        Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidth);
+      } else {
+        Reflect.deleteProperty(HTMLElement.prototype, 'clientWidth');
+      }
+    }
+  });
+});

package/src/__tests__/templateAnnotationRoundTrip.test.ts

@@ -16,13 +16,23 @@ describe('Template annotation round-trip', () => {
     expect(back.trim()).toBe(original);
   });
 
+  it('round-trips param-only squiggly annotations', () => {
+    const original = '## Intro {[transition=fade]}';
+    const html = markdownToTiptap(original);
+    expect(html).not.toContain('data-template="transition=fade"');
+    expect(html).toContain('data-template-params="transition=fade"');
+    expect(tiptapToMarkdown(html).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>' +
+      '<span class="squisq-template-badge" contenteditable="false" data-template="comparisonBar">' +
+      '<span class="squisq-template-badge-core" data-template-label="Comparison Bar" aria-hidden="true"></span>' +
+      '</span>' +
       '</h2>';
     const md = tiptapToMarkdown(tiptapRendered);
     expect(md).toContain('## Getting Started');
@@ -39,7 +49,9 @@ describe('Template annotation round-trip', () => {
     const tiptapRendered =
       '<h2 data-block-attrs="transition=fade">' +
       '<span class="squisq-heading-content">Intro</span>' +
-      '<span class="squisq-template-badge squisq-template-badge--empty" contenteditable="false"></span>' +
+      '<span class="squisq-template-badge squisq-template-badge--empty" contenteditable="false">' +
+      '<span class="squisq-template-badge-core" data-template-label="Block" aria-hidden="true"></span>' +
+      '</span>' +
       '<span class="squisq-props-badge" contenteditable="false" data-props-summary="Fade · 1:30 start"></span>' +
       '</h2>';
     const md = tiptapToMarkdown(tiptapRendered).trim();
@@ -49,4 +61,13 @@ describe('Template annotation round-trip', () => {
     // The CSS-painted summary lives in a data attribute; it must not bleed.
     expect(md).not.toContain('start');
   });
+
+  it('serializes data-template-params without data-template as a squiggly annotation', () => {
+    const tiptapRendered =
+      '<h2 data-template-params="transition=fade">' +
+      '<span class="squisq-heading-content">Intro</span>' +
+      '<span class="squisq-props-badge" contenteditable="false" data-props-summary="Fade"></span>' +
+      '</h2>';
+    expect(tiptapToMarkdown(tiptapRendered).trim()).toBe('## Intro {[transition=fade]}');
+  });
 });

package/src/__tests__/templateContentPreview.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest';
+import { DEFAULT_THEME, markdownToDoc } from '@bendyline/squisq/doc';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import { VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
+import {
+  resolveTemplateContentPreview,
+  resolveTemplateContentPreviewResult,
+  type TemplatePreviewSource,
+} from '../templateContentPreviewResolver';
+
+function previewSource(markdown: string): TemplatePreviewSource {
+  const doc = markdownToDoc(parseMarkdown(markdown), { autoTemplates: false });
+  const block = doc.blocks[0];
+  if (!block) throw new Error('expected markdown to produce a block');
+  return {
+    block,
+    theme: DEFAULT_THEME,
+    viewport: VIEWPORT_PRESETS.landscape,
+    basePath: '/',
+  };
+}
+
+describe('template content previews', () => {
+  it('renders a candidate preview from the active block content', () => {
+    const visual = resolveTemplateContentPreview(
+      'list',
+      previewSource(`## Launch Steps
+
+- Draft the outline
+- Review the visuals
+- Publish the page
+`),
+    );
+
+    expect(visual).toBeTruthy();
+    expect(JSON.stringify(visual?.layers)).toContain('Draft the outline');
+  });
+
+  it('falls back for content-specific templates when the block is too sparse', () => {
+    const visual = resolveTemplateContentPreview('list', previewSource('## About Squisq'));
+
+    expect(visual).toBeNull();
+  });
+
+  it('reports why stat and date previews cannot be derived', () => {
+    expect(
+      resolveTemplateContentPreviewResult('statHighlight', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No stat found in this block',
+    });
+
+    expect(
+      resolveTemplateContentPreviewResult('dateEvent', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No date found in this block',
+    });
+  });
+
+  it('reports why image previews cannot be derived', () => {
+    expect(
+      resolveTemplateContentPreviewResult('imageWithCaption', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No image found in this block',
+    });
+  });
+
+  it('reports why video previews cannot be derived without media', () => {
+    expect(
+      resolveTemplateContentPreviewResult('videoWithCaption', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No audio/video found in this block',
+    });
+
+    expect(
+      resolveTemplateContentPreviewResult('videoPullQuote', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No audio/video found in this block',
+    });
+  });
+
+  it('does not warn about missing media when an audio or video tag is present', () => {
+    expect(
+      resolveTemplateContentPreviewResult(
+        'videoWithCaption',
+        previewSource('## Demo\n\n<video src="media/demo.mp4" controls></video>'),
+      ).warning,
+    ).toBeUndefined();
+
+    expect(
+      resolveTemplateContentPreviewResult(
+        'videoPullQuote',
+        previewSource('## Narration\n\n<audio src="audio/narration.webm" controls></audio>'),
+      ).warning,
+    ).toBeUndefined();
+  });
+});

package/src/__tests__/tiptapBridge.test.ts

@@ -17,6 +17,22 @@ describe('markdownToTiptap', () => {
     expect(html).toContain('Hello world');
   });
 
+  it('preserves extra blank lines as empty paragraphs', () => {
+    expect(markdownToTiptap('Alpha\n\nBeta')).toBe('<p>Alpha</p><p>Beta</p>');
+    expect(markdownToTiptap('Alpha\n\n\nBeta')).toBe('<p>Alpha</p><p></p><p>Beta</p>');
+    expect(markdownToTiptap('Alpha\n\n\n\nBeta')).toBe('<p>Alpha</p><p></p><p></p><p>Beta</p>');
+  });
+
+  it('preserves trailing extra blank lines as empty paragraphs', () => {
+    expect(markdownToTiptap('Alpha\n')).toBe('<p>Alpha</p>');
+    expect(markdownToTiptap('Alpha\n\n')).toBe('<p>Alpha</p><p></p>');
+  });
+
+  it('preserves leading paragraph spaces as visible HTML whitespace', () => {
+    expect(markdownToTiptap('  indented')).toBe('<p>&nbsp;&nbsp;indented</p>');
+    expect(markdownToTiptap('Alpha\n\n   Beta')).toBe('<p>Alpha</p><p>&nbsp;&nbsp;&nbsp;Beta</p>');
+  });
+
   it('converts headings h1-h3', () => {
     expect(markdownToTiptap('# Title')).toContain('<h1');
     expect(markdownToTiptap('## Subtitle')).toContain('<h2');
@@ -193,6 +209,22 @@ describe('tiptapToMarkdown', () => {
     expect(md).toContain('Hello world');
   });
 
+  it('preserves empty paragraphs as extra blank lines', () => {
+    expect(tiptapToMarkdown('<p>Alpha</p><p>Beta</p>')).toBe('Alpha\n\nBeta\n');
+    expect(tiptapToMarkdown('<p>Alpha</p><p></p><p>Beta</p>')).toBe('Alpha\n\n\nBeta\n');
+    expect(tiptapToMarkdown('<p>Alpha</p><p></p><p></p><p>Beta</p>')).toBe('Alpha\n\n\n\nBeta\n');
+  });
+
+  it('preserves trailing empty paragraphs', () => {
+    expect(tiptapToMarkdown('<p>Alpha</p><p></p>')).toBe('Alpha\n\n');
+  });
+
+  it('restores leading paragraph spaces from visible HTML whitespace', () => {
+    expect(tiptapToMarkdown('<p>&nbsp;&nbsp;indented</p>')).toBe('  indented\n');
+    expect(tiptapToMarkdown('<p>\u00a0\u00a0indented</p>')).toBe('  indented\n');
+    expect(tiptapToMarkdown('<p>&#160;&#xA0;indented</p>')).toBe('  indented\n');
+  });
+
   it('converts headings', () => {
     expect(tiptapToMarkdown('<h1>Title</h1>')).toContain('# Title');
     expect(tiptapToMarkdown('<h2>Sub</h2>')).toContain('## Sub');
@@ -430,6 +462,21 @@ describe('round-trip: markdownToTiptap → tiptapToMarkdown', () => {
     expect(result).not.toContain('- [x] buy milk');
   });
 
+  it('preserves extra blank lines between paragraphs exactly', () => {
+    expect(roundTrip('Alpha\n\nBeta\n')).toBe('Alpha\n\nBeta\n');
+    expect(roundTrip('Alpha\n\n\nBeta\n')).toBe('Alpha\n\n\nBeta\n');
+    expect(roundTrip('Alpha\n\n\n\nBeta\n')).toBe('Alpha\n\n\n\nBeta\n');
+  });
+
+  it('preserves trailing empty paragraphs exactly', () => {
+    expect(roundTrip('Alpha\n\n')).toBe('Alpha\n\n');
+  });
+
+  it('preserves leading paragraph spaces exactly', () => {
+    expect(roundTrip('  indented\n')).toBe('  indented\n');
+    expect(roundTrip('Alpha\n\n   Beta\n')).toBe('Alpha\n\n   Beta\n');
+  });
+
   it('preserves quoted template params with spaces', () => {
     const result = roundTrip(
       '## Gallery {[imageWithCaption src=photo.jpg caption="Beach at sunset"]}',

package/src/__tests__/useJsonEditorTokens.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { DARK_SURFACE, LIGHT_SURFACE, DEFAULT_THEME } from '@bendyline/squisq/schemas';
+import { useJsonEditorTokens } from '../jsonEditor/useJsonEditorTokens';
+
+type StyleBag = Record<string, string>;
+
+/** Install a matchMedia stub whose `(prefers-color-scheme: dark)` resolves to `dark`. */
+function mockPrefersDark(dark: boolean): void {
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    value: (query: string) => ({
+      matches: dark && query.includes('dark'),
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(() => false),
+    }),
+  });
+}
+
+describe('useJsonEditorTokens', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('emits jsonform-prefixed tokens', () => {
+    mockPrefersDark(false);
+    const { result } = renderHook(() => useJsonEditorTokens(DEFAULT_THEME, LIGHT_SURFACE));
+    const style = result.current.style as StyleBag;
+    expect(style['--squisq-jsonform-bg']).toBe(LIGHT_SURFACE.background);
+    expect(style).toHaveProperty('--squisq-jsonform-warning');
+    expect(style).toHaveProperty('--squisq-jsonform-input-bg');
+  });
+
+  it("responds to a dark OS preference under surface='auto' (reactive via useAutoSurface)", () => {
+    mockPrefersDark(true);
+    const { result } = renderHook(() => useJsonEditorTokens(DEFAULT_THEME, 'auto'));
+    const style = result.current.style as StyleBag;
+    expect(style['--squisq-jsonform-bg']).toBe(DARK_SURFACE.background);
+    expect(style['--squisq-jsonform-text']).toBe(DARK_SURFACE.text);
+    expect(result.current.theme.colors.background).toBe(DARK_SURFACE.background);
+  });
+
+  it("uses light surface under surface='auto' when the OS prefers light", () => {
+    mockPrefersDark(false);
+    const { result } = renderHook(() => useJsonEditorTokens(DEFAULT_THEME, 'auto'));
+    const style = result.current.style as StyleBag;
+    expect(style['--squisq-jsonform-bg']).toBe(LIGHT_SURFACE.background);
+  });
+
+  beforeEach(() => {
+    // Default to a defined matchMedia so the hook's useAutoSurface can subscribe.
+    mockPrefersDark(false);
+  });
+});

package/src/__tests__/useMediaRecorder.test.ts

@@ -165,6 +165,23 @@ describe('useMediaRecorder lifecycle', () => {
     expect(result.current.stream).not.toBeNull();
   });
 
+  it('defaults to the mic source when called with no options', async () => {
+    const { result } = renderHook(() => useMediaRecorder());
+
+    expect(result.current.state).toBe('idle');
+
+    await act(async () => {
+      await result.current.request();
+    });
+
+    // Mic path: audio-only capture via getUserMedia, lands in `audio/`.
+    expect(result.current.state).toBe('ready');
+    expect(result.current.mimeType).toMatch(/^audio\/webm/);
+    expect(result.current.directory).toBe('audio');
+    const getUserMedia = navigator.mediaDevices.getUserMedia as ReturnType<typeof vi.fn>;
+    expect(getUserMedia).toHaveBeenCalled();
+  });
+
   it('camera includes the mic by default', async () => {
     const { result } = renderHook(() => useMediaRecorder({ source: 'camera' }));
     await act(async () => {

package/src/codeContext/CodeContextSectionView.tsx

@@ -0,0 +1,124 @@
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import { MarkdownRenderer } from '@bendyline/squisq-react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import type { CodeContext, CodeContextSection } from './types';
+
+/**
+ * One context section rendered inside a Monaco view zone: a single-line
+ * disclosure strip, plus the full markdown body while expanded. The body is
+ * rendered lazily — a file with 100 collapsed sections parses 100 one-liners,
+ * nothing more.
+ */
+export interface CodeContextSectionViewProps {
+  section: Omit<CodeContextSection, 'line'>;
+  expanded: boolean;
+  onToggle: (id: string) => void;
+  linkSchemes?: readonly string[] | undefined;
+  onLinkClick?: CodeContext['onLinkClick'] | undefined;
+  /** Native `#L<n>` handling: reveal that line in the editor. */
+  onRevealLine: (line: number) => void;
+  /** Reports the rendered content height so the zone can be resized to fit. */
+  onMeasure: (id: string, px: number) => void;
+}
+
+export function CodeContextSectionView({
+  section,
+  expanded,
+  onToggle,
+  linkSchemes,
+  onLinkClick,
+  onRevealLine,
+  onMeasure,
+}: CodeContextSectionViewProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  const stripNodes = useMemo(
+    () => parseMarkdown(section.summaryMarkdown).children,
+    [section.summaryMarkdown],
+  );
+  const bodyNodes = useMemo(
+    () => (expanded && section.markdown ? parseMarkdown(section.markdown).children : null),
+    [expanded, section.markdown],
+  );
+
+  // Height feedback loop: report the content's real height whenever it
+  // changes. Monaco display:none's offscreen zones and ResizeObserver reports
+  // 0×0 for those — ignore zeros so scrolled-away zones keep their height.
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const report = () => {
+      const h = el.offsetHeight;
+      if (h > 0) onMeasure(section.id, h);
+    };
+    report();
+    const ro = new ResizeObserver(report);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [section.id, onMeasure]);
+
+  // Delegated link interception. `#L<n>` reveals natively; everything else
+  // goes to the host callback (returning false opts back into default
+  // navigation).
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      const anchor = (e.target as HTMLElement).closest?.('a');
+      if (!anchor) return;
+      const href = anchor.getAttribute('href') ?? '';
+      const lineMatch = /^#L(\d+)$/.exec(href);
+      if (lineMatch) {
+        e.preventDefault();
+        e.stopPropagation();
+        onRevealLine(Number(lineMatch[1]));
+        return;
+      }
+      if (onLinkClick) {
+        const handled = onLinkClick(href, { sectionId: section.id });
+        if (handled !== false) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+    },
+    [onLinkClick, onRevealLine, section.id],
+  );
+
+  // Keep Monaco's container-level mousedown handler from hijacking clicks
+  // and text selection inside the section.
+  const stopMouseDown = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  return (
+    // Click handler is delegated anchor interception only; keyboard users
+    // reach links natively and the strip itself is a real <button>.
+    <div
+      ref={rootRef}
+      className={`squisq-ccx-section${expanded ? ' squisq-ccx-section--expanded' : ''}`}
+      onClick={handleClick}
+      onMouseDown={stopMouseDown}
+    >
+      <button
+        type="button"
+        className="squisq-ccx-strip"
+        aria-expanded={expanded}
+        onClick={() => onToggle(section.id)}
+      >
+        <span className="squisq-ccx-chevron" aria-hidden="true">
+          {expanded ? '▾' : '▸'}
+        </span>
+        <span className="squisq-ccx-strip-text">
+          <MarkdownRenderer nodes={stripNodes} {...(linkSchemes ? { linkSchemes } : {})} />
+        </span>
+      </button>
+      {expanded &&
+        (bodyNodes ? (
+          <div className="squisq-ccx-body">
+            <MarkdownRenderer nodes={bodyNodes} {...(linkSchemes ? { linkSchemes } : {})} />
+          </div>
+        ) : (
+          <div className="squisq-ccx-body squisq-ccx-body--loading">Loading…</div>
+        ))}
+    </div>
+  );
+}