@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/mermaid/mermaidModel.ts

@@ -1,31 +0,0 @@
-import type { MermaidFlowchartShapeId } from './mermaidShapes';
-
-export type MermaidFlowchartDirection = 'TB' | 'TD' | 'BT' | 'RL' | 'LR';
-
-export interface MermaidEditableNode {
-  id: string;
-  domId: string;
-  label: string;
-  shape: MermaidFlowchartShapeId;
-  classes: readonly string[];
-}
-
-export interface MermaidEditableEdge {
-  id: string;
-  source: string;
-  target: string;
-  label: string;
-  type?: string;
-  stroke?: string;
-  userDefinedId?: boolean;
-}
-
-export interface MermaidFlowchartModel {
-  kind: 'flowchart';
-  direction: MermaidFlowchartDirection;
-  nodes: readonly MermaidEditableNode[];
-  edges: readonly MermaidEditableEdge[];
-}
-
-/** Structured editing is additive to full Mermaid rendering, never required by it. */
-export type MermaidEditableModel = MermaidFlowchartModel;

package/src/mermaid/mermaidRenderer.ts

@@ -1,181 +0,0 @@
-/** Browser-only, lazy Mermaid renderer shared by all complex-diagram widgets. */
-
-import type { RenderResult } from 'mermaid';
-import type {
-  MermaidEditableEdge,
-  MermaidEditableModel,
-  MermaidEditableNode,
-  MermaidFlowchartDirection,
-} from './mermaidModel';
-import { normalizeMermaidFlowchartShape } from './mermaidShapes';
-
-let mermaidPromise: Promise<typeof import('mermaid').default> | null = null;
-
-interface MermaidQueueHost {
-  __squisqMermaidWorkQueue?: Promise<void>;
-}
-
-function enqueueMermaidWork<T>(run: () => Promise<T>): Promise<T> {
-  // Mermaid shares mutable diagram databases across imports. The React
-  // rendition package uses this same global queue so an editor widget cannot
-  // inspect while Page or Slideshow is rendering (or vice versa).
-  const host = globalThis as typeof globalThis & MermaidQueueHost;
-  const previous = host.__squisqMermaidWorkQueue ?? Promise.resolve();
-  const result = previous.then(run, run);
-  host.__squisqMermaidWorkQueue = result.then(
-    () => undefined,
-    () => undefined,
-  );
-  return result;
-}
-
-interface FlowVertexLike {
-  id?: unknown;
-  domId?: unknown;
-  text?: unknown;
-  type?: unknown;
-  classes?: unknown;
-}
-
-interface FlowEdgeLike {
-  id?: unknown;
-  start?: unknown;
-  end?: unknown;
-  text?: unknown;
-  type?: unknown;
-  stroke?: unknown;
-  isUserDefinedId?: unknown;
-}
-
-interface FlowDbLike {
-  getVertices?: () => Map<string, FlowVertexLike>;
-  getEdges?: () => FlowEdgeLike[];
-  getDirection?: () => string | undefined;
-}
-
-export interface MermaidRenderResult extends Pick<RenderResult, 'svg' | 'diagramType'> {
-  /** Present for flowchart/graph sources that Mermaid exposes as editable nodes and edges. */
-  model?: MermaidEditableModel;
-}
-
-async function loadMermaid(): Promise<typeof import('mermaid').default> {
-  if (!mermaidPromise) {
-    mermaidPromise = import('mermaid')
-      .then(({ default: mermaid }) => {
-        mermaid.initialize({
-          startOnLoad: false,
-          securityLevel: 'strict',
-          suppressErrorRendering: true,
-          deterministicIds: false,
-          logLevel: 'error',
-        });
-        return mermaid;
-      })
-      .catch((error: unknown) => {
-        // A transient chunk-load failure should not poison every diagram for
-        // the rest of the editor session.
-        mermaidPromise = null;
-        throw error;
-      });
-  }
-  return mermaidPromise;
-}
-
-/**
- * Render through Mermaid's public API so all diagram types supported by the
- * pinned Mermaid release share the same path. The caller owns insertion of
- * the returned SVG; interactive `bindFunctions` are intentionally not run in
- * the editor, preventing authored links/callbacks from hijacking editing.
- */
-export async function renderMermaidDiagram(
-  id: string,
-  source: string,
-  container?: Element,
-): Promise<MermaidRenderResult> {
-  const run = async (): Promise<MermaidRenderResult> => {
-    const mermaid = await loadMermaid();
-    const model = await inspectMermaidSourceWith(mermaid, source);
-    const { svg, diagramType } = await mermaid.render(id, source, container);
-    return model ? { svg, diagramType, model } : { svg, diagramType };
-  };
-  // `getDiagramFromText` and `render` share Mermaid diagram databases. Keep
-  // each inspect+render pair together when several widgets mount at once.
-  return enqueueMermaidWork(run);
-}
-
-/** Inspect the subset Mermaid exposes as structured flowchart nodes/edges. */
-export function inspectMermaidSource(source: string): Promise<MermaidEditableModel | null> {
-  return enqueueMermaidWork(async () => inspectMermaidSourceWith(await loadMermaid(), source));
-}
-
-async function inspectMermaidSourceWith(
-  mermaid: typeof import('mermaid').default,
-  source: string,
-): Promise<MermaidEditableModel | null> {
-  const getDiagramFromText = mermaid.mermaidAPI?.getDiagramFromText;
-  if (typeof getDiagramFromText !== 'function') return null;
-  try {
-    const diagram = await getDiagramFromText(source);
-    if (diagram.type !== 'flowchart' && diagram.type !== 'flowchart-v2') return null;
-    const db = diagram.db as FlowDbLike;
-    if (typeof db.getVertices !== 'function' || typeof db.getEdges !== 'function') return null;
-
-    const nodes: MermaidEditableNode[] = [];
-    for (const [fallbackId, vertex] of db.getVertices()) {
-      const nodeId = typeof vertex.id === 'string' ? vertex.id : fallbackId;
-      if (!nodeId) continue;
-      nodes.push({
-        id: nodeId,
-        domId: typeof vertex.domId === 'string' ? vertex.domId : nodeId,
-        label: typeof vertex.text === 'string' ? vertex.text : nodeId,
-        shape: normalizeMermaidFlowchartShape(
-          typeof vertex.type === 'string' ? vertex.type : undefined,
-        ),
-        classes: Array.isArray(vertex.classes)
-          ? vertex.classes.filter((value): value is string => typeof value === 'string')
-          : [],
-      });
-    }
-
-    const edges: MermaidEditableEdge[] = db
-      .getEdges()
-      .map((edge, index) => ({
-        id: typeof edge.id === 'string' ? edge.id : `edge-${index}`,
-        source: typeof edge.start === 'string' ? edge.start : '',
-        target: typeof edge.end === 'string' ? edge.end : '',
-        label: typeof edge.text === 'string' ? edge.text : '',
-        ...(typeof edge.type === 'string' ? { type: edge.type } : {}),
-        ...(typeof edge.stroke === 'string' ? { stroke: edge.stroke } : {}),
-        ...(typeof edge.isUserDefinedId === 'boolean'
-          ? { userDefinedId: edge.isUserDefinedId }
-          : {}),
-      }))
-      .filter((edge) => edge.source && edge.target);
-
-    const rawDirection = db.getDirection?.();
-    const direction: MermaidFlowchartDirection =
-      rawDirection === 'TB' ||
-      rawDirection === 'TD' ||
-      rawDirection === 'BT' ||
-      rawDirection === 'RL' ||
-      rawDirection === 'LR'
-        ? rawDirection
-        : 'TB';
-    return { kind: 'flowchart', direction, nodes, edges };
-  } catch {
-    // Rendering still owns the user-facing syntax error. Inspection is an
-    // optional enhancement and must never prevent full Mermaid rendering.
-    return null;
-  }
-}
-
-export function mermaidErrorMessage(error: unknown): string {
-  const raw = error instanceof Error ? error.message : String(error);
-  const message = raw
-    .split(/\r?\n/)
-    .map((line) => line.trimEnd())
-    .filter(Boolean)
-    .slice(0, 8)
-    .join('\n');
-  return message || 'Unknown Mermaid rendering error.';
-}

