@bendyline/squisq-editor-react 1.5.3 → 1.6.1

package/src/diagram/DiagramCanvas.tsx

@@ -0,0 +1,240 @@
+/**
+ * DiagramCanvas — thin wrapper around the Squisq Scene engine.
+ *
+ * Translates between the diagram's command vocabulary (which the host
+ * `DiagramWidget` translates into Tiptap mutations) and the Scene's
+ * generic SceneCommand vocabulary. The Scene itself owns viewport
+ * pan/zoom, selection, hit-testing, and tool dispatch.
+ *
+ * Diagram nodes are rendered as synthetic card+label Layer pairs
+ * (`nodeCard.tsx`) so what you see in the editor is the same Layer
+ * schema the SSR `diagramBlock.ts` template emits. Edges are drawn by
+ * `<DiagramEdges>` as a separate background layer.
+ */
+
+import { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  Scene,
+  buildDiagramScene,
+  nodeIdFromCardLayerId,
+  diagramLayerFollows,
+  DiagramEdges,
+  type SceneCommand,
+} from '../scene';
+import type { SceneTextEditConfig } from '../scene/text/sceneTextConfig';
+import { markdownToTiptap } from '../tiptapBridge';
+import type { DiagramRFNode, DiagramRFEdge } from './useDiagramData';
+import { DIAGRAM_VIEWPORT, DIAGRAM_TOOLS } from './diagramConstants';
+
+export type DiagramCommand =
+  | { kind: 'moveNode'; nodeId: string; x: number; y: number }
+  | { kind: 'resizeNode'; nodeId: string; width: number; height: number }
+  | { kind: 'addConnection'; source: string; target: string; type?: string }
+  | { kind: 'removeConnection'; source: string; target: string; type?: string }
+  | { kind: 'renameNode'; nodeId: string; newLabel: string }
+  | { kind: 'addNode'; x: number; y: number }
+  | { kind: 'removeNode'; nodeId: string };
+
+interface DiagramCanvasProps {
+  nodes: DiagramRFNode[];
+  edges: DiagramRFEdge[];
+  onCommand: (cmd: DiagramCommand) => void;
+  /** When true, render the maximize button. Click toggles `onToggleMaximize`. */
+  showMaximize?: boolean;
+  /** Whether the canvas is currently maximized (affects button icon). */
+  maximized?: boolean;
+  /** Callback when the maximize button is clicked. */
+  onToggleMaximize?: () => void;
+  /**
+   * Active tool id, controlled by the host (DiagramWidget) so the tool
+   * buttons can live in the shared toolbar above the canvas. Falls back
+   * to internal state when omitted.
+   */
+  activeToolId?: string;
+  onActiveToolIdChange?: (id: string) => void;
+  /** Forwarded to the Scene so the host can drive a Delete action. */
+  onSelectionChange?: (ids: ReadonlySet<string>) => void;
+}
+
+const TOOLS = DIAGRAM_TOOLS;
+
+export function DiagramCanvas({
+  nodes: incomingNodes,
+  edges: incomingEdges,
+  onCommand,
+  showMaximize = true,
+  maximized = false,
+  onToggleMaximize,
+  activeToolId: controlledToolId,
+  onActiveToolIdChange,
+  onSelectionChange,
+}: DiagramCanvasProps) {
+  const scene = useMemo(
+    () => buildDiagramScene(incomingNodes, incomingEdges),
+    [incomingNodes, incomingEdges],
+  );
+  // Track the active tool so we can keep selection when the user toggles
+  // back to Select after using Connect. Controlled by the host when it
+  // owns the shared toolbar; falls back to internal state otherwise.
+  const [internalToolId, setInternalToolId] = useState<string>('select');
+  const activeToolId = controlledToolId ?? internalToolId;
+  const setActiveToolId = onActiveToolIdChange ?? setInternalToolId;
+
+  // Translate generic SceneCommand → diagram-specific DiagramCommand,
+  // then hand off to the host (DiagramWidget) which writes to Tiptap.
+  const handleSceneCommand = useCallback(
+    (cmd: SceneCommand) => {
+      switch (cmd.kind) {
+        case 'moveLayer': {
+          // Only the node-card layer carries the position; ignore drag
+          // commits on the label layer (it'd duplicate the write).
+          if (!cmd.id.startsWith('node-card-')) return;
+          const nodeId = nodeIdFromCardLayerId(cmd.id);
+          if (!nodeId) return;
+          onCommand({ kind: 'moveNode', nodeId, x: cmd.x, y: cmd.y });
+          return;
+        }
+        case 'addEdge':
+          onCommand({
+            kind: 'addConnection',
+            source: cmd.source,
+            target: cmd.target,
+            type: cmd.type,
+          });
+          return;
+        case 'removeEdge':
+          onCommand({
+            kind: 'removeConnection',
+            source: cmd.source,
+            target: cmd.target,
+            type: cmd.type,
+          });
+          return;
+        case 'removeLayer': {
+          const nodeId = nodeIdFromCardLayerId(cmd.id);
+          if (nodeId) onCommand({ kind: 'removeNode', nodeId });
+          return;
+        }
+        case 'renameLayer': {
+          const nodeId = nodeIdFromCardLayerId(cmd.id);
+          if (nodeId) onCommand({ kind: 'renameNode', nodeId, newLabel: cmd.label });
+          return;
+        }
+        case 'setLayerText': {
+          // Diagram node labels persist as heading text (markdown inline
+          // marks); the rich `html` is not stored separately.
+          const nodeId = nodeIdFromCardLayerId(cmd.id);
+          if (nodeId) onCommand({ kind: 'renameNode', nodeId, newLabel: cmd.text });
+          return;
+        }
+        case 'addLayer': {
+          // Diagram mode interprets addLayer as "add a node at the layer's
+          // position". The Scene's empty-state "add" button and any future
+          // double-click handler dispatch this.
+          const pos = cmd.layer.position;
+          const x = typeof pos.x === 'number' ? pos.x : 0;
+          const y = typeof pos.y === 'number' ? pos.y : 0;
+          onCommand({ kind: 'addNode', x, y });
+          return;
+        }
+        case 'resizeLayer': {
+          if (!cmd.id.startsWith('node-card-')) return;
+          const nodeId = nodeIdFromCardLayerId(cmd.id);
+          if (!nodeId) return;
+          onCommand({ kind: 'resizeNode', nodeId, width: cmd.width, height: cmd.height });
+          return;
+        }
+        case 'setLayerAttr':
+          // Diagram nodes don't expose generic attr writes; renames go
+          // through `renameLayer` and positions through move/resize.
+          return;
+      }
+      const _exhaustive: never = cmd;
+      void _exhaustive;
+    },
+    [onCommand],
+  );
+
+  // Edges render in the renderExtras callback so they sit behind the
+  // node cards (which the Scene renders itself).
+  const nodesForExtras = scene.nodes;
+  const edgesForExtras = scene.edges;
+  const renderExtras = useCallback(
+    () => <DiagramEdges nodes={nodesForExtras} edges={edgesForExtras} />,
+    [nodesForExtras, edgesForExtras],
+  );
+
+  // Inline label editing: double-click a node card to edit its label.
+  // Labels persist as the node's heading text (inline markdown marks), so
+  // the editor is `inline` level. Refs keep the config stable.
+  const incomingNodesRef = useRef(incomingNodes);
+  incomingNodesRef.current = incomingNodes;
+  const textConfig = useMemo<SceneTextEditConfig>(
+    () => ({
+      resolveEditableId: (id) => (nodeIdFromCardLayerId(id) ? id : null),
+      getHtml: (id) => {
+        const nodeId = nodeIdFromCardLayerId(id);
+        const node = incomingNodesRef.current.find((n) => n.id === nodeId);
+        return markdownToTiptap(node?.data.label ?? '');
+      },
+      commit: (id, { text }) => {
+        // Node labels persist as plain heading text for now (rich marks on
+        // labels are a follow-up — the rendering foundation is in place).
+        handleSceneCommand({ kind: 'renameLayer', id, label: text });
+      },
+      level: 'inline',
+    }),
+    [handleSceneCommand],
+  );
+
+  return (
+    <div className="squisq-diagram-canvas">
+      <Scene
+        viewport={DIAGRAM_VIEWPORT}
+        layers={scene.layers}
+        edges={scene.edges}
+        tools={TOOLS}
+        activeToolId={activeToolId}
+        onActiveToolIdChange={setActiveToolId}
+        onSelectionChange={onSelectionChange}
+        onCommand={handleSceneCommand}
+        renderExtras={renderExtras}
+        layerFollows={diagramLayerFollows}
+        showMaximize={showMaximize}
+        maximized={maximized}
+        onToggleMaximize={onToggleMaximize}
+        showToolbar={false}
+        textEditing={textConfig}
+      />
+      {scene.nodes.length === 0 && (
+        <DiagramEmptyState
+          onAdd={() => {
+            // Place the first node at the center of the viewport's
+            // logical surface; the Scene's fit-on-mount keeps it visible.
+            onCommand({
+              kind: 'addNode',
+              x: DIAGRAM_VIEWPORT.width / 2 - 90,
+              y: DIAGRAM_VIEWPORT.height / 2 - 32,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function DiagramEmptyState({ onAdd }: { onAdd: () => void }) {
+  return (
+    <div className="squisq-diagram-empty">
+      <div className="squisq-diagram-empty-title">No diagram nodes yet</div>
+      <div className="squisq-diagram-empty-hint">
+        Click "+ Add first node" below, or add sub-headings under this block.
+      </div>
+      <button type="button" className="squisq-diagram-empty-btn" onClick={onAdd}>
+        + Add first node
+      </button>
+    </div>
+  );
+}
+
+export default DiagramCanvas;

package/src/diagram/DiagramExtension.ts

@@ -0,0 +1,209 @@
+/**
+ * DiagramExtension — Tiptap/ProseMirror plugin that:
+ *
+ * 1. Mounts a React-Flow canvas (`DiagramWidget`) immediately after every
+ *    heading whose `dataTemplate === 'diagram'`.
+ * 2. Hides the direct sub-headings of each diagram parent (until the next
+ *    equal-or-shallower heading) by tagging them with a `data-squisq-diagram-child`
+ *    attribute — CSS in `styles/diagram.css` does the actual hiding.
+ *
+ * Widgets are rendered as plain DOM nodes attached to a ProseMirror
+ * `Decoration.widget`. React is mounted into the widget DOM with
+ * `react-dom/client`'s `createRoot`, and unmounted on the widget's
+ * `destroy` hook.
+ */
+
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import type { EditorState } from '@tiptap/pm/state';
+import type { Editor } from '@tiptap/react';
+import { createRoot, type Root } from 'react-dom/client';
+import { createElement } from 'react';
+import type { Node as PMNode } from '@tiptap/pm/model';
+import { parsePandocAttrTokens } from '@bendyline/squisq/markdown';
+import { DiagramWidget } from './DiagramWidget';
+
+/**
+ * Stable identifier for a diagram heading — prefers the persisted
+ * Pandoc `#id`, falls back to a slugified version of the heading's
+ * text. Used as part of the widget decoration's `key` so the widget
+ * survives attribute-only doc changes (drag/resize commits).
+ */
+export function getHeadingKey(node: PMNode): string {
+  const raw = (node.attrs as Record<string, unknown>).dataBlockAttrs;
+  if (typeof raw === 'string' && raw.length > 0) {
+    const attrs = parsePandocAttrTokens(raw);
+    if (attrs.id) return attrs.id;
+  }
+  let text = '';
+  node.content.forEach((child) => {
+    if (child.isText) text += child.text ?? '';
+  });
+  return (
+    text
+      .toLowerCase()
+      .replace(/[^\w\s-]/g, '')
+      .replace(/[\s_]+/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '') || 'block'
+  );
+}
+
+/**
+ * Find the current document position of a diagram heading by its
+ * stable key. Returns `null` if the heading no longer exists (e.g. the
+ * user removed it). Used by the widget to re-resolve its parent
+ * position on every read, since the kept-alive widget's captured
+ * `parentPos` would otherwise go stale when content above shifts.
+ */
+export function findDiagramHeadingPos(editor: Editor, headingKey: string): number | null {
+  let found: number | null = null;
+  editor.state.doc.descendants((node, pos) => {
+    if (found != null) return false;
+    if (node.type.name !== 'heading') return;
+    const attrs = node.attrs as { dataTemplate?: string };
+    if (attrs.dataTemplate !== 'diagram') return;
+    if (getHeadingKey(node) === headingKey) {
+      found = pos;
+      return false;
+    }
+  });
+  return found;
+}
+
+const KEY = new PluginKey('squisq-diagram');
+
+interface DiagramRoot {
+  el: HTMLElement;
+  root: Root;
+}
+
+function buildDecorations(state: EditorState, editor: Editor): DecorationSet {
+  const decos: Decoration[] = [];
+
+  state.doc.descendants((node, pos) => {
+    if (node.type.name !== 'heading') return;
+    const attrs = node.attrs as { level: number; dataTemplate?: string };
+    if (attrs.dataTemplate === 'diagram') {
+      const parentDepth = attrs.level;
+      const widgetPos = pos + node.nodeSize;
+      const parentPos = pos;
+      // Stable widget key derived from the heading's persisted id (or its
+      // text-derived slug). ProseMirror treats decorations with matching
+      // keys as equal, so it keeps the existing widget DOM (and the
+      // mounted React root) across attribute-only doc changes — which
+      // happen on every drag commit when we write `x=`/`y=` back to the
+      // heading. Without this, every drop would destroy and recreate the
+      // canvas, blowing away pan/zoom and making the cards appear to snap
+      // back to their pre-fit position.
+      const headingKey = getHeadingKey(node);
+      decos.push(
+        Decoration.widget(
+          widgetPos,
+          (view) => {
+            const container = document.createElement('div');
+            container.className = 'squisq-diagram-widget-host';
+            container.contentEditable = 'false';
+            // Stop ProseMirror from treating clicks/keys inside the
+            // widget as document interactions.
+            container.addEventListener('mousedown', (e) => e.stopPropagation());
+            container.addEventListener('keydown', (e) => e.stopPropagation());
+
+            const root = createRoot(container);
+            root.render(
+              createElement(DiagramWidget, {
+                editor,
+                headingKey,
+                fallbackParentPos: parentPos,
+                host: view.dom.parentElement ?? view.dom,
+              }),
+            );
+
+            // Stash for destroy.
+            (container as HTMLElement & { __squisqDiagramRoot?: DiagramRoot }).__squisqDiagramRoot =
+              {
+                el: container,
+                root,
+              };
+            return container;
+          },
+          {
+            destroy: (dom) => {
+              const ref = (dom as HTMLElement & { __squisqDiagramRoot?: DiagramRoot })
+                .__squisqDiagramRoot;
+              if (ref) {
+                // Defer to next tick so React isn't unmounted mid-render.
+                setTimeout(() => ref.root.unmount(), 0);
+              }
+            },
+            // Cluster the widget tightly after the heading; don't side-bias.
+            side: 1,
+            ignoreSelection: true,
+            key: `squisq-diagram-${headingKey}`,
+          },
+        ),
+      );
+
+      // Mark child headings (depth = parentDepth + 1 .. 6, until next ≤parentDepth).
+      let cursor = pos + node.nodeSize;
+      while (cursor < state.doc.content.size) {
+        const child = state.doc.nodeAt(cursor);
+        if (!child) break;
+        if (child.type.name === 'heading') {
+          const childLevel = (child.attrs as { level: number }).level;
+          if (childLevel <= parentDepth) break;
+          decos.push(
+            Decoration.node(cursor, cursor + child.nodeSize, {
+              'data-squisq-diagram-child': 'true',
+            }),
+          );
+        }
+        cursor += child.nodeSize;
+      }
+    }
+  });
+
+  return DecorationSet.create(state.doc, decos);
+}
+
+export interface DiagramExtensionOptions {
+  /** When false, the extension is inert (no widgets, no decorations). */
+  enabled?: boolean;
+}
+
+export const DiagramExtension = Extension.create<DiagramExtensionOptions>({
+  name: 'squisqDiagram',
+
+  addOptions() {
+    return {
+      enabled: true,
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const editor = this.editor as Editor;
+    const enabled = this.options.enabled !== false;
+    if (!enabled) return [];
+
+    return [
+      new Plugin({
+        key: KEY,
+        state: {
+          init: (_config, state) => buildDecorations(state, editor),
+          apply: (tr, oldDecos, _oldState, newState) => {
+            if (!tr.docChanged) return oldDecos;
+            return buildDecorations(newState, editor);
+          },
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state);
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default DiagramExtension;

package/src/diagram/DiagramMaximizedOverlay.tsx

@@ -0,0 +1,46 @@
+/**
+ * DiagramMaximizedOverlay — full-editor overlay that hosts the diagram
+ * canvas when the user clicks the maximize button.
+ *
+ * Positions over the closest `position: relative` / `position: absolute`
+ * ancestor (in practice, the editor shell's root). `Esc` and an overlay
+ * close button both call `onClose`.
+ */
+
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+interface DiagramMaximizedOverlayProps {
+  /** DOM node to portal into. Falls back to document.body. */
+  host?: HTMLElement | null;
+  /** Closes the overlay (e.g., returns to inline view). */
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export function DiagramMaximizedOverlay({ host, onClose, children }: DiagramMaximizedOverlayProps) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [onClose]);
+
+  const target = host ?? (typeof document !== 'undefined' ? document.body : null);
+  if (!target) return null;
+
+  return createPortal(
+    <div className="squisq-diagram-maximized-overlay">
+      <div className="squisq-diagram-maximized-content">{children}</div>
+    </div>,
+    target,
+  );
+}
+
+export default DiagramMaximizedOverlay;