@bendyline/squisq-editor-react 2.0.1 → 2.1.0

package/src/__tests__/editorShellProps.test.tsx

@@ -176,6 +176,29 @@ describe('<EditorShell> colorScheme prop', () => {
   });
 });
 
+describe('<EditorShell> Write canvas settings', () => {
+  it('exposes host settings as live CSS variables on the shell', () => {
+    const { container, rerender } = render(
+      <EditorShell
+        initialMarkdown="Paragraph"
+        writeCanvasSettings={{ textSize: 18, lineSpacing: 1.9 }}
+      />,
+    );
+    const shell = container.querySelector<HTMLElement>('.squisq-editor-shell')!;
+    expect(shell.style.getPropertyValue('--squisq-write-text-size')).toBe('18px');
+    expect(shell.style.getPropertyValue('--squisq-write-line-spacing')).toBe('1.9');
+
+    rerender(
+      <EditorShell
+        initialMarkdown="Paragraph"
+        writeCanvasSettings={{ textSize: 20, lineSpacing: 2 }}
+      />,
+    );
+    expect(shell.style.getPropertyValue('--squisq-write-text-size')).toBe('20px');
+    expect(shell.style.getPropertyValue('--squisq-write-line-spacing')).toBe('2');
+  });
+});
+
 describe('RawEditor monacoTheme prop', () => {
   it('maps colorScheme="dark" to monacoTheme="vs-dark"', () => {
     render(<EditorShell initialMarkdown="# hi" initialView="raw" colorScheme="dark" />);
@@ -482,4 +505,46 @@ describe('<Toolbar> Insert menu', () => {
       );
     });
   });
+
+  it('opens the Mermaid type gallery and inserts the selected diagram grammar', async () => {
+    render(
+      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <MarkdownSourceProbe />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    fireEvent.click(await screen.findByRole('menuitem', { name: 'Complex Diagram (Mermaid)' }));
+    expect(await screen.findByRole('menu', { name: 'Mermaid diagram type' })).toBeTruthy();
+    expect(screen.getByText(/Flow direction remains a separate edit/)).toBeTruthy();
+    fireEvent.click(await screen.findByRole('menuitem', { name: 'Insert Gantt Mermaid diagram' }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('markdown-source').textContent).toContain(
+        '```mermaid\ngantt\n  title Project plan\n  dateFormat YYYY-MM-DD',
+      );
+    });
+  });
+
+  it('adds a typed code fence from the Code Snippet submenu', async () => {
+    render(
+      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <MarkdownSourceProbe />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    fireEvent.click(await screen.findByRole('menuitem', { name: 'Insert Code Snippet' }));
+    fireEvent.click(
+      await screen.findByRole('menuitem', { name: 'Insert TypeScript code snippet' }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('markdown-source').textContent).toContain(
+        "```typescript\nconst message: string = 'Hello, world!';\n```",
+      );
+    });
+  });
 });

package/src/__tests__/findMode.test.tsx

@@ -0,0 +1,104 @@
+/** @vitest-environment jsdom */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+vi.mock('../RawEditor', () => ({
+  RawEditor: () => <div data-testid="raw-editor-stub">Alpha beta alpha</div>,
+}));
+vi.mock('../WysiwygEditor', () => ({
+  WysiwygEditor: () => <div data-testid="wysiwyg-editor-stub" />,
+}));
+vi.mock('../PreviewPanel', () => ({
+  PreviewPanel: () => <div data-testid="preview-panel">Alpha beta alpha</div>,
+}));
+
+import { EditorShell } from '../EditorShell';
+
+beforeEach(() => {
+  if (typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(() => false),
+      }),
+    });
+  }
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class ResizeObserverStub {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    (globalThis as unknown as { ResizeObserver: typeof ResizeObserverStub }).ResizeObserver =
+      ResizeObserverStub;
+  }
+});
+
+describe('<EditorShell> Find mode', () => {
+  it('does not render a Find trigger or textbox by default', () => {
+    render(<EditorShell initialMarkdown="Alpha" initialView="raw" />);
+    expect(screen.queryByRole('search', { name: 'Find in document' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Close find' })).toBeNull();
+  });
+
+  it('shows search beside the view tabs, clears middle/left actions, and preserves right items', () => {
+    const onFindModeChange = vi.fn();
+    const { container } = render(
+      <EditorShell
+        initialMarkdown="Alpha beta alpha"
+        initialView="raw"
+        findMode
+        onFindModeChange={onFindModeChange}
+        toolbarSlotLeft={<span data-testid="left-slot">Left</span>}
+        toolbarSlotAfterActions={<span data-testid="middle-slot">Middle</span>}
+        toolbarSlotRight={<span data-testid="right-slot">Right</span>}
+      />,
+    );
+
+    const tabs = container.querySelector('.squisq-toolbar-view-tabs');
+    const search = screen.getByRole('search', { name: 'Find in document' });
+    expect(tabs?.nextElementSibling).toBe(search);
+    expect(screen.queryByTestId('left-slot')).toBeNull();
+    expect(screen.queryByTestId('middle-slot')).toBeNull();
+    expect(screen.getByTestId('right-slot')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Bold' })).toBeNull();
+    expect(screen.getByRole('button', { name: 'Document settings' })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close find' }));
+    expect(onFindModeChange).toHaveBeenCalledWith(false);
+  });
+
+  it('responds to host-controlled mode changes and supports Escape to close', () => {
+    const onFindModeChange = vi.fn();
+    const { rerender } = render(
+      <EditorShell
+        initialMarkdown="Alpha"
+        initialView="raw"
+        findMode={false}
+        onFindModeChange={onFindModeChange}
+      />,
+    );
+    expect(screen.queryByRole('search', { name: 'Find in document' })).toBeNull();
+
+    rerender(
+      <EditorShell
+        initialMarkdown="Alpha"
+        initialView="raw"
+        findMode
+        onFindModeChange={onFindModeChange}
+      />,
+    );
+    const input = screen.getByRole('searchbox', { name: 'Find in document' });
+    expect(document.activeElement).toBe(input);
+    fireEvent.keyDown(input, { key: 'Escape' });
+    expect(onFindModeChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/__tests__/findModel.test.ts

@@ -0,0 +1,55 @@
+/** @vitest-environment jsdom */
+
+import { afterEach, describe, expect, it } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { FindHighlightExtension, updateTiptapFindHighlights } from '../find/FindHighlightExtension';
+import { findProseMirrorMatches, findTextMatches, normalizeFindIndex } from '../find/findModel';
+
+const editors: Editor[] = [];
+
+afterEach(() => {
+  editors.splice(0).forEach((editor) => editor.destroy());
+});
+
+describe('Find model', () => {
+  it('finds case-insensitive literal matches and escapes punctuation', () => {
+    expect(findTextMatches('A+b a+B A-b', 'a+b')).toEqual([
+      { from: 0, to: 3 },
+      { from: 4, to: 7 },
+    ]);
+  });
+
+  it('wraps next and previous indexes', () => {
+    expect(normalizeFindIndex(3, 3)).toBe(0);
+    expect(normalizeFindIndex(-1, 3)).toBe(2);
+    expect(normalizeFindIndex(10, 0)).toBe(0);
+  });
+
+  it('matches across adjacent formatted spans but not across paragraphs', () => {
+    const editor = new Editor({
+      extensions: [StarterKit],
+      content: '<p>Hello <strong>wide</strong> world</p><p>Hello world</p>',
+    });
+    editors.push(editor);
+
+    expect(findProseMirrorMatches(editor.state.doc, 'hello wide world')).toHaveLength(1);
+    expect(findProseMirrorMatches(editor.state.doc, 'worldhello')).toHaveLength(0);
+  });
+
+  it('decorates every WYSIWYG match and marks the selected one separately', () => {
+    const element = document.createElement('div');
+    document.body.append(element);
+    const editor = new Editor({
+      element,
+      extensions: [StarterKit, FindHighlightExtension],
+      content: '<p>Alpha alpha ALPHA</p>',
+    });
+    editors.push(editor);
+
+    expect(updateTiptapFindHighlights(editor, 'alpha', 1)).toBe(3);
+    expect(element.querySelectorAll('.squisq-find-match')).toHaveLength(3);
+    expect(element.querySelectorAll('.squisq-find-match--selected')).toHaveLength(1);
+    expect(element.querySelector('.squisq-find-match--selected')?.textContent).toBe('alpha');
+  });
+});

package/src/__tests__/markdownCodeFence.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+import {
+  isMarkdownFencedCodeLine,
+  markdownFencedCodeLineMask,
+  maskMarkdownFencedCode,
+} from '../markdownCodeFence';
+
+describe('markdown fenced-code detection', () => {
+  it('marks opening, body, and closing lines without masking surrounding prose', () => {
+    const source = [
+      'Before {[github]}',
+      '```md',
+      '## Example {[sectionHeader]}',
+      '```',
+      'After',
+    ].join('\n');
+
+    expect(markdownFencedCodeLineMask(source)).toEqual([false, true, true, true, false]);
+    expect(isMarkdownFencedCodeLine(source, 3)).toBe(true);
+    expect(isMarkdownFencedCodeLine(source, 5)).toBe(false);
+  });
+
+  it('supports tilde fences, longer closers, indentation, and unclosed fences', () => {
+    const source = [
+      '  ~~~~ts',
+      '{[audio src=inside.mp3]}',
+      '  ~~~~~',
+      'text',
+      '```',
+      '{[quote]}',
+    ].join('\r\n');
+
+    expect(markdownFencedCodeLineMask(source)).toEqual([true, true, true, false, true, true]);
+  });
+
+  it('masks fenced contents while preserving offsets and line endings', () => {
+    const source = 'Outside\r\n```md\r\n{[image src=inside.png]}\r\n```\r\nAfter';
+    const masked = maskMarkdownFencedCode(source);
+
+    expect(masked).toHaveLength(source.length);
+    expect(masked).toContain('Outside\r\n');
+    expect(masked).not.toContain('inside.png');
+    expect(masked.endsWith('\r\nAfter')).toBe(true);
+  });
+});

package/src/__tests__/mediaReferences.test.ts

@@ -39,6 +39,21 @@ describe('collectMediaReferencesFromMarkdown', () => {
       'video/clip with spaces.webm',
     ]);
   });
+
+  it('ignores annotations and other reference-shaped text inside code fences', () => {
+    const refs = collectMediaReferencesFromMarkdown(
+      [
+        '## Real {[image src=images/outside.png]}',
+        '```markdown',
+        '{[audio src=audio/inside.mp3]}',
+        '![Example](images/inside.png)',
+        '<video src="video/inside.webm"></video>',
+        '```',
+      ].join('\n'),
+    );
+
+    expect([...refs]).toEqual(['images/outside.png']);
+  });
 });
 
 describe('removeMediaReferencesFromMarkdown', () => {

package/src/__tests__/previewControls.test.tsx

@@ -387,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__/tiptapBridge.test.ts

@@ -122,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);

package/src/__tests__/toolbarSelectionConversion.test.tsx

@@ -31,6 +31,7 @@ function monacoWithSelection(selectedText: string) {
     endColumn: 1,
   };
   const model = {
+    getValue: () => selectedText,
     getValueInRange: () => selectedText,
     getLineContent: () => selectedText.split('\n')[0] ?? '',
   };
@@ -116,6 +117,31 @@ describe('<Toolbar> selection conversion menu', () => {
     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],

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

package/src/asciiDiagram/__tests__/AsciiDiagramExtension.test.ts

@@ -6,7 +6,7 @@
 
 import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
-import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 import { markdownToTiptap } from '../../tiptapBridge';
 import { HeadingWithTemplate } from '../../TemplateAnnotation';
 import {
@@ -138,6 +138,25 @@ describe('AsciiDiagramExtension registry', () => {
     expect(JSON.stringify(editor.state.doc.toJSON())).toBe(json);
   });
 
+  it('shows zoom, fit, and fullscreen affordances with fit active by default', async () => {
+    const editor = makeEditor('```diagram\n' + ART_A + '\n```\n');
+    const root = editor.view.dom;
+    await vi.waitFor(() => {
+      expect(root.querySelector('[aria-label="Diagram view"]')).not.toBeNull();
+    });
+
+    expect(root.querySelector('button[aria-label="Zoom out"]')).not.toBeNull();
+    expect(root.querySelector('button[aria-label="Zoom in"]')).not.toBeNull();
+    expect(root.querySelector('button[title^="Maximize"]')).not.toBeNull();
+
+    const fitButton = root.querySelector<HTMLButtonElement>('button[aria-label="Fit diagram"]')!;
+    expect(fitButton.getAttribute('aria-pressed')).toBe('true');
+    root.querySelector<HTMLButtonElement>('button[aria-label="Zoom in"]')?.click();
+    await vi.waitFor(() => expect(fitButton.getAttribute('aria-pressed')).toBe('false'));
+    fitButton.click();
+    await vi.waitFor(() => expect(fitButton.getAttribute('aria-pressed')).toBe('true'));
+  });
+
   it('enabled: false disables the plugin entirely', () => {
     const editor = makeEditor('```\n' + ART_A + '\n```\n', { enabled: false });
     expect(ASCII_DIAGRAM_KEY.getState(editor.state)).toBeUndefined();

package/src/buildPreviewDoc.ts

@@ -44,6 +44,9 @@ function extractBodyText(contents: MarkdownBlockNode[] | undefined): string {
   if (!contents || contents.length === 0) return '';
   const parts: string[] = [];
   for (const node of contents) {
+    // Mermaid fences are visual source, not narrative copy. They stay on the
+    // slide as `contents` and materialize into Mermaid layers downstream.
+    if (node.type === 'code' && node.lang?.trim().toLowerCase() === 'mermaid') continue;
     parts.push(extractRichText(node));
   }
   return parts.join('\n').trim();
@@ -247,13 +250,12 @@ function blockToSlide(
     // block has no previous slide to transition in from.
     transition: block.transition ?? (index > 0 ? { type: 'fade', duration: 0.5 } : undefined),
     title: headingText,
-    // Custom templates need access to the source block's body content
-    // + children so their token resolver (`{content}`, `{children}`,
-    // `{image:N}`) substitutes against the user's prose, not just the
-    // heading. Built-in templates don't read these fields and risk
-    // surprising overlap with their typed inputs, so we only attach
-    // them when the slide actually maps to a custom template.
-    ...(isCustomTemplate && block.contents ? { contents: block.contents } : {}),
+    // Preserve body nodes on every slide. Built-in templates ignore this
+    // structural field, while the canonical materializer uses it to retain
+    // authored rich elements (Mermaid fences today; other media can follow)
+    // independently of the selected visual template.
+    ...(block.contents ? { contents: block.contents } : {}),
+    // Custom templates additionally consume child blocks through tokens.
     ...(isCustomTemplate && block.children ? { children: block.children } : {}),
     ...defaults,
     ...extraFields,