@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/mermaid/MermaidDiagramExtension.ts

@@ -1,243 +0,0 @@
-/**
- * Tiptap extension for `mermaid` code fences.
- *
- * The code block always remains the document source of truth. The extension
- * only hides/shows that block and mounts a rendered Mermaid canvas after it;
- * it never replaces the fence with an editor-only node or a reduced graph
- * model. That keeps every Mermaid diagram type and directive round-trippable.
- */
-
-import { Extension } from '@tiptap/core';
-import type { Node as PMNode } from '@tiptap/pm/model';
-import { Plugin, PluginKey, type Transaction } from '@tiptap/pm/state';
-import { Decoration, DecorationSet } from '@tiptap/pm/view';
-import type { Editor } from '@tiptap/react';
-import { createElement } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
-import { MermaidDiagramWidget } from './MermaidDiagramWidget';
-
-export interface MermaidDiagramBlockEntry {
-  /** Synthetic session id, stable while this code block remains in the doc. */
-  id: string;
-  /** Current ProseMirror position of the `codeBlock`. */
-  pos: number;
-}
-
-export interface MermaidDiagramPluginState {
-  entries: MermaidDiagramBlockEntry[];
-  decorations: DecorationSet;
-  sourceVisible: ReadonlySet<string>;
-  seq: number;
-}
-
-export interface MermaidDiagramExtensionOptions {
-  /** When false, leave Mermaid fences as ordinary code blocks. */
-  enabled?: boolean;
-}
-
-export const MERMAID_DIAGRAM_KEY = new PluginKey<MermaidDiagramPluginState>(
-  'squisq-mermaid-diagram',
-);
-
-function fenceLanguage(node: PMNode): string {
-  const language = (node.attrs as { language?: unknown }).language;
-  return typeof language === 'string' ? language.trim().toLowerCase() : '';
-}
-
-/** Mermaid is an explicit mode: only a `mermaid` language tag claims it. */
-export function isMermaidDiagramNode(node: PMNode): boolean {
-  return node.type.name === 'codeBlock' && fenceLanguage(node) === 'mermaid';
-}
-
-export function findMermaidDiagramBlockPos(editor: Editor, blockId: string): number | null {
-  const state = MERMAID_DIAGRAM_KEY.getState(editor.state);
-  return state?.entries.find((entry) => entry.id === blockId)?.pos ?? null;
-}
-
-export function isMermaidSourceVisible(editor: Editor, blockId: string): boolean {
-  return MERMAID_DIAGRAM_KEY.getState(editor.state)?.sourceVisible.has(blockId) ?? false;
-}
-
-/** Toggle the editable code block without changing any document bytes. */
-export function toggleMermaidSource(editor: Editor, blockId: string): void {
-  editor.view.dispatch(editor.state.tr.setMeta(MERMAID_DIAGRAM_KEY, { toggleSource: blockId }));
-}
-
-interface WidgetRootRef {
-  root: Root;
-}
-
-function buildDecorations(
-  doc: PMNode,
-  entries: readonly MermaidDiagramBlockEntry[],
-  sourceVisible: ReadonlySet<string>,
-  editor: Editor,
-): DecorationSet {
-  const decorations: Decoration[] = [];
-  for (const entry of entries) {
-    const node = doc.nodeAt(entry.pos);
-    if (!node || !isMermaidDiagramNode(node)) continue;
-    decorations.push(
-      Decoration.node(entry.pos, entry.pos + node.nodeSize, {
-        class: sourceVisible.has(entry.id)
-          ? 'squisq-mermaid-fence-source'
-          : 'squisq-mermaid-fence-hidden',
-      }),
-    );
-    const blockId = entry.id;
-    decorations.push(
-      Decoration.widget(
-        entry.pos + node.nodeSize,
-        (view) => {
-          const container = document.createElement('div');
-          container.className = 'squisq-mermaid-diagram-widget-host';
-          container.contentEditable = 'false';
-          container.addEventListener('mousedown', (event) => event.stopPropagation());
-          container.addEventListener('keydown', (event) => event.stopPropagation());
-          const root = createRoot(container);
-          root.render(
-            createElement(MermaidDiagramWidget, {
-              editor,
-              blockId,
-              host: view.dom.parentElement ?? view.dom,
-            }),
-          );
-          (container as HTMLElement & { __squisqMermaidRoot?: WidgetRootRef }).__squisqMermaidRoot =
-            { root };
-          return container;
-        },
-        {
-          destroy: (dom) => {
-            const ref = (dom as HTMLElement & { __squisqMermaidRoot?: WidgetRootRef })
-              .__squisqMermaidRoot;
-            if (ref) setTimeout(() => ref.root.unmount(), 0);
-          },
-          ignoreSelection: true,
-          key: `squisq-mermaid-${entry.id}`,
-          side: 1,
-        },
-      ),
-    );
-  }
-  return DecorationSet.create(doc, decorations);
-}
-
-function remapEntries(
-  tr: Transaction,
-  previous: MermaidDiagramPluginState,
-  doc: PMNode,
-): { entries: MermaidDiagramBlockEntry[]; seq: number } {
-  const mapped = new Map<number, string>();
-  const claimed = new Set<string>();
-
-  for (const entry of previous.entries) {
-    const result = tr.mapping.mapResult(entry.pos, 1);
-    if (!result.deleted) {
-      mapped.set(result.pos, entry.id);
-      claimed.add(entry.id);
-    }
-  }
-
-  // Attribute and content edits can mark the opening token as replaced even
-  // when the same code block remains at the mapped position.
-  for (const entry of previous.entries) {
-    if (claimed.has(entry.id)) continue;
-    const result = tr.mapping.mapResult(entry.pos, 1);
-    if (mapped.has(result.pos)) continue;
-    if (doc.nodeAt(result.pos)?.type.name === 'codeBlock') {
-      mapped.set(result.pos, entry.id);
-      claimed.add(entry.id);
-    }
-  }
-
-  let seq = previous.seq;
-  const entries: MermaidDiagramBlockEntry[] = [];
-  doc.descendants((node, pos) => {
-    if (node.type.name !== 'codeBlock') return;
-    if (!isMermaidDiagramNode(node)) return false;
-    entries.push({ id: mapped.get(pos) ?? `mermaid-${++seq}`, pos });
-    return false;
-  });
-  return { entries, seq };
-}
-
-function applyState(
-  tr: Transaction,
-  previous: MermaidDiagramPluginState,
-  editor: Editor,
-  doc: PMNode,
-): MermaidDiagramPluginState {
-  const meta = tr.getMeta(MERMAID_DIAGRAM_KEY) as { toggleSource?: string } | undefined;
-  let sourceVisible = previous.sourceVisible;
-  if (meta?.toggleSource) {
-    const next = new Set(sourceVisible);
-    if (next.has(meta.toggleSource)) next.delete(meta.toggleSource);
-    else next.add(meta.toggleSource);
-    sourceVisible = next;
-  }
-
-  if (!tr.docChanged) {
-    if (!meta?.toggleSource) return previous;
-    return {
-      ...previous,
-      sourceVisible,
-      decorations: buildDecorations(doc, previous.entries, sourceVisible, editor),
-    };
-  }
-
-  const { entries, seq } = remapEntries(tr, previous, doc);
-  const liveIds = new Set(entries.map((entry) => entry.id));
-  const prunedSourceVisible = new Set([...sourceVisible].filter((id) => liveIds.has(id)));
-  return {
-    entries,
-    seq,
-    sourceVisible: prunedSourceVisible,
-    decorations: buildDecorations(doc, entries, prunedSourceVisible, editor),
-  };
-}
-
-export const MermaidDiagramExtension = Extension.create<MermaidDiagramExtensionOptions>({
-  name: 'squisqMermaidDiagram',
-
-  addOptions() {
-    return { enabled: true };
-  },
-
-  addProseMirrorPlugins() {
-    if (this.options.enabled === false) return [];
-    const editor = this.editor as Editor;
-    return [
-      new Plugin<MermaidDiagramPluginState>({
-        key: MERMAID_DIAGRAM_KEY,
-        state: {
-          init: (_config, state) => {
-            let seq = 0;
-            const entries: MermaidDiagramBlockEntry[] = [];
-            state.doc.descendants((node, pos) => {
-              if (node.type.name !== 'codeBlock') return;
-              if (!isMermaidDiagramNode(node)) return false;
-              entries.push({ id: `mermaid-${++seq}`, pos });
-              return false;
-            });
-            const sourceVisible = new Set<string>();
-            return {
-              entries,
-              seq,
-              sourceVisible,
-              decorations: buildDecorations(state.doc, entries, sourceVisible, editor),
-            };
-          },
-          apply: (tr, previous, _oldState, newState) =>
-            applyState(tr, previous, editor, newState.doc),
-        },
-        props: {
-          decorations(state) {
-            return this.getState(state)?.decorations ?? DecorationSet.empty;
-          },
-        },
-      }),
-    ];
-  },
-});
-
-export default MermaidDiagramExtension;

