@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/asciiDiagram/asciiDiagramData.ts

@@ -0,0 +1,116 @@
+/**
+ * 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';
+
+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;
+}
+
+/** 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,219 @@
+/**
+ * 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;
+}
+
+/** 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;
+}

package/src/blockTagActivity.ts

@@ -0,0 +1,233 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey, type Transaction } from '@tiptap/pm/state';
+import { Decoration, DecorationSet, type EditorView as ProseMirrorView } from '@tiptap/pm/view';
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
+
+export const BLOCK_TAG_SELECTED_CLASS = 'squisq-block-tags--selected';
+export const BLOCK_TAG_HOVERED_CLASS = 'squisq-block-tags--hovered';
+
+export interface BlockTagActivityPluginState {
+  selectedPosition: number | null;
+  hoveredPosition: number | null;
+  decorations: DecorationSet;
+}
+
+interface BlockTagHoverMeta {
+  hoveredPosition: number | null;
+}
+
+export const BLOCK_TAG_ACTIVITY_KEY = new PluginKey<BlockTagActivityPluginState>(
+  'squisq-block-tag-activity',
+);
+
+function isHeadingElement(element: Element): element is HTMLElement {
+  return /^H[1-6]$/.test(element.tagName);
+}
+
+/**
+ * Returns the heading position for the block owning a document position.
+ * A block begins at a top-level heading and continues until the next heading.
+ */
+export function findOwningHeadingPosition(doc: ProseMirrorNode, position: number): number | null {
+  let offset = 0;
+  let owningPosition: number | null = null;
+
+  for (let index = 0; index < doc.childCount && offset <= position; index += 1) {
+    const node = doc.child(index);
+    if (node.type.name === 'heading') owningPosition = offset;
+    offset += node.nodeSize;
+  }
+
+  return owningPosition;
+}
+
+/** Find the preceding top-level heading for a DOM node under ProseMirror. */
+export function findOwningHeadingElement(
+  editorDom: HTMLElement,
+  target: EventTarget | null,
+): HTMLElement | null {
+  if (!(target instanceof Node)) return null;
+
+  let element =
+    target.nodeType === Node.ELEMENT_NODE
+      ? (target as HTMLElement)
+      : (target.parentElement as HTMLElement | null);
+  if (!element || element === editorDom || !editorDom.contains(element)) return null;
+
+  while (element.parentElement && element.parentElement !== editorDom) {
+    element = element.parentElement;
+  }
+  if (element.parentElement !== editorDom) return null;
+
+  let candidate: Element | null = element;
+  while (candidate && !isHeadingElement(candidate)) {
+    candidate = candidate.previousElementSibling;
+  }
+  return candidate && isHeadingElement(candidate) ? candidate : null;
+}
+
+/**
+ * Resolve blank canvas space to the heading-defined block at that vertical
+ * position. Margins between top-level nodes are not owned by either node in
+ * the DOM, so pointer events there target the ProseMirror root. Treating the
+ * root as "no block" makes active-only tags disappear while the pointer
+ * crosses ordinary paragraph/list spacing.
+ */
+export function findOwningHeadingElementAtPoint(
+  editorDom: HTMLElement,
+  target: EventTarget | null,
+  clientY: number,
+): HTMLElement | null {
+  const direct = findOwningHeadingElement(editorDom, target);
+  if (direct) return direct;
+  if (!(target instanceof Node) || !editorDom.contains(target) || !Number.isFinite(clientY)) {
+    return null;
+  }
+
+  const children = Array.from(editorDom.children);
+  const lastChild = children[children.length - 1];
+  if (!lastChild || clientY > lastChild.getBoundingClientRect().bottom) return null;
+
+  let owningHeading: HTMLElement | null = null;
+  for (const child of children) {
+    if (child.getBoundingClientRect().top > clientY) break;
+    if (isHeadingElement(child)) owningHeading = child;
+  }
+  return owningHeading;
+}
+
+function validHeadingPosition(doc: ProseMirrorNode, position: number | null): number | null {
+  if (position === null) return null;
+  return doc.nodeAt(position)?.type.name === 'heading' ? position : null;
+}
+
+function buildDecorations(
+  doc: ProseMirrorNode,
+  selectedPosition: number | null,
+  hoveredPosition: number | null,
+): DecorationSet {
+  const classesByPosition = new Map<number, string[]>();
+
+  if (selectedPosition !== null) {
+    classesByPosition.set(selectedPosition, [BLOCK_TAG_SELECTED_CLASS]);
+  }
+  if (hoveredPosition !== null) {
+    const classes = classesByPosition.get(hoveredPosition) ?? [];
+    classes.push(BLOCK_TAG_HOVERED_CLASS);
+    classesByPosition.set(hoveredPosition, classes);
+  }
+
+  const decorations: Decoration[] = [];
+  for (const [position, classes] of classesByPosition) {
+    const node = doc.nodeAt(position);
+    if (!node || node.type.name !== 'heading') continue;
+    decorations.push(
+      Decoration.node(position, position + node.nodeSize, { class: classes.join(' ') }),
+    );
+  }
+
+  return decorations.length > 0 ? DecorationSet.create(doc, decorations) : DecorationSet.empty;
+}
+
+function createPluginState(
+  doc: ProseMirrorNode,
+  selectionFrom: number,
+  hoveredPosition: number | null,
+): BlockTagActivityPluginState {
+  const selectedPosition = findOwningHeadingPosition(doc, selectionFrom);
+  const validHoveredPosition = validHeadingPosition(doc, hoveredPosition);
+  return {
+    selectedPosition,
+    hoveredPosition: validHoveredPosition,
+    decorations: buildDecorations(doc, selectedPosition, validHoveredPosition),
+  };
+}
+
+function nextHoveredPosition(
+  transaction: Transaction,
+  previousPosition: number | null,
+  doc: ProseMirrorNode,
+): number | null {
+  const meta = transaction.getMeta(BLOCK_TAG_ACTIVITY_KEY) as BlockTagHoverMeta | undefined;
+  if (meta !== undefined) return validHeadingPosition(doc, meta.hoveredPosition);
+  if (!transaction.docChanged || previousPosition === null) return previousPosition;
+
+  const mapped = transaction.mapping.mapResult(previousPosition, 1);
+  return mapped.deleted ? null : validHeadingPosition(doc, mapped.pos);
+}
+
+function headingPositionForTarget(
+  view: ProseMirrorView,
+  target: EventTarget | null,
+  clientY: number,
+): number | null {
+  const heading = findOwningHeadingElementAtPoint(view.dom, target, clientY);
+  if (!heading) return null;
+
+  try {
+    const positionInsideHeading = view.posAtDOM(heading, 0);
+    return findOwningHeadingPosition(view.state.doc, positionInsideHeading);
+  } catch {
+    return null;
+  }
+}
+
+function setHoveredPosition(view: ProseMirrorView, hoveredPosition: number | null): void {
+  const current = BLOCK_TAG_ACTIVITY_KEY.getState(view.state)?.hoveredPosition ?? null;
+  if (current === hoveredPosition) return;
+  view.dispatch(
+    view.state.tr
+      .setMeta(BLOCK_TAG_ACTIVITY_KEY, { hoveredPosition } satisfies BlockTagHoverMeta)
+      .setMeta('addToHistory', false),
+  );
+}
+
+/**
+ * ProseMirror-owned block activity decorations. Using node decorations keeps
+ * the classes stable when ProseMirror reconciles its managed heading DOM.
+ */
+export const BlockTagActivityExtension = Extension.create({
+  name: 'squisqBlockTagActivity',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin<BlockTagActivityPluginState>({
+        key: BLOCK_TAG_ACTIVITY_KEY,
+        state: {
+          init: (_config, state) => createPluginState(state.doc, state.selection.from, null),
+          apply: (transaction, previous, _oldState, newState) =>
+            createPluginState(
+              newState.doc,
+              newState.selection.from,
+              nextHoveredPosition(transaction, previous.hoveredPosition, newState.doc),
+            ),
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state)?.decorations ?? DecorationSet.empty;
+          },
+          handleDOMEvents: {
+            mouseover(view, event) {
+              setHoveredPosition(view, headingPositionForTarget(view, event.target, event.clientY));
+              return false;
+            },
+            mousemove(view, event) {
+              // `mouseover` covers real document nodes. Only track continuous
+              // movement while the root itself owns the pointer (the blank
+              // margin/gutter case), avoiding geometry reads over text.
+              if (event.target !== view.dom) return false;
+              setHoveredPosition(view, headingPositionForTarget(view, event.target, event.clientY));
+              return false;
+            },
+            mouseleave(view) {
+              setHoveredPosition(view, null);
+              return false;
+            },
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default BlockTagActivityExtension;