@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/asciiDiagram/RepairableDiagramExtension.ts

@@ -1,200 +0,0 @@
-/**
- * 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

@@ -1,164 +0,0 @@
-/**
- * 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, vi } 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('shows zoom, fit, and fullscreen affordances with fit active by default', async () => {
-    const editor = makeEditor('```diagram\n' + ART_A + '\n```\n');
-    const root = editor.view.dom;
-    await vi.waitFor(() => {
-      expect(root.querySelector('[aria-label="Diagram view"]')).not.toBeNull();
-    });
-
-    expect(root.querySelector('button[aria-label="Zoom out"]')).not.toBeNull();
-    expect(root.querySelector('button[aria-label="Zoom in"]')).not.toBeNull();
-    expect(root.querySelector('button[title^="Maximize"]')).not.toBeNull();
-
-    const fitButton = root.querySelector<HTMLButtonElement>('button[aria-label="Fit diagram"]')!;
-    expect(fitButton.getAttribute('aria-pressed')).toBe('true');
-    root.querySelector<HTMLButtonElement>('button[aria-label="Zoom in"]')?.click();
-    await vi.waitFor(() => expect(fitButton.getAttribute('aria-pressed')).toBe('false'));
-    fitButton.click();
-    await vi.waitFor(() => expect(fitButton.getAttribute('aria-pressed')).toBe('true'));
-  });
-
-  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();
-  });
-});

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

@@ -1,159 +0,0 @@
-/**
- * RepairableDiagramExtension: a broken box-art fence gets a repair entry (and
- * the inline button); applying the repair rewrites it to clean, `diagram`-
- * tagged art that the AsciiDiagramExtension then claims. One undo restores the
- * original broken bytes.
- */
-
-import { Editor } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
-import { afterEach, beforeAll, describe, expect, it } from 'vitest';
-import { detectAsciiDiagram } from '@bendyline/squisq/doc';
-import { markdownToTiptap } from '../../tiptapBridge';
-import { HeadingWithTemplate } from '../../TemplateAnnotation';
-import { AsciiDiagramExtension, ASCII_DIAGRAM_KEY } from '../AsciiDiagramExtension';
-import { RepairableDiagramExtension, REPAIRABLE_KEY } from '../RepairableDiagramExtension';
-import { applyRepairCommand } from '../asciiDiagramCommands';
-
-beforeAll(() => {
-  if (typeof globalThis.ResizeObserver === 'undefined') {
-    class ResizeObserverStub {
-      observe(): void {}
-      unobserve(): void {}
-      disconnect(): void {}
-    }
-    globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver;
-  }
-});
-
-// Broken box art: labels overflow + collide, so the columns desync row-to-row
-// and conservative detection declines it.
-const BROKEN = [
-  '┌──────────┐   ┌──────────┐',
-  '│ @scope/alpha-svc  │   │ @scope/beta-svc   │',
-  '│ one      │   │ two      │',
-  '└────┬─────┘   └────┬─────┘',
-  '     │              │',
-  '     ▼              ▼',
-  '┌────────────────────────────┐',
-  '│ @scope/gamma-store         │',
-  '│ persists                   │',
-  '└────────────────────────────┘',
-].join('\n');
-
-const CLEAN = [
-  '┌────────┐',
-  '│ Alpha  │',
-  '└───┬────┘',
-  '    ▼',
-  '┌────────┐',
-  '│ Beta   │',
-  '└────────┘',
-].join('\n');
-
-let editors: Editor[] = [];
-
-function makeEditor(md: string): 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] }),
-      AsciiDiagramExtension,
-      RepairableDiagramExtension.configure({ onRepair: applyRepairCommand }),
-    ],
-    content: markdownToTiptap(md),
-  });
-  editors.push(editor);
-  return editor;
-}
-
-afterEach(() => {
-  for (const e of editors) e.destroy();
-  editors = [];
-});
-
-const fenced = (art: string) => '```\n' + art + '\n```\n';
-
-function fenceOf(editor: Editor): { text: string; language: string | null } {
-  let text = '';
-  let language: string | null = null;
-  editor.state.doc.descendants((node) => {
-    if (node.type.name === 'codeBlock' && text === '') {
-      text = node.textContent;
-      language = (node.attrs as { language?: string | null }).language ?? null;
-      return false;
-    }
-    return true;
-  });
-  return { text, language };
-}
-
-function repairId(editor: Editor): string | undefined {
-  return REPAIRABLE_KEY.getState(editor.state)?.entries[0]?.id;
-}
-
-describe('RepairableDiagramExtension', () => {
-  it('registers a repair entry for broken box art', () => {
-    const editor = makeEditor(fenced(BROKEN));
-    expect(REPAIRABLE_KEY.getState(editor.state)?.entries.length).toBe(1);
-    // …and the AsciiDiagramExtension does NOT claim it (garbled labels).
-    expect(ASCII_DIAGRAM_KEY.getState(editor.state)?.entries.length).toBe(0);
-  });
-
-  it('offers no button for a CLEAN diagram (the canvas handles it)', () => {
-    const editor = makeEditor(fenced(CLEAN));
-    expect(REPAIRABLE_KEY.getState(editor.state)?.entries.length).toBe(0);
-    expect(ASCII_DIAGRAM_KEY.getState(editor.state)?.entries.length).toBe(1);
-  });
-
-  it('offers no button for ordinary prose fences', () => {
-    const editor = makeEditor(fenced('just some\nplain prose\nlines here'));
-    expect(REPAIRABLE_KEY.getState(editor.state)?.entries.length).toBe(0);
-  });
-
-  it('repairs the fence into clean, diagram-tagged art the canvas then claims', () => {
-    const editor = makeEditor(fenced(BROKEN));
-    const id = repairId(editor)!;
-    expect(applyRepairCommand(editor, id)).toBe(true);
-
-    const fence = fenceOf(editor);
-    // Language promoted to the explicit `diagram` tag.
-    expect(fence.language).toBe('diagram');
-    // The art is now a clean, detectable diagram with the recovered labels.
-    const detection = detectAsciiDiagram(fence.text);
-    expect(detection.isDiagram).toBe(true);
-    expect(fence.text).toContain('@scope/alpha-svc');
-    expect(fence.text).toContain('@scope/gamma-store');
-    // The repairable entry is gone; the AsciiDiagramExtension now claims it.
-    expect(REPAIRABLE_KEY.getState(editor.state)?.entries.length).toBe(0);
-    expect(ASCII_DIAGRAM_KEY.getState(editor.state)?.entries.length).toBe(1);
-  });
-
-  it('one undo restores the original broken art', () => {
-    const editor = makeEditor(fenced(BROKEN));
-    const before = fenceOf(editor).text;
-    applyRepairCommand(editor, repairId(editor)!);
-    expect(fenceOf(editor).text).not.toBe(before);
-    editor.commands.undo();
-    expect(fenceOf(editor).text).toBe(before);
-    // …and it is a repair candidate again, NOT still claimed as a diagram
-    // (the relaxed hysteresis gate must reject the garbled art).
-    expect(REPAIRABLE_KEY.getState(editor.state)?.entries.length).toBe(1);
-    expect(ASCII_DIAGRAM_KEY.getState(editor.state)?.entries.length).toBe(0);
-  });
-
-  it('is inert when disabled', () => {
-    const editor = new Editor({
-      extensions: [
-        StarterKit.configure({ heading: false }),
-        RepairableDiagramExtension.configure({ enabled: false }),
-      ],
-      content: markdownToTiptap(fenced(BROKEN)),
-    });
-    editors.push(editor);
-    expect(REPAIRABLE_KEY.getState(editor.state)).toBeUndefined();
-  });
-});