package/src/mermaid/MermaidDiagramTypeThumbnail.tsx

@@ -1,184 +0,0 @@
-import type { ReactNode } from 'react';
-import type { MermaidDiagramPreview } from './mermaidDiagramTypes';
-
-/** Small authored SVG cues; these avoid spinning up Mermaid for every gallery tile. */
-export function MermaidDiagramTypeThumbnail({ preview }: { preview: MermaidDiagramPreview }) {
-  const common = { fill: 'none', stroke: 'currentColor', strokeWidth: 2 } as const;
-
-  let art: ReactNode;
-  switch (preview) {
-    case 'sequence':
-      art = (
-        <>
-          <rect x="14" y="8" width="28" height="12" rx="2" />
-          <rect x="78" y="8" width="28" height="12" rx="2" />
-          <path d="M28 20v36M92 20v36M30 30h58l-6-4m6 4-6 4M90 45H32l6-4m-6 4 6 4" />
-        </>
-      );
-      break;
-    case 'state':
-      art = (
-        <>
-          <circle cx="13" cy="32" r="5" fill="currentColor" />
-          <rect x="32" y="20" width="34" height="24" rx="10" />
-          <circle cx="101" cy="32" r="8" />
-          <circle cx="101" cy="32" r="4" fill="currentColor" />
-          <path d="M18 32h14m34 0h27m-5-4 5 4-5 4" />
-        </>
-      );
-      break;
-    case 'class':
-    case 'requirement':
-      art = (
-        <>
-          <rect x="10" y="10" width="40" height="44" rx="2" />
-          <path d="M10 23h40M10 37h40M24 29h18M18 44h24" />
-          <rect x="75" y="18" width="35" height="30" rx="2" />
-          <path d="M50 32h25m-6-4 6 4-6 4M82 28h20M82 38h14" />
-        </>
-      );
-      break;
-    case 'er':
-      art = (
-        <>
-          <rect x="8" y="17" width="35" height="30" rx="2" />
-          <rect x="78" y="17" width="35" height="30" rx="2" />
-          <path d="M43 32h35M50 26v12m21-12v12M55 32l6-6v12z" />
-        </>
-      );
-      break;
-    case 'mindmap':
-      art = (
-        <>
-          <ellipse cx="60" cy="32" rx="20" ry="10" />
-          <path d="M40 29L18 16m22 19L18 49m62-20 22-13M80 35l22 14" />
-          <circle cx="15" cy="14" r="5" />
-          <circle cx="15" cy="50" r="5" />
-          <circle cx="105" cy="14" r="5" />
-          <circle cx="105" cy="50" r="5" />
-        </>
-      );
-      break;
-    case 'c4':
-    case 'architecture':
-      art = (
-        <>
-          <rect x="6" y="7" width="108" height="50" rx="5" strokeDasharray="4 3" />
-          <rect x="14" y="21" width="25" height="20" rx="3" />
-          <rect x="48" y="21" width="25" height="20" rx="3" />
-          <ellipse cx="99" cy="31" rx="12" ry="10" />
-          <path d="M39 31h9m25 0h14m-5-4 5 4-5 4" />
-        </>
-      );
-      break;
-    case 'gantt':
-      art = (
-        <>
-          <path d="M20 8v48M20 16h94M20 30h94M20 44h94M40 8v48M65 8v48M90 8v48" opacity=".35" />
-          <rect x="28" y="19" width="30" height="7" rx="2" fill="currentColor" />
-          <rect x="52" y="33" width="42" height="7" rx="2" fill="currentColor" />
-          <path d="M94 47l5 5 5-5-5-5z" fill="currentColor" />
-        </>
-      );
-      break;
-    case 'timeline':
-    case 'journey':
-      art = (
-        <>
-          <path d="M8 38h104M18 38V20M58 38V12M99 38V24" />
-          <circle cx="18" cy="38" r="5" fill="currentColor" />
-          <circle cx="58" cy="38" r="5" fill="currentColor" />
-          <circle cx="99" cy="38" r="5" fill="currentColor" />
-          <path d="M12 17h22M48 9h25M88 21h25" />
-        </>
-      );
-      break;
-    case 'kanban':
-      art = (
-        <>
-          <rect x="7" y="8" width="31" height="48" rx="3" />
-          <rect x="44" y="8" width="31" height="48" rx="3" />
-          <rect x="81" y="8" width="31" height="48" rx="3" />
-          <path d="M13 17h19M50 17h19M87 17h19" />
-          <rect x="12" y="24" width="21" height="10" rx="2" fill="currentColor" opacity=".55" />
-          <rect x="49" y="24" width="21" height="17" rx="2" fill="currentColor" opacity=".55" />
-          <rect x="86" y="24" width="21" height="10" rx="2" fill="currentColor" opacity=".55" />
-        </>
-      );
-      break;
-    case 'git':
-      art = (
-        <>
-          <path d="M13 16h94M34 16c10 0 8 32 22 32h40" />
-          {[13, 34, 68, 96].map((x) => (
-            <circle key={x} cx={x} cy="16" r="5" fill="currentColor" />
-          ))}
-          <circle cx="56" cy="48" r="5" fill="currentColor" />
-          <circle cx="96" cy="48" r="5" fill="currentColor" />
-        </>
-      );
-      break;
-    case 'pie':
-      art = (
-        <>
-          <circle cx="60" cy="32" r="24" />
-          <path d="M60 32V8a24 24 0 0 1 20.8 36z" fill="currentColor" opacity=".65" />
-          <path d="M60 32l20.8 12A24 24 0 0 1 38 48z" fill="currentColor" opacity=".32" />
-        </>
-      );
-      break;
-    case 'quadrant':
-      art = (
-        <>
-          <path d="M12 54h98M12 54V8M61 8v46M12 31h98" opacity=".55" />
-          <circle cx="35" cy="20" r="5" fill="currentColor" />
-          <circle cx="85" cy="17" r="5" fill="currentColor" opacity=".7" />
-          <circle cx="73" cy="42" r="5" fill="currentColor" opacity=".45" />
-        </>
-      );
-      break;
-    case 'sankey':
-      art = (
-        <>
-          <rect x="7" y="12" width="9" height="40" rx="2" fill="currentColor" />
-          <rect x="55" y="8" width="9" height="48" rx="2" fill="currentColor" opacity=".65" />
-          <rect x="104" y="10" width="9" height="18" rx="2" fill="currentColor" />
-          <rect x="104" y="38" width="9" height="14" rx="2" fill="currentColor" opacity=".5" />
-          <path
-            d="M16 20C35 20 37 17 55 17M16 44c20 0 21 3 39 3M64 18c20 0 21 0 40 0M64 45c20 0 20 0 40 0"
-            strokeWidth="8"
-            opacity=".35"
-          />
-        </>
-      );
-      break;
-    case 'xy':
-      art = (
-        <>
-          <path d="M15 8v46h96" />
-          <rect x="27" y="35" width="10" height="19" fill="currentColor" opacity=".35" />
-          <rect x="51" y="25" width="10" height="29" fill="currentColor" opacity=".35" />
-          <rect x="75" y="16" width="10" height="38" fill="currentColor" opacity=".35" />
-          <path d="M20 43l24-12 24 5 33-22" strokeWidth="3" />
-          <circle cx="44" cy="31" r="3" fill="currentColor" />
-          <circle cx="68" cy="36" r="3" fill="currentColor" />
-          <circle cx="101" cy="14" r="3" fill="currentColor" />
-        </>
-      );
-      break;
-    default:
-      art = (
-        <>
-          <rect x="8" y="18" width="35" height="28" rx="3" />
-          <path d="M43 32h33m-6-5 6 5-6 5" />
-          <rect x="77" y="18" width="35" height="28" rx="3" />
-        </>
-      );
-  }
-
-  return (
-    <svg viewBox="0 0 120 64" aria-hidden="true" focusable="false" {...common}>
-      {art}
-    </svg>
-  );
-}