@bendyline/squisq-editor-react 2.0.0 → 2.1.0

package/src/mermaid/MermaidShapePalette.tsx

@@ -0,0 +1,245 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
+import { MERMAID_FLOWCHART_SHAPES, type MermaidFlowchartShapeId } from './mermaidShapes';
+
+export interface MermaidShapePaletteProps {
+  selected?: MermaidFlowchartShapeId;
+  onPick: (shape: MermaidFlowchartShapeId) => void;
+  onClose: () => void;
+}
+
+const CATEGORIES = ['Basic', 'Process', 'Data', 'Documents', 'Symbols'] as const;
+const PALETTE_WIDTH = 360;
+const PALETTE_MAX_HEIGHT = 520;
+const PALETTE_GAP = 6;
+const VIEWPORT_GUTTER = 8;
+
+interface PalettePosition extends CSSProperties {
+  position: 'fixed';
+  top: number;
+  left: number;
+  right: 'auto';
+  width: number;
+  maxHeight: number;
+}
+
+export function MermaidShapePalette({ selected, onPick, onClose }: MermaidShapePaletteProps) {
+  const [query, setQuery] = useState('');
+  const [position, setPosition] = useState<PalettePosition | null>(null);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Element | null;
+      if (target?.closest('.squisq-scene-block-toolbar')) return;
+      if (ref.current && !ref.current.contains(target)) onClose();
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose();
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [onClose]);
+
+  const sections = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    return CATEGORIES.map((category) => ({
+      category,
+      shapes: MERMAID_FLOWCHART_SHAPES.filter(
+        (shape) =>
+          shape.category === category &&
+          (!normalized ||
+            shape.label.toLowerCase().includes(normalized) ||
+            shape.id.includes(normalized) ||
+            ('aliases' in shape &&
+              (shape.aliases as readonly string[]).some((alias) => alias.includes(normalized)))),
+      ),
+    })).filter((section) => section.shapes.length > 0);
+  }, [query]);
+
+  useLayoutEffect(() => {
+    const palette = ref.current;
+    const anchor = palette?.parentElement;
+    if (!palette || !anchor) return;
+
+    const editorShell = palette.closest('.squisq-editor-shell') as HTMLElement | null;
+    const statusBar = editorShell?.querySelector('.squisq-status-bar') as HTMLElement | null;
+
+    const measure = () => {
+      const anchorRect = anchor.getBoundingClientRect();
+      const shellRect = editorShell?.getBoundingClientRect();
+      const statusRect = statusBar?.getBoundingClientRect();
+      const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+      const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+      const boundaryTop = Math.max(VIEWPORT_GUTTER, (shellRect?.top ?? 0) + VIEWPORT_GUTTER);
+      const boundaryBottom =
+        Math.min(viewportHeight, statusRect?.top ?? viewportHeight) - VIEWPORT_GUTTER;
+      const targetHeight = Math.min(PALETTE_MAX_HEIGHT, Math.floor(viewportHeight * 0.7));
+      const belowTop = anchorRect.bottom + PALETTE_GAP;
+      const roomBelow = Math.max(0, boundaryBottom - belowTop);
+      const roomAbove = Math.max(0, anchorRect.top - PALETTE_GAP - boundaryTop);
+      const opensAbove = roomBelow < Math.min(targetHeight, 220) && roomAbove > roomBelow;
+      const availableHeight = opensAbove ? roomAbove : roomBelow;
+      const maxHeight = Math.max(0, Math.min(targetHeight, Math.floor(availableHeight)));
+      const top = opensAbove
+        ? Math.max(boundaryTop, anchorRect.top - PALETTE_GAP - maxHeight)
+        : belowTop;
+
+      const width = Math.max(0, Math.min(PALETTE_WIDTH, viewportWidth - VIEWPORT_GUTTER * 2));
+      const opensLeft = Boolean(anchor.closest('.squisq-scene-side-toolbar'));
+      const preferredLeft = opensLeft ? anchorRect.left - PALETTE_GAP - width : anchorRect.left;
+      const left = Math.max(
+        VIEWPORT_GUTTER,
+        Math.min(preferredLeft, viewportWidth - width - VIEWPORT_GUTTER),
+      );
+
+      const next: PalettePosition = {
+        position: 'fixed',
+        top: Math.round(top),
+        left: Math.round(left),
+        right: 'auto',
+        width: Math.round(width),
+        maxHeight,
+      };
+      setPosition((current) =>
+        current &&
+        current.top === next.top &&
+        current.left === next.left &&
+        current.width === next.width &&
+        current.maxHeight === next.maxHeight
+          ? current
+          : next,
+      );
+    };
+
+    measure();
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
+    observer?.observe(anchor);
+    if (editorShell) observer?.observe(editorShell);
+    if (statusBar) observer?.observe(statusBar);
+    window.addEventListener('resize', measure);
+    window.addEventListener('scroll', measure, true);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener('resize', measure);
+      window.removeEventListener('scroll', measure, true);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className="squisq-mermaid-shape-palette"
+      role="dialog"
+      aria-label="Mermaid node shapes"
+      style={position ?? undefined}
+    >
+      <input
+        className="squisq-mermaid-shape-search"
+        type="search"
+        value={query}
+        placeholder="Search 48 Mermaid shapes…"
+        autoFocus
+        onChange={(event) => setQuery(event.target.value)}
+      />
+      <div className="squisq-mermaid-shape-scroll">
+        {sections.map((section) => (
+          <section key={section.category}>
+            <div className="squisq-mermaid-shape-heading">{section.category}</div>
+            <div className="squisq-mermaid-shape-grid">
+              {section.shapes.map((shape) => (
+                <button
+                  key={shape.id}
+                  type="button"
+                  className={`squisq-mermaid-shape-item${selected === shape.id ? ' squisq-mermaid-shape-item--selected' : ''}`}
+                  onClick={() => onPick(shape.id)}
+                  title={`${shape.label} (${shape.id})`}
+                  aria-label={`${shape.label} shape`}
+                  aria-pressed={selected === shape.id}
+                >
+                  <MermaidShapeThumb shape={shape.id} />
+                  <span>{shape.label}</span>
+                </button>
+              ))}
+            </div>
+          </section>
+        ))}
+        {sections.length === 0 && (
+          <div className="squisq-mermaid-shape-empty">No matching Mermaid shape.</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function MermaidShapeThumb({ shape }: { shape: MermaidFlowchartShapeId }) {
+  const common = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.5 } as const;
+  if (shape.includes('circ') || shape === 'circle') {
+    return (
+      <svg viewBox="0 0 34 24" aria-hidden="true">
+        <ellipse cx="17" cy="12" rx="10" ry="9" {...common} />
+        {(shape === 'dbl-circ' || shape === 'fr-circ' || shape === 'cross-circ') && (
+          <ellipse cx="17" cy="12" rx="7" ry="6" {...common} />
+        )}
+      </svg>
+    );
+  }
+  if (shape === 'diam' || shape === 'hourglass' || shape === 'bow-rect') {
+    return (
+      <svg viewBox="0 0 34 24" aria-hidden="true">
+        <path
+          d={shape === 'diam' ? 'M17 2 31 12 17 22 3 12Z' : 'M4 3 30 3 20 12 30 21 4 21 14 12Z'}
+          {...common}
+        />
+      </svg>
+    );
+  }
+  if (shape === 'tri' || shape === 'flip-tri') {
+    return (
+      <svg viewBox="0 0 34 24" aria-hidden="true">
+        <path d={shape === 'tri' ? 'M17 2 31 21 3 21Z' : 'M3 3 31 3 17 22Z'} {...common} />
+      </svg>
+    );
+  }
+  if (shape === 'cloud') {
+    return (
+      <svg viewBox="0 0 34 24" aria-hidden="true">
+        <path d="M8 20c-7 0-7-9-1-10C7 3 16 1 20 6c6-2 10 3 8 7 6 4 1 8-4 8Z" {...common} />
+      </svg>
+    );
+  }
+  if (shape === 'cyl' || shape === 'h-cyl' || shape === 'lin-cyl') {
+    return (
+      <svg viewBox="0 0 34 24" aria-hidden="true">
+        <path d="M5 5c0-4 24-4 24 0v14c0 4-24 4-24 0ZM5 5c0 4 24 4 24 0" {...common} />
+      </svg>
+    );
+  }
+  if (shape === 'hex' || shape.includes('pent') || shape.startsWith('trap')) {
+    return (
+      <svg viewBox="0 0 34 24" aria-hidden="true">
+        <path d="M8 3h18l5 9-5 9H8l-5-9Z" {...common} />
+      </svg>
+    );
+  }
+  return (
+    <svg viewBox="0 0 34 24" aria-hidden="true">
+      <rect
+        x="3"
+        y="4"
+        width="28"
+        height="16"
+        rx={shape === 'rounded' || shape === 'stadium' || shape === 'delay' ? 8 : 1}
+        {...common}
+      />
+      {(shape.startsWith('lin-') || shape.startsWith('fr-') || shape.startsWith('div-')) && (
+        <path d="M8 4v16M26 4v16" {...common} />
+      )}
+    </svg>
+  );
+}
+
+export default MermaidShapePalette;

package/src/mermaid/__tests__/MermaidDiagramExtension.test.ts

@@ -0,0 +1,361 @@
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { fireEvent } from '@testing-library/react';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { markdownToTiptap, tiptapToMarkdown } from '../../tiptapBridge';
+import { replaceAsciiFenceText } from '../../asciiDiagram/asciiDiagramCommands';
+import {
+  MERMAID_DIAGRAM_KEY,
+  MermaidDiagramExtension,
+  findMermaidDiagramBlockPos,
+  isMermaidSourceVisible,
+  toggleMermaidSource,
+} from '../MermaidDiagramExtension';
+
+vi.mock('mermaid', () => ({
+  default: {
+    initialize: vi.fn(),
+    mermaidAPI: {
+      getDiagramFromText: vi.fn(async () => ({
+        type: 'flowchart-v2',
+        db: {
+          getVertices: () =>
+            new Map([
+              [
+                'start',
+                {
+                  id: 'start',
+                  domId: 'flowchart-start-0',
+                  text: 'Start',
+                  type: 'square',
+                  classes: [],
+                },
+              ],
+              [
+                'next',
+                {
+                  id: 'next',
+                  domId: 'flowchart-next-1',
+                  text: 'Next',
+                  type: 'square',
+                  classes: [],
+                },
+              ],
+            ]),
+          getEdges: () => [
+            {
+              id: 'L_start_next_0',
+              start: 'start',
+              end: 'next',
+              text: '',
+              type: 'arrow_point',
+            },
+          ],
+          getDirection: () => 'LR',
+        },
+      })),
+    },
+    render: vi.fn(async (id: string) => ({
+      svg: `<svg id="${id}" viewBox="0 0 200 100"><g class="node" id="${id}-flowchart-start-0"><rect x="5" y="10" width="70" height="40" /></g><g class="node" id="${id}-flowchart-next-1"><rect x="125" y="10" width="70" height="40" /></g><path class="flowchart-link" data-id="L_start_next_0" d="M75 30L125 30" /></svg>`,
+      diagramType: 'flowchart-v2',
+    })),
+  },
+}));
+
+const SAMPLE = [
+  'flowchart LR',
+  '  client["MCP client"] <--> transport["Local stdio transport"]',
+  '  transport <--> sdk["MCP SDK server"]',
+  '',
+  '  subgraph docblocks["DocBlocks MCP process"]',
+  '    sdk --> tools["19 strict tools"]',
+  '    tools --> guard["Guarded expensive operations"]',
+  '  end',
+].join('\n');
+
+const editors: Editor[] = [];
+
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver !== 'undefined') return;
+  class ResizeObserverStub {
+    observe(): void {}
+    unobserve(): void {}
+    disconnect(): void {}
+  }
+  globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver;
+});
+
+function makeEditor(markdown: string, enabled = true): Editor {
+  const editor = new Editor({
+    extensions: [
+      StarterKit.configure({
+        codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
+      }),
+      MermaidDiagramExtension.configure({ enabled }),
+    ],
+    content: markdownToTiptap(markdown),
+  });
+  editors.push(editor);
+  return editor;
+}
+
+function entriesOf(editor: Editor) {
+  return MERMAID_DIAGRAM_KEY.getState(editor.state)?.entries ?? [];
+}
+
+afterEach(() => {
+  for (const editor of editors) editor.destroy();
+  editors.length = 0;
+});
+
+describe('MermaidDiagramExtension', () => {
+  it('claims explicit Mermaid fences regardless of diagram type or validity', () => {
+    const editor = makeEditor(
+      `\`\`\`mermaid\n${SAMPLE}\n\`\`\`\n\n\`\`\`mermaid\nnot finished yet\n\`\`\`\n`,
+    );
+    expect(entriesOf(editor)).toHaveLength(2);
+  });
+
+  it('does not steal ordinary code or ASCII diagram fences', () => {
+    const editor = makeEditor(
+      '```js\nflowchart LR\n  a --> b\n```\n\n```diagram\n+---+  +---+\n| A |->| B |\n+---+  +---+\n```\n',
+    );
+    expect(entriesOf(editor)).toHaveLength(0);
+  });
+
+  it('keeps one block id across edits above and inside the source fence', () => {
+    const editor = makeEditor(`\`\`\`mermaid\n${SAMPLE}\n\`\`\`\n`);
+    const [before] = entriesOf(editor);
+    editor.commands.insertContentAt(0, '<p>Before</p>');
+    const [shifted] = entriesOf(editor);
+    expect(shifted.id).toBe(before.id);
+    expect(shifted.pos).toBeGreaterThan(before.pos);
+
+    expect(replaceAsciiFenceText(editor, shifted.pos, `${SAMPLE}\n  guard --> documents`)).toBe(
+      true,
+    );
+    const [rewritten] = entriesOf(editor);
+    expect(rewritten.id).toBe(before.id);
+    expect(findMermaidDiagramBlockPos(editor, before.id)).toBe(rewritten.pos);
+  });
+
+  it('source visibility is session-only and does not mutate Mermaid text', () => {
+    const editor = makeEditor(`\`\`\`mermaid\n${SAMPLE}\n\`\`\`\n`);
+    const [entry] = entriesOf(editor);
+    const before = tiptapToMarkdown(editor.getHTML());
+    expect(isMermaidSourceVisible(editor, entry.id)).toBe(false);
+    toggleMermaidSource(editor, entry.id);
+    expect(isMermaidSourceVisible(editor, entry.id)).toBe(true);
+    expect(tiptapToMarkdown(editor.getHTML())).toBe(before);
+  });
+
+  it('round-trips the complex graph as a Mermaid code block byte-for-byte', () => {
+    const markdown = `\`\`\`mermaid\n${SAMPLE}\n\`\`\`\n`;
+    const editor = makeEditor(markdown);
+    expect(tiptapToMarkdown(editor.getHTML())).toBe(markdown);
+  });
+
+  it('selects rendered nodes and exposes palette plus on-canvas edit gestures', async () => {
+    const editor = makeEditor('```mermaid\nflowchart LR\n  start["Start"] --> next["Next"]\n```\n');
+    const root = editor.view.dom;
+    await vi.waitFor(() => {
+      expect(root.querySelector('g[data-squisq-node-id="start"]')).not.toBeNull();
+    });
+
+    root
+      .querySelector('g[data-squisq-node-id="start"]')
+      ?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    await vi.waitFor(() => {
+      expect(root.querySelector('[aria-label="Selected Mermaid node actions"]')).not.toBeNull();
+    });
+    expect(
+      root.querySelectorAll('[aria-label="Selected Mermaid node actions"] button'),
+    ).toHaveLength(5);
+
+    const shapeButton = [...root.querySelectorAll<HTMLButtonElement>('button')].find(
+      (button) => button.textContent?.trim() === 'Shape',
+    );
+    expect(shapeButton?.disabled).toBe(false);
+    shapeButton?.click();
+    await vi.waitFor(() => {
+      expect(root.querySelector('[aria-label="Mermaid node shapes"]')).not.toBeNull();
+    });
+    expect(root.querySelectorAll('[aria-label="Mermaid node shapes"] button')).toHaveLength(48);
+
+    root
+      .querySelector<HTMLButtonElement>(
+        '[aria-label="Selected Mermaid node actions"] button[aria-label="Rename node"]',
+      )
+      ?.click();
+    await vi.waitFor(() => {
+      expect(root.querySelector('[aria-label="Mermaid node label"]')).not.toBeNull();
+    });
+    const renameInput = root.querySelector<HTMLInputElement>('[aria-label="Mermaid node label"]');
+    expect(renameInput?.value).toBe('Start');
+    fireEvent.change(renameInput!, { target: { value: 'Begin' } });
+    fireEvent.keyDown(renameInput!, { key: 'Enter' });
+    await vi.waitFor(() => {
+      expect(tiptapToMarkdown(editor.getHTML())).toContain('start@{ shape: rect, label: "Begin" }');
+    });
+    expect(root.querySelector('[aria-label="Mermaid node label"]')).toBeNull();
+
+    await vi.waitFor(() => {
+      expect(root.querySelector('g[data-squisq-node-id="start"]')).not.toBeNull();
+    });
+    fireEvent.doubleClick(root.querySelector('g[data-squisq-node-id="start"]')!);
+    await vi.waitFor(() => {
+      expect(root.querySelector<HTMLInputElement>('[aria-label="Mermaid node label"]')?.value).toBe(
+        'Start',
+      );
+    });
+    const cancelInput = root.querySelector<HTMLInputElement>('[aria-label="Mermaid node label"]')!;
+    fireEvent.change(cancelInput, { target: { value: 'Cancelled label' } });
+    fireEvent.keyDown(cancelInput, { key: 'Escape' });
+    expect(root.querySelector('[aria-label="Mermaid node label"]')).toBeNull();
+    expect(tiptapToMarkdown(editor.getHTML())).not.toContain('Cancelled label');
+
+    fireEvent.doubleClick(root.querySelector('g[data-squisq-node-id="start"]')!);
+    await vi.waitFor(() => {
+      expect(root.querySelector('[aria-label="Mermaid node label"]')).not.toBeNull();
+    });
+    const blurInput = root.querySelector<HTMLInputElement>('[aria-label="Mermaid node label"]')!;
+    fireEvent.change(blurInput, { target: { value: 'Click away' } });
+    fireEvent.blur(blurInput);
+    await vi.waitFor(() => {
+      expect(tiptapToMarkdown(editor.getHTML())).toContain(
+        'start@{ shape: rect, label: "Click away" }',
+      );
+    });
+  });
+
+  it('edits connector labels inline and exposes on-canvas disconnect', async () => {
+    const editor = makeEditor('```mermaid\nflowchart LR\n  start["Start"] --> next["Next"]\n```\n');
+    const root = editor.view.dom;
+    await vi.waitFor(() => {
+      expect(root.querySelector('.squisq-mermaid-edge-hit-target')).not.toBeNull();
+    });
+    expect(root.querySelector('.squisq-mermaid-edge-hit-target')?.getAttribute('aria-label')).toBe(
+      'Connection from Start to Next',
+    );
+
+    root
+      .querySelector('.squisq-mermaid-edge-hit-target')
+      ?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    await vi.waitFor(() => {
+      expect(
+        root.querySelector('[aria-label="Selected Mermaid connection actions"]'),
+      ).not.toBeNull();
+    });
+    expect(root.querySelector('[aria-label="Mermaid node label"]')).toBeNull();
+    expect(
+      root.querySelectorAll('[aria-label="Selected Mermaid connection actions"] button'),
+    ).toHaveLength(2);
+
+    const sideLabelButton = [...root.querySelectorAll<HTMLButtonElement>('button')].find(
+      (button) => button.textContent?.trim() === 'Label',
+    );
+    expect(sideLabelButton?.disabled).toBe(false);
+
+    root.querySelector<HTMLButtonElement>('button[aria-label="Edit connection label"]')?.click();
+    await vi.waitFor(() => {
+      expect(root.querySelector('[aria-label="Mermaid connection label"]')).not.toBeNull();
+    });
+    const labelInput = root.querySelector<HTMLInputElement>(
+      '[aria-label="Mermaid connection label"]',
+    )!;
+    expect(labelInput.value).toBe('');
+    fireEvent.change(labelInput, { target: { value: 'continues' } });
+    fireEvent.keyDown(labelInput, { key: 'Enter' });
+    await vi.waitFor(() => {
+      expect(tiptapToMarkdown(editor.getHTML())).toContain('-->|"continues"| next["Next"]');
+    });
+    expect(root.querySelector('[aria-label="Mermaid connection label"]')).toBeNull();
+
+    await vi.waitFor(() => {
+      expect(root.querySelector('button[aria-label="Disconnect nodes"]')).not.toBeNull();
+    });
+    root.querySelector<HTMLButtonElement>('button[aria-label="Disconnect nodes"]')?.click();
+    await vi.waitFor(() => {
+      const markdown = tiptapToMarkdown(editor.getHTML());
+      expect(markdown).not.toContain('-->');
+      expect(markdown).toContain('start@{ shape: rect, label: "Start" }');
+      expect(markdown).toContain('next@{ shape: rect, label: "Next" }');
+    });
+  });
+
+  it('offers a visual gallery of horizontal and vertical flow layouts', async () => {
+    const editor = makeEditor('```mermaid\nflowchart LR\n  start["Start"] --> next["Next"]\n```\n');
+    const root = editor.view.dom;
+    await vi.waitFor(() => {
+      expect(root.querySelector('button[aria-label="Direction"]')).not.toBeNull();
+    });
+
+    root.querySelector<HTMLButtonElement>('button[aria-label="Direction"]')?.click();
+    await vi.waitFor(() => {
+      expect(root.querySelector('[aria-label="Flowchart layout gallery"]')).not.toBeNull();
+    });
+
+    const gallery = root.querySelector('[aria-label="Flowchart layout gallery"]')!;
+    expect(gallery.querySelectorAll('.squisq-mermaid-direction-card')).toHaveLength(4);
+    expect(
+      gallery
+        .querySelector('[aria-label="Horizontal: left to right"]')
+        ?.getAttribute('aria-pressed'),
+    ).toBe('true');
+
+    gallery.querySelector<HTMLButtonElement>('[aria-label="Vertical: top to bottom"]')?.click();
+    await vi.waitFor(() => {
+      expect(tiptapToMarkdown(editor.getHTML())).toContain('flowchart TB');
+    });
+  });
+
+  it('pans the rendered diagram with right-mouse drag and resets from Fit diagram', async () => {
+    const editor = makeEditor('```mermaid\nflowchart LR\n  start["Start"] --> next["Next"]\n```\n');
+    const root = editor.view.dom;
+    await vi.waitFor(() => {
+      expect(root.querySelector('.squisq-mermaid-svg')).not.toBeNull();
+    });
+
+    const viewport = root.querySelector<HTMLElement>('.squisq-mermaid-canvas-scroll')!;
+    const diagram = root.querySelector<HTMLElement>('.squisq-mermaid-svg')!;
+    const fitButton = root.querySelector<HTMLButtonElement>('button[aria-label="Fit diagram"]')!;
+    expect(fitButton.getAttribute('aria-pressed')).toBe('true');
+    expect(diagram.style.transform).toBe('translate3d(0px, 0px, 0)');
+
+    root.querySelector<HTMLButtonElement>('button[aria-label="Zoom out"]')?.click();
+    await vi.waitFor(() => expect(fitButton.getAttribute('aria-pressed')).toBe('false'));
+
+    fireEvent.mouseDown(viewport, {
+      button: 2,
+      buttons: 2,
+      clientX: 100,
+      clientY: 80,
+    });
+    await vi.waitFor(() => expect(viewport.dataset.panning).toBe('true'));
+    fireEvent.mouseMove(window, {
+      buttons: 2,
+      clientX: 145,
+      clientY: 110,
+    });
+    await vi.waitFor(() => {
+      expect(diagram.style.transform).toBe('translate3d(45px, 30px, 0)');
+    });
+    expect(fireEvent.contextMenu(viewport)).toBe(false);
+
+    fireEvent.mouseUp(window, { button: 2, buttons: 0 });
+    await vi.waitFor(() => expect(viewport.dataset.panning).toBeUndefined());
+
+    fitButton.click();
+    await vi.waitFor(() => {
+      expect(fitButton.getAttribute('aria-pressed')).toBe('true');
+      expect(diagram.style.transform).toBe('translate3d(0px, 0px, 0)');
+    });
+  });
+
+  it('can be disabled without registering a plugin state', () => {
+    const editor = makeEditor(`\`\`\`mermaid\n${SAMPLE}\n\`\`\`\n`, false);
+    expect(MERMAID_DIAGRAM_KEY.getState(editor.state)).toBeUndefined();
+  });
+});

