@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/diagram/DiagramExtension.ts

@@ -1,209 +0,0 @@
-/**
- * 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/DiagramWidget.tsx

@@ -1,272 +0,0 @@
-/**
- * DiagramWidget — the Squisq-Scene-backed canvas that sits below a
- * `### Title {[diagram]}` heading in the WYSIWYG view.
- *
- * Owns the maximize toggle. Resolves the parent heading's position
- * dynamically each render via `headingKey`, so the widget can survive
- * attribute-only doc changes (drag commits) without going stale when
- * content above the diagram shifts.
- *
- * Pushes user actions back through the `diagramCommands` helpers.
- */
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { Editor } from '@tiptap/react';
-import { DiagramCanvas, type DiagramCommand } from './DiagramCanvas';
-import { DIAGRAM_TOOLS, DIAGRAM_VIEWPORT } from './diagramConstants';
-import { DiagramMaximizedOverlay } from './DiagramMaximizedOverlay';
-import { useDiagramData } from './useDiagramData';
-import { findDiagramHeadingPos } from './DiagramExtension';
-import { SceneBlockToolbar, type SceneBlockAction } from '../scene/SceneBlockToolbar';
-import { SceneSideToolbar } from '../scene/SceneSideToolbar';
-import { nodeIdFromCardLayerId, NODE_WIDTH, NODE_HEIGHT } from '../scene';
-import { Icon } from '../Icon';
-import {
-  moveNode,
-  resizeNode,
-  addConnection,
-  removeConnection,
-  renameNode,
-  addNode,
-  removeNode,
-  getDiagramHeight,
-  setDiagramHeight,
-} from './diagramCommands';
-
-/** Smallest height the canvas can be dragged to (px). */
-const MIN_DIAGRAM_HEIGHT = 160;
-/** Default canvas height when none is pinned — must match `.squisq-diagram-inline` in diagram.css. */
-const DEFAULT_DIAGRAM_HEIGHT = 420;
-
-interface DiagramWidgetProps {
-  editor: Editor;
-  /** Stable id derived from the parent heading (slug / `#id`). */
-  headingKey: string;
-  /** Position of the parent heading at widget-creation time. Used as a
-   * fallback when the dynamic lookup fails (e.g. before the first
-   * transaction). */
-  fallbackParentPos: number;
-  /** Host element used for portal targeting by the maximize overlay. */
-  host?: HTMLElement | null;
-}
-
-export function DiagramWidget({ editor, headingKey, fallbackParentPos, host }: DiagramWidgetProps) {
-  // Re-resolve parentPos on every editor transaction so writes target
-  // the current heading position even after content above shifts. The same
-  // pass refreshes the pinned canvas height from the heading annotation so
-  // an external edit (or markdown reload) is reflected.
-  const [parentPos, setParentPos] = useState<number>(
-    () => findDiagramHeadingPos(editor, headingKey) ?? fallbackParentPos,
-  );
-  const [pinnedHeight, setPinnedHeight] = useState<number | null>(() =>
-    getDiagramHeight(editor, findDiagramHeadingPos(editor, headingKey) ?? fallbackParentPos),
-  );
-  useEffect(() => {
-    const onUpdate = () => {
-      const next = findDiagramHeadingPos(editor, headingKey);
-      if (next != null && next !== parentPos) setParentPos(next);
-      setPinnedHeight(getDiagramHeight(editor, next ?? parentPos));
-    };
-    editor.on('transaction', onUpdate);
-    return () => {
-      editor.off('transaction', onUpdate);
-    };
-  }, [editor, headingKey, parentPos]);
-
-  const { nodes, edges } = useDiagramData(editor, parentPos);
-  const [maximized, setMaximized] = useState(false);
-
-  // Live height while the bottom handle is being dragged (null = not
-  // dragging). Takes precedence over the persisted height so the canvas
-  // tracks the pointer before the markdown write lands on release.
-  const [dragHeight, setDragHeight] = useState<number | null>(null);
-  const inlineRef = useRef<HTMLDivElement>(null);
-  const effectiveHeight = dragHeight ?? pinnedHeight;
-
-  const onResizeStart = useCallback(
-    (e: React.PointerEvent) => {
-      // The handle owns this gesture — keep ProseMirror and the Scene from
-      // treating it as a selection / canvas drag.
-      e.preventDefault();
-      e.stopPropagation();
-      const startY = e.clientY;
-      // Measure the live rendered height so a drag starting from the CSS
-      // default (no pinned height yet) grows from the right baseline.
-      const startHeight =
-        inlineRef.current?.getBoundingClientRect().height ??
-        effectiveHeight ??
-        DEFAULT_DIAGRAM_HEIGHT;
-      const heightAt = (clientY: number) =>
-        Math.max(MIN_DIAGRAM_HEIGHT, Math.round(startHeight + (clientY - startY)));
-      const prevCursor = document.body.style.cursor;
-      const prevSelect = document.body.style.userSelect;
-      document.body.style.cursor = 'ns-resize';
-      document.body.style.userSelect = 'none';
-      const onMove = (ev: PointerEvent) => setDragHeight(heightAt(ev.clientY));
-      const onUp = (ev: PointerEvent) => {
-        window.removeEventListener('pointermove', onMove);
-        window.removeEventListener('pointerup', onUp);
-        document.body.style.cursor = prevCursor;
-        document.body.style.userSelect = prevSelect;
-        const finalH = heightAt(ev.clientY);
-        setDragHeight(null);
-        const livePos = findDiagramHeadingPos(editor, headingKey) ?? parentPos;
-        setDiagramHeight(editor, livePos, finalH);
-      };
-      window.addEventListener('pointermove', onMove);
-      window.addEventListener('pointerup', onUp);
-    },
-    [editor, headingKey, parentPos, effectiveHeight],
-  );
-
-  // Double-click the handle to clear the pinned height (revert to default).
-  const onResizeReset = useCallback(() => {
-    const livePos = findDiagramHeadingPos(editor, headingKey) ?? parentPos;
-    setDragHeight(null);
-    setDiagramHeight(editor, livePos, null);
-  }, [editor, headingKey, parentPos]);
-
-  const dispatch = useCallback(
-    (cmd: DiagramCommand) => {
-      // Re-resolve at dispatch time too — the React state may not have
-      // caught up yet when the user issues rapid-fire commands.
-      const livePos = findDiagramHeadingPos(editor, headingKey) ?? parentPos;
-      switch (cmd.kind) {
-        case 'moveNode':
-          moveNode(editor, livePos, cmd.nodeId, cmd.x, cmd.y);
-          break;
-        case 'resizeNode':
-          resizeNode(editor, livePos, cmd.nodeId, cmd.width, cmd.height);
-          break;
-        case 'addConnection':
-          addConnection(editor, livePos, cmd.source, cmd.target, cmd.type);
-          break;
-        case 'removeConnection':
-          removeConnection(editor, livePos, cmd.source, cmd.target, cmd.type);
-          break;
-        case 'renameNode':
-          renameNode(editor, livePos, cmd.nodeId, cmd.newLabel);
-          break;
-        case 'addNode': {
-          const used = new Set(nodes.map((n) => n.id));
-          let i = nodes.length + 1;
-          let id = `node-${i}`;
-          while (used.has(id)) {
-            i++;
-            id = `node-${i}`;
-          }
-          addNode(editor, livePos, id, `Node ${i}`, cmd.x, cmd.y);
-          break;
-        }
-        case 'removeNode':
-          removeNode(editor, livePos, cmd.nodeId);
-          break;
-      }
-    },
-    [editor, headingKey, parentPos, nodes],
-  );
-
-  // ── Shared toolbar (above the canvas) ────────────────────
-  // Tool selection + node CRUD live here rather than inside the canvas,
-  // so diagram/drawing/layout share one consistent bar above each canvas.
-  const [activeToolId, setActiveToolId] = useState<string>('select');
-  const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(() => new Set());
-  // Map the Scene's selected layer ids (node cards) back to node ids.
-  const selectedNodeIds = useMemo(
-    () =>
-      [...selectedIds]
-        .map((id) => nodeIdFromCardLayerId(id))
-        .filter((id): id is string => id != null),
-    [selectedIds],
-  );
-
-  const actions: SceneBlockAction[] = [
-    {
-      id: 'add-node',
-      label: 'Node',
-      icon: <Icon icon="fa-solid fa-plus" />,
-      title: 'Add node',
-      onClick: () =>
-        dispatch({
-          kind: 'addNode',
-          x: DIAGRAM_VIEWPORT.width / 2 - NODE_WIDTH / 2,
-          y: DIAGRAM_VIEWPORT.height / 2 - NODE_HEIGHT / 2,
-        }),
-    },
-    {
-      id: 'delete',
-      label: 'Delete',
-      icon: <Icon icon="fa-solid fa-trash" />,
-      title: 'Delete selected node',
-      danger: true,
-      disabled: selectedNodeIds.length === 0,
-      onClick: () => selectedNodeIds.forEach((id) => dispatch({ kind: 'removeNode', nodeId: id })),
-    },
-  ];
-
-  const toolbar = (
-    <SceneBlockToolbar
-      tools={DIAGRAM_TOOLS}
-      activeToolId={activeToolId}
-      onSelectTool={setActiveToolId}
-      actions={actions}
-    />
-  );
-
-  const canvas = (
-    <DiagramCanvas
-      nodes={nodes}
-      edges={edges}
-      onCommand={dispatch}
-      showMaximize
-      maximized={maximized}
-      onToggleMaximize={() => setMaximized((m) => !m)}
-      activeToolId={activeToolId}
-      onActiveToolIdChange={setActiveToolId}
-      onSelectionChange={setSelectedIds}
-    />
-  );
-
-  if (maximized) {
-    return (
-      <div
-        className="squisq-diagram-inline-placeholder"
-        style={effectiveHeight != null ? { height: effectiveHeight } : undefined}
-      >
-        <DiagramMaximizedOverlay host={host ?? null} onClose={() => setMaximized(false)}>
-          {/* Maximized has a full screen for a static right column — no collapse. */}
-          <div className="squisq-scene-block-max">
-            {canvas}
-            <div className="squisq-scene-side-toolbar">{toolbar}</div>
-          </div>
-        </DiagramMaximizedOverlay>
-      </div>
-    );
-  }
-
-  return (
-    <div className="squisq-scene-shell">
-      {/* Before the canvas so the narrow-width fallback bar sits above it; the
-        wide-width gutter column is absolute and unaffected by DOM order. */}
-      <SceneSideToolbar>{toolbar}</SceneSideToolbar>
-      <div
-        className="squisq-diagram-inline"
-        ref={inlineRef}
-        style={effectiveHeight != null ? { height: effectiveHeight } : undefined}
-      >
-        {canvas}
-        <div
-          className="squisq-diagram-resize-handle"
-          onPointerDown={onResizeStart}
-          onDoubleClick={onResizeReset}
-          role="separator"
-          aria-orientation="horizontal"
-          aria-label="Resize diagram height"
-          title="Drag to resize · double-click to reset"
-        />
-      </div>
-    </div>
-  );
-}
-
-export default DiagramWidget;

