@bendyline/squisq-editor-react 1.6.1 → 2.0.0

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');
+    });
+  });
+});

package/src/__tests__/previewPanelTransforms.test.tsx

@@ -0,0 +1,117 @@
+/** @vitest-environment jsdom */
+import type { ReactNode } from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { Doc } from '@bendyline/squisq/schemas';
+
+vi.mock('@bendyline/squisq-react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@bendyline/squisq-react')>();
+  const blockSummary = (doc: Doc) =>
+    JSON.stringify(doc.blocks.map((block) => ({ id: block.id, template: block.template })));
+  return {
+    ...actual,
+    useMediaProvider: () => null,
+    DocPlayer: ({ doc }: { doc: Doc }) => (
+      <div data-testid="mock-doc-player">{blockSummary(doc)}</div>
+    ),
+    LinearDocView: ({ doc }: { doc: Doc }) => (
+      <div data-testid="mock-linear-doc">{blockSummary(doc)}</div>
+    ),
+  };
+});
+
+vi.mock('../PlainHtmlPreview', () => ({
+  PlainHtmlPreview: ({ markdown }: { markdown: string }) => (
+    <div data-testid="mock-plain-document">{markdown}</div>
+  ),
+}));
+
+import { EditorProvider, useEditorContext } from '../EditorContext';
+import { PreviewSettingsProvider, usePreviewSettings } from '../PreviewControls';
+import { PreviewPanel } from '../PreviewPanel';
+
+const SOURCE = `---
+title: Metrics Brief
+---
+
+# Metrics Brief {[title]}
+
+This report collects the strongest signals from a year of product work.
+
+## Growth
+
+Revenue increased 42% year over year while customer retention reached 91%.
+
+## Milestone
+
+On January 15, 2026 the team shipped the largest release in company history.
+
+## Customer voice
+
+> "The new workflow saves our team hours every week."
+`;
+
+function TransformButton() {
+  const { setSelectedTransformStyle } = usePreviewSettings();
+  return <button onClick={() => setSelectedTransformStyle('data-driven')}>Summarize now</button>;
+}
+
+function Harness({ children }: { children?: ReactNode }) {
+  const { doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <TransformButton />
+      {children}
+      <PreviewPanel />
+    </PreviewSettingsProvider>
+  );
+}
+
+function renderMode(displayMode?: string) {
+  const source = displayMode
+    ? SOURCE.replace('title: Metrics Brief', `title: Metrics Brief\ndisplay-mode: ${displayMode}`)
+    : SOURCE;
+  return render(
+    <EditorProvider initialMarkdown={source} initialView="preview">
+      <Harness />
+    </EditorProvider>,
+  );
+}
+
+describe('PreviewPanel transform projection', () => {
+  it('replaces the slideshow deck when a summarization style is selected', async () => {
+    renderMode('slideshow');
+    await waitFor(() => expect(screen.getByTestId('mock-doc-player')).toBeTruthy());
+    expect(screen.getByTestId('mock-doc-player').textContent).not.toContain('transform-');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Summarize now' }));
+
+    await waitFor(() =>
+      expect(screen.getByTestId('mock-doc-player').textContent).toContain('transform-'),
+    );
+  });
+
+  it('feeds the transformed content model to Page mode', async () => {
+    renderMode('page');
+    await waitFor(() => expect(screen.getByTestId('mock-linear-doc')).toBeTruthy());
+
+    fireEvent.click(screen.getByRole('button', { name: 'Summarize now' }));
+
+    await waitFor(() =>
+      expect(screen.getByTestId('mock-linear-doc').textContent).toContain('transform-'),
+    );
+  });
+
+  it('feeds readable transformed Markdown to Document mode', async () => {
+    renderMode('document');
+    await waitFor(() => expect(screen.getByTestId('mock-plain-document')).toBeTruthy());
+
+    fireEvent.click(screen.getByRole('button', { name: 'Summarize now' }));
+
+    await waitFor(() => {
+      const markdown = screen.getByTestId('mock-plain-document').textContent ?? '';
+      expect(markdown).toContain('Metrics Brief');
+      expect(markdown).toContain('42%');
+    });
+  });
+});

