@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/asciiDiagram/asciiDiagramCommands.ts

@@ -0,0 +1,174 @@
+/**
+ * Write direction of the ASCII diagram loop: canvas command → fence rewrite.
+ *
+ * Every semantic edit is one functional transformation of the fence text
+ * (`renderAscii(applyOp(parseAscii(text)))`) committed as a single
+ * ProseMirror transaction (= a single undo step). Before committing, the
+ * rendered art is re-parsed and verified — if the renderer ever produced
+ * something the parser disagrees with, the command aborts instead of
+ * corrupting the fence.
+ */
+
+import type { Editor } from '@tiptap/react';
+import {
+  canvasToAsciiCell,
+  ASCII_CHAR_H,
+  ASCII_CHAR_W,
+  parseAsciiDiagram,
+  renderAsciiDiagram,
+  repairAsciiDiagram,
+  type AsciiDiagram,
+} from '@bendyline/squisq/doc';
+import type { DiagramCommand } from '../diagram/DiagramCanvas';
+import { findAsciiDiagramBlockPos, parseAsciiDiagramForNode } from './AsciiDiagramExtension';
+import { findRepairableBlockPos } from './RepairableDiagramExtension';
+import {
+  addEdgeOp,
+  addNodeOp,
+  moveNodeOp,
+  removeEdgeOp,
+  removeNodeOp,
+  renameNodeOp,
+  resizeNodeOp,
+  translateDiagramOp,
+} from './asciiDiagramOps';
+
+export interface ApplyAsciiDiagramCommandOptions {
+  /**
+   * Virtual grid offset currently shown by the canvas for legacy art. It is
+   * folded into the source in the same transaction as the user's first edit.
+   */
+  diagramOffset?: { col: number; row: number };
+}
+
+/**
+ * Replace the TEXT inside the codeBlock at `pos` and, when `ensureLanguage`
+ * is given, promote its `language` attribute in the SAME transaction (one
+ * undo step). Promoting the language to the explicit `diagram`/`tree` tag is
+ * how a semantic edit makes the block's identity "sticky" — the language
+ * class survives markdown ↔ Tiptap round-trips, so a once-edited diagram/tree
+ * is re-recognized even after it's flattened. No-op (returns false) only when
+ * BOTH the text is already identical AND the language already matches, so
+ * history stays clean on a true no-op.
+ */
+export function replaceAsciiFenceText(
+  editor: Editor,
+  pos: number,
+  nextText: string,
+  ensureLanguage?: string,
+): boolean {
+  return editor
+    .chain()
+    .command(({ tr, state }) => {
+      const node = tr.doc.nodeAt(pos);
+      if (!node || node.type.name !== 'codeBlock') return false;
+      const textChanged = node.textContent !== nextText;
+      const currentLang = (node.attrs as { language?: string | null }).language ?? null;
+      const langChanged = ensureLanguage !== undefined && currentLang !== ensureLanguage;
+      if (!textChanged && !langChanged) return false;
+      if (langChanged) {
+        tr.setNodeMarkup(pos, undefined, { ...node.attrs, language: ensureLanguage });
+      }
+      if (textChanged) {
+        tr.replaceWith(pos + 1, pos + node.nodeSize - 1, state.schema.text(nextText));
+      }
+      return true;
+    })
+    .run();
+}
+
+/**
+ * Reconstruct a broken box-art fence into clean, `diagram`-tagged art in a
+ * single transaction (one undo step). The AsciiDiagramExtension then claims
+ * the tagged fence and mounts the interactive canvas. Returns false when the
+ * block is gone or nothing recoverable (the button simply no-ops).
+ */
+export function applyRepairCommand(editor: Editor, blockId: string): boolean {
+  const pos = findRepairableBlockPos(editor, blockId);
+  if (pos === null) return false;
+  const node = editor.state.doc.nodeAt(pos);
+  if (!node || node.type.name !== 'codeBlock') return false;
+  const repaired = repairAsciiDiagram(node.textContent);
+  if (!repaired) return false;
+  return replaceAsciiFenceText(editor, pos, repaired.art, 'diagram');
+}
+
+/** Apply one pure op to a registered block's parsed diagram. */
+function applyOp(
+  editor: Editor,
+  blockId: string,
+  op: (diagram: AsciiDiagram) => AsciiDiagram,
+  diagramOffset?: { col: number; row: number },
+): boolean {
+  // Resolve the position at dispatch time — captured positions go stale
+  // the moment anything above the block changes.
+  const pos = findAsciiDiagramBlockPos(editor, blockId);
+  if (pos === null) return false;
+  const node = editor.state.doc.nodeAt(pos);
+  if (!node || node.type.name !== 'codeBlock') return false;
+  const sourceDiagram = parseAsciiDiagramForNode(node);
+  if (!sourceDiagram) return false;
+  const diagram = diagramOffset
+    ? translateDiagramOp(sourceDiagram, diagramOffset.col, diagramOffset.row)
+    : sourceDiagram;
+
+  const next = op(diagram);
+  if (next === diagram && diagram === sourceDiagram) return false;
+  const rendered = renderAsciiDiagram(next);
+
+  // Verify before committing: the rendered art must re-parse to the same
+  // node count, or we'd write art the canvas can't read back.
+  const verification = parseAsciiDiagram(rendered);
+  if (verification.nodes.length !== next.nodes.length) return false;
+
+  // Promote the fence language to the explicit `diagram` tag so this block's
+  // identity survives a later flatten → markdown → re-import round-trip.
+  return replaceAsciiFenceText(editor, pos, rendered, 'diagram');
+}
+
+/** Full pipeline for a canvas command against a registered fence block. */
+export function applyAsciiDiagramCommand(
+  editor: Editor,
+  blockId: string,
+  cmd: DiagramCommand,
+  options: ApplyAsciiDiagramCommandOptions = {},
+): boolean {
+  const apply = (op: (diagram: AsciiDiagram) => AsciiDiagram) =>
+    applyOp(editor, blockId, op, options.diagramOffset);
+  switch (cmd.kind) {
+    case 'moveNode': {
+      const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
+      return apply((d) => moveNodeOp(d, cmd.nodeId, col, row));
+    }
+    case 'resizeNode': {
+      const wCols = Math.max(3, Math.round(cmd.width / ASCII_CHAR_W));
+      const hRows = Math.max(3, Math.round(cmd.height / ASCII_CHAR_H));
+      return apply((d) => {
+        // A north/west resize changes position and size. Apply both to the
+        // same parsed model and render once so collision/layout normalization
+        // cannot run between the two halves of one pointer gesture.
+        let next = d;
+        if (cmd.x !== undefined && cmd.y !== undefined) {
+          const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
+          next = moveNodeOp(next, cmd.nodeId, col, row);
+        }
+        return resizeNodeOp(next, cmd.nodeId, wCols, hRows);
+      });
+    }
+    case 'addConnection':
+      return apply((d) => addEdgeOp(d, cmd.source, cmd.target, cmd.type));
+    case 'removeConnection':
+      return apply((d) => removeEdgeOp(d, cmd.source, cmd.target, cmd.type));
+    case 'renameNode':
+      return apply((d) => renameNodeOp(d, cmd.nodeId, cmd.newLabel));
+    case 'addNode': {
+      const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
+      return apply((d) => addNodeOp(d, { col, row }).diagram);
+    }
+    case 'removeNode':
+      return apply((d) => removeNodeOp(d, cmd.nodeId));
+  }
+  const _exhaustive: never = cmd;
+  void _exhaustive;
+  return false;
+}

