@bendyline/squisq-editor-react 1.6.1 → 2.0.0

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);
+  });
+});

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

@@ -0,0 +1,163 @@
+/**
+ * Command pipeline through a REAL tiptap editor: fence text in →
+ * applyTreeCommand → fence text out, verified by re-parsing.
+ */
+
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { parseTree } from '@bendyline/squisq/doc';
+import { markdownToTiptap } from '../../tiptapBridge';
+import { HeadingWithTemplate } from '../../TemplateAnnotation';
+import { TreeViewExtension, TREEVIEW_KEY } from '../TreeViewExtension';
+import { applyTreeCommand } from '../treeViewCommands';
+
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class RO {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    globalThis.ResizeObserver = RO as unknown as typeof ResizeObserver;
+  }
+});
+
+const ART = ['src/', '├── index.ts', '├── utils/', '│   └── math.ts', '└── config.ts'].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] }),
+      TreeViewExtension,
+    ],
+    content: markdownToTiptap(md),
+  });
+  editors.push(editor);
+  return editor;
+}
+afterEach(() => {
+  for (const e of editors) e.destroy();
+  editors = [];
+});
+
+function firstId(editor: Editor): string {
+  const s = TREEVIEW_KEY.getState(editor.state);
+  expect(s?.entries.length).toBeGreaterThan(0);
+  return s?.entries[0].id as string;
+}
+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 labels(editor: Editor): string[] {
+  const out: string[] = [];
+  const walk = (ns: ReturnType<typeof parseTree>['roots']) =>
+    ns.forEach((n) => (out.push(n.label), walk(n.children)));
+  walk(parseTree(fenceOf(editor).text).roots);
+  return out;
+}
+
+describe('applyTreeCommand', () => {
+  it('renameItem rewrites the fence', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    expect(
+      applyTreeCommand(editor, id, { kind: 'renameItem', id: 'index-ts', label: 'main.ts' }),
+    ).toBe(true);
+    expect(labels(editor)).toContain('main.ts');
+    expect(labels(editor)).not.toContain('index.ts');
+  });
+
+  it('addItem (child) grows the tree', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    expect(
+      applyTreeCommand(editor, id, {
+        kind: 'addItem',
+        targetId: 'utils',
+        position: 'child',
+        label: 'io.ts',
+      }),
+    ).toBe(true);
+    const utils = parseTree(fenceOf(editor).text).roots[0].children.find(
+      (n) => n.label === 'utils/',
+    );
+    expect(utils?.children.map((c) => c.label)).toContain('io.ts');
+  });
+
+  it('indentItem / outdentItem restructure', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    // config.ts indents under utils/
+    expect(applyTreeCommand(editor, id, { kind: 'indentItem', id: 'config-ts' })).toBe(true);
+    const utils = parseTree(fenceOf(editor).text).roots[0].children.find(
+      (n) => n.label === 'utils/',
+    );
+    expect(utils?.children.map((c) => c.label)).toContain('config.ts');
+  });
+
+  it('removeItem drops a node', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    expect(applyTreeCommand(editor, id, { kind: 'removeItem', id: 'config-ts' })).toBe(true);
+    expect(labels(editor)).not.toContain('config.ts');
+  });
+
+  it('promotes the fence language to the explicit `tree` tag on edit', () => {
+    // A once-edited tree should carry `language: 'tree'` so its identity
+    // survives a later flatten → markdown → re-import round-trip.
+    const editor = makeEditor('```text\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    expect(fenceOf(editor).language).toBe('text');
+    applyTreeCommand(editor, id, { kind: 'renameItem', id: 'index-ts', label: 'app.ts' });
+    expect(fenceOf(editor).language).toBe('tree');
+  });
+
+  it('keeps the block id stable across the language-promotion rewrite', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    applyTreeCommand(editor, id, { kind: 'renameItem', id: 'index-ts', label: 'app.ts' });
+    expect(firstId(editor)).toBe(id);
+    expect(fenceOf(editor).language).toBe('tree');
+  });
+
+  it('one undo restores the original fence bytes', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    const before = fenceOf(editor).text;
+    applyTreeCommand(editor, id, { kind: 'renameItem', id: 'index-ts', label: 'app.ts' });
+    expect(fenceOf(editor).text).not.toBe(before);
+    editor.commands.undo();
+    expect(fenceOf(editor).text).toBe(before);
+  });
+
+  it('no-op commands leave the document untouched', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    const json = JSON.stringify(editor.state.doc.toJSON());
+    expect(applyTreeCommand(editor, id, { kind: 'indentItem', id: 'src' })).toBe(false); // root
+    expect(JSON.stringify(editor.state.doc.toJSON())).toBe(json);
+  });
+
+  it('returns false for an unknown block id', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    expect(applyTreeCommand(editor, 'tree-999', { kind: 'removeItem', id: 'index-ts' })).toBe(
+      false,
+    );
+  });
+});