package/src/__tests__/rawEditorModelIsolation.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { canHandleSquisqMediaDrop, ownsMonacoModel } from '../rawEditorIsolation';
+import { SQUISQ_MEDIA_MIME } from '../mediaDragMime';
+
+describe('RawEditor Monaco provider isolation', () => {
+  it('accepts only the model owned by the registering editor', () => {
+    const firstModel = {} as never;
+    const secondModel = {} as never;
+    const firstEditor = { getModel: () => firstModel } as never;
+    expect(ownsMonacoModel(firstEditor, firstModel)).toBe(true);
+    expect(ownsMonacoModel(firstEditor, secondModel)).toBe(false);
+  });
+
+  it('rejects media-bin drops while read-only', () => {
+    const transfer = { types: [SQUISQ_MEDIA_MIME] } as unknown as DataTransfer;
+    expect(canHandleSquisqMediaDrop(true, transfer)).toBe(false);
+    expect(canHandleSquisqMediaDrop(false, transfer)).toBe(true);
+  });
+});

package/src/__tests__/resolveBlockVisual.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import { DEFAULT_THEME, VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
+import type { Block, Doc, TextLayer } from '@bendyline/squisq/schemas';
+import { resolveBlockVisual } from '../resolveBlockVisual';
+
+describe('resolveBlockVisual', () => {
+  it('materializes document-scoped custom templates in editor previews', () => {
+    const block: Block = {
+      id: 'custom',
+      startTime: 0,
+      duration: 5,
+      audioSegment: 0,
+      template: 'hero',
+      title: 'Editor custom template',
+    };
+    const doc: Doc = {
+      articleId: 'custom-preview',
+      duration: 5,
+      blocks: [block],
+      audio: { segments: [] },
+      customTemplates: [
+        {
+          name: 'hero',
+          label: 'Hero',
+          viewport: { width: 1920, height: 1080 },
+          layers: [
+            {
+              id: 'hero-title',
+              type: 'text',
+              position: { x: '5%', y: '10%', width: '90%' },
+              content: { text: '{title}', style: { fontSize: 48, color: '#000000' } },
+            },
+          ],
+        },
+      ],
+    };
+
+    const visual = resolveBlockVisual(doc, block, DEFAULT_THEME, VIEWPORT_PRESETS.landscape);
+
+    expect(visual).not.toBeNull();
+    expect((visual?.layers?.[0] as TextLayer).content.text).toBe('Editor custom template');
+  });
+});

package/src/__tests__/statusBar.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { EditorProvider } from '../EditorContext';
+import { StatusBar } from '../StatusBar';
+
+function renderStatusBar(markdown: string) {
+  return render(
+    <EditorProvider initialMarkdown={markdown} articleId="status-bar-test">
+      <StatusBar />
+    </EditorProvider>,
+  );
+}
+
+describe('StatusBar', () => {
+  it('counts nested document blocks, not only top-level roots', async () => {
+    renderStatusBar('# Root\n\n## Child one\n\n### Grandchild\n\n## Child two\n');
+
+    expect(await screen.findByText('4 blocks')).toBeTruthy();
+  });
+
+  it('uses the singular label for one block', async () => {
+    renderStatusBar('# Only block\n');
+
+    expect(await screen.findByText('1 block')).toBeTruthy();
+    expect(screen.queryByText('1 blocks')).toBeNull();
+  });
+});

package/src/__tests__/teleprompter.test.tsx

@@ -0,0 +1,190 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import { markdownToDoc } from '@bendyline/squisq/doc';
+import { buildNarrationScript } from '@bendyline/squisq/narration';
+import { DEFAULT_THEME } from '@bendyline/squisq/schemas';
+import { TeleprompterView } from '../teleprompter/TeleprompterView';
+import { stepScroll, targetOffsetFor, type TokenLineMap } from '../teleprompter/scrollModel';
+import { detectFloatTiers } from '../teleprompter/floatingWindow';
+import { PCM_WORKLET_SOURCE, PCM_WORKLET_NAME } from '../teleprompter/pcmWorklet';
+import { vadConfigForSensitivity } from '../teleprompter/useTeleprompter';
+
+const MD = `# First Section
+
+One two three four five six seven eight.
+
+## Second Section
+
+Nine ten eleven twelve.
+`;
+
+afterEach(() => {
+  cleanup();
+  // Prefs persist to localStorage; keep tests order-independent.
+  window.localStorage.removeItem('squisq:teleprompter-prefs');
+});
+
+describe('scrollModel', () => {
+  const lines: TokenLineMap = {
+    tokenTops: [0, 0, 0, 60, 60, 120, 120, 180],
+    tokenHeights: [60, 60, 60, 60, 60, 60, 60, 60],
+  };
+
+  it('places the active line at the eye-line', () => {
+    // Token 5 sits at top 120; eye-line = 35% of 600 = 210 → offset keeps it clamped ≥ 0.
+    expect(targetOffsetFor(5, lines, 600)).toBe(0);
+    // Smaller viewport pushes real scrolling: 120 + 30 − 0.35×200 = 80.
+    expect(targetOffsetFor(5, lines, 200)).toBe(80);
+    // Fractional positions interpolate between token tops.
+    expect(targetOffsetFor(4.5, lines, 200)).toBe(60 + 30 + 30 - 70);
+  });
+
+  it('clamps to non-negative offsets and empty maps', () => {
+    expect(targetOffsetFor(0, lines, 600)).toBe(0);
+    expect(targetOffsetFor(3, { tokenTops: [], tokenHeights: [] }, 600)).toBe(0);
+  });
+
+  it('stepScroll approaches the target and respects the speed clamp', () => {
+    // A huge jump advances by at most maxPxPerSec × dt.
+    expect(stepScroll(0, 100000, 16, 2600)).toBeCloseTo(2600 * 0.016, 5);
+    // Small distances converge and snap exactly.
+    let offset = 0;
+    for (let i = 0; i < 120; i++) offset = stepScroll(offset, 300, 16);
+    expect(offset).toBe(300);
+    // No time → no movement.
+    expect(stepScroll(50, 300, 0)).toBe(50);
+  });
+});
+
+describe('detectFloatTiers', () => {
+  it('reports popup + docked under jsdom (no PiP APIs)', () => {
+    const tiers = detectFloatTiers();
+    expect(tiers).toContain('popup');
+    expect(tiers[tiers.length - 1]).toBe('docked');
+    expect(tiers).not.toContain('document-pip');
+    expect(tiers).not.toContain('video-pip');
+  });
+
+  it('reports document-pip first when the API exists', () => {
+    const win = window as Window & { documentPictureInPicture?: unknown };
+    win.documentPictureInPicture = { requestWindow: () => Promise.reject(new Error('stub')) };
+    try {
+      expect(detectFloatTiers()[0]).toBe('document-pip');
+    } finally {
+      delete win.documentPictureInPicture;
+    }
+  });
+});
+
+describe('pcmWorklet source', () => {
+  it('compiles under stubbed worklet globals and registers the tap', () => {
+    const registered: string[] = [];
+    const factory = new Function(
+      'registerProcessor',
+      'AudioWorkletProcessor',
+      'currentTime',
+      PCM_WORKLET_SOURCE,
+    );
+    class ProcessorStub {
+      port = { postMessage: () => undefined };
+    }
+    factory((name: string) => registered.push(name), ProcessorStub, 0);
+    expect(registered).toEqual([PCM_WORKLET_NAME]);
+    expect(PCM_WORKLET_SOURCE).toContain('process(inputs)');
+  });
+});
+
+describe('vadConfigForSensitivity', () => {
+  it('maps 0.5 to the engine defaults and keeps hysteresis ordering', () => {
+    const mid = vadConfigForSensitivity(0.5);
+    expect(mid.enterRatio).toBeCloseTo(3.0, 5);
+    for (const s of [0, 0.25, 0.5, 0.75, 1]) {
+      const cfg = vadConfigForSensitivity(s);
+      expect(cfg.enterRatio!).toBeGreaterThan(cfg.exitRatio! - 1e-9);
+    }
+    // Higher sensitivity → lower (easier) enter threshold.
+    expect(vadConfigForSensitivity(0.9).enterRatio!).toBeLessThan(
+      vadConfigForSensitivity(0.1).enterRatio!,
+    );
+  });
+});
+
+describe('TeleprompterView', () => {
+  function renderView(markdown: string | null) {
+    const doc = markdown ? markdownToDoc(parseMarkdown(markdown)) : null;
+    render(<TeleprompterView doc={doc} theme={DEFAULT_THEME} />);
+    return doc;
+  }
+
+  it('renders one span per script token plus block markers and controls', () => {
+    const doc = renderView(MD);
+    const script = buildNarrationScript(doc!);
+    const spans = document.querySelectorAll('[data-token-idx]');
+    expect(spans.length).toBe(script.tokens.length);
+    expect(
+      screen.getByText('First Section', { selector: '.squisq-teleprompter-block-marker' }),
+    ).toBeTruthy();
+    expect(screen.getByTestId('teleprompter-controls')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Start prompter' })).toBeTruthy();
+  });
+
+  it('mirrors the live surface into a presentation target without duplicating controls', () => {
+    const doc = markdownToDoc(parseMarkdown(MD));
+    const audienceDocument = document.implementation.createHTMLDocument('Audience');
+    const audienceTarget = audienceDocument.createElement('div');
+    audienceDocument.body.appendChild(audienceTarget);
+
+    render(
+      <TeleprompterView doc={doc} theme={DEFAULT_THEME} presentationTarget={audienceTarget} />,
+    );
+
+    expect(audienceTarget.querySelector('[aria-label="Audience presentation"]')).toBeTruthy();
+    expect(audienceTarget.querySelectorAll('[data-token-idx]').length).toBe(
+      buildNarrationScript(doc).tokens.length,
+    );
+    expect(audienceTarget.querySelector('[data-testid="teleprompter-controls"]')).toBeNull();
+    expect(screen.getAllByTestId('teleprompter-controls')).toHaveLength(1);
+  });
+
+  it('shows an empty state for an empty doc', () => {
+    renderView(null);
+    expect(screen.getByText(/Nothing to narrate yet/)).toBeTruthy();
+    expect(screen.queryByTestId('teleprompter-controls')).toBeNull();
+  });
+
+  it('mirrors the empty state into a presentation target', () => {
+    const audienceDocument = document.implementation.createHTMLDocument('Audience');
+    const audienceTarget = audienceDocument.createElement('div');
+    audienceDocument.body.appendChild(audienceTarget);
+
+    render(
+      <TeleprompterView doc={null} theme={DEFAULT_THEME} presentationTarget={audienceTarget} />,
+    );
+
+    expect(audienceTarget.querySelector('[aria-label="Audience presentation"]')).toBeTruthy();
+    expect(audienceTarget.textContent).toContain('Nothing to narrate yet');
+    expect(audienceTarget.querySelector('[data-testid="teleprompter-controls"]')).toBeNull();
+  });
+
+  it('start button enters countdown and Escape cancels back to stopped', () => {
+    renderView(MD);
+    fireEvent.click(screen.getByRole('button', { name: 'Start prompter' }));
+    // Default prefs use a 3 s countdown → the overlay digit appears.
+    expect(document.querySelector('.squisq-teleprompter-countdown-digit')?.textContent).toBe('3');
+    fireEvent.keyDown(screen.getByTestId('teleprompter-view'), { key: 'Escape' });
+    expect(document.querySelector('.squisq-teleprompter-countdown-digit')).toBeNull();
+    expect(screen.getByRole('button', { name: 'Start prompter' })).toBeTruthy();
+  });
+
+  it('mirror toggle flips the surface class', () => {
+    renderView(MD);
+    const surface = screen.getByTestId('teleprompter-surface');
+    expect(surface.className).not.toContain('--mirrored');
+    fireEvent.click(screen.getByRole('button', { name: '⇋ Mirror' }));
+    expect(screen.getByTestId('teleprompter-surface').className).toContain('--mirrored');
+  });
+});

package/src/__tests__/templateAnnotationRoundTrip.test.ts

@@ -2,6 +2,15 @@ import { describe, it, expect } from 'vitest';
 import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
 
 describe('Template annotation round-trip', () => {
+  it('hides an empty annotation in Write view while preserving it on round-trip', () => {
+    const original = '## Getting Started {[]}';
+    const html = markdownToTiptap(original);
+
+    expect(html).toContain('data-template-empty="true"');
+    expect(html).not.toContain('{[]}');
+    expect(tiptapToMarkdown(html).trim()).toBe(original);
+  });
+
   it('extracts {[template]} into data-template on markdownToTiptap', () => {
     const html = markdownToTiptap('## Getting Started {[comparisonBar]}');
     expect(html).toContain('data-template="comparisonBar"');
@@ -16,13 +25,40 @@ describe('Template annotation round-trip', () => {
     expect(back.trim()).toBe(original);
   });
 
+  it('preserves a heading whose last word is also the template label', () => {
+    const original = '### A Famous Quote {[quote]}';
+    const html = markdownToTiptap(original);
+
+    expect(tiptapToMarkdown(html).trim()).toBe(original);
+  });
+
+  it('ignores legacy text rendered inside a template badge', () => {
+    const tiptapRendered =
+      '<h3 data-template="quote">' +
+      '<span class="squisq-heading-content">A Famous Quote</span>' +
+      '<span class="squisq-template-badge" contenteditable="false">Quote</span>' +
+      '</h3>';
+
+    expect(tiptapToMarkdown(tiptapRendered).trim()).toBe('### A Famous Quote {[quote]}');
+  });
+
+  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 +75,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 +87,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]}');
+  });
 });