package/src/mermaid/__tests__/mermaidDiagramTypes.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import mermaid from 'mermaid';
+import {
+  DEFAULT_MERMAID_DIAGRAM_TYPE,
+  MERMAID_DIAGRAM_TYPES,
+  mermaidDiagramMarkdown,
+} from '../mermaidDiagramTypes';
+
+describe('Mermaid diagram type gallery', () => {
+  it('offers distinct starter grammars across structure, planning, and data', () => {
+    expect(MERMAID_DIAGRAM_TYPES).toHaveLength(18);
+    expect(new Set(MERMAID_DIAGRAM_TYPES.map((entry) => entry.id)).size).toBe(18);
+    expect(new Set(MERMAID_DIAGRAM_TYPES.map((entry) => entry.category))).toEqual(
+      new Set(['Structure', 'Planning', 'Data']),
+    );
+    expect(DEFAULT_MERMAID_DIAGRAM_TYPE.id).toBe('flowchart');
+    for (const entry of MERMAID_DIAGRAM_TYPES) {
+      expect(entry.starter.trim()).not.toBe('');
+      expect(entry.starter).not.toContain('```');
+    }
+  });
+
+  it('wraps a starter in an authoritative Mermaid fence', () => {
+    expect(mermaidDiagramMarkdown('gantt\n  title Plan')).toBe(
+      '\n```mermaid\ngantt\n  title Plan\n```\n',
+    );
+  });
+
+  it('ships starters accepted by the pinned Mermaid parser', async () => {
+    mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
+    for (const entry of MERMAID_DIAGRAM_TYPES) {
+      await expect(mermaid.parse(entry.starter), entry.label).resolves.toBeTruthy();
+    }
+  });
+});

