@bendyline/squisq-editor-react 2.1.0 → 2.2.0

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

@@ -1,213 +0,0 @@
-import mermaid from 'mermaid';
-import { beforeAll, describe, expect, it } from 'vitest';
-import type { MermaidFlowchartModel } from '../mermaidModel';
-import {
-  addMermaidNode,
-  changeMermaidNodeShape,
-  connectMermaidNodes,
-  deleteMermaidNode,
-  disconnectMermaidEdge,
-  duplicateMermaidNode,
-  renameMermaidNode,
-  setMermaidEdgeLabel,
-  setMermaidFlowchartDirection,
-  upsertMermaidNode,
-} from '../mermaidSourceOps';
-import { MERMAID_FLOWCHART_SHAPES } from '../mermaidShapes';
-
-const source = 'flowchart LR\n  start["Start"] --> next["Next"]';
-const model: MermaidFlowchartModel = {
-  kind: 'flowchart',
-  direction: 'LR',
-  nodes: [
-    { id: 'start', domId: 'flowchart-start-0', label: 'Start', shape: 'rect', classes: [] },
-    { id: 'next', domId: 'flowchart-next-1', label: 'Next', shape: 'rect', classes: [] },
-  ],
-  edges: [
-    { id: 'L_start_next_0', source: 'start', target: 'next', label: '', type: 'arrow_point' },
-  ],
-};
-
-beforeAll(() => {
-  mermaid.initialize({
-    startOnLoad: false,
-    securityLevel: 'strict',
-    suppressErrorRendering: true,
-  });
-});
-
-describe('Mermaid shape coverage', () => {
-  it('covers every ordinary shape in Mermaid 11.16’s documented expanded catalog', () => {
-    expect(MERMAID_FLOWCHART_SHAPES).toHaveLength(48);
-    expect(new Set(MERMAID_FLOWCHART_SHAPES.map((shape) => shape.id)).size).toBe(48);
-  });
-
-  it('round-trips all 48 shapes through the pinned Mermaid parser', async () => {
-    const shapeSource = [
-      'flowchart TB',
-      ...MERMAID_FLOWCHART_SHAPES.map(
-        (shape, index) =>
-          `  node${index}@{ shape: ${shape.id}, label: ${JSON.stringify(shape.label)} }`,
-      ),
-    ].join('\n');
-    await expect(mermaid.parse(shapeSource)).resolves.toMatchObject({
-      diagramType: expect.stringMatching(/^flowchart/),
-    });
-  });
-});
-
-describe('Mermaid source operations', () => {
-  it('updates one managed declaration for repeated rename and shape edits', async () => {
-    const renamed = renameMermaidNode(source, model.nodes[0], 'Begin');
-    expect(renamed.ok).toBe(true);
-    const shaped = changeMermaidNodeShape(
-      renamed.source,
-      { ...model.nodes[0], label: 'Begin' },
-      'cloud',
-    );
-    expect(shaped.source.match(/%% squisq:node start/g)).toHaveLength(1);
-    expect(shaped.source).toContain('start@{ shape: cloud, label: "Begin" }');
-    await expect(mermaid.parse(shaped.source)).resolves.toBeTruthy();
-  });
-
-  it('adds, duplicates, and connects nodes as ordinary Mermaid statements', async () => {
-    const added = addMermaidNode(source, model, 'doc');
-    expect(added.nodeId).toBe('node');
-    const duplicated = duplicateMermaidNode(added.source, model, model.nodes[1]);
-    expect(duplicated.nodeId).toBe('next_copy');
-    const expandedModel: MermaidFlowchartModel = {
-      ...model,
-      nodes: [
-        ...model.nodes,
-        { id: 'node', domId: 'node', label: 'New node', shape: 'doc', classes: [] },
-      ],
-    };
-    const connected = connectMermaidNodes(duplicated.source, expandedModel, 'next', 'node');
-    expect(connected.source).toContain('next --> node');
-    await expect(mermaid.parse(connected.source)).resolves.toBeTruthy();
-  });
-
-  it('deletes a node from a simple edge while preserving its peer declaration', async () => {
-    const deleted = deleteMermaidNode(source, model, 'start');
-    expect(deleted.ok).toBe(true);
-    expect(deleted.source).not.toContain('start');
-    expect(deleted.source).toContain('next@{ shape: rect, label: "Next" }');
-    await expect(mermaid.parse(deleted.source)).resolves.toBeTruthy();
-  });
-
-  it('disconnects a simple edge while preserving both endpoint declarations', async () => {
-    const disconnected = disconnectMermaidEdge(source, model, model.edges[0]);
-    expect(disconnected.ok).toBe(true);
-    expect(disconnected.source).not.toContain('-->');
-    expect(disconnected.source).toContain('start@{ shape: rect, label: "Start" }');
-    expect(disconnected.source).toContain('next@{ shape: rect, label: "Next" }');
-    await expect(mermaid.parse(disconnected.source)).resolves.toBeTruthy();
-  });
-
-  it('adds, updates, and removes an ordinary Mermaid connection label', async () => {
-    const labeled = setMermaidEdgeLabel(source, model, model.edges[0], 'continues');
-    expect(labeled.ok).toBe(true);
-    expect(labeled.source).toContain('-->|"continues"| next["Next"]');
-    await expect(mermaid.parse(labeled.source)).resolves.toBeTruthy();
-
-    const labeledEdge = { ...model.edges[0], label: 'continues' };
-    const updated = setMermaidEdgeLabel(labeled.source, model, labeledEdge, 'when ready');
-    expect(updated.ok).toBe(true);
-    expect(updated.source).toContain('-->|"when ready"| next["Next"]');
-    await expect(mermaid.parse(updated.source)).resolves.toBeTruthy();
-
-    const cleared = setMermaidEdgeLabel(
-      updated.source,
-      model,
-      { ...model.edges[0], label: 'when ready' },
-      '',
-    );
-    expect(cleared.ok).toBe(true);
-    expect(cleared.source).toBe(source);
-    await expect(mermaid.parse(cleared.source)).resolves.toBeTruthy();
-  });
-
-  it('labels Squisq-managed connections without adding a second edge statement', async () => {
-    const expandedModel: MermaidFlowchartModel = {
-      ...model,
-      nodes: [
-        ...model.nodes,
-        { id: 'third', domId: 'third', label: 'Third', shape: 'rect', classes: [] },
-      ],
-    };
-    const connected = connectMermaidNodes(source, expandedModel, 'next', 'third');
-    const managedEdge = {
-      id: 'managed',
-      source: 'next',
-      target: 'third',
-      label: '',
-    };
-    const labeled = setMermaidEdgeLabel(connected.source, expandedModel, managedEdge, 'handoff');
-    expect(labeled.ok).toBe(true);
-    expect(labeled.source.match(/next -->/g)).toHaveLength(1);
-    expect(labeled.source).toContain('next -->|"handoff"| third');
-    await expect(mermaid.parse(labeled.source)).resolves.toBeTruthy();
-  });
-
-  it('refuses to label an edge inside a compact statement', () => {
-    const denseSource = 'flowchart LR\n  start & next --> third';
-    const denseModel: MermaidFlowchartModel = {
-      kind: 'flowchart',
-      direction: 'LR',
-      nodes: ['start', 'next', 'third'].map((id) => ({
-        id,
-        domId: id,
-        label: id,
-        shape: 'rect' as const,
-        classes: [],
-      })),
-      edges: [
-        { id: '1', source: 'start', target: 'third', label: '' },
-        { id: '2', source: 'next', target: 'third', label: '' },
-      ],
-    };
-    const result = setMermaidEdgeLabel(denseSource, denseModel, denseModel.edges[0], 'unsafe');
-    expect(result.ok).toBe(false);
-    expect(result.source).toBe(denseSource);
-  });
-
-  it('refuses a destructive edit that would erase unrelated compact edges', () => {
-    const denseSource = 'flowchart LR\n  start & next --> third & fourth';
-    const denseModel: MermaidFlowchartModel = {
-      kind: 'flowchart',
-      direction: 'LR',
-      nodes: ['start', 'next', 'third', 'fourth'].map((id) => ({
-        id,
-        domId: id,
-        label: id,
-        shape: 'rect' as const,
-        classes: [],
-      })),
-      edges: [
-        { id: '1', source: 'start', target: 'third', label: '' },
-        { id: '2', source: 'start', target: 'fourth', label: '' },
-        { id: '3', source: 'next', target: 'third', label: '' },
-        { id: '4', source: 'next', target: 'fourth', label: '' },
-      ],
-    };
-    const result = deleteMermaidNode(denseSource, denseModel, 'next');
-    expect(result.ok).toBe(false);
-    expect(result.source).toBe(denseSource);
-  });
-
-  it('changes the diagram direction without touching the body', () => {
-    const result = setMermaidFlowchartDirection(source, 'TB');
-    expect(result.source).toBe('flowchart TB\n  start["Start"] --> next["Next"]');
-  });
-
-  it('rejects ids that cannot be safely emitted in general node syntax', () => {
-    expect(
-      upsertMermaidNode(source, {
-        id: 'not safe',
-        label: 'Nope',
-        shape: 'rect',
-        classes: [],
-      }).ok,
-    ).toBe(false);
-  });
-});

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