package/src/asciiDiagram/asciiDiagramData.ts

@@ -0,0 +1,149 @@
+/**
+ * Read direction of the ASCII diagram loop: fence text → canvas data.
+ *
+ * `useAsciiDiagramData` re-derives on every editor transaction (mirroring
+ * the philosophy of the old heading-based `useDiagramData`: no store, so
+ * nothing to invalidate). Parsing is memoized per PMNode instance by the
+ * extension's WeakMap caches, so untouched fences cost nothing.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import type { Editor } from '@tiptap/react';
+import {
+  asciiCellToCanvas,
+  asciiDiagramToTemplateData,
+  ASCII_CHAR_H,
+  ASCII_CHAR_W,
+  type AsciiDiagram,
+} from '@bendyline/squisq/doc';
+import type { DiagramEdge, DiagramNode } from '../diagram/types';
+import { findAsciiDiagramBlockPos, parseAsciiDiagramForNode } from './AsciiDiagramExtension';
+import { translateDiagramOp } from './asciiDiagramOps';
+
+/** Persisted grid space reserved north/west of legacy origin-hugging art. */
+export const ASCII_DIAGRAM_GUTTER_COLS = 8;
+export const ASCII_DIAGRAM_GUTTER_ROWS = 2;
+
+export interface AsciiDiagramCanvasOffset {
+  col: number;
+  row: number;
+}
+
+export interface AsciiDiagramView {
+  /** Canvas nodes, containers ordered first so their cards paint behind. */
+  nodes: DiagramNode[];
+  edges: DiagramEdge[];
+  warnings: string[];
+  style: 'unicode' | 'ascii';
+  /** The current fence text. */
+  text: string;
+  /** The parse behind `nodes`/`edges` (grid units) — ops operate on this. */
+  diagram: AsciiDiagram;
+}
+
+/**
+ * Offset needed to give an existing diagram the same editing gutter as a
+ * newly inserted one. The widget applies this virtually until the first real
+ * canvas edit, which then writes the shifted coordinates into the fence.
+ */
+export function initialAsciiDiagramCanvasOffset(diagram: AsciiDiagram): AsciiDiagramCanvasOffset {
+  if (diagram.nodes.length === 0) return { col: 0, row: 0 };
+  const minCol = Math.min(...diagram.nodes.map((node) => node.col));
+  const minRow = Math.min(...diagram.nodes.map((node) => node.row));
+  return {
+    col: Math.max(0, ASCII_DIAGRAM_GUTTER_COLS - minCol),
+    row: Math.max(0, ASCII_DIAGRAM_GUTTER_ROWS - minRow),
+  };
+}
+
+/** Apply a canvas-only origin offset to a parsed grid model. */
+export function offsetAsciiDiagram(
+  diagram: AsciiDiagram,
+  offset: AsciiDiagramCanvasOffset,
+): AsciiDiagram {
+  return translateDiagramOp(diagram, offset.col, offset.row);
+}
+
+/** Grid model → canvas model, containers-first for paint order. */
+export function asciiDiagramToCanvas(
+  diagram: AsciiDiagram,
+): Pick<AsciiDiagramView, 'nodes' | 'edges'> {
+  const containerIds = new Set(
+    diagram.nodes.map((n) => n.containerId).filter((id): id is string => id !== undefined),
+  );
+  const depthOf = (id: string | undefined): number => {
+    let depth = 0;
+    let current = diagram.nodes.find((n) => n.id === id);
+    while (current?.containerId) {
+      depth++;
+      current = diagram.nodes.find((n) => n.id === current?.containerId);
+      if (depth > diagram.nodes.length) break;
+    }
+    return depth;
+  };
+  const ordered = [...diagram.nodes].sort((a, b) => {
+    const aContainer = containerIds.has(a.id) ? 0 : 1;
+    const bContainer = containerIds.has(b.id) ? 0 : 1;
+    return aContainer - bContainer || depthOf(a.id) - depthOf(b.id);
+  });
+  const nodes: DiagramNode[] = ordered.map((n) => ({
+    id: n.id,
+    position: asciiCellToCanvas(n.col, n.row),
+    data: { label: n.label },
+    width: n.wCols * ASCII_CHAR_W,
+    height: n.hRows * ASCII_CHAR_H,
+    ...(containerIds.has(n.id) ? { kind: 'container' as const } : {}),
+  }));
+  const templateEdges = asciiDiagramToTemplateData(diagram).edges;
+  const edges: DiagramEdge[] = diagram.edges.map((e, index) => ({
+    id: e.label ? `${e.source}->${e.target}:${e.label}` : `${e.source}->${e.target}`,
+    source: e.source,
+    target: e.target,
+    ...(e.label ? { label: e.label } : {}),
+    ...(e.directed ? {} : { directed: false }),
+    ...(templateEdges[index]?.sourceAnchor
+      ? { sourceAnchor: templateEdges[index].sourceAnchor }
+      : {}),
+    ...(templateEdges[index]?.targetAnchor
+      ? { targetAnchor: templateEdges[index].targetAnchor }
+      : {}),
+    ...(templateEdges[index]?.routing ? { routing: templateEdges[index].routing } : {}),
+  }));
+  return { nodes, edges };
+}
+
+/**
+ * Live view of one registered ASCII diagram block. Returns null when the
+ * block no longer exists or no longer parses (the extension will drop the
+ * widget on its next pass).
+ */
+export function useAsciiDiagramData(editor: Editor, blockId: string): AsciiDiagramView | null {
+  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 pos = findAsciiDiagramBlockPos(editor, blockId);
+    if (pos === null) return null;
+    const node = editor.state.doc.nodeAt(pos);
+    if (!node || node.type.name !== 'codeBlock') return null;
+    const diagram = parseAsciiDiagramForNode(node);
+    if (!diagram) return null;
+    const { nodes, edges } = asciiDiagramToCanvas(diagram);
+    return {
+      nodes,
+      edges,
+      warnings: diagram.warnings,
+      style: diagram.style,
+      text: node.textContent,
+      diagram,
+    };
+    // `version` tracks transactions; editor/blockId are stable.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, blockId, version]);
+}

package/src/asciiDiagram/asciiDiagramOps.ts

@@ -0,0 +1,238 @@
+/**
+ * Pure data operations over the ASCII diagram model — the write-direction
+ * half of the fence-is-source-of-truth loop:
+ *
+ *   fence text → parseAsciiDiagram → op → renderAsciiDiagram → fence text
+ *
+ * Every op returns a new AsciiDiagram (inputs are never mutated) and
+ * maintains the invariants the renderer/parser fixpoint relies on:
+ * container moves translate whole subtrees, removals promote children and
+ * drop incident edges, sizes never fall below what a label needs.
+ */
+
+import type { AsciiDiagram, AsciiDiagramEdge, AsciiDiagramNode } from '@bendyline/squisq/doc';
+
+/**
+ * Make arbitrary (rename-dialog) input safe as a box label: box-drawing /
+ * arrow glyphs would corrupt the art, and the Scene's inline editor is
+ * single-line, so newlines collapse to spaces.
+ */
+export function sanitizeAsciiLabel(label: string): string {
+  return label
+    .replace(/[─-╿▲▼◀-◄▶-►←-↓`]/gu, ' ') // backticks would terminate the fence
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function descendantsOf(diagram: AsciiDiagram, nodeId: string): Set<string> {
+  const out = new Set<string>();
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const n of diagram.nodes) {
+      if (out.has(n.id)) continue;
+      if (n.containerId === nodeId || (n.containerId && out.has(n.containerId))) {
+        out.add(n.id);
+        grew = true;
+      }
+    }
+  }
+  return out;
+}
+
+/** Translate every node by the same grid delta (edges/containment are unchanged). */
+export function translateDiagramOp(
+  diagram: AsciiDiagram,
+  dCol: number,
+  dRow: number,
+): AsciiDiagram {
+  const colDelta = Math.round(dCol);
+  const rowDelta = Math.round(dRow);
+  if (colDelta === 0 && rowDelta === 0) return diagram;
+  return {
+    ...diagram,
+    nodes: diagram.nodes.map((node) => ({
+      ...node,
+      col: Math.max(0, node.col + colDelta),
+      row: Math.max(0, node.row + rowDelta),
+    })),
+  };
+}
+
+/** Move a node to (col, row); a container drags its whole subtree along. */
+export function moveNodeOp(
+  diagram: AsciiDiagram,
+  nodeId: string,
+  col: number,
+  row: number,
+): AsciiDiagram {
+  const node = diagram.nodes.find((n) => n.id === nodeId);
+  if (!node) return diagram;
+  const dCol = Math.max(0, col) - node.col;
+  const dRow = Math.max(0, row) - node.row;
+  if (dCol === 0 && dRow === 0) return diagram;
+  const moving = descendantsOf(diagram, nodeId);
+  moving.add(nodeId);
+  return {
+    ...diagram,
+    nodes: diagram.nodes.map((n) =>
+      moving.has(n.id)
+        ? { ...n, col: Math.max(0, n.col + dCol), row: Math.max(0, n.row + dRow) }
+        : n,
+    ),
+  };
+}
+
+/** Resize a node (grid cells). Clamped so the label always fits. */
+export function resizeNodeOp(
+  diagram: AsciiDiagram,
+  nodeId: string,
+  wCols: number,
+  hRows: number,
+): AsciiDiagram {
+  const node = diagram.nodes.find((n) => n.id === nodeId);
+  if (!node) return diagram;
+  const labelLines = node.label.length > 0 ? node.label.split('\n') : [];
+  const minW = Math.max(3, labelLines.reduce((w, l) => Math.max(w, l.length), 0) + 4);
+  const minH = Math.max(3, labelLines.length + 2);
+  return {
+    ...diagram,
+    nodes: diagram.nodes.map((n) =>
+      n.id === nodeId
+        ? {
+            ...n,
+            wCols: Math.max(minW, Math.round(wCols)),
+            hRows: Math.max(minH, Math.round(hRows)),
+          }
+        : n,
+    ),
+  };
+}
+
+/** Add a directed edge; duplicates (same source/target/label) are no-ops. */
+export function addEdgeOp(
+  diagram: AsciiDiagram,
+  source: string,
+  target: string,
+  label?: string,
+): AsciiDiagram {
+  const ids = new Set(diagram.nodes.map((n) => n.id));
+  if (!ids.has(source) || !ids.has(target) || source === target) return diagram;
+  const exists = diagram.edges.some(
+    (e) => e.source === source && e.target === target && (e.label ?? '') === (label ?? ''),
+  );
+  if (exists) return diagram;
+  const edge: AsciiDiagramEdge = {
+    source,
+    target,
+    ...(label ? { label } : {}),
+    directed: true,
+  };
+  return { ...diagram, edges: [...diagram.edges, edge] };
+}
+
+/**
+ * Remove an edge. A label-qualified call removes the exact match; without
+ * a label the first (source, target) match goes — mirroring the legacy
+ * `removeConnection` semantics.
+ */
+export function removeEdgeOp(
+  diagram: AsciiDiagram,
+  source: string,
+  target: string,
+  label?: string,
+): AsciiDiagram {
+  let removed = false;
+  const edges = diagram.edges.filter((e) => {
+    if (removed) return true;
+    const match =
+      e.source === source &&
+      e.target === target &&
+      (label !== undefined ? (e.label ?? '') === label : true);
+    if (match) {
+      removed = true;
+      return false;
+    }
+    return true;
+  });
+  return removed ? { ...diagram, edges } : diagram;
+}
+
+/**
+ * Rename a node. The label drives the node's parse-derived id, so edges
+ * and containment references are rewritten to the id the next parse will
+ * produce. (Selection in the canvas drops after a rename — documented.)
+ */
+export function renameNodeOp(diagram: AsciiDiagram, nodeId: string, label: string): AsciiDiagram {
+  const node = diagram.nodes.find((n) => n.id === nodeId);
+  if (!node) return diagram;
+  const clean = sanitizeAsciiLabel(label);
+  if (clean.length === 0 || clean === node.label) return diagram;
+  return {
+    ...diagram,
+    nodes: diagram.nodes.map((n) => (n.id === nodeId ? { ...n, label: clean } : n)),
+  };
+}
+
+/** Add a node at (col, row). Inherits a container when placed inside one. */
+export function addNodeOp(
+  diagram: AsciiDiagram,
+  opts: { col: number; row: number; label?: string },
+): { diagram: AsciiDiagram; label: string } {
+  // First free "Node N" label.
+  let label = opts.label;
+  if (!label) {
+    let i = 1;
+    const labels = new Set(diagram.nodes.map((n) => n.label.split('\n')[0]));
+    while (labels.has(`Node ${i}`)) i++;
+    label = `Node ${i}`;
+  }
+  const clean = sanitizeAsciiLabel(label) || 'Node';
+  const col = Math.max(0, Math.round(opts.col));
+  const row = Math.max(0, Math.round(opts.row));
+  const wCols = clean.length + 4;
+  const hRows = 3;
+  // Container inheritance: the new box's center falls inside a container.
+  const centerCol = col + wCols / 2;
+  const centerRow = row + hRows / 2;
+  const containers = diagram.nodes
+    .filter((n) => diagram.nodes.some((m) => m.containerId === n.id))
+    .filter(
+      (n) =>
+        centerCol > n.col &&
+        centerCol < n.col + n.wCols &&
+        centerRow > n.row &&
+        centerRow < n.row + n.hRows,
+    )
+    .sort((a, b) => a.wCols * a.hRows - b.wCols * b.hRows);
+  const node: AsciiDiagramNode = {
+    id: `__new-${diagram.nodes.length}`, // provisional; the re-parse derives the real slug id
+    label: clean,
+    col,
+    row,
+    wCols,
+    hRows,
+    ...(containers[0] ? { containerId: containers[0].id } : {}),
+  };
+  return { diagram: { ...diagram, nodes: [...diagram.nodes, node] }, label: clean };
+}
+
+/**
+ * Remove a node: incident edges (both directions) drop, direct children
+ * are promoted to the removed node's own container (or top level).
+ */
+export function removeNodeOp(diagram: AsciiDiagram, nodeId: string): AsciiDiagram {
+  const node = diagram.nodes.find((n) => n.id === nodeId);
+  if (!node) return diagram;
+  const nodes = diagram.nodes
+    .filter((n) => n.id !== nodeId)
+    .map((n) => {
+      if (n.containerId !== nodeId) return n;
+      const promoted = { ...n };
+      if (node.containerId) promoted.containerId = node.containerId;
+      else delete promoted.containerId;
+      return promoted;
+    });
+  const edges = diagram.edges.filter((e) => e.source !== nodeId && e.target !== nodeId);
+  return { ...diagram, nodes, edges };
+}

package/src/asciiDiagram/asciiPaste.ts

@@ -0,0 +1,19 @@
+/**
+ * Paste gate for bare (unfenced) ASCII diagram art.
+ *
+ * `+--+ | |` art pasted as plain text is otherwise mangled: its `| x |`
+ * rows match the GFM table-row pattern in `detectMarkdown`, so the paste
+ * handler routes it through the markdown converter, fails table
+ * validation, and emits one broken paragraph per line. When this gate
+ * matches, the paste handler inserts the text verbatim into a fresh code
+ * block instead — which the AsciiDiagramExtension then picks up as an
+ * interactive diagram.
+ */
+
+import { detectAsciiDiagram } from '@bendyline/squisq/doc';
+
+export function shouldPasteAsAsciiFence(text: string): boolean {
+  if (!text || text.includes('```')) return false;
+  const detection = detectAsciiDiagram(text);
+  return detection.isDiagram && (detection.diagram?.nodes.length ?? 0) >= 2;
+}