package/src/treeview/treeOps.ts

@@ -0,0 +1,172 @@
+/**
+ * Pure outline operations over the tree model — the write-direction half of
+ * the fence-is-source-of-truth loop:
+ *
+ *   fence text → parseTree → op → renderTree → fence text
+ *
+ * Every op returns a NEW Tree (inputs untouched). These are the genuinely
+ * new operations with no diagram analog: indent / outdent (re-parent a node
+ * carrying its subtree), move-up / move-down (reorder siblings), plus
+ * add / rename / remove / toggle-directory. Connector rails re-derive in
+ * render, so ops only touch structure + labels.
+ */
+
+import type { Tree, TreeNode } from '@bendyline/squisq/doc';
+
+/** Make an arbitrary rename safe as a tree label: no connector glyphs / newlines. */
+export function sanitizeTreeLabel(label: string): string {
+  return label
+    .replace(/[├└│─┃┏┓┗┛┣┫┳┻╋╰╭╮╯|`]/gu, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function cloneNode(n: TreeNode): TreeNode {
+  return {
+    id: n.id,
+    label: n.label,
+    children: n.children.map(cloneNode),
+    ...(n.isDir ? { isDir: true } : {}),
+    ...(n.comment ? { comment: n.comment } : {}),
+  };
+}
+function cloneTree(t: Tree): Tree {
+  return { roots: t.roots.map(cloneNode), style: t.style, warnings: [...t.warnings] };
+}
+
+interface Loc {
+  siblings: TreeNode[];
+  index: number;
+  node: TreeNode;
+  parent: TreeNode | null;
+}
+
+/** Locate a node by id in a (cloned) tree, returning its sibling array + index + parent. */
+function locate(roots: TreeNode[], id: string, parent: TreeNode | null = null): Loc | null {
+  for (let i = 0; i < roots.length; i++) {
+    if (roots[i].id === id) return { siblings: roots, index: i, node: roots[i], parent };
+    const inner = locate(roots[i].children, id, roots[i]);
+    if (inner) return inner;
+  }
+  return null;
+}
+
+function markDir(n: TreeNode): void {
+  n.isDir = n.label.endsWith('/') || n.children.length > 0;
+}
+
+export function renameItemOp(tree: Tree, id: string, label: string): Tree {
+  const clean = sanitizeTreeLabel(label);
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc || clean.length === 0 || clean === loc.node.label) return tree;
+  loc.node.label = clean;
+  markDir(loc.node);
+  return next;
+}
+
+export function addItemOp(
+  tree: Tree,
+  targetId: string,
+  position: 'child' | 'siblingAfter',
+  label?: string,
+  isDir?: boolean,
+): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, targetId);
+  if (!loc) return tree;
+  let name = sanitizeTreeLabel(label ?? '') || freshLabel(next, isDir);
+  // A folder carries a trailing slash so it re-parses as a directory.
+  if (isDir && !name.endsWith('/')) name += '/';
+  const node: TreeNode = {
+    id: `__new-${name}`,
+    label: name,
+    children: [],
+    ...(isDir ? { isDir: true } : {}),
+  };
+  if (position === 'child') {
+    loc.node.children.push(node);
+    markDir(loc.node);
+  } else {
+    loc.siblings.splice(loc.index + 1, 0, node);
+  }
+  return next;
+}
+
+export function removeItemOp(tree: Tree, id: string): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc) return tree;
+  loc.siblings.splice(loc.index, 1);
+  if (loc.parent) markDir(loc.parent);
+  return next;
+}
+
+/** Node becomes the last child of its immediate preceding sibling. */
+export function indentItemOp(tree: Tree, id: string): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc || loc.index === 0) return tree; // nothing to indent under
+  const [moved] = loc.siblings.splice(loc.index, 1);
+  const newParent = loc.siblings[loc.index - 1];
+  newParent.children.push(moved);
+  markDir(newParent);
+  return next;
+}
+
+/** Node becomes a sibling of its parent, inserted directly after it (subtree carried). */
+export function outdentItemOp(tree: Tree, id: string): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc || !loc.parent) return tree; // roots can't outdent
+  const grand = locate(next.roots, loc.parent.id);
+  if (!grand) return tree;
+  const [moved] = loc.siblings.splice(loc.index, 1);
+  grand.siblings.splice(grand.index + 1, 0, moved);
+  markDir(loc.parent);
+  return next;
+}
+
+export function moveItemUpOp(tree: Tree, id: string): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc || loc.index === 0) return tree;
+  [loc.siblings[loc.index - 1], loc.siblings[loc.index]] = [
+    loc.siblings[loc.index],
+    loc.siblings[loc.index - 1],
+  ];
+  return next;
+}
+
+export function moveItemDownOp(tree: Tree, id: string): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc || loc.index >= loc.siblings.length - 1) return tree;
+  [loc.siblings[loc.index], loc.siblings[loc.index + 1]] = [
+    loc.siblings[loc.index + 1],
+    loc.siblings[loc.index],
+  ];
+  return next;
+}
+
+/** Toggle the trailing-slash directory marker on a node's label. */
+export function toggleDirOp(tree: Tree, id: string): Tree {
+  const next = cloneTree(tree);
+  const loc = locate(next.roots, id);
+  if (!loc) return tree;
+  loc.node.label = loc.node.label.endsWith('/')
+    ? loc.node.label.slice(0, -1)
+    : `${loc.node.label}/`;
+  markDir(loc.node);
+  return next;
+}
+
+function freshLabel(tree: Tree, isDir?: boolean): string {
+  const labels = new Set<string>();
+  const walk = (ns: TreeNode[]): void => ns.forEach((n) => (labels.add(n.label), walk(n.children)));
+  walk(tree.roots);
+  const base = isDir ? 'folder' : 'item';
+  let i = 1;
+  while (labels.has(`${base}${i}`) || labels.has(`${base}${i}/`)) i++;
+  return `${base}${i}`;
+}

package/src/treeview/treePaste.ts

@@ -0,0 +1,13 @@
+/**
+ * Paste gate for bare (unfenced) ASCII tree art. `├──`/`└──` file-tree lines
+ * would otherwise route through the markdown converter and mangle; when this
+ * matches, the paste handler drops the text verbatim into a fresh code block
+ * that the TreeViewExtension picks up as an interactive outline.
+ */
+
+import { detectTree } from '@bendyline/squisq/doc';
+
+export function shouldPasteAsTreeFence(text: string): boolean {
+  if (!text || text.includes('```')) return false;
+  return detectTree(text).isTree;
+}

package/src/treeview/treeViewCommands.ts

@@ -0,0 +1,94 @@
+/**
+ * Write direction of the tree loop: outline command → fence rewrite.
+ *
+ * parse → op → render → verify-reparse → single-transaction fence replace
+ * (one undo step). Reuses the generic `replaceAsciiFenceText` (it only
+ * touches codeBlock text, attributes untouched).
+ */
+
+import type { Editor } from '@tiptap/react';
+import { parseTree, renderTree, type Tree } from '@bendyline/squisq/doc';
+import { replaceAsciiFenceText } from '../asciiDiagram/asciiDiagramCommands';
+import { findTreeBlockPos, parseTreeForNode } from './TreeViewExtension';
+import {
+  addItemOp,
+  indentItemOp,
+  moveItemDownOp,
+  moveItemUpOp,
+  outdentItemOp,
+  removeItemOp,
+  renameItemOp,
+  toggleDirOp,
+} from './treeOps';
+
+export type TreeCommand =
+  | {
+      kind: 'addItem';
+      targetId: string;
+      position: 'child' | 'siblingAfter';
+      label?: string;
+      isDir?: boolean;
+    }
+  | { kind: 'renameItem'; id: string; label: string }
+  | { kind: 'indentItem'; id: string }
+  | { kind: 'outdentItem'; id: string }
+  | { kind: 'moveItemUp'; id: string }
+  | { kind: 'moveItemDown'; id: string }
+  | { kind: 'removeItem'; id: string }
+  | { kind: 'toggleDir'; id: string };
+
+/** Re-export so the widget can rewrite raw fence text without a second copy. */
+export { replaceAsciiFenceText as replaceTreeFenceText } from '../asciiDiagram/asciiDiagramCommands';
+
+function countNodes(nodes: readonly Tree['roots'][number][]): number {
+  let n = 0;
+  for (const node of nodes) n += 1 + countNodes(node.children);
+  return n;
+}
+
+function applyOp(editor: Editor, blockId: string, op: (t: Tree) => Tree): boolean {
+  const pos = findTreeBlockPos(editor, blockId);
+  if (pos === null) return false;
+  const node = editor.state.doc.nodeAt(pos);
+  if (!node || node.type.name !== 'codeBlock') return false;
+  const tree = parseTreeForNode(node);
+  if (!tree) return false;
+
+  const next = op(tree);
+  if (next === tree) return false;
+  const rendered = renderTree(next);
+
+  // Verify before committing: the rendered art must re-parse to the same
+  // node count, or we'd write a tree the outline can't read back.
+  if (countNodes(parseTree(rendered).roots) !== countNodes(next.roots)) return false;
+
+  // Promote the fence language to the explicit `tree` tag so this block's
+  // identity survives a later flatten → markdown → re-import round-trip.
+  return replaceAsciiFenceText(editor, pos, rendered, 'tree');
+}
+
+export function applyTreeCommand(editor: Editor, blockId: string, cmd: TreeCommand): boolean {
+  switch (cmd.kind) {
+    case 'addItem':
+      return applyOp(editor, blockId, (t) =>
+        addItemOp(t, cmd.targetId, cmd.position, cmd.label, cmd.isDir),
+      );
+    case 'renameItem':
+      return applyOp(editor, blockId, (t) => renameItemOp(t, cmd.id, cmd.label));
+    case 'indentItem':
+      return applyOp(editor, blockId, (t) => indentItemOp(t, cmd.id));
+    case 'outdentItem':
+      return applyOp(editor, blockId, (t) => outdentItemOp(t, cmd.id));
+    case 'moveItemUp':
+      return applyOp(editor, blockId, (t) => moveItemUpOp(t, cmd.id));
+    case 'moveItemDown':
+      return applyOp(editor, blockId, (t) => moveItemDownOp(t, cmd.id));
+    case 'removeItem':
+      return applyOp(editor, blockId, (t) => removeItemOp(t, cmd.id));
+    case 'toggleDir':
+      return applyOp(editor, blockId, (t) => toggleDirOp(t, cmd.id));
+  }
+  const _exhaustive: never = cmd;
+  void _exhaustive;
+  return false;
+}

package/src/treeview/treeViewData.ts

@@ -0,0 +1,41 @@
+/**
+ * Read direction of the tree loop: fence text → outline view.
+ *
+ * `useTreeViewData` re-derives on every editor transaction; parsing is
+ * memoized per PMNode by the extension's WeakMap caches, so untouched
+ * fences cost nothing.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import type { Editor } from '@tiptap/react';
+import type { Tree } from '@bendyline/squisq/doc';
+import { findTreeBlockPos, parseTreeForNode } from './TreeViewExtension';
+
+export interface TreeViewData {
+  tree: Tree;
+  text: string;
+  warnings: string[];
+}
+
+/** Live view of one registered tree block; null when it no longer parses. */
+export function useTreeViewData(editor: Editor, blockId: string): TreeViewData | 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 = findTreeBlockPos(editor, blockId);
+    if (pos === null) return null;
+    const node = editor.state.doc.nodeAt(pos);
+    if (!node || node.type.name !== 'codeBlock') return null;
+    const tree = parseTreeForNode(node);
+    if (!tree) return null;
+    return { tree, text: node.textContent, warnings: tree.warnings };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, blockId, version]);
+}