package/src/diagram/useDiagramData.ts

@@ -1,126 +0,0 @@
-/**
- * Read diagram nodes + edges from the live Tiptap state.
- *
- * For a given parent heading position, walks the diagram section's child
- * headings, builds synthetic `Block` objects from their text + Pandoc
- * attributes, runs `computeDiagramLayout` from core to fill in missing
- * positions, and returns the result in the shape React Flow consumes.
- *
- * The hook re-derives on every editor transaction — no caching layer
- * means there's nothing to invalidate when the user types or the markdown
- * is reloaded from disk.
- */
-
-import { useEffect, useMemo, useState } from 'react';
-import type { Editor } from '@tiptap/react';
-import type { Block } from '@bendyline/squisq/schemas';
-import { computeDiagramLayout } from '@bendyline/squisq/doc';
-import { listDiagramChildren } from './diagramCommands';
-
-export interface DiagramRFNode {
-  id: string;
-  position: { x: number; y: number };
-  data: { label: string };
-  type?: string;
-  /** Per-node width override (from the heading's `w=` Pandoc param). */
-  width?: number;
-  /** Per-node height override (from the heading's `h=` Pandoc param). */
-  height?: number;
-}
-
-export interface DiagramRFEdge {
-  id: string;
-  source: string;
-  target: string;
-  label?: string;
-}
-
-export interface DiagramData {
-  nodes: DiagramRFNode[];
-  edges: DiagramRFEdge[];
-  warnings: string[];
-}
-
-export function useDiagramData(editor: Editor, parentPos: number): DiagramData {
-  // Track a version counter that bumps on every editor transaction so the
-  // hook re-renders. We avoid storing the full doc to keep references
-  // stable for React Flow's internal memoisation.
-  const [version, setVersion] = useState(0);
-  useEffect(() => {
-    const onUpdate = () => setVersion((v) => v + 1);
-    editor.on('transaction', onUpdate);
-    return () => {
-      editor.off('transaction', onUpdate);
-    };
-  }, [editor]);
-
-  return useMemo(() => {
-    const children = listDiagramChildren(editor, parentPos);
-    // Per-node size overrides keyed by id, so the post-layout pass can
-    // re-attach them without polluting the Block schema used by SSR.
-    const sizeOverrides = new Map<string, { width?: number; height?: number }>();
-    // Build synthetic Blocks for the layout helper.
-    const syntheticBlocks: Block[] = children.map((c) => {
-      const params = c.attrs.params ?? {};
-      const xRaw = params.x;
-      const yRaw = params.y;
-      const x = xRaw != null ? Number(xRaw) : undefined;
-      const y = yRaw != null ? Number(yRaw) : undefined;
-      const wRaw = params.w;
-      const hRaw = params.h;
-      const w = wRaw != null ? Number(wRaw) : undefined;
-      const h = hRaw != null ? Number(hRaw) : undefined;
-      if (Number.isFinite(w) || Number.isFinite(h)) {
-        sizeOverrides.set(c.id, {
-          ...(Number.isFinite(w) ? { width: w as number } : {}),
-          ...(Number.isFinite(h) ? { height: h as number } : {}),
-        });
-      }
-      const blockMeta = c.attrs.blockMeta;
-      const text = getHeadingText(c.node);
-      return {
-        id: c.id,
-        startTime: 0,
-        duration: 0,
-        audioSegment: 0,
-        title: text || c.id,
-        ...(Number.isFinite(x) ? { x: x as number } : {}),
-        ...(Number.isFinite(y) ? { y: y as number } : {}),
-        ...(blockMeta?.connectsTo ? { connectsTo: blockMeta.connectsTo } : {}),
-        ...(c.attrs.classes ? { classes: c.attrs.classes } : {}),
-      };
-    });
-
-    const layout = computeDiagramLayout(syntheticBlocks);
-
-    const nodes: DiagramRFNode[] = layout.nodes.map((n) => {
-      const size = sizeOverrides.get(n.id);
-      return {
-        id: n.id,
-        position: { x: n.x, y: n.y },
-        data: { label: n.label },
-        ...(size?.width != null ? { width: size.width } : {}),
-        ...(size?.height != null ? { height: size.height } : {}),
-      };
-    });
-    const edges: DiagramRFEdge[] = layout.edges.map((e) => ({
-      id: e.id,
-      source: e.source,
-      target: e.target,
-      ...(e.type ? { label: e.type } : {}),
-    }));
-
-    return { nodes, edges, warnings: layout.warnings };
-    // `version` is the dependency we track for transactions; editor and
-    // parentPos shouldn't change on re-render.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor, parentPos, version]);
-}
-
-function getHeadingText(node: import('@tiptap/pm/model').Node): string {
-  let text = '';
-  node.content.forEach((child) => {
-    if (child.isText) text += child.text ?? '';
-  });
-  return text;
-}