package/src/mermaid/mermaidShapes.ts

@@ -1,113 +0,0 @@
-/** Mermaid 11.16 flowchart shape catalog used by the structured editor. */
-
-export interface MermaidFlowchartShape {
-  id: string;
-  label: string;
-  category: 'Basic' | 'Process' | 'Data' | 'Documents' | 'Symbols';
-  aliases?: readonly string[];
-}
-
-/**
- * Every non-asset shape in Mermaid 11.16's expanded flowchart catalog.
- * `icon` and `image` are deliberately excluded: they require additional
- * asset-specific fields and, for icons, a host-registered icon pack.
- */
-export const MERMAID_FLOWCHART_SHAPES = [
-  { id: 'rect', label: 'Process', category: 'Basic', aliases: ['rectangle', 'proc'] },
-  { id: 'rounded', label: 'Event', category: 'Basic', aliases: ['event'] },
-  { id: 'stadium', label: 'Terminal', category: 'Basic', aliases: ['pill'] },
-  { id: 'circle', label: 'Circle', category: 'Basic', aliases: ['circ'] },
-  { id: 'dbl-circ', label: 'Double circle', category: 'Basic', aliases: ['double-circle'] },
-  { id: 'diam', label: 'Decision', category: 'Basic', aliases: ['diamond', 'question'] },
-  { id: 'hex', label: 'Preparation', category: 'Basic', aliases: ['hexagon', 'prepare'] },
-  { id: 'tri', label: 'Extract', category: 'Basic', aliases: ['triangle'] },
-  { id: 'odd', label: 'Odd', category: 'Basic' },
-
-  { id: 'notch-rect', label: 'Card', category: 'Process', aliases: ['card'] },
-  { id: 'delay', label: 'Delay', category: 'Process' },
-  { id: 'div-rect', label: 'Divided process', category: 'Process', aliases: ['div-proc'] },
-  { id: 'fork', label: 'Fork / join', category: 'Process', aliases: ['join'] },
-  { id: 'lin-rect', label: 'Lined process', category: 'Process', aliases: ['lin-proc'] },
-  { id: 'st-rect', label: 'Multi-process', category: 'Process', aliases: ['processes'] },
-  { id: 'fr-rect', label: 'Subprocess', category: 'Process', aliases: ['subprocess'] },
-  { id: 'tag-rect', label: 'Tagged process', category: 'Process', aliases: ['tag-proc'] },
-
-  { id: 'lean-r', label: 'Input / output', category: 'Data', aliases: ['in-out'] },
-  { id: 'lean-l', label: 'Output / input', category: 'Data', aliases: ['out-in'] },
-  { id: 'datastore', label: 'Data store', category: 'Data', aliases: ['data-store'] },
-  { id: 'cyl', label: 'Database', category: 'Data', aliases: ['database', 'db'] },
-  { id: 'h-cyl', label: 'Direct access storage', category: 'Data', aliases: ['das'] },
-  { id: 'lin-cyl', label: 'Disk storage', category: 'Data', aliases: ['disk'] },
-  { id: 'bow-rect', label: 'Stored data', category: 'Data', aliases: ['stored-data'] },
-  { id: 'win-pane', label: 'Internal storage', category: 'Data', aliases: ['window-pane'] },
-
-  { id: 'doc', label: 'Document', category: 'Documents' },
-  { id: 'docs', label: 'Multi-document', category: 'Documents', aliases: ['documents'] },
-  { id: 'lin-doc', label: 'Lined document', category: 'Documents' },
-  { id: 'tag-doc', label: 'Tagged document', category: 'Documents' },
-  { id: 'flag', label: 'Paper tape', category: 'Documents', aliases: ['paper-tape'] },
-
-  { id: 'bang', label: 'Bang', category: 'Symbols' },
-  { id: 'cloud', label: 'Cloud', category: 'Symbols' },
-  { id: 'hourglass', label: 'Collate', category: 'Symbols', aliases: ['collate'] },
-  { id: 'bolt', label: 'Communication link', category: 'Symbols', aliases: ['com-link'] },
-  { id: 'brace', label: 'Comment left', category: 'Symbols', aliases: ['comment'] },
-  { id: 'brace-r', label: 'Comment right', category: 'Symbols' },
-  { id: 'braces', label: 'Comment both', category: 'Symbols' },
-  { id: 'curv-trap', label: 'Display', category: 'Symbols', aliases: ['display'] },
-  { id: 'notch-pent', label: 'Loop limit', category: 'Symbols', aliases: ['loop-limit'] },
-  { id: 'flip-tri', label: 'Manual file', category: 'Symbols', aliases: ['manual-file'] },
-  { id: 'sl-rect', label: 'Manual input', category: 'Symbols', aliases: ['manual-input'] },
-  { id: 'trap-t', label: 'Manual operation', category: 'Symbols', aliases: ['manual'] },
-  { id: 'trap-b', label: 'Priority action', category: 'Symbols', aliases: ['priority'] },
-  { id: 'f-circ', label: 'Junction', category: 'Symbols', aliases: ['junction'] },
-  { id: 'sm-circ', label: 'Start', category: 'Symbols', aliases: ['start'] },
-  { id: 'fr-circ', label: 'Stop', category: 'Symbols', aliases: ['stop'] },
-  { id: 'cross-circ', label: 'Summary', category: 'Symbols', aliases: ['summary'] },
-  { id: 'text', label: 'Text block', category: 'Symbols' },
-] as const satisfies readonly MermaidFlowchartShape[];
-
-export type MermaidFlowchartShapeId = (typeof MERMAID_FLOWCHART_SHAPES)[number]['id'];
-
-const SHAPE_IDS = new Set<string>(MERMAID_FLOWCHART_SHAPES.map((shape) => shape.id));
-
-const LEGACY_SHAPE_IDS: Readonly<Record<string, MermaidFlowchartShapeId>> = {
-  square: 'rect',
-  rectangle: 'rect',
-  proc: 'rect',
-  round: 'rounded',
-  event: 'rounded',
-  pill: 'stadium',
-  subroutine: 'fr-rect',
-  cylinder: 'cyl',
-  database: 'cyl',
-  db: 'cyl',
-  diamond: 'diam',
-  question: 'diam',
-  hexagon: 'hex',
-  prepare: 'hex',
-  doublecircle: 'dbl-circ',
-  'double-circle': 'dbl-circ',
-  trapezoid: 'trap-b',
-  inv_trapezoid: 'trap-t',
-  lean_right: 'lean-r',
-  lean_left: 'lean-l',
-};
-
-export function isMermaidFlowchartShapeId(value: string): value is MermaidFlowchartShapeId {
-  return SHAPE_IDS.has(value);
-}
-
-/** Normalize legacy parser names and documented aliases to the general-syntax id. */
-export function normalizeMermaidFlowchartShape(
-  value: string | null | undefined,
-): MermaidFlowchartShapeId {
-  if (!value) return 'rect';
-  if (isMermaidFlowchartShapeId(value)) return value;
-  const legacy = LEGACY_SHAPE_IDS[value];
-  if (legacy) return legacy;
-  for (const shape of MERMAID_FLOWCHART_SHAPES) {
-    if ('aliases' in shape && (shape.aliases as readonly string[]).includes(value)) return shape.id;
-  }
-  return 'rect';
-}