@bendyline/squisq-editor-react 2.0.0 → 2.1.0

package/src/__tests__/previewControls.test.tsx

@@ -88,6 +88,75 @@ function LibraryThemeHarness() {
   );
 }
 
+function CoverSlideProbe() {
+  const { activeCoverSlide, setCoverSlideEnabled } = usePreviewSettings();
+  const { markdownSource } = useEditorContext();
+  return (
+    <>
+      <button type="button" onClick={() => setCoverSlideEnabled(false)}>
+        Hide cover slide
+      </button>
+      <button type="button" onClick={() => setCoverSlideEnabled(true)}>
+        Use default cover slide
+      </button>
+      <div data-testid="active-cover-slide">{String(activeCoverSlide)}</div>
+      <pre data-testid="markdown-source">{markdownSource}</pre>
+    </>
+  );
+}
+
+function CoverSlideHarness() {
+  const { doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <CoverSlideProbe />
+    </PreviewSettingsProvider>
+  );
+}
+
+function ManagedDefaultsProbe() {
+  const {
+    activeThemeId,
+    activeTransformStyle,
+    activeCaptionStyle,
+    activeCaptionsEnabled,
+    setSelectedThemeId,
+    setSelectedTransformStyle,
+    setCaptionMode,
+  } = usePreviewSettings();
+  const { markdownSource } = useEditorContext();
+  return (
+    <>
+      <button type="button" onClick={() => setSelectedThemeId('standard')}>
+        Use default theme
+      </button>
+      <button type="button" onClick={() => setSelectedTransformStyle('')}>
+        Use default transform
+      </button>
+      <button type="button" onClick={() => setCaptionMode('standard')}>
+        Use default captions
+      </button>
+      <div
+        data-testid="managed-defaults"
+        data-theme={activeThemeId}
+        data-transform={activeTransformStyle}
+        data-caption-style={activeCaptionStyle}
+        data-captions-enabled={String(activeCaptionsEnabled)}
+      />
+      <pre data-testid="markdown-source">{markdownSource}</pre>
+    </>
+  );
+}
+
+function ManagedDefaultsHarness() {
+  const { doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <ManagedDefaultsProbe />
+    </PreviewSettingsProvider>
+  );
+}
+
 function renderPreviewControls(markdown: string) {
   render(
     <EditorProvider initialMarkdown={markdown}>
@@ -191,6 +260,101 @@ describe('PreviewModeSwitch', () => {
   });
 });
 