package/src/mermaid/__tests__/mermaidRenderer.test.ts

@@ -0,0 +1,49 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => ({
+  initialize: vi.fn(),
+  render: vi.fn(),
+}));
+
+vi.mock('mermaid', () => ({
+  default: {
+    initialize: mocks.initialize,
+    render: mocks.render,
+  },
+}));
+
+import { mermaidErrorMessage, renderMermaidDiagram } from '../mermaidRenderer';
+
+describe('Mermaid renderer', () => {
+  beforeEach(() => {
+    mocks.render.mockReset();
+  });
+
+  it('uses Mermaid output without narrowing the authored syntax', async () => {
+    const source = 'sequenceDiagram\n  Alice->>Bob: Hello';
+    mocks.render.mockResolvedValue({
+      svg: '<svg viewBox="0 0 200 100"></svg>',
+      diagramType: 'sequence',
+      bindFunctions: vi.fn(),
+    });
+    const container = document.createElement('div');
+    await expect(renderMermaidDiagram('diagram-1', source, container)).resolves.toEqual({
+      svg: '<svg viewBox="0 0 200 100"></svg>',
+      diagramType: 'sequence',
+    });
+    expect(mocks.render).toHaveBeenCalledWith('diagram-1', source, container);
+    expect(mocks.initialize).toHaveBeenCalledWith(
+      expect.objectContaining({
+        securityLevel: 'strict',
+        startOnLoad: false,
+        suppressErrorRendering: true,
+      }),
+    );
+  });
+
+  it('keeps parser errors concise for the inline error panel', () => {
+    const lines = Array.from({ length: 12 }, (_, index) => `line ${index + 1}`);
+    expect(mermaidErrorMessage(new Error(lines.join('\n'))).split('\n')).toHaveLength(8);
+    expect(mermaidErrorMessage(new Error(''))).toBe('Unknown Mermaid rendering error.');
+  });
+});