@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/treeview/TreeViewExtension.ts

@@ -0,0 +1,250 @@
+/**
+ * TreeViewExtension — Tiptap/ProseMirror plugin that turns code blocks
+ * containing ASCII file-tree / outline art into interactive outline editors.
+ *
+ * Structurally identical to AsciiDiagramExtension (position registry, stable
+ * synthetic ids, hysteresis, self-rewrite-survival via the decoration key);
+ * only the detect/parse gates and class names differ. The fence text stays
+ * the source of truth — every edit re-renders the tree art.
+ *
+ * Mutual exclusion with the diagram extension: a fence with ≥2 closed boxes
+ * is a diagram, never a tree (checked in both gates), so at most one
+ * extension claims any given 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 { createRoot, type Root } from 'react-dom/client';
+import { createElement } from 'react';
+import {
+  detectTree,
+  isEligibleTreeFenceLang,
+  isExplicitTreeLang,
+  parseAsciiDiagram,
+  parseTree,
+  type Tree,
+} from '@bendyline/squisq/doc';
+import { TreeOutlineWidget } from './TreeOutlineWidget';
+
+export interface TreeBlockEntry {
+  /** Synthetic session id (`tree-N`), stable across edits for one block. */
+  id: string;
+  /** Document position of the codeBlock node at the current state. */
+  pos: number;
+}
+
+export interface TreeViewPluginState {
+  entries: TreeBlockEntry[];
+  decorations: DecorationSet;
+  seq: number;
+}
+
+export const TREEVIEW_KEY = new PluginKey<TreeViewPluginState>('squisq-treeview');
+
+const detectCache = new WeakMap<PMNode, Tree | null>();
+const parseCache = new WeakMap<PMNode, Tree | null>();
+
+function fenceLangOf(node: PMNode): string | null {
+  const lang = (node.attrs as { language?: string | null }).language;
+  return typeof lang === 'string' ? lang : null;
+}
+
+function countTreeNodes(nodes: readonly Tree['roots'][number][]): number {
+  let n = 0;
+  for (const node of nodes) n += 1 + countTreeNodes(node.children);
+  return n;
+}
+
+/** Full-detection gate for NEW blocks: lang allowlist + tree thresholds. */
+export function getTreeForNode(node: PMNode): Tree | null {
+  if (node.type.name !== 'codeBlock') return null;
+  const cached = detectCache.get(node);
+  if (cached !== undefined) return cached;
+  let result: Tree | null = null;
+  const lang = fenceLangOf(node);
+  if (isEligibleTreeFenceLang(lang)) {
+    const detection = detectTree(node.textContent, { explicit: isExplicitTreeLang(lang) });
+    if (detection.isTree && detection.tree) {
+      result = detection.tree;
+      parseCache.set(node, result);
+    }
+  }
+  detectCache.set(node, result);
+  return result;
+}
+
+/** Relaxed gate for ALREADY-REGISTERED blocks: any parse with ≥1 node and no boxes. */
+export function parseTreeForNode(node: PMNode): Tree | null {
+  if (node.type.name !== 'codeBlock') return null;
+  const cached = parseCache.get(node);
+  if (cached !== undefined) return cached;
+  let result: Tree | null = null;
+  if (isEligibleTreeFenceLang(fenceLangOf(node))) {
+    const text = node.textContent;
+    // Box-diagram fences belong to the diagram extension, never here.
+    if (parseAsciiDiagram(text).nodes.length < 2) {
+      const parsed = parseTree(text);
+      if (countTreeNodes(parsed.roots) > 0) result = parsed;
+    }
+  }
+  parseCache.set(node, result);
+  return result;
+}
+
+export function findTreeBlockPos(editor: Editor, blockId: string): number | null {
+  return TREEVIEW_KEY.getState(editor.state)?.entries.find((e) => e.id === blockId)?.pos ?? null;
+}
+
+interface WidgetRootRef {
+  root: Root;
+}
+
+function buildDecorations(doc: PMNode, entries: TreeBlockEntry[], editor: Editor): DecorationSet {
+  const decos: Decoration[] = [];
+  for (const entry of entries) {
+    const node = doc.nodeAt(entry.pos);
+    if (!node || node.type.name !== 'codeBlock') continue;
+    decos.push(
+      Decoration.node(entry.pos, entry.pos + node.nodeSize, { class: 'squisq-tree-fence-hidden' }),
+    );
+    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-tree-widget-host';
+          container.contentEditable = 'false';
+          container.addEventListener('mousedown', (e) => e.stopPropagation());
+          container.addEventListener('keydown', (e) => e.stopPropagation());
+          const root = createRoot(container);
+          root.render(
+            createElement(TreeOutlineWidget, {
+              editor,
+              blockId,
+              fallbackPos,
+              host: view.dom.parentElement ?? view.dom,
+            }),
+          );
+          (container as HTMLElement & { __squisqTreeRoot?: WidgetRootRef }).__squisqTreeRoot = {
+            root,
+          };
+          return container;
+        },
+        {
+          destroy: (dom) => {
+            const ref = (dom as HTMLElement & { __squisqTreeRoot?: WidgetRootRef })
+              .__squisqTreeRoot;
+            if (ref) setTimeout(() => ref.root.unmount(), 0);
+          },
+          side: 1,
+          ignoreSelection: true,
+          key: `squisq-tree-${entry.id}`,
+        },
+      ),
+    );
+  }
+  return DecorationSet.create(doc, decos);
+}
+
+function applyState(
+  tr: Transaction,
+  prev: TreeViewPluginState,
+  editor: Editor,
+  doc: PMNode,
+): TreeViewPluginState {
+  if (!tr.docChanged) return prev;
+
+  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 — keeps the widget alive across the
+  // one-time promotion instead of remounting it.
+  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: TreeBlockEntry[] = [];
+  doc.descendants((node, pos) => {
+    if (node.type.name !== 'codeBlock') return;
+    const knownId = mapped.get(pos);
+    const tree = knownId ? parseTreeForNode(node) : getTreeForNode(node);
+    if (!tree) return false;
+    entries.push({ id: knownId ?? `tree-${++seq}`, pos });
+    return false;
+  });
+
+  return { entries, seq, decorations: buildDecorations(doc, entries, editor) };
+}
+
+export interface TreeViewExtensionOptions {
+  /** When false, the extension is inert (no widgets, no decorations). */
+  enabled?: boolean;
+}
+
+export const TreeViewExtension = Extension.create<TreeViewExtensionOptions>({
+  name: 'squisqTreeView',
+
+  addOptions() {
+    return { enabled: true };
+  },
+
+  addProseMirrorPlugins() {
+    const editor = this.editor as Editor;
+    if (this.options.enabled === false) return [];
+
+    return [
+      new Plugin<TreeViewPluginState>({
+        key: TREEVIEW_KEY,
+        state: {
+          init: (_config, state) => {
+            let seq = 0;
+            const entries: TreeBlockEntry[] = [];
+            state.doc.descendants((node, pos) => {
+              if (node.type.name !== 'codeBlock') return;
+              if (!getTreeForNode(node)) return false;
+              entries.push({ id: `tree-${++seq}`, pos });
+              return false;
+            });
+            return {
+              entries,
+              seq,
+              decorations: buildDecorations(state.doc, entries, editor),
+            };
+          },
+          apply: (tr, prev, _oldState, newState) => applyState(tr, prev, editor, newState.doc),
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state)?.decorations ?? DecorationSet.empty;
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default TreeViewExtension;

package/src/treeview/__tests__/TreeViewExtension.test.ts

@@ -0,0 +1,122 @@
+/**
+ * Registry / decoration behavior of TreeViewExtension + mutual exclusion
+ * with the diagram extension.
+ */
+
+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 { TreeViewExtension, TREEVIEW_KEY, findTreeBlockPos } from '../TreeViewExtension';
+import { AsciiDiagramExtension, ASCII_DIAGRAM_KEY } from '../../asciiDiagram/AsciiDiagramExtension';
+import { replaceAsciiFenceText } from '../../asciiDiagram/asciiDiagramCommands';
+
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class RO {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    globalThis.ResizeObserver = RO as unknown as typeof ResizeObserver;
+  }
+});
+
+const TREE = ['src/', '├── a.ts', '└── sub/', '    └── b.ts'].join('\n');
+const TREE_B = ['docs/', '├── guide.md', '└── api.md'].join('\n');
+const DIAGRAM = [
+  '┌────────┐',
+  '│ Alpha  │',
+  '└───┬────┘',
+  '    ▼',
+  '┌────────┐',
+  '│ Beta   │',
+  '└────────┘',
+].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] }),
+      AsciiDiagramExtension,
+      options ? TreeViewExtension.configure(options) : TreeViewExtension,
+    ],
+    content: markdownToTiptap(md),
+  });
+  editors.push(editor);
+  return editor;
+}
+afterEach(() => {
+  for (const e of editors) e.destroy();
+  editors = [];
+});
+
+const treeEntries = (e: Editor) => TREEVIEW_KEY.getState(e.state)?.entries ?? [];
+const diagramEntries = (e: Editor) => ASCII_DIAGRAM_KEY.getState(e.state)?.entries ?? [];
+
+describe('TreeViewExtension registry', () => {
+  it('registers each qualifying tree fence with a distinct id', () => {
+    const editor = makeEditor('```\n' + TREE + '\n```\n\nMid.\n\n```\n' + TREE_B + '\n```\n');
+    const entries = treeEntries(editor);
+    expect(entries).toHaveLength(2);
+    expect(entries[0].id).not.toBe(entries[1].id);
+  });
+
+  it('ignores real-language and non-tree fences', () => {
+    const editor = makeEditor('```bash\n' + TREE + '\n```\n\n```\nplain code\nno tree\n```\n');
+    expect(treeEntries(editor)).toHaveLength(0);
+  });
+
+  it('mutual exclusion: a box diagram gets the diagram widget, not the tree', () => {
+    const editor = makeEditor('```\n' + DIAGRAM + '\n```\n');
+    expect(treeEntries(editor)).toHaveLength(0);
+    expect(diagramEntries(editor)).toHaveLength(1);
+  });
+
+  it('keeps ids stable when content above changes', () => {
+    const editor = makeEditor('First.\n\n```\n' + TREE + '\n```\n');
+    const [before] = treeEntries(editor);
+    editor.commands.insertContentAt(0, '<p>inserted</p>');
+    const [after] = treeEntries(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' + TREE + '\n```\n');
+    const [before] = treeEntries(editor);
+    expect(replaceAsciiFenceText(editor, before.pos, TREE.replace('a.ts', 'main.ts'))).toBe(true);
+    const [after] = treeEntries(editor);
+    expect(after.id).toBe(before.id);
+    expect(findTreeBlockPos(editor, before.id)).toBe(after.pos);
+  });
+
+  it('hysteresis: degraded to a single node still stays interactive', () => {
+    const editor = makeEditor('```\n' + TREE + '\n```\n');
+    const [entry] = treeEntries(editor);
+    replaceAsciiFenceText(editor, entry.pos, 'src/\n└── only.ts');
+    const after = treeEntries(editor);
+    expect(after).toHaveLength(1);
+    expect(after[0].id).toBe(entry.id);
+  });
+
+  it('drops a block whose fence is rewritten into a box diagram', () => {
+    const editor = makeEditor('```\n' + TREE + '\n```\n');
+    const [entry] = treeEntries(editor);
+    replaceAsciiFenceText(editor, entry.pos, DIAGRAM);
+    expect(treeEntries(editor)).toHaveLength(0);
+    // The diagram extension now owns the fence.
+    expect(diagramEntries(editor)).toHaveLength(1);
+  });
+
+  it('enabled: false disables the plugin', () => {
+    const editor = makeEditor('```\n' + TREE + '\n```\n', { enabled: false });
+    expect(TREEVIEW_KEY.getState(editor.state)).toBeUndefined();
+  });
+});

package/src/treeview/__tests__/treeOps.test.ts

@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest';
+import { parseTree, renderTree, type Tree, type TreeNode } from '@bendyline/squisq/doc';
+import {
+  addItemOp,
+  indentItemOp,
+  moveItemDownOp,
+  moveItemUpOp,
+  outdentItemOp,
+  removeItemOp,
+  renameItemOp,
+  sanitizeTreeLabel,
+  toggleDirOp,
+} from '../treeOps';
+
+function tree(art: string): Tree {
+  return parseTree(art);
+}
+function flat(t: Tree): string[] {
+  const out: string[] = [];
+  const walk = (ns: TreeNode[], d: number) => {
+    for (const n of ns) {
+      out.push(`${d}:${n.label}`);
+      walk(n.children, d + 1);
+    }
+  };
+  walk(t.roots, 0);
+  return out;
+}
+
+const BASE = ['root/', '├── a', '├── b/', '│   └── b1', '└── c'].join('\n');
+
+describe('sanitizeTreeLabel', () => {
+  it('strips connector glyphs and newlines', () => {
+    expect(sanitizeTreeLabel('a ├── b │ c\nd')).toBe('a b c d');
+  });
+});
+
+describe('treeOps', () => {
+  it('renameItemOp renames without mutating the input', () => {
+    const t = tree(BASE);
+    const next = renameItemOp(t, 'a', 'alpha');
+    expect(flat(next)).toContain('1:alpha');
+    expect(flat(t)).toContain('1:a'); // original untouched
+  });
+
+  it('addItemOp adds a child and a sibling', () => {
+    const child = addItemOp(tree(BASE), 'a', 'child', 'a1');
+    const aNode = child.roots[0].children.find((n) => n.label === 'a');
+    expect(aNode?.children.map((c) => c.label)).toEqual(['a1']);
+
+    const sib = addItemOp(tree(BASE), 'a', 'siblingAfter', 'a2');
+    expect(sib.roots[0].children.map((c) => c.label)).toEqual(['a', 'a2', 'b/', 'c']);
+  });
+
+  it('addItemOp with isDir adds a trailing-slash folder with a folder default name', () => {
+    // Explicit label gets a slash.
+    const named = addItemOp(tree(BASE), 'a', 'siblingAfter', 'assets', true);
+    const assets = named.roots[0].children.find((n) => n.label === 'assets/');
+    expect(assets?.isDir).toBe(true);
+
+    // Default name is a fresh `folderN/`.
+    const auto = addItemOp(tree(BASE), 'a', 'siblingAfter', undefined, true);
+    const folder = auto.roots[0].children.find((n) => n.label.startsWith('folder'));
+    expect(folder?.label).toBe('folder1/');
+    expect(folder?.isDir).toBe(true);
+  });
+
+  it('removeItemOp drops a node and its subtree', () => {
+    const next = removeItemOp(tree(BASE), 'b');
+    expect(flat(next)).toEqual(['0:root/', '1:a', '1:c']);
+  });
+
+  it('indentItemOp re-parents under the preceding sibling', () => {
+    const next = indentItemOp(tree(BASE), 'c'); // c indents under b/
+    expect(flat(next)).toEqual(['0:root/', '1:a', '1:b/', '2:b1', '2:c']);
+  });
+
+  it('indentItemOp is a no-op for the first sibling', () => {
+    const t = tree(BASE);
+    expect(indentItemOp(t, 'a')).toBe(t);
+  });
+
+  it('outdentItemOp promotes a node to a sibling of its parent (subtree carried)', () => {
+    const next = outdentItemOp(tree(BASE), 'b1'); // b1 outdents next to b/
+    expect(flat(next)).toEqual(['0:root/', '1:a', '1:b/', '1:b1', '1:c']);
+  });
+
+  it('outdentItemOp is a no-op for a root', () => {
+    const t = tree(BASE);
+    expect(outdentItemOp(t, 'root')).toBe(t);
+  });
+
+  it('moveItemUp / moveItemDown reorder siblings within bounds', () => {
+    expect(flat(moveItemDownOp(tree(BASE), 'a'))).toEqual([
+      '0:root/',
+      '1:b/',
+      '2:b1',
+      '1:a',
+      '1:c',
+    ]);
+    const t = tree(BASE);
+    expect(moveItemUpOp(t, 'a')).toBe(t); // already first
+  });
+
+  it('toggleDirOp toggles the trailing slash', () => {
+    const on = toggleDirOp(tree(BASE), 'a'); // a → a/
+    expect(on.roots[0].children[0].label).toBe('a/');
+    const off = toggleDirOp(on, 'a'); // a/ → a
+    expect(off.roots[0].children.find((n) => n.label === 'a')).toBeDefined();
+  });
+
+  it('every op keeps the tree renderable + byte-stable', () => {
+    for (const op of [
+      (t: Tree) => renameItemOp(t, 'a', 'alpha'),
+      (t: Tree) => addItemOp(t, 'b', 'child', 'b2'),
+      (t: Tree) => indentItemOp(t, 'c'),
+      (t: Tree) => outdentItemOp(t, 'b1'),
+      (t: Tree) => moveItemDownOp(t, 'a'),
+    ]) {
+      const next = op(tree(BASE));
+      const r1 = renderTree(next);
+      expect(renderTree(parseTree(r1))).toBe(r1);
+    }
+  });
+});

package/src/treeview/__tests__/treePaste.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { shouldPasteAsTreeFence } from '../treePaste';
+
+const FILE_TREE = ['src/', '├── index.ts', '├── utils/', '│   └── math.ts', '└── config.ts'].join(
+  '\n',
+);
+const ASCII_TREE = ['root', '|-- a', '|-- b', '`-- c'].join('\n');
+const BOX_DIAGRAM = [
+  '┌────────┐',
+  '│ Alpha  │',
+  '└───┬────┘',
+  '    ▼',
+  '┌────────┐',
+  '│ Beta   │',
+  '└────────┘',
+].join('\n');
+
+describe('shouldPasteAsTreeFence', () => {
+  it('accepts bare Unicode file-tree art', () => {
+    expect(shouldPasteAsTreeFence(FILE_TREE)).toBe(true);
+  });
+
+  it('accepts bare ASCII tree art', () => {
+    expect(shouldPasteAsTreeFence(ASCII_TREE)).toBe(true);
+  });
+
+  it('rejects a box diagram (belongs to the diagram gate)', () => {
+    expect(shouldPasteAsTreeFence(BOX_DIAGRAM)).toBe(false);
+  });
+
+  it('rejects a GFM table', () => {
+    expect(shouldPasteAsTreeFence(['| a | b |', '|---|---|', '| 1 | 2 |'].join('\n'))).toBe(false);
+  });
+
+  it('rejects text already containing a fence, and prose', () => {
+    expect(shouldPasteAsTreeFence('```\n' + FILE_TREE + '\n```')).toBe(false);
+    expect(shouldPasteAsTreeFence('just a normal paragraph of text')).toBe(false);
+    expect(shouldPasteAsTreeFence('')).toBe(false);
+  });
+});