@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/mermaid/MermaidShapePalette.tsx

@@ -1,245 +0,0 @@
-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

@@ -1,361 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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.');
-  });
-});