+describe('cover-slide frontmatter', () => {
+  it('writes the non-default as a boolean and removes the default value', async () => {
+    render(
+      <EditorProvider initialMarkdown="# Hello">
+        <CoverSlideHarness />
+      </EditorProvider>,
+    );
+
+    expect(screen.getByTestId('active-cover-slide').textContent).toBe('true');
+    fireEvent.click(screen.getByRole('button', { name: 'Hide cover slide' }));
+
+    await waitFor(() => {
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).toContain('squisq-cover-slide: false');
+      expect(source).not.toContain('squisq-cover-slide: "false"');
+    });
+    expect(screen.getByTestId('active-cover-slide').textContent).toBe('false');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Use default cover slide' }));
+
+    await waitFor(() => {
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).not.toContain('squisq-cover-slide');
+      expect(source).not.toContain('---');
+    });
+    expect(screen.getByTestId('active-cover-slide').textContent).toBe('true');
+  });
+
+  it('removes a legacy cover-slide override when restoring the default', async () => {
+    render(
+      <EditorProvider initialMarkdown={'---\ncover-slide: false\ntitle: Hello\n---\n\n# Hello'}>
+        <CoverSlideHarness />
+      </EditorProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('active-cover-slide').textContent).toBe('false');
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Use default cover slide' }));
+
+    await waitFor(() => {
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).not.toContain('cover-slide');
+      expect(source).toContain('title: Hello');
+    });
+    expect(screen.getByTestId('active-cover-slide').textContent).toBe('true');
+  });
+});
+
+describe('managed preview-setting defaults', () => {
+  it('removes default theme, transform, and caption values plus their legacy aliases', async () => {
+    const markdown = `---
+squisq-theme: documentary
+themeId: bold
+theme: cinematic
+squisq-transform: documentary
+transform-style: magazine
+squisq-captions: social
+caption-style: off
+title: Hello
+---
+
+# Hello`;
+    render(
+      <EditorProvider initialMarkdown={markdown}>
+        <ManagedDefaultsHarness />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Use default theme' }));
+    await waitFor(() => {
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).not.toMatch(/^(?:squisq-theme|themeId|theme):/m);
+    });
+    expect(screen.getByTestId('managed-defaults').getAttribute('data-theme')).toBe('standard');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Use default transform' }));
+    await waitFor(() => {
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).not.toMatch(/^(?:squisq-transform|transform-style):/m);
+    });
+    expect(screen.getByTestId('managed-defaults').getAttribute('data-transform')).toBe('');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Use default captions' }));
+    await waitFor(() => {
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).not.toMatch(/^(?:squisq-captions|caption-style):/m);
+      expect(source).toContain('title: Hello');
+    });
+    const defaults = screen.getByTestId('managed-defaults');
+    expect(defaults.getAttribute('data-caption-style')).toBe('standard');
+    expect(defaults.getAttribute('data-captions-enabled')).toBe('true');
+  });
+});
+
 describe('PreviewToolbarControls', () => {
   it('presents transforms as summarization without implying the source is changed', () => {
     const originalResizeObserver = globalThis.ResizeObserver;
@@ -223,6 +387,37 @@ describe('PreviewToolbarControls', () => {
     }
   });
 
+  it('hides the aspect-ratio and captions controls in Page (linear) mode', () => {
+    const originalResizeObserver = globalThis.ResizeObserver;
+    class ResizeObserverStub implements ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+
+    globalThis.ResizeObserver = ResizeObserverStub;
+    try {
+      // Frontmatter `display-mode: page` resolves to the internal 'linear'
+      // display mode (the styled Page view).
+      renderPreviewToolbar('---\ndisplay-mode: page\n---\n\n# Hello');
+
+      // Page is a variable-height HTML rendition: aspect ratio and captions
+      // do not apply there.
+      expect(document.querySelector('[role="group"][aria-label="Aspect ratio"]')).toBeNull();
+      expect(screen.queryByText('Captions:')).toBeNull();
+      // Theme, Summarize, and Cover stay live.
+      expect(screen.getAllByText('Theme:').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('Summarize:').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('Cover slide').length).toBeGreaterThan(0);
+    } finally {
+      if (originalResizeObserver) {
+        globalThis.ResizeObserver = originalResizeObserver;
+      } else {
+        Reflect.deleteProperty(globalThis, 'ResizeObserver');
+      }
+    }
+  });
+
   it('keeps the overflow popover inside the left viewport edge', async () => {
     const originalResizeObserver = globalThis.ResizeObserver;
     const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;

package/src/__tests__/recorderTheme.test.tsx

@@ -0,0 +1,42 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+import { RecorderModal } from '../recorder/RecorderModal';
+import { RecorderPanel } from '../recorder/RecorderPanel';
+
+const mediaProvider: MediaProvider = {
+  resolveUrl: vi.fn(async (path: string) => path),
+  listMedia: vi.fn(async () => []),
+  addMedia: vi.fn(async (name: string) => name),
+  removeMedia: vi.fn(async () => undefined),
+  dispose: vi.fn(),
+};
+
+describe('recorder theme propagation', () => {
+  it('creates a dark theme scope for the recorder dialog', () => {
+    render(<RecorderModal mediaProvider={mediaProvider} colorScheme="dark" onClose={vi.fn()} />);
+
+    const dialog = screen.getByRole('dialog', { name: 'Record media' });
+    expect(dialog.getAttribute('data-theme')).toBe('dark');
+    expect(dialog.classList.contains('squisq-editor-shell')).toBe(true);
+    expect(dialog.style.colorScheme).toBe('dark');
+    expect(dialog.style.getPropertyValue('--squisq-recorder-surface')).toBe(
+      'var(--squisq-bg, #1f2937)',
+    );
+    expect(dialog.style.getPropertyValue('--squisq-recorder-text')).toBe(
+      'var(--squisq-text, #e5e7eb)',
+    );
+  });
+
+  it('passes the requested scheme through the portaled panel wrapper', () => {
+    render(<RecorderPanel mediaProvider={mediaProvider} colorScheme="dark" />);
+    fireEvent.click(screen.getByRole('button', { name: 'Record media' }));
+
+    expect(screen.getByRole('dialog', { name: 'Record media' }).getAttribute('data-theme')).toBe(
+      'dark',
+    );
+  });
+});

package/src/__tests__/selectionConversions.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest';
+import {
+  selectionToTable,
+  selectionToTableMarkdown,
+  selectionToTaskItems,
+  selectionToTaskListMarkdown,
+} from '../selectionConversions';
+
+describe('selectionToTable', () => {
+  it('detects consistently pipe-delimited rows, including outer pipes', () => {
+    expect(selectionToTable('| Name | Role |\n| Ada | Engineer |')).toEqual({
+      delimiter: 'pipe',
+      rows: [
+        ['Name', 'Role'],
+        ['Ada', 'Engineer'],
+      ],
+    });
+  });
+
+  it('detects CSV rows without splitting quoted commas', () => {
+    expect(selectionToTable('Name,Notes\nAda,"Math, logic"')).toEqual({
+      delimiter: 'comma',
+      rows: [
+        ['Name', 'Notes'],
+        ['Ada', 'Math, logic'],
+      ],
+    });
+  });
+
+  it('retains literal quotes in comma-delimited cells', () => {
+    expect(selectionToTable('Item,Size\nDisplay,5" screen').rows[1]).toEqual([
+      'Display',
+      '5" screen',
+    ]);
+  });
+
+  it.each([
+    ['tab', 'Name\tRole\nAda\tEngineer'],
+    ['multispace', 'Name    Role\nAda     Engineer'],
+  ] as const)('detects %s-delimited rows', (delimiter, text) => {
+    expect(selectionToTable(text)).toEqual({
+      delimiter,
+      rows: [
+        ['Name', 'Role'],
+        ['Ada', 'Engineer'],
+      ],
+    });
+  });
+
+  it('falls back to one column when delimiter counts are inconsistent', () => {
+    expect(selectionToTable('One,Two\nThree\nFour,Five,Six')).toEqual({
+      delimiter: null,
+      rows: [['One,Two'], ['Three'], ['Four,Five,Six']],
+    });
+  });
+
+  it('uses the first row as the Markdown header and escapes cell pipes', () => {
+    expect(selectionToTableMarkdown('Name,Notes\nAda,A | B')).toBe(
+      '| Name | Notes |\n| --- | --- |\n| Ada | A \\| B |',
+    );
+  });
+});
+
+describe('selectionToTaskListMarkdown', () => {
+  it('turns non-empty selected lines into unchecked tasks', () => {
+    expect(selectionToTaskListMarkdown('Buy milk\n\nCall Sam')).toBe(
+      '- [ ] Buy milk\n- [ ] Call Sam',
+    );
+  });
+
+  it('normalizes list markers and retains existing checked state', () => {
+    const text = '- first\n2. second\n- [x] already done';
+    expect(selectionToTaskItems(text)).toEqual([
+      { checked: false, text: 'first' },
+      { checked: false, text: 'second' },
+      { checked: true, text: 'already done' },
+    ]);
+    expect(selectionToTaskListMarkdown(text)).toBe('- [ ] first\n- [ ] second\n- [x] already done');
+  });
+});

package/src/__tests__/tiptapBridge.test.ts

@@ -1,4 +1,6 @@
 import { describe, it, expect } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
 import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
 
 // ---------------------------------------------------------------------------
@@ -66,25 +68,25 @@ describe('markdownToTiptap', () => {
   });
 
   it('converts mentions to chip spans', () => {
-    const html = markdownToTiptap('Hey @[Leo](gezel:leo), take a look.');
+    const html = markdownToTiptap('Hey @[Leo](person:leo), take a look.');
     expect(html).toContain('data-mention="true"');
-    expect(html).toContain('data-kind="gezel"');
+    expect(html).toContain('data-kind="person"');
     expect(html).toContain('data-id="leo"');
     expect(html).toContain('data-label="Leo"');
     // "@Leo" appears inside the chip — NOT as a broken link
-    expect(html).not.toContain('href="gezel:leo"');
+    expect(html).not.toContain('href="person:leo"');
   });
 
   it('tolerates the backslash-escaped colon remark emits', () => {
-    // remark-stringify sometimes emits `gezel\:leo` to disambiguate
+    // remark-stringify sometimes emits `person\:leo` to disambiguate
     // from autolink syntax. The bridge should still recognize it.
-    const html = markdownToTiptap('Hey @[Leo](gezel\\:leo).');
-    expect(html).toContain('data-kind="gezel"');
+    const html = markdownToTiptap('Hey @[Leo](person\\:leo).');
+    expect(html).toContain('data-kind="person"');
     expect(html).toContain('data-id="leo"');
   });
 
   it('round-trips mentions back to markdown', () => {
-    const md = 'Hey @[Leo](gezel:leo), ping @[Tess](gezel:tess) too.';
+    const md = 'Hey @[Leo](person:leo), ping @[Tess](person:tess) too.';
     const html = markdownToTiptap(md);
     const back = tiptapToMarkdown(html);
     expect(back.trim()).toBe(md);
@@ -120,6 +122,15 @@ describe('markdownToTiptap', () => {
     expect(html).toContain('const x = 1;');
   });
 
+  it('keeps squisq annotation syntax literal inside fenced code', () => {
+    const md = '```markdown\n## Example {[sectionHeader]}\n{[github]}\n{[ ]}\n```';
+    const html = markdownToTiptap(md);
+
+    expect(html).not.toContain('data-template=');
+    expect(html).not.toContain('data-icon=');
+    expect(tiptapToMarkdown(html).trim()).toBe(md);
+  });
+
   it('converts unordered lists', () => {
     const md = '- Item one\n- Item two\n- Item three';
     const html = markdownToTiptap(md);
@@ -158,6 +169,12 @@ describe('markdownToTiptap', () => {
     expect(html).toContain('This is a quote');
   });
 
+  it('groups consecutive quote lines into one visual blockquote', () => {
+    const html = markdownToTiptap('> A wise quote\n> -- Ada');
+    expect(html.match(/<blockquote>/g)).toHaveLength(1);
+    expect(html).toContain('<blockquote><p>A wise quote</p><p>-- Ada</p></blockquote>');
+  });
+
   it('converts horizontal rules', () => {
     const md = 'Before\n\n---\n\nAfter';
     const html = markdownToTiptap(md);
@@ -312,6 +329,13 @@ describe('tiptapToMarkdown', () => {
     expect(md).toContain('A wise quote');
   });
 
+  it('keeps adjacent blockquote nodes on adjacent markdown lines', () => {
+    const md = tiptapToMarkdown(
+      '<blockquote><p>A wise quote</p></blockquote><blockquote><p>-- Ada</p></blockquote>',
+    );
+    expect(md).toBe('> A wise quote\n> -- Ada\n');
+  });
+
   it('converts horizontal rules', () => {
     const md = tiptapToMarkdown('<p>Before</p><hr><p>After</p>');
     expect(md).toContain('---');
@@ -466,6 +490,32 @@ describe('round-trip: markdownToTiptap → tiptapToMarkdown', () => {
     expect(roundTrip('> Important note')).toContain('> Important note');
   });
 
+  it('does not add a blank line before a quote attribution', () => {
+    const md = [
+      '### A Famous Quote {[quote]}',
+      '',
+      '> "The best way to predict the future is to invent it."',
+      '> -- Alan Kay',
+    ].join('\n');
+
+    expect(roundTrip(md)).toBe(md + '\n');
+  });
+
+  it('does not add a blank line after Tiptap normalizes a quote attribution', () => {
+    const md = ['> "The best way to predict the future is to invent it."', '> -- Alan Kay'].join(
+      '\n',
+    );
+    const editor = new Editor({
+      extensions: [StarterKit],
+      content: markdownToTiptap(md),
+    });
+
+    const normalizedHtml = editor.getHTML();
+    expect(normalizedHtml.match(/<blockquote>/g)).toHaveLength(1);
+    expect(tiptapToMarkdown(normalizedHtml)).toBe(md + '\n');
+    editor.destroy();
+  });
+
   it('preserves unordered lists', () => {
     const result = roundTrip('- Alpha\n- Beta');
     expect(result).toContain('- Alpha');

package/src/__tests__/tiptapImageRoundTrip.test.ts

@@ -12,7 +12,7 @@ import { tiptapToMarkdown } from '../tiptapBridge';
  *   when a pasted / uploaded image is inserted into the tiptap
  *   editor via `setImage({src, alt})`, does the markdown we serialize
  *   out (via `getHTML()` + `tiptapToMarkdown`) contain
- *   `![alt](src)` — the shape the gezel service's image-attachment
+ *   `![alt](src)` — the shape the downstream service's image-attachment
  *   extractor expects?
  *
  * Unit tests on the regex alone have been green the whole time, and

package/src/__tests__/toolbarSelectionConversion.test.tsx

@@ -0,0 +1,190 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+import { EditorProvider, useEditorContext, type EditorContextValue } from '../EditorContext';
+import { Toolbar } from '../Toolbar';
+import { tiptapToMarkdown } from '../tiptapBridge';
+
+let currentContext: EditorContextValue | null = null;
+
+function ContextProbe() {
+  currentContext = useEditorContext();
+  return null;
+}
+
+function context(): EditorContextValue {
+  if (!currentContext) throw new Error('EditorContext has not mounted');
+  return currentContext;
+}
+
+function monacoWithSelection(selectedText: string) {
+  const selection = {
+    startLineNumber: 1,
+    startColumn: 1,
+    endLineNumber: selectedText.split('\n').length,
+    endColumn: 1,
+  };
+  const model = {
+    getValue: () => selectedText,
+    getValueInRange: () => selectedText,
+    getLineContent: () => selectedText.split('\n')[0] ?? '',
+  };
+  const disposable = { dispose: vi.fn() };
+  const executeEdits = vi.fn();
+  const editor = {
+    getSelection: () => selection,
+    getModel: () => model,
+    getPosition: () => ({ lineNumber: 1, column: 1 }),
+    onDidChangeCursorPosition: () => disposable,
+    onDidChangeModelContent: () => disposable,
+    executeEdits,
+    focus: vi.fn(),
+  };
+  return { editor, executeEdits, selection };
+}
+
+beforeEach(() => {
+  currentContext = null;
+  if (typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: () => ({
+        matches: false,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      }),
+    });
+  }
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class ResizeObserverStub {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver;
+  }
+});
+
+describe('<Toolbar> selection conversion menu', () => {
+  it('shows Convert above Insert and replaces a delimited Monaco selection', async () => {
+    const source = 'Name,Role\nAda,Engineer\n';
+    const { editor, executeEdits, selection } = monacoWithSelection(source);
+    render(
+      <EditorProvider initialMarkdown={source} initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <ContextProbe />
+      </EditorProvider>,
+    );
+    act(() => context().setMonacoEditor(editor as never));
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    const menu = await screen.findByRole('menu');
+    expect(
+      within(menu)
+        .getAllByText(/^(Convert|Insert)$/)
+        .map((node) => node.textContent),
+    ).toEqual(['Convert', 'Insert']);
+
+    fireEvent.click(within(menu).getByRole('menuitem', { name: 'Convert selection to Table' }));
+
+    expect(executeEdits).toHaveBeenCalledWith('toolbar-convert-selection', [
+      {
+        range: selection,
+        text: '| Name | Role |\n| --- | --- |\n| Ada | Engineer |\n',
+      },
+    ]);
+  });
+
+  it('does not show Convert without selected text', async () => {
+    const { editor } = monacoWithSelection('');
+    render(
+      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <ContextProbe />
+      </EditorProvider>,
+    );
+    act(() => context().setMonacoEditor(editor as never));
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    const menu = await screen.findByRole('menu');
+    expect(within(menu).queryByText('Convert')).toBeNull();
+    expect(within(menu).queryByRole('menuitem', { name: 'Convert selection to Table' })).toBeNull();
+  });
+
+  it('wraps the selected Monaco text in the chosen code-snippet language', async () => {
+    const source = 'const answer = 42;';
+    const { editor, executeEdits, selection } = monacoWithSelection(source);
+    render(
+      <EditorProvider initialMarkdown={source} initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <ContextProbe />
+      </EditorProvider>,
+    );
+    act(() => context().setMonacoEditor(editor as never));
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    fireEvent.click(await screen.findByRole('menuitem', { name: 'Insert Code Snippet' }));
+    fireEvent.click(
+      await screen.findByRole('menuitem', { name: 'Insert JavaScript code snippet' }),
+    );
+
+    expect(executeEdits).toHaveBeenCalledWith('toolbar-code-snippet', [
+      {
+        range: selection,
+        text: '\n```javascript\nconst answer = 42;\n```\n',
+      },
+    ]);
+  });
+
+  it('replaces fully selected Write paragraphs without leaving a blank paragraph', async () => {
+    const editor = new Editor({
+      extensions: [StarterKit, TaskList, TaskItem],
+      content: '<p>First</p><p>Second</p><p>Third</p><h2>After</h2>',
+    });
+    const paragraphs: Array<{ pos: number; contentSize: number }> = [];
+    editor.state.doc.descendants((node, pos) => {
+      if (node.type.name === 'paragraph') {
+        paragraphs.push({ pos, contentSize: node.content.size });
+      }
+    });
+    const first = paragraphs[0];
+    const third = paragraphs[2];
+    expect(first).toBeDefined();
+    expect(third).toBeDefined();
+    editor.commands.setTextSelection({
+      from: first.pos + 1,
+      to: third.pos + 1 + third.contentSize,
+    });
+
+    render(
+      <EditorProvider
+        initialMarkdown="First\n\nSecond\n\nThird\n\n## After"
+        initialView="wysiwyg"
+        allowRecording={false}
+      >
+        <Toolbar />
+        <ContextProbe />
+      </EditorProvider>,
+    );
+    act(() => context().setTiptapEditor(editor));
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    fireEvent.click(
+      await screen.findByRole('menuitem', { name: 'Convert selection to Task List' }),
+    );
+
+    await waitFor(() => {
+      expect(editor.getJSON().content?.map((node) => node.type)).toEqual(['taskList', 'heading']);
+    });
+    expect(tiptapToMarkdown(editor.getHTML())).toBe(
+      '- [ ] First\n- [ ] Second\n- [ ] Third\n\n## After\n',
+    );
+    editor.destroy();
+  });
+});

package/src/__tests__/writeCanvasSettings.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { writeCanvasSettingsStyle } from '../writeCanvasSettings';
+
+describe('writeCanvasSettingsStyle', () => {
+  it('maps serializable settings to Write canvas CSS variables', () => {
+    expect(writeCanvasSettingsStyle({ textSize: 18, lineSpacing: 1.9 })).toEqual({
+      '--squisq-write-text-size': '18px',
+      '--squisq-write-line-spacing': '1.9',
+    });
+  });
+
+  it('ignores invalid host values instead of emitting broken CSS', () => {
+    expect(writeCanvasSettingsStyle({ textSize: 0, lineSpacing: Number.NaN })).toEqual({});
+  });
+});