@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/asciiDiagram/AsciiDiagramWidget.tsx

@@ -0,0 +1,224 @@
+/**
+ * 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 { useAsciiDiagramData } 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 inlineRef = useRef<HTMLDivElement>(null);
+  const effectiveHeight = dragHeight ?? height;
+
+  const dispatch = useCallback(
+    (cmd: DiagramCommand) => {
+      applyAsciiDiagramCommand(editor, blockId, cmd);
+    },
+    [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={view.nodes}
+      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;

package/src/asciiDiagram/RepairableDiagramExtension.ts

@@ -0,0 +1,200 @@
+/**
+ * RepairableDiagramExtension — mounts an inline "Repair as diagram" button on
+ * code fences that hold BROKEN box-and-line art.
+ *
+ * The three states of a box-drawing fence partition cleanly:
+ *  - a clean diagram        → AsciiDiagramExtension mounts the canvas;
+ *  - a file tree / outline  → TreeViewExtension mounts the outline;
+ *  - broken box art         → neither claims it (it renders as a faithful
+ *                             code block), and THIS extension offers a button
+ *                             to reconstruct it via `repairAsciiDiagram`.
+ *
+ * Unlike the diagram/tree extensions it does NOT hide the fence or mount a
+ * persistent interactive widget — the code stays visible and editable, and a
+ * single click rewrites the fence to clean `diagram`-tagged art (which the
+ * AsciiDiagramExtension then turns into a canvas). So the position registry
+ * only needs to survive until the click; it mirrors the other extensions'
+ * mapping so the button always resolves the right fence.
+ */
+
+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 { isEligibleAsciiFenceLang, isRepairableDiagram } from '@bendyline/squisq/doc';
+
+export interface RepairableBlockEntry {
+  /** Synthetic session id (`repair-N`), stable across edits for one block. */
+  id: string;
+  /** Document position of the codeBlock node at the current state. */
+  pos: number;
+}
+
+export interface RepairablePluginState {
+  entries: RepairableBlockEntry[];
+  decorations: DecorationSet;
+  seq: number;
+}
+
+export const REPAIRABLE_KEY = new PluginKey<RepairablePluginState>('squisq-repairable-diagram');
+
+const cache = new WeakMap<PMNode, boolean>();
+
+function fenceLangOf(node: PMNode): string | null {
+  const lang = (node.attrs as { language?: string | null }).language;
+  return typeof lang === 'string' ? lang : null;
+}
+
+/** True when a codeBlock holds broken box art worth offering to repair. */
+export function isRepairableFence(node: PMNode): boolean {
+  if (node.type.name !== 'codeBlock') return false;
+  const cached = cache.get(node);
+  if (cached !== undefined) return cached;
+  const result =
+    isEligibleAsciiFenceLang(fenceLangOf(node)) && isRepairableDiagram(node.textContent);
+  cache.set(node, result);
+  return result;
+}
+
+/** Resolve a registered block's current doc position (null when gone). */
+export function findRepairableBlockPos(editor: Editor, blockId: string): number | null {
+  return REPAIRABLE_KEY.getState(editor.state)?.entries.find((e) => e.id === blockId)?.pos ?? null;
+}
+
+/** Handler the mounted button invokes; wired by the host via extension options. */
+export interface RepairableDiagramExtensionOptions {
+  enabled?: boolean;
+  /** Invoked when a repair button is clicked, with the block's synthetic id. */
+  onRepair?: (editor: Editor, blockId: string) => void;
+}
+
+function buildDecorations(
+  doc: PMNode,
+  entries: RepairableBlockEntry[],
+  editor: Editor,
+  onRepair?: (editor: Editor, blockId: string) => void,
+): DecorationSet {
+  const decos: Decoration[] = [];
+  for (const entry of entries) {
+    const node = doc.nodeAt(entry.pos);
+    if (!node || node.type.name !== 'codeBlock') continue;
+    const blockId = entry.id;
+    decos.push(
+      Decoration.widget(
+        entry.pos + node.nodeSize,
+        () => {
+          const host = document.createElement('div');
+          host.className = 'squisq-repair-banner';
+          host.contentEditable = 'false';
+          const label = document.createElement('span');
+          label.className = 'squisq-repair-banner-text';
+          label.textContent = 'This looks like a diagram that didn’t render cleanly.';
+          const btn = document.createElement('button');
+          btn.type = 'button';
+          btn.className = 'squisq-repair-banner-btn';
+          btn.textContent = '⟳ Repair as diagram';
+          const stop = (e: Event) => e.stopPropagation();
+          host.addEventListener('mousedown', stop);
+          btn.addEventListener('mousedown', stop);
+          btn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onRepair?.(editor, blockId);
+          });
+          host.appendChild(label);
+          host.appendChild(btn);
+          return host;
+        },
+        { side: 1, ignoreSelection: true, key: `squisq-repair-${entry.id}` },
+      ),
+    );
+  }
+  return DecorationSet.create(doc, decos);
+}
+
+function applyState(
+  tr: Transaction,
+  prev: RepairablePluginState,
+  editor: Editor,
+  doc: PMNode,
+  onRepair?: (editor: Editor, blockId: string) => void,
+): RepairablePluginState {
+  if (!tr.docChanged) return prev;
+
+  const mapped = new Map<number, string>();
+  const claimed = new Set<string>();
+  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);
+    }
+  }
+  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: RepairableBlockEntry[] = [];
+  doc.descendants((node, pos) => {
+    if (node.type.name !== 'codeBlock') return;
+    if (!isRepairableFence(node)) return false;
+    entries.push({ id: mapped.get(pos) ?? `repair-${++seq}`, pos });
+    return false;
+  });
+
+  return { entries, seq, decorations: buildDecorations(doc, entries, editor, onRepair) };
+}
+
+export const RepairableDiagramExtension = Extension.create<RepairableDiagramExtensionOptions>({
+  name: 'squisqRepairableDiagram',
+
+  addOptions() {
+    return { enabled: true };
+  },
+
+  addProseMirrorPlugins() {
+    const editor = this.editor as Editor;
+    if (this.options.enabled === false) return [];
+    const onRepair = this.options.onRepair;
+
+    return [
+      new Plugin<RepairablePluginState>({
+        key: REPAIRABLE_KEY,
+        state: {
+          init: (_config, state) => {
+            let seq = 0;
+            const entries: RepairableBlockEntry[] = [];
+            state.doc.descendants((node, pos) => {
+              if (node.type.name !== 'codeBlock') return;
+              if (!isRepairableFence(node)) return false;
+              entries.push({ id: `repair-${++seq}`, pos });
+              return false;
+            });
+            return {
+              entries,
+              seq,
+              decorations: buildDecorations(state.doc, entries, editor, onRepair),
+            };
+          },
+          apply: (tr, prev, _old, newState) => applyState(tr, prev, editor, newState.doc, onRepair),
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state)?.decorations ?? DecorationSet.empty;
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default RepairableDiagramExtension;

package/src/asciiDiagram/__tests__/AsciiDiagramExtension.test.ts

@@ -0,0 +1,145 @@
+/**
+ * Registry / decoration behavior of AsciiDiagramExtension: stable block
+ * identity across unrelated edits AND self-inflicted fence rewrites — the
+ * property that keeps the mounted canvas (pan/zoom) alive.
+ */
+
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { markdownToTiptap } from '../../tiptapBridge';
+import { HeadingWithTemplate } from '../../TemplateAnnotation';
+import {
+  AsciiDiagramExtension,
+  ASCII_DIAGRAM_KEY,
+  findAsciiDiagramBlockPos,
+  isAsciiSourceVisible,
+  toggleAsciiSource,
+} from '../AsciiDiagramExtension';
+import { replaceAsciiFenceText } from '../asciiDiagramCommands';
+
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class ResizeObserverStub {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver;
+  }
+});
+
+const ART_A = [
+  '┌────────┐',
+  '│ Alpha  │',
+  '└───┬────┘',
+  '    │',
+  '    ▼',
+  '┌────────┐',
+  '│ Beta   │',
+  '└────────┘',
+].join('\n');
+
+const ART_B = [
+  '+-------+     +-------+',
+  '| Left  | --> | Right |',
+  '+-------+     +-------+',
+].join('\n');
+
+let editors: Editor[] = [];
+
+function makeEditor(md: string, options?: { enabled?: boolean }): Editor {
+  const editor = new Editor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
+      }),
+      HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+      options ? AsciiDiagramExtension.configure(options) : AsciiDiagramExtension,
+    ],
+    content: markdownToTiptap(md),
+  });
+  editors.push(editor);
+  return editor;
+}
+
+afterEach(() => {
+  for (const e of editors) e.destroy();
+  editors = [];
+});
+
+function entriesOf(editor: Editor) {
+  return ASCII_DIAGRAM_KEY.getState(editor.state)?.entries ?? [];
+}
+
+describe('AsciiDiagramExtension registry', () => {
+  it('registers each qualifying fence with a distinct id', () => {
+    const editor = makeEditor(
+      'Intro paragraph.\n\n```\n' + ART_A + '\n```\n\nBetween.\n\n```\n' + ART_B + '\n```\n',
+    );
+    const entries = entriesOf(editor);
+    expect(entries).toHaveLength(2);
+    expect(entries[0].id).not.toBe(entries[1].id);
+  });
+
+  it('ignores fences with a real language and non-diagram fences', () => {
+    const editor = makeEditor(
+      '```js\n' + ART_A + '\n```\n\n```\nplain code here\nmore\nlines\n```\n',
+    );
+    expect(entriesOf(editor)).toHaveLength(0);
+  });
+
+  it('keeps ids stable when content above changes (positions remap)', () => {
+    const editor = makeEditor('First.\n\n```\n' + ART_A + '\n```\n');
+    const [before] = entriesOf(editor);
+    editor.commands.insertContentAt(0, '<p>inserted above</p>');
+    const [after] = entriesOf(editor);
+    expect(after.id).toBe(before.id);
+    expect(after.pos).toBeGreaterThan(before.pos);
+  });
+
+  it('keeps the id across a self-inflicted fence rewrite', () => {
+    const editor = makeEditor('```\n' + ART_A + '\n```\n');
+    const [before] = entriesOf(editor);
+    const rewritten = ART_A.replace('Beta', 'Delta');
+    expect(replaceAsciiFenceText(editor, before.pos, rewritten)).toBe(true);
+    const [after] = entriesOf(editor);
+    expect(after.id).toBe(before.id);
+    expect(findAsciiDiagramBlockPos(editor, before.id)).toBe(after.pos);
+  });
+
+  it('drops a block whose fence no longer parses at all', () => {
+    const editor = makeEditor('```\n' + ART_A + '\n```\n');
+    const [entry] = entriesOf(editor);
+    replaceAsciiFenceText(editor, entry.pos, 'no boxes here\njust text\nlines');
+    expect(entriesOf(editor)).toHaveLength(0);
+  });
+
+  it('hysteresis: a registered block degraded to ONE box stays interactive', () => {
+    const editor = makeEditor('```\n' + ART_A + '\n```\n');
+    const [entry] = entriesOf(editor);
+    const oneBox = '┌────────┐\n│ Alpha  │\n└────────┘';
+    replaceAsciiFenceText(editor, entry.pos, oneBox);
+    const after = entriesOf(editor);
+    expect(after).toHaveLength(1);
+    expect(after[0].id).toBe(entry.id);
+  });
+
+  it('toggleAsciiSource flips visibility without touching the doc', () => {
+    const editor = makeEditor('```\n' + ART_A + '\n```\n');
+    const [entry] = entriesOf(editor);
+    const json = JSON.stringify(editor.state.doc.toJSON());
+    expect(isAsciiSourceVisible(editor, entry.id)).toBe(false);
+    toggleAsciiSource(editor, entry.id);
+    expect(isAsciiSourceVisible(editor, entry.id)).toBe(true);
+    toggleAsciiSource(editor, entry.id);
+    expect(isAsciiSourceVisible(editor, entry.id)).toBe(false);
+    expect(JSON.stringify(editor.state.doc.toJSON())).toBe(json);
+  });
+
+  it('enabled: false disables the plugin entirely', () => {
+    const editor = makeEditor('```\n' + ART_A + '\n```\n', { enabled: false });
+    expect(ASCII_DIAGRAM_KEY.getState(editor.state)).toBeUndefined();
+  });
+});