@@ -1,71 +0,0 @@
-import mermaid from 'mermaid';
-import { beforeAll, describe, expect, it } from 'vitest';
-import { inspectMermaidSource } from '../mermaidRenderer';
-
-const COMPLEX_FLOWCHART = [
-  '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"]',
-  '    guard --> documents["DocumentService: source resolution and normalization"]',
-  '    guard --> intelligence["Inspect, validate, compare, preview"]',
-  '    guard --> conversion["Fidelity and conversion orchestration"]',
-  '    tools --> authority["McpFileAuthority: granted roots and containment"]',
-  '    tools --> artifacts["Session ArtifactStore and reports"]',
-  '    documents --> conversion',
-  '    conversion --> artifacts',
-  '    intelligence --> artifacts',
-  '  end',
-  '',
-  '  documents --> squisq["Linked Squisq parser, Doc model, formats, themes, templates"]',
-  '  conversion --> squisq',
-  '  intelligence --> squisq',
-  '  artifacts --> resources["Artifact and report resources"]',
-  '  authority --> filesystem["Explicitly granted local roots"]',
-].join('\n');
-
-beforeAll(() => {
-  mermaid.initialize({
-    startOnLoad: false,
-    securityLevel: 'strict',
-    suppressErrorRendering: true,
-  });
-});
-
-describe('pinned Mermaid syntax integration', () => {
-  it('accepts the requested complex flowchart through Mermaid itself', async () => {
-    await expect(mermaid.parse(COMPLEX_FLOWCHART)).resolves.toMatchObject({
-      diagramType: expect.stringMatching(/^flowchart/),
-    });
-  });
-
-  it('exposes Mermaid node and edge ids for structured canvas gestures', async () => {
-    const model = await inspectMermaidSource(
-      'flowchart LR\n  start["Start"] --> decision@{ shape: diam, label: "Ready?" }',
-    );
-    expect(model).toMatchObject({
-      kind: 'flowchart',
-      direction: 'LR',
-      nodes: [
-        { id: 'start', label: 'Start', shape: 'rect' },
-        { id: 'decision', label: 'Ready?', shape: 'diam' },
-      ],
-      edges: [{ source: 'start', target: 'decision' }],
-    });
-    expect(model?.nodes.every((node) => node.domId.startsWith('flowchart-'))).toBe(true);
-  });
-
-  it.each([
-    ['sequence', 'sequenceDiagram\n  Alice->>Bob: Hello'],
-    ['state', 'stateDiagram-v2\n  [*] --> Ready'],
-    ['class', 'classDiagram\n  Animal <|-- Duck'],
-    ['er', 'erDiagram\n  CUSTOMER ||--o{ ORDER : places'],
-    ['gantt', 'gantt\n  title Plan\n  section Work\n  Task :a1, 2026-01-01, 1d'],
-    ['mindmap', 'mindmap\n  root((Squisq))\n    Core\n    Editor'],
-  ])('accepts %s diagrams without a Squisq-specific parser', async (_name, source) => {
-    await expect(mermaid.parse(source)).resolves.toBeTruthy();
-  });
-});

