@bendyline/squisq-editor-react 1.6.2 → 2.0.0

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__/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';
@@ -122,6 +136,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);
+  });
+});

package/src/__tests__/editorShellProps.test.tsx

@@ -13,9 +13,10 @@
  * the props it receives so we can assert `monacoTheme` reaches it.
  */
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import type { RawEditorProps } from '../RawEditor';
 import type { MediaEntry, MediaProvider } from '@bendyline/squisq/schemas';
+import { useMediaProvider } from '@bendyline/squisq-react';
 
 // Records the props the shell passes to RawEditor on each render.
 const rawEditorProps: RawEditorProps[] = [];
@@ -42,6 +43,13 @@ function MarkdownSourceProbe() {
   return <pre data-testid="markdown-source">{markdownSource}</pre>;
 }
 
+function MediaProviderProbe({ expected }: { expected: MediaProvider }) {
+  const provider = useMediaProvider();
+  return (
+    <span data-testid="media-context-probe">{provider === expected ? 'same' : 'missing'}</span>
+  );
+}
+
 function mediaProviderWith(count: number): MediaProvider {
   const entries: MediaEntry[] = Array.from({ length: count }, (_, i) => ({
     name: `file-${i + 1}.png`,
@@ -184,6 +192,61 @@ describe('RawEditor monacoTheme prop', () => {
   });
 });
 
+describe('<EditorShell> instance boundaries', () => {
+  it('provides its mediaProvider to React preview/layer consumers', async () => {
+    const provider = mediaProviderWith(0);
+    await act(async () => {
+      render(
+        <EditorShell
+          initialMarkdown="# hi"
+          initialView="raw"
+          mediaProvider={provider}
+          toolbarSlotLeft={<MediaProviderProbe expected={provider} />}
+        />,
+      );
+    });
+    expect(screen.getByTestId('media-context-probe').textContent).toBe('same');
+  });
+
+  it('keeps view shortcuts inside the editor that received the key', async () => {
+    const { container } = render(
+      <>
+        <EditorShell initialMarkdown="# first" initialView="raw" />
+        <EditorShell initialMarkdown="# second" initialView="raw" />
+      </>,
+    );
+    const shells = container.querySelectorAll<HTMLElement>('.squisq-editor-shell');
+    fireEvent.keyDown(within(shells[1]).getByTestId('raw-editor-stub'), {
+      key: '1',
+      ctrlKey: true,
+    });
+    await waitFor(() => expect(within(shells[1]).getByTestId('wysiwyg-editor-stub')).toBeTruthy());
+    expect(within(shells[0]).getByTestId('raw-editor-stub')).toBeTruthy();
+  });
+
+  it('ignores file drops in readOnly mode', async () => {
+    const { container } = render(
+      <EditorShell
+        initialMarkdown="# original"
+        initialView="raw"
+        readOnly
+        toolbarSlotRight={<MarkdownSourceProbe />}
+      />,
+    );
+    const shell = container.querySelector<HTMLElement>('.squisq-editor-shell')!;
+    const file = new File(['# replacement'], 'replacement.md', { type: 'text/markdown' });
+    fireEvent.drop(shell, {
+      dataTransfer: {
+        types: ['Files'],
+        files: [file],
+        items: [{ kind: 'file', type: 'text/markdown', getAsFile: () => file }],
+      },
+    });
+    await act(async () => Promise.resolve());
+    expect(screen.getByTestId('markdown-source').textContent).toBe('# original');
+  });
+});
+
 describe('<EditorShell> Files badge', () => {
   it('shows the mediaProvider file count on the paperclip button', async () => {
     const { container } = render(
@@ -231,6 +294,25 @@ describe('<EditorShell> Files badge', () => {
     expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('1');
   });
 
+  it('hides .gitignore entries from the Files panel and its count', async () => {
+    const { provider } = mutableMediaProviderWith([
+      { name: '.gitignore', mimeType: 'text/plain', size: 11 },
+      { name: 'notes_files/.gitignore', mimeType: 'text/plain', size: 11 },
+      { name: 'notes_files/hero.png', mimeType: 'image/png', size: 1024 },
+    ]);
+
+    render(<EditorShell initialMarkdown="# hi" initialView="raw" mediaProvider={provider} />);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 1 file')).toBeTruthy();
+    });
+    fireEvent.click(screen.getByLabelText('Toggle Files panel, 1 file'));
+
+    expect(await screen.findByText('hero.png')).toBeTruthy();
+    expect(screen.queryByText('.gitignore')).toBeNull();
+    expect(screen.getByText('Files (1)')).toBeTruthy();
+  });
+
   it('removes a media file and matching markdown refs from the files context menu', async () => {
     const { provider, removed } = mutableMediaProviderWith([
       {
@@ -338,6 +420,28 @@ describe('<Toolbar> Files badge', () => {
     });
     expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('2');
   });
+
+  it('excludes .gitignore from a self-scanned count', async () => {
+    const { provider } = mutableMediaProviderWith([
+      { name: '.gitignore', mimeType: 'text/plain', size: 11 },
+      { name: 'hero.png', mimeType: 'image/png', size: 1024 },
+    ]);
+    const { container } = render(
+      <EditorProvider
+        initialMarkdown="# hi"
+        initialView="raw"
+        mediaProvider={provider}
+        allowRecording={false}
+      >
+        <Toolbar onToggleFiles={() => {}} />
+      </EditorProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 1 file')).toBeTruthy();
+    });
+    expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('1');
+  });
 });
 
 describe('<Toolbar> Insert menu', () => {
@@ -360,4 +464,22 @@ describe('<Toolbar> Insert menu', () => {
       );
     });
   });
+
+  it('adds an explicit authored timeline fence from the Insert menu', async () => {
+    render(
+      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <MarkdownSourceProbe />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    fireEvent.click(await screen.findByRole('menuitem', { name: /Timeline/i }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('markdown-source').textContent).toContain(
+        '```timeline\nMilestones: ● Start',
+      );
+    });
+  });
 });

package/src/__tests__/emojiPicker.test.tsx

@@ -1,43 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { EmojiPicker } from '../EmojiPicker';
-import {
-  EMOJI_CATEGORIES,
-  ALL_EMOJIS,
-  searchEmojis,
-  PICKER_CATEGORIES,
-  ALL_PICKER_ENTRIES,
-  searchPickerEntries,
-} from '../emojiData';
-
-describe('emojiData — legacy emoji exports', () => {
-  it('exposes the standard CLDR category buckets', () => {
-    const ids = EMOJI_CATEGORIES.map((c) => c.id);
-    expect(ids).toEqual([
-      'smileys',
-      'people',
-      'nature',
-      'food',
-      'travel',
-      'activities',
-      'objects',
-      'symbols',
-      'flags',
-    ]);
-  });
-
-  it('each entry has a non-empty char and name', () => {
-    for (const entry of ALL_EMOJIS) {
-      expect(entry.char.length).toBeGreaterThan(0);
-      expect(entry.name.length).toBeGreaterThan(0);
-    }
-  });
-
-  it('searchEmojis matches by name (case-insensitive)', () => {
-    const results = searchEmojis('HEART');
-    expect(results.some((e) => e.char === '❤️')).toBe(true);
-  });
-});
+import { EmojiPicker, PICKER_CATEGORIES, ALL_PICKER_ENTRIES, searchPickerEntries } from '../index';
 
 describe('emojiData — unified picker entries', () => {
   it('appends FA Brands, Solid, and Regular categories after the emoji buckets', () => {
@@ -78,12 +41,9 @@ describe('EmojiPicker', () => {
 
   it('renders all emoji + FA tabs when open', () => {
     render(<EmojiPicker open onSelect={() => {}} onClose={() => {}} />);
-    for (const cat of EMOJI_CATEGORIES) {
+    for (const cat of PICKER_CATEGORIES) {
       expect(screen.getByRole('tab', { name: cat.label })).toBeTruthy();
     }
-    expect(screen.getByRole('tab', { name: 'Brands' })).toBeTruthy();
-    expect(screen.getByRole('tab', { name: 'Solid' })).toBeTruthy();
-    expect(screen.getByRole('tab', { name: 'Regular' })).toBeTruthy();
   });
 
   it('fires onSelect with an emoji PickerEntry when an emoji tile is clicked', () => {

package/src/__tests__/headingTransition.test.ts

@@ -4,7 +4,6 @@ import {
   setHeadingLineTransition,
   readBlockAttrsTransition,
   setHeadingAttrsTransition,
-  setBlockAttrsTransition,
   EMPTY_TRANSITION,
 } from '../headingTransition';
 
@@ -174,15 +173,4 @@ describe('block-attrs (WYSIWYG) helpers', () => {
       templateParams: null,
     });
   });
-
-  it('legacy single-channel writer still writes a fresh inner when none exists', () => {
-    expect(setBlockAttrsTransition(null, { type: 'fade', direction: '', duration: '' })).toBe(
-      'transition=fade',
-    );
-  });
-
-  it('legacy single-channel writer preserves the id and clears to null when emptied', () => {
-    expect(setBlockAttrsTransition('transition=fade', EMPTY_TRANSITION)).toBeNull();
-    expect(setBlockAttrsTransition('#intro transition=fade', EMPTY_TRANSITION)).toBe('#intro');
-  });
 });

package/src/__tests__/imageEditAffordance.test.tsx

@@ -182,8 +182,10 @@ describe('<EditorShell> image-edit modal wiring', () => {
 
     expect(screen.queryByTestId('image-edit-modal')).toBeNull();
 
+    const trigger = screen.getByTestId('trigger');
+    trigger.focus();
     await act(async () => {
-      fireEvent.click(screen.getByTestId('trigger'));
+      fireEvent.click(trigger);
     });
 
     await waitFor(() => {
@@ -191,6 +193,7 @@ describe('<EditorShell> image-edit modal wiring', () => {
     });
     // Shows the relative path in the header.
     expect(screen.getByText('hero.png')).toBeTruthy();
+    expect(document.activeElement).toBe(screen.getByTestId('image-edit-modal-close'));
 
     await act(async () => {
       fireEvent.click(screen.getByTestId('image-edit-modal-close'));
@@ -198,6 +201,7 @@ describe('<EditorShell> image-edit modal wiring', () => {
     await waitFor(() => {
       expect(screen.queryByTestId('image-edit-modal')).toBeNull();
     });
+    expect(document.activeElement).toBe(screen.getByTestId('trigger'));
   });
 
   it('opens the modal with a transient sidecar when only a mediaProvider is wired (no host container)', async () => {