@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/asciiDiagram/AsciiDiagramExtension.ts

@@ -1,343 +0,0 @@
-/**
- * AsciiDiagramExtension — Tiptap/ProseMirror plugin that turns code blocks
- * containing ASCII box-and-line diagrams into interactive diagram canvases.
- *
- * The FENCE TEXT REMAINS THE SOURCE OF TRUTH: the plugin never converts
- * the document. For each qualifying codeBlock it:
- * 1. hides the `<pre>` via a node decoration (or tags it visible-monospace
- *    when the user toggles "source" mode), and
- * 2. mounts an `AsciiDiagramWidget` after it via a widget decoration.
- *
- * Identity: codeBlocks have no persisted id and their content changes on
- * every canvas edit (self-inflicted fence rewrite), so neither a content
- * hash nor a raw position can key the widget. Instead the plugin keeps a
- * POSITION REGISTRY in its state: each qualifying block gets a synthetic
- * session id (`ascii-N`); on every doc change old positions are remapped
- * through `tr.mapping` and matched against the new doc walk. Same id →
- * same widget decoration key → ProseMirror keeps the DOM + React root
- * alive (pan/zoom survives), exactly like the heading-key trick the
- * legacy DiagramExtension used.
- *
- * Hysteresis: a NEW block must pass full detection (`detectAsciiDiagram`,
- * ≥2 boxes + thresholds); an already-registered block stays interactive
- * while its fence still parses to ≥1 box, so deleting down to one node
- * doesn't kick the user back to a raw code block mid-edit.
- */
-
-import { Extension } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-import type { Transaction } from '@tiptap/pm/state';
-import { Decoration, DecorationSet } from '@tiptap/pm/view';
-import type { Node as PMNode } from '@tiptap/pm/model';
-import type { Editor } from '@tiptap/react';
-import { createRoot, type Root } from 'react-dom/client';
-import { createElement } from 'react';
-import {
-  detectAsciiDiagram,
-  isEligibleAsciiFenceLang,
-  isExplicitDiagramLang,
-  parseAsciiDiagram,
-  type AsciiDiagram,
-} from '@bendyline/squisq/doc';
-import { AsciiDiagramWidget } from './AsciiDiagramWidget';
-import type { SceneTextChannel } from '../scene/text/sceneTextChannel';
-
-export interface AsciiDiagramBlockEntry {
-  /** Synthetic session id (`ascii-N`), stable across edits for one block. */
-  id: string;
-  /** Document position of the codeBlock node at the current state. */
-  pos: number;
-}
-
-export interface AsciiDiagramPluginState {
-  entries: AsciiDiagramBlockEntry[];
-  decorations: DecorationSet;
-  sourceVisible: ReadonlySet<string>;
-  /** Monotonic id allocator. */
-  seq: number;
-}
-
-export const ASCII_DIAGRAM_KEY = new PluginKey<AsciiDiagramPluginState>('squisq-ascii-diagram');
-
-// ---------------------------------------------------------------------------
-// Gate caches — keyed on the PMNode instance. ProseMirror's structural
-// sharing reuses node objects for unchanged blocks, so only an actually
-// edited fence re-runs detection/parsing.
-// ---------------------------------------------------------------------------
-
-const detectCache = new WeakMap<PMNode, AsciiDiagram | null>();
-const parseCache = new WeakMap<PMNode, AsciiDiagram | null>();
-
-function fenceLangOf(node: PMNode): string | null {
-  const lang = (node.attrs as { language?: string | null }).language;
-  return typeof lang === 'string' ? lang : null;
-}
-
-/** Full-detection gate for NEW blocks: lang allowlist + content thresholds. */
-export function getAsciiDiagramForNode(node: PMNode): AsciiDiagram | null {
-  if (node.type.name !== 'codeBlock') return null;
-  const cached = detectCache.get(node);
-  if (cached !== undefined) return cached;
-  let result: AsciiDiagram | null = null;
-  const lang = fenceLangOf(node);
-  if (isEligibleAsciiFenceLang(lang)) {
-    const detection = detectAsciiDiagram(node.textContent, {
-      explicit: isExplicitDiagramLang(lang),
-    });
-    if (detection.isDiagram && detection.diagram) {
-      result = detection.diagram;
-      parseCache.set(node, result);
-    }
-  }
-  detectCache.set(node, result);
-  return result;
-}
-
-/** Box-drawing corners/junctions/verticals leaking into a label = a garbled parse. */
-const GARBLED_LABEL = /[│┃║┌┐└┘├┤┬┴┼╭╮╰╯┏┓┗┛╔╗╚╝┣┫┳┻╋╠╣╦╩╬]/;
-
-/**
- * Relaxed gate for ALREADY-REGISTERED blocks: any parse with ≥1 box, so
- * editing a diagram down doesn't kick the user out mid-edit. But a GARBLED
- * parse (box-drawing chars leaked into labels — the desync signature of
- * broken art) is never a valid diagram; rejecting it here keeps a broken
- * fence from being held as a diagram by hysteresis (e.g. after undoing a
- * repair, where the fence reverts to broken art the RepairableExtension owns).
- */
-export function parseAsciiDiagramForNode(node: PMNode): AsciiDiagram | null {
-  if (node.type.name !== 'codeBlock') return null;
-  const cached = parseCache.get(node);
-  if (cached !== undefined) return cached;
-  let result: AsciiDiagram | null = null;
-  if (isEligibleAsciiFenceLang(fenceLangOf(node))) {
-    const parsed = parseAsciiDiagram(node.textContent);
-    if (parsed.nodes.length > 0 && !parsed.nodes.some((n) => GARBLED_LABEL.test(n.label))) {
-      result = parsed;
-    }
-  }
-  parseCache.set(node, result);
-  return result;
-}
-
-/** Resolve a registered block's current doc position (null when gone). */
-export function findAsciiDiagramBlockPos(editor: Editor, blockId: string): number | null {
-  const state = ASCII_DIAGRAM_KEY.getState(editor.state);
-  return state?.entries.find((e) => e.id === blockId)?.pos ?? null;
-}
-
-export function isAsciiSourceVisible(editor: Editor, blockId: string): boolean {
-  const state = ASCII_DIAGRAM_KEY.getState(editor.state);
-  return state?.sourceVisible.has(blockId) ?? false;
-}
-
-/** Toggle the raw-fence view for one diagram block (meta-only transaction). */
-export function toggleAsciiSource(editor: Editor, blockId: string): void {
-  const tr = editor.state.tr.setMeta(ASCII_DIAGRAM_KEY, { toggleSource: blockId });
-  editor.view.dispatch(tr);
-}
-
-// ---------------------------------------------------------------------------
-// Plugin state
-// ---------------------------------------------------------------------------
-
-interface WidgetRootRef {
-  root: Root;
-}
-
-function buildDecorations(
-  doc: PMNode,
-  entries: AsciiDiagramBlockEntry[],
-  sourceVisible: ReadonlySet<string>,
-  editor: Editor,
-  textChannel?: SceneTextChannel,
-): DecorationSet {
-  const decos: Decoration[] = [];
-  for (const entry of entries) {
-    const node = doc.nodeAt(entry.pos);
-    if (!node || node.type.name !== 'codeBlock') continue;
-    const cls = sourceVisible.has(entry.id)
-      ? 'squisq-ascii-fence-source'
-      : 'squisq-ascii-fence-hidden';
-    decos.push(Decoration.node(entry.pos, entry.pos + node.nodeSize, { class: cls }));
-    const blockId = entry.id;
-    const fallbackPos = entry.pos;
-    decos.push(
-      Decoration.widget(
-        entry.pos + node.nodeSize,
-        (view) => {
-          const container = document.createElement('div');
-          container.className = 'squisq-ascii-diagram-widget-host';
-          container.contentEditable = 'false';
-          // Keep 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(AsciiDiagramWidget, {
-              editor,
-              blockId,
-              fallbackPos,
-              host: view.dom.parentElement ?? view.dom,
-              textChannel,
-            }),
-          );
-          (container as HTMLElement & { __squisqAsciiRoot?: WidgetRootRef }).__squisqAsciiRoot = {
-            root,
-          };
-          return container;
-        },
-        {
-          destroy: (dom) => {
-            const ref = (dom as HTMLElement & { __squisqAsciiRoot?: WidgetRootRef })
-              .__squisqAsciiRoot;
-            // Defer so React isn't unmounted mid-render.
-            if (ref) setTimeout(() => ref.root.unmount(), 0);
-          },
-          side: 1,
-          ignoreSelection: true,
-          key: `squisq-ascii-${entry.id}`,
-        },
-      ),
-    );
-  }
-  return DecorationSet.create(doc, decos);
-}
-
-function applyState(
-  tr: Transaction,
-  prev: AsciiDiagramPluginState,
-  editor: Editor,
-  doc: PMNode,
-  textChannel?: SceneTextChannel,
-): AsciiDiagramPluginState {
-  const meta = tr.getMeta(ASCII_DIAGRAM_KEY) as { toggleSource?: string } | undefined;
-  let sourceVisible = prev.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 prev;
-    return {
-      ...prev,
-      sourceVisible,
-      decorations: buildDecorations(doc, prev.entries, sourceVisible, editor, textChannel),
-    };
-  }
-
-  // Doc changed: remap known positions (bias 1 so an insertion exactly at
-  // the block's start shifts the tracked position forward WITH the node),
-  // then walk the new doc and reconcile.
-  const mapped = new Map<number, string>();
-  const claimed = new Set<string>();
-  // Pass 1: survivors whose start position wasn't touched.
-  for (const entry of prev.entries) {
-    const result = tr.mapping.mapResult(entry.pos, 1);
-    if (!result.deleted) {
-      mapped.set(result.pos, entry.id);
-      claimed.add(entry.id);
-    }
-  }
-  // Pass 2: boundary-churn survivors. An attrs-only `setNodeMarkup` (the
-  // language-promotion step) rewrites the codeBlock's opening token, so
-  // `mapResult` reports the start as `deleted` even though the block is still
-  // there. Adopt the old id when a codeBlock still sits at the mapped position
-  // and that slot isn't already claimed — this keeps the widget's React root
-  // (pan/zoom) alive across the one-time promotion, instead of remounting.
-  for (const entry of prev.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 = prev.seq;
-  const entries: AsciiDiagramBlockEntry[] = [];
-  doc.descendants((node, pos) => {
-    if (node.type.name !== 'codeBlock') return;
-    const knownId = mapped.get(pos);
-    // Hysteresis: known blocks stay while they parse at all; new blocks
-    // must pass full detection.
-    const diagram = knownId ? parseAsciiDiagramForNode(node) : getAsciiDiagramForNode(node);
-    if (!diagram) return false;
-    entries.push({ id: knownId ?? `ascii-${++seq}`, pos });
-    return false;
-  });
-
-  const liveIds = new Set(entries.map((e) => e.id));
-  const prunedSourceVisible = new Set([...sourceVisible].filter((id) => liveIds.has(id)));
-
-  return {
-    entries,
-    seq,
-    sourceVisible: prunedSourceVisible,
-    decorations: buildDecorations(doc, entries, prunedSourceVisible, editor, textChannel),
-  };
-}
-
-export interface AsciiDiagramExtensionOptions {
-  /** When false, the extension is inert (no widgets, no decorations). */
-  enabled?: boolean;
-  textChannel?: SceneTextChannel;
-}
-
-export const AsciiDiagramExtension = Extension.create<AsciiDiagramExtensionOptions>({
-  name: 'squisqAsciiDiagram',
-
-  addOptions() {
-    return {
-      enabled: true,
-    };
-  },
-
-  addProseMirrorPlugins() {
-    const editor = this.editor as Editor;
-    if (this.options.enabled === false) return [];
-
-    return [
-      new Plugin<AsciiDiagramPluginState>({
-        key: ASCII_DIAGRAM_KEY,
-        state: {
-          init: (_config, state) => {
-            let seq = 0;
-            const entries: AsciiDiagramBlockEntry[] = [];
-            state.doc.descendants((node, pos) => {
-              if (node.type.name !== 'codeBlock') return;
-              if (!getAsciiDiagramForNode(node)) return false;
-              entries.push({ id: `ascii-${++seq}`, pos });
-              return false;
-            });
-            return {
-              entries,
-              seq,
-              sourceVisible: new Set<string>(),
-              decorations: buildDecorations(
-                state.doc,
-                entries,
-                new Set(),
-                editor,
-                this.options.textChannel,
-              ),
-            };
-          },
-          apply: (tr, prev, _oldState, newState) =>
-            applyState(tr, prev, editor, newState.doc, this.options.textChannel),
-        },
-        props: {
-          decorations(state) {
-            return this.getState(state)?.decorations ?? DecorationSet.empty;
-          },
-        },
-      }),
-    ];
-  },
-});
-
-export default AsciiDiagramExtension;

package/src/asciiDiagram/AsciiDiagramWidget.tsx

@@ -1,254 +0,0 @@
-/**
- * AsciiDiagramWidget — the interactive canvas mounted below a hidden
- * ASCII-diagram code fence in the WYSIWYG view.
- *
- * Mirrors the legacy heading-based DiagramWidget's chrome (shared toolbar,
- * maximize overlay, height handle) but reads/writes the FENCE: data comes
- * from `useAsciiDiagramData` (live re-parse), edits go through
- * `applyAsciiDiagramCommand` (op → render → verify → single-transaction
- * text replace).
- *
- * The height handle is session-local by design: a fence has no annotation
- * surface to persist a `height=` on, and writing chrome state into the art
- * would violate "the fence is the diagram".
- */
-
-import { useCallback, useMemo, useRef, useState } from 'react';
-import type { Editor } from '@tiptap/react';
-import { DiagramCanvas, type DiagramCommand } from '../diagram/DiagramCanvas';
-import { DIAGRAM_TOOLS, DIAGRAM_VIEWPORT } from '../diagram/diagramConstants';
-import { DiagramMaximizedOverlay } from '../diagram/DiagramMaximizedOverlay';
-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 {
-  asciiDiagramToCanvas,
-  initialAsciiDiagramCanvasOffset,
-  offsetAsciiDiagram,
-  useAsciiDiagramData,
-  type AsciiDiagramCanvasOffset,
-} from './asciiDiagramData';
-import { applyAsciiDiagramCommand } from './asciiDiagramCommands';
-import { isAsciiSourceVisible, toggleAsciiSource } from './AsciiDiagramExtension';
-import type { SceneTextChannel } from '../scene/text/sceneTextChannel';
-
-/** Smallest height the canvas can be dragged to (px). */
-const MIN_DIAGRAM_HEIGHT = 160;
-const DEFAULT_DIAGRAM_HEIGHT = 420;
-
-interface AsciiDiagramWidgetProps {
-  editor: Editor;
-  /** Session id from the extension's position registry. */
-  blockId: string;
-  /** Position at widget-creation time — display-only fallback. */
-  fallbackPos: number;
-  /** Host element used for portal targeting by the maximize overlay. */
-  host?: HTMLElement | null;
-  textChannel?: SceneTextChannel;
-}
-
-export function AsciiDiagramWidget({
-  editor,
-  blockId,
-  host,
-  textChannel,
-}: AsciiDiagramWidgetProps) {
-  const view = useAsciiDiagramData(editor, blockId);
-  const [maximized, setMaximized] = useState(false);
-  const [height, setHeight] = useState<number | null>(null);
-  const [dragHeight, setDragHeight] = useState<number | null>(null);
-  const canvasOffsetRef = useRef<AsciiDiagramCanvasOffset | null>(null);
-  const [canvasOffsetVersion, setCanvasOffsetVersion] = useState(0);
-  const inlineRef = useRef<HTMLDivElement>(null);
-  const effectiveHeight = dragHeight ?? height;
-
-  if (view && canvasOffsetRef.current === null) {
-    canvasOffsetRef.current = initialAsciiDiagramCanvasOffset(view.diagram);
-  }
-
-  const canvasView = useMemo(() => {
-    if (!view) return null;
-    const offset = canvasOffsetRef.current ?? { col: 0, row: 0 };
-    return asciiDiagramToCanvas(offsetAsciiDiagram(view.diagram, offset));
-    // The ref is intentionally versioned only when its value is consumed.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [view, canvasOffsetVersion]);
-
-  const dispatch = useCallback(
-    (cmd: DiagramCommand) => {
-      const offset = canvasOffsetRef.current ?? { col: 0, row: 0 };
-      const applied = applyAsciiDiagramCommand(editor, blockId, cmd, {
-        diagramOffset: offset,
-      });
-      if (applied && (offset.col !== 0 || offset.row !== 0)) {
-        // The same rewrite that applied the edit has now persisted the virtual
-        // gutter. Drop the projection offset so the on-screen coordinates do
-        // not change while the fence-backed view refreshes.
-        canvasOffsetRef.current = { col: 0, row: 0 };
-        setCanvasOffsetVersion((version) => version + 1);
-      }
-    },
-    [editor, blockId],
-  );
-
-  const onResizeStart = useCallback(
-    (e: React.PointerEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      const startY = e.clientY;
-      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;
-        setDragHeight(null);
-        setHeight(heightAt(ev.clientY));
-      };
-      window.addEventListener('pointermove', onMove);
-      window.addEventListener('pointerup', onUp);
-    },
-    [effectiveHeight],
-  );
-
-  const onResizeReset = useCallback(() => {
-    setDragHeight(null);
-    setHeight(null);
-  }, []);
-
-  // ── Shared toolbar (above the canvas) ────────────────────
-  const [activeToolId, setActiveToolId] = useState<string>('select');
-  const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(() => new Set());
-  const selectedNodeIds = useMemo(
-    () =>
-      [...selectedIds]
-        .map((id) => nodeIdFromCardLayerId(id))
-        .filter((id): id is string => id != null),
-    [selectedIds],
-  );
-
-  const sourceVisible = isAsciiSourceVisible(editor, blockId);
-
-  if (!view) return null;
-
-  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 })),
-    },
-    {
-      id: 'ascii-source',
-      label: 'Source',
-      icon: <Icon icon="fa-solid fa-code" />,
-      title: sourceVisible ? 'Hide ASCII source' : 'Show ASCII source',
-      onClick: () => toggleAsciiSource(editor, blockId),
-    },
-  ];
-
-  const toolbar = (
-    <SceneBlockToolbar
-      tools={DIAGRAM_TOOLS}
-      activeToolId={activeToolId}
-      onSelectTool={setActiveToolId}
-      actions={actions}
-    />
-  );
-
-  const warnings =
-    view.warnings.length > 0 ? (
-      <details className="squisq-ascii-diagram-warnings">
-        <summary>
-          {view.warnings.length} parser note{view.warnings.length === 1 ? '' : 's'}
-        </summary>
-        <ul>
-          {view.warnings.map((w, i) => (
-            <li key={i}>{w}</li>
-          ))}
-        </ul>
-      </details>
-    ) : null;
-
-  const canvas = (
-    <DiagramCanvas
-      textChannel={textChannel}
-      nodes={canvasView?.nodes ?? view.nodes}
-      edges={canvasView?.edges ?? view.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)}>
-          <div className="squisq-scene-block-max">
-            {canvas}
-            <div className="squisq-scene-side-toolbar">{toolbar}</div>
-          </div>
-        </DiagramMaximizedOverlay>
-      </div>
-    );
-  }
-
-  return (
-    <div className="squisq-scene-shell">
-      <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>
-      {warnings}
-    </div>
-  );
-}
-
-export default AsciiDiagramWidget;