@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/__tests__/blockTagActivity.test.ts

@@ -0,0 +1,183 @@
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  BlockTagActivityExtension,
+  BLOCK_TAG_HOVERED_CLASS,
+  BLOCK_TAG_SELECTED_CLASS,
+} from '../blockTagActivity';
+import { HeadingWithTemplate } from '../TemplateAnnotation';
+import { markdownToTiptap } from '../tiptapBridge';
+
+const MARKDOWN = `# First block {[title]}
+
+First body.
+
+- Outer item with **nested inline target**
+
+# Second block {[quote]}
+
+Second body.
+`;
+
+const editors: Editor[] = [];
+const editorHosts: HTMLElement[] = [];
+
+function makeEditor(): Editor {
+  const element = document.createElement('div');
+  document.body.appendChild(element);
+  editorHosts.push(element);
+
+  const editor = new Editor({
+    element,
+    extensions: [
+      StarterKit.configure({ heading: false }),
+      HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+      BlockTagActivityExtension,
+    ],
+    content: markdownToTiptap(MARKDOWN),
+  });
+  editors.push(editor);
+  return editor;
+}
+
+function positionInsideTopLevelNode(editor: Editor, text: string): number {
+  let position: number | null = null;
+  editor.state.doc.forEach((node, offset) => {
+    if (position === null && node.textContent === text) position = offset + 1;
+  });
+  if (position === null) throw new Error(`Top-level node not found: ${text}`);
+  return position;
+}
+
+function headings(editor: Editor): HTMLElement[] {
+  return Array.from(editor.view.dom.children).filter((element): element is HTMLElement =>
+    /^H[1-6]$/.test(element.tagName),
+  );
+}
+
+function elementWithExactText(editor: Editor, selector: string, text: string): HTMLElement {
+  const element = Array.from(editor.view.dom.querySelectorAll<HTMLElement>(selector)).find(
+    (candidate) => candidate.textContent === text,
+  );
+  if (!element) throw new Error(`Element not found: ${selector} containing ${text}`);
+  return element;
+}
+
+afterEach(() => {
+  for (const editor of editors.splice(0)) editor.destroy();
+  for (const host of editorHosts.splice(0)) host.remove();
+});
+
+function waitForDomReconciliation(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+describe('block-tag activity', () => {
+  it('decorates the initial selection before the editor view settles', async () => {
+    const editor = makeEditor();
+    await waitForDomReconciliation();
+
+    const [firstHeading] = headings(editor);
+    expect(firstHeading.isConnected).toBe(true);
+    expect(firstHeading.classList.contains(BLOCK_TAG_SELECTED_CLASS)).toBe(true);
+  });
+
+  it('keeps cursor and hover decorations through DOM reconciliation', async () => {
+    const editor = makeEditor();
+    editor.commands.setTextSelection(positionInsideTopLevelNode(editor, 'First body.'));
+    await waitForDomReconciliation();
+
+    const [firstHeading, secondHeading] = headings(editor);
+    expect(firstHeading.classList.contains(BLOCK_TAG_SELECTED_CLASS)).toBe(true);
+    expect(secondHeading.classList.contains(BLOCK_TAG_SELECTED_CLASS)).toBe(false);
+
+    const secondBody = elementWithExactText(editor, 'p', 'Second body.');
+    secondBody.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await waitForDomReconciliation();
+
+    expect(firstHeading.classList.contains(BLOCK_TAG_SELECTED_CLASS)).toBe(true);
+    expect(firstHeading.classList.contains(BLOCK_TAG_HOVERED_CLASS)).toBe(false);
+    expect(secondHeading.classList.contains(BLOCK_TAG_HOVERED_CLASS)).toBe(true);
+    expect(secondHeading.classList.contains(BLOCK_TAG_SELECTED_CLASS)).toBe(false);
+
+    editor.view.dom.dispatchEvent(new MouseEvent('mouseleave'));
+    await waitForDomReconciliation();
+    expect(secondHeading.classList.contains(BLOCK_TAG_HOVERED_CLASS)).toBe(false);
+    expect(firstHeading.classList.contains(BLOCK_TAG_SELECTED_CLASS)).toBe(true);
+
+    editor.commands.setTextSelection(positionInsideTopLevelNode(editor, 'Second body.'));
+    await waitForDomReconciliation();
+    expect(firstHeading.classList.contains(BLOCK_TAG_SELECTED_CLASS)).toBe(false);
+    expect(secondHeading.classList.contains(BLOCK_TAG_SELECTED_CLASS)).toBe(true);
+  });
+
+  it('maps a nested list target to the heading that owns the list', async () => {
+    const editor = makeEditor();
+    editor.commands.setTextSelection(positionInsideTopLevelNode(editor, 'Second body.'));
+    await waitForDomReconciliation();
+
+    const [firstHeading, secondHeading] = headings(editor);
+    const nestedTarget = elementWithExactText(editor, 'strong', 'nested inline target');
+    nestedTarget.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await waitForDomReconciliation();
+
+    expect(firstHeading.classList.contains(BLOCK_TAG_HOVERED_CLASS)).toBe(true);
+    expect(firstHeading.classList.contains(BLOCK_TAG_SELECTED_CLASS)).toBe(false);
+    expect(secondHeading.classList.contains(BLOCK_TAG_SELECTED_CLASS)).toBe(true);
+    expect(secondHeading.classList.contains(BLOCK_TAG_HOVERED_CLASS)).toBe(false);
+  });
+
+  it('keeps the owning block hovered across blank space between its nodes', async () => {
+    const editor = makeEditor();
+    await waitForDomReconciliation();
+
+    const [firstHeading, secondHeading] = headings(editor);
+    const topLevelChildren = Array.from(editor.view.dom.children);
+    const firstHeadingIndex = topLevelChildren.indexOf(firstHeading);
+    const secondHeadingIndex = topLevelChildren.indexOf(secondHeading);
+
+    topLevelChildren.forEach((element, index) => {
+      const top =
+        index < secondHeadingIndex
+          ? 10 + (index - firstHeadingIndex) * 25
+          : 120 + (index - secondHeadingIndex) * 25;
+      vi.spyOn(element, 'getBoundingClientRect').mockReturnValue({
+        top,
+        bottom: top + 18,
+      } as DOMRect);
+    });
+
+    editor.view.dom.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientY: 105 }));
+    await waitForDomReconciliation();
+
+    expect(firstHeading.classList.contains(BLOCK_TAG_HOVERED_CLASS)).toBe(true);
+    expect(secondHeading.classList.contains(BLOCK_TAG_HOVERED_CLASS)).toBe(false);
+
+    editor.view.dom.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientY: 145 }));
+    await waitForDomReconciliation();
+
+    expect(firstHeading.classList.contains(BLOCK_TAG_HOVERED_CLASS)).toBe(false);
+    expect(secondHeading.classList.contains(BLOCK_TAG_HOVERED_CLASS)).toBe(true);
+  });
+
+  it('clears block hover below the final content node', async () => {
+    const editor = makeEditor();
+    await waitForDomReconciliation();
+
+    const [, secondHeading] = headings(editor);
+    const topLevelChildren = Array.from(editor.view.dom.children);
+    topLevelChildren.forEach((element, index) => {
+      const top = index * 25;
+      vi.spyOn(element, 'getBoundingClientRect').mockReturnValue({
+        top,
+        bottom: top + 18,
+      } as DOMRect);
+    });
+
+    editor.view.dom.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientY: 1000 }));
+    await waitForDomReconciliation();
+
+    expect(secondHeading.classList.contains(BLOCK_TAG_HOVERED_CLASS)).toBe(false);
+  });
+});

package/src/__tests__/buildDocumentPreviewMarkdown.test.ts

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

package/src/__tests__/buildPreviewDocContent.test.ts

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

package/src/__tests__/buildPreviewDocTransition.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { parseMarkdown } from '@bendyline/squisq/markdown';
 import { markdownToDoc } from '@bendyline/squisq/doc';
-import type { Transition } from '@bendyline/squisq/schemas';
+import type { Doc, Transition } from '@bendyline/squisq/schemas';
 import { buildPreviewDoc } from '../buildPreviewDoc';
 
 function previewSlides(md: string) {
@@ -11,8 +11,7 @@ function previewSlides(md: string) {
 
 describe('buildPreviewDoc transition mapping', () => {
   it('carries an authored transition through to the player slide', () => {
-    // Transition written the way the toolbar / properties palette writes it:
-    // into the heading's Pandoc `{…}` attribute block.
+    // Legacy Pandoc transition syntax remains supported.
     const md = ['# Intro', '', '# Second {transition=vortex}', '', 'body'].join('\n');
     const slides = previewSlides(md);
     expect(slides[1].transition).toEqual({ type: 'vortex' });
@@ -70,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);
+  });
+});