package/src/mermaid/mermaidCommands.ts

@@ -1,34 +0,0 @@
-/** ProseMirror write boundary for Mermaid source-backed diagram gestures. */
-
-import type { Editor } from '@tiptap/react';
-import { findMermaidDiagramBlockPos, isMermaidDiagramNode } from './MermaidDiagramExtension';
-import type { MermaidSourceEditResult } from './mermaidSourceOps';
-
-export function replaceMermaidFenceSource(
-  editor: Editor,
-  blockId: string,
-  nextSource: string,
-): boolean {
-  const pos = findMermaidDiagramBlockPos(editor, blockId);
-  if (pos === null) return false;
-  return editor
-    .chain()
-    .command(({ tr, state }) => {
-      const node = tr.doc.nodeAt(pos);
-      if (!node || !isMermaidDiagramNode(node) || node.textContent === nextSource) return false;
-      const from = pos + 1;
-      const to = pos + node.nodeSize - 1;
-      if (nextSource) tr.replaceWith(from, to, state.schema.text(nextSource));
-      else tr.delete(from, to);
-      return true;
-    })
-    .run();
-}
-
-export function applyMermaidSourceEdit(
-  editor: Editor,
-  blockId: string,
-  edit: MermaidSourceEditResult,
-): boolean {
-  return edit.ok && replaceMermaidFenceSource(editor, blockId, edit.source);
-}

package/src/mermaid/mermaidData.ts

@@ -1,31 +0,0 @@
-/** Live source view for one registered Mermaid code fence. */
-
-import { useEffect, useMemo, useState } from 'react';
-import type { Editor } from '@tiptap/react';
-import { findMermaidDiagramBlockPos, isMermaidDiagramNode } from './MermaidDiagramExtension';
-
-export interface MermaidDiagramData {
-  /** Mermaid source exactly as stored inside the code block. */
-  source: string;
-}
-
-export function useMermaidDiagramData(editor: Editor, blockId: string): MermaidDiagramData | null {
-  const [version, setVersion] = useState(0);
-  useEffect(() => {
-    const onTransaction = () => setVersion((value) => value + 1);
-    editor.on('transaction', onTransaction);
-    return () => {
-      editor.off('transaction', onTransaction);
-    };
-  }, [editor]);
-
-  return useMemo(() => {
-    const pos = findMermaidDiagramBlockPos(editor, blockId);
-    if (pos === null) return null;
-    const node = editor.state.doc.nodeAt(pos);
-    if (!node || !isMermaidDiagramNode(node)) return null;
-    return { source: node.textContent };
-    // `version` is the transaction-backed invalidation token.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor, blockId, version]);
-}

package/src/mermaid/mermaidDiagramTypes.ts

@@ -1,325 +0,0 @@
-/** Curated starter gallery for the diagram grammars supported by Mermaid 11.16. */
-
-export type MermaidDiagramCategory = 'Structure' | 'Planning' | 'Data';
-
-export type MermaidDiagramPreview =
-  | 'flowchart'
-  | 'sequence'
-  | 'state'
-  | 'class'
-  | 'er'
-  | 'mindmap'
-  | 'c4'
-  | 'architecture'
-  | 'gantt'
-  | 'timeline'
-  | 'journey'
-  | 'kanban'
-  | 'git'
-  | 'pie'
-  | 'quadrant'
-  | 'sankey'
-  | 'xy'
-  | 'requirement';
-
-export interface MermaidDiagramType {
-  readonly id: string;
-  readonly label: string;
-  readonly description: string;
-  readonly category: MermaidDiagramCategory;
-  readonly preview: MermaidDiagramPreview;
-  readonly starter: string;
-  /** Mermaid marks this grammar as beta or otherwise experimental. */
-  readonly badge?: 'Beta' | 'Experimental';
-}
-
-const lines = (...source: string[]) => source.join('\n');
-
-export const MERMAID_DIAGRAM_TYPES: readonly MermaidDiagramType[] = [
-  {
-    id: 'flowchart',
-    label: 'Flowchart',
-    description: 'Processes, decisions, and connected shapes.',
-    category: 'Structure',
-    preview: 'flowchart',
-    starter: lines(
-      'flowchart LR',
-      '  start["Start"] --> decision{"Ready?"}',
-      '  decision -->|Yes| done["Done"]',
-      '  decision -->|No| start',
-    ),
-  },
-  {
-    id: 'sequence',
-    label: 'Sequence',
-    description: 'Messages exchanged between participants over time.',
-    category: 'Structure',
-    preview: 'sequence',
-    starter: lines(
-      'sequenceDiagram',
-      '  participant Client',
-      '  participant Service',
-      '  Client->>Service: Request',
-      '  Service-->>Client: Response',
-    ),
-  },
-  {
-    id: 'state',
-    label: 'State',
-    description: 'States, transitions, choices, and lifecycles.',
-    category: 'Structure',
-    preview: 'state',
-    starter: lines(
-      'stateDiagram-v2',
-      '  [*] --> Idle',
-      '  Idle --> Working : start',
-      '  Working --> Idle : finish',
-      '  Working --> [*] : stop',
-    ),
-  },
-  {
-    id: 'class',
-    label: 'Class',
-    description: 'Classes, members, inheritance, and relationships.',
-    category: 'Structure',
-    preview: 'class',
-    starter: lines(
-      'classDiagram',
-      '  class Animal {',
-      '    +String name',
-      '    +speak()',
-      '  }',
-      '  Animal <|-- Dog',
-      '  Dog : +fetch()',
-    ),
-  },
-  {
-    id: 'entity-relationship',
-    label: 'Entity Relationship',
-    description: 'Entities, cardinality, and data relationships.',
-    category: 'Structure',
-    preview: 'er',
-    starter: lines(
-      'erDiagram',
-      '  CUSTOMER ||--o{ ORDER : places',
-      '  ORDER ||--|{ LINE_ITEM : contains',
-      '  PRODUCT ||--o{ LINE_ITEM : appears_in',
-    ),
-  },
-  {
-    id: 'mindmap',
-    label: 'Mind Map',
-    description: 'Ideas arranged radially around a central topic.',
-    category: 'Structure',
-    preview: 'mindmap',
-    starter: lines(
-      'mindmap',
-      '  root((Project))',
-      '    Product',
-      '      Research',
-      '      Design',
-      '    Delivery',
-      '      Build',
-      '      Launch',
-    ),
-  },
-  {
-    id: 'c4-context',
-    label: 'C4 Context',
-    description: 'People, systems, containers, and dependencies.',
-    category: 'Structure',
-    preview: 'c4',
-    badge: 'Experimental',
-    starter: lines(
-      'C4Context',
-      '  title System context',
-      '  Person(user, "User")',
-      '  System(app, "Application")',
-      '  System_Ext(api, "External API")',
-      '  Rel(user, app, "Uses")',
-      '  Rel(app, api, "Calls")',
-    ),
-  },
-  {
-    id: 'architecture',
-    label: 'Architecture',
-    description: 'Cloud services, resources, groups, and ports.',
-    category: 'Structure',
-    preview: 'architecture',
-    badge: 'Beta',
-    starter: lines(
-      'architecture-beta',
-      '  group api(cloud)[API]',
-      '  service client(internet)[Client]',
-      '  service server(server)[Service] in api',
-      '  service db(database)[Database] in api',
-      '  client:R --> L:server',
-      '  server:R --> L:db',
-    ),
-  },
-  {
-    id: 'gantt',
-    label: 'Gantt',
-    description: 'Tasks, dependencies, milestones, and dates.',
-    category: 'Planning',
-    preview: 'gantt',
-    starter: lines(
-      'gantt',
-      '  title Project plan',
-      '  dateFormat YYYY-MM-DD',
-      '  section Build',
-      '  Design :done, design, 2026-01-01, 3d',
-      '  Implement :active, build, after design, 5d',
-      '  Ship :milestone, after build, 0d',
-    ),
-  },
-  {
-    id: 'timeline',
-    label: 'Timeline',
-    description: 'Events and milestones arranged chronologically.',
-    category: 'Planning',
-    preview: 'timeline',
-    starter: lines(
-      'timeline',
-      '  title Product launch',
-      '  Q1 : Research',
-      '  Q2 : Build : Test',
-      '  Q3 : Launch',
-    ),
-  },
-  {
-    id: 'journey',
-    label: 'User Journey',
-    description: 'Experiences, actors, stages, and satisfaction.',
-    category: 'Planning',
-    preview: 'journey',
-    starter: lines(
-      'journey',
-      '  title Customer journey',
-      '  section Discover',
-      '    Find product: 5: Customer',
-      '    Compare options: 3: Customer',
-      '  section Buy',
-      '    Checkout: 4: Customer',
-    ),
-  },
-  {
-    id: 'kanban',
-    label: 'Kanban',
-    description: 'Work items organized into workflow columns.',
-    category: 'Planning',
-    preview: 'kanban',
-    starter: lines(
-      'kanban',
-      '  todo[To do]',
-      '    task1[Plan the work]',
-      '  doing[In progress]',
-      '    task2[Build the feature]',
-      '  done[Done]',
-      '    task3[Ship it]',
-    ),
-  },
-  {
-    id: 'git-graph',
-    label: 'Git Graph',
-    description: 'Branches, commits, merges, and releases.',
-    category: 'Planning',
-    preview: 'git',
-    starter: lines(
-      'gitGraph',
-      '  commit id: "Plan"',
-      '  branch feature',
-      '  checkout feature',
-      '  commit id: "Build"',
-      '  checkout main',
-      '  merge feature',
-      '  commit id: "Ship"',
-    ),
-  },
-  {
-    id: 'pie',
-    label: 'Pie Chart',
-    description: 'A compact part-to-whole comparison.',
-    category: 'Data',
-    preview: 'pie',
-    starter: lines(
-      'pie showData',
-      '  title Work allocation',
-      '  "Build" : 45',
-      '  "Test" : 30',
-      '  "Plan" : 25',
-    ),
-  },
-  {
-    id: 'quadrant',
-    label: 'Quadrant',
-    description: 'Items positioned against two dimensions.',
-    category: 'Data',
-    preview: 'quadrant',
-    starter: lines(
-      'quadrantChart',
-      '  title Impact and effort',
-      '  x-axis Low effort --> High effort',
-      '  y-axis Low impact --> High impact',
-      '  "Quick win": [0.25, 0.80]',
-      '  "Big bet": [0.75, 0.85]',
-    ),
-  },
-  {
-    id: 'sankey',
-    label: 'Sankey',
-    description: 'Weighted flows between sources and destinations.',
-    category: 'Data',
-    preview: 'sankey',
-    badge: 'Beta',
-    starter: lines(
-      'sankey-beta',
-      '  Source,Process,80',
-      '  Source,Loss,20',
-      '  Process,Output,70',
-      '  Process,Waste,10',
-    ),
-  },
-  {
-    id: 'xy-chart',
-    label: 'XY Chart',
-    description: 'Bar and line series on numeric axes.',
-    category: 'Data',
-    preview: 'xy',
-    badge: 'Beta',
-    starter: lines(
-      'xychart-beta',
-      '  title "Delivery trend"',
-      '  x-axis [Jan, Feb, Mar, Apr]',
-      '  y-axis "Items" 0 --> 100',
-      '  bar [30, 55, 70, 90]',
-      '  line [25, 45, 75, 85]',
-    ),
-  },
-  {
-    id: 'requirement',
-    label: 'Requirement',
-    description: 'Requirements, elements, risks, and verification.',
-    category: 'Data',
-    preview: 'requirement',
-    starter: lines(
-      'requirementDiagram',
-      '  requirement secure_auth {',
-      '    id: 1',
-      '    text: Users must authenticate',
-      '    risk: high',
-      '    verifymethod: test',
-      '  }',
-      '  element app {',
-      '    type: system',
-      '  }',
-      '  app - satisfies -> secure_auth',
-    ),
-  },
-];
-
-export const DEFAULT_MERMAID_DIAGRAM_TYPE = MERMAID_DIAGRAM_TYPES[0];
-
-export function mermaidDiagramMarkdown(source: string): string {
-  return `\n\`\`\`mermaid\n${source}\n\`\`\`\n`;
-}