@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/treeview/TreeOutlineWidget.tsx

@@ -0,0 +1,240 @@
+/**
+ * TreeOutlineWidget — the interactive outline editor mounted below a hidden
+ * ASCII tree fence. Reads the live tree via `useTreeViewData` and writes
+ * every structural edit back as regenerated tree art via `applyTreeCommand`
+ * (op → render → verify → single-transaction fence rewrite).
+ *
+ * Manage-items UX: a toolbar (add file / add folder), inline-editable
+ * labels, per-row controls (add child, indent/outdent, move up/down,
+ * folder⇄file, delete), and collapse chevrons (widget-local, not
+ * persisted). Enter in a label adds a sibling; Backspace on an empty label
+ * deletes it.
+ */
+
+import { useCallback, useState } from 'react';
+import type { Editor } from '@tiptap/react';
+import type { TreeNode } from '@bendyline/squisq/doc';
+import { Icon } from '../Icon';
+import { useTreeViewData } from './treeViewData';
+import { applyTreeCommand, type TreeCommand } from './treeViewCommands';
+
+interface TreeOutlineWidgetProps {
+  editor: Editor;
+  blockId: string;
+  fallbackPos: number;
+  host?: HTMLElement | null;
+}
+
+export function TreeOutlineWidget({ editor, blockId }: TreeOutlineWidgetProps) {
+  const view = useTreeViewData(editor, blockId);
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(() => new Set());
+
+  const dispatch = useCallback(
+    (cmd: TreeCommand) => applyTreeCommand(editor, blockId, cmd),
+    [editor, blockId],
+  );
+  const toggleCollapse = useCallback((id: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  if (!view) return null;
+  const roots = view.tree.roots;
+  const firstRootId = roots[0]?.id;
+
+  return (
+    <div className="squisq-tree-outline">
+      <div className="squisq-tree-toolbar">
+        <button
+          type="button"
+          className="squisq-tree-btn"
+          title="Add file"
+          disabled={!firstRootId}
+          onClick={() =>
+            firstRootId
+              ? dispatch({ kind: 'addItem', targetId: firstRootId, position: 'siblingAfter' })
+              : undefined
+          }
+        >
+          <Icon icon="fa-solid fa-plus" /> Item
+        </button>
+        <button
+          type="button"
+          className="squisq-tree-btn"
+          title="Add folder"
+          disabled={!firstRootId}
+          onClick={() =>
+            firstRootId
+              ? dispatch({
+                  kind: 'addItem',
+                  targetId: firstRootId,
+                  position: 'siblingAfter',
+                  isDir: true,
+                })
+              : undefined
+          }
+        >
+          <Icon icon="fa-solid fa-folder-plus" /> Folder
+        </button>
+      </div>
+
+      <ul className="squisq-tree-rows" role="tree">
+        {roots.map((node) => (
+          <TreeRowView
+            key={node.id}
+            node={node}
+            depth={0}
+            collapsed={collapsed}
+            toggleCollapse={toggleCollapse}
+            dispatch={dispatch}
+          />
+        ))}
+      </ul>
+
+      {view.warnings.length > 0 ? (
+        <div className="squisq-tree-warnings">
+          {view.warnings.length} parser note{view.warnings.length === 1 ? '' : 's'}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function TreeRowView({
+  node,
+  depth,
+  collapsed,
+  toggleCollapse,
+  dispatch,
+}: {
+  node: TreeNode;
+  depth: number;
+  collapsed: ReadonlySet<string>;
+  toggleCollapse: (id: string) => void;
+  dispatch: (cmd: TreeCommand) => boolean;
+}) {
+  const hasChildren = node.children.length > 0;
+  const isCollapsed = collapsed.has(node.id);
+  const isDir = node.isDir || hasChildren;
+  const [draft, setDraft] = useState(node.label);
+
+  const commit = () => {
+    if (draft !== node.label && draft.trim().length > 0) {
+      dispatch({ kind: 'renameItem', id: node.id, label: draft });
+    }
+  };
+
+  return (
+    <li role="treeitem" style={{ paddingLeft: `${depth * 18}px` }}>
+      <div className="squisq-tree-row">
+        {hasChildren ? (
+          <button
+            type="button"
+            className="squisq-tree-chevron"
+            aria-label={isCollapsed ? 'Expand' : 'Collapse'}
+            onClick={() => toggleCollapse(node.id)}
+          >
+            <Icon icon={`fa-solid ${isCollapsed ? 'fa-chevron-right' : 'fa-chevron-down'}`} />
+          </button>
+        ) : (
+          <span className="squisq-tree-chevron squisq-tree-chevron--empty" />
+        )}
+        <button
+          type="button"
+          className="squisq-tree-icon"
+          title={isDir ? 'Make a file' : 'Make a folder'}
+          onClick={() => dispatch({ kind: 'toggleDir', id: node.id })}
+        >
+          <Icon icon={`fa-solid ${isDir ? 'fa-folder' : 'fa-file'}`} />
+        </button>
+        <input
+          className="squisq-tree-label"
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              commit();
+              dispatch({ kind: 'addItem', targetId: node.id, position: 'siblingAfter' });
+            } else if (e.key === 'Backspace' && draft.length === 0) {
+              e.preventDefault();
+              dispatch({ kind: 'removeItem', id: node.id });
+            } else if (e.key === 'Tab') {
+              // Structural indent/outdent operate on the committed label's id;
+              // commit the draft first so no typing is lost.
+              e.preventDefault();
+              commit();
+              dispatch({ kind: e.shiftKey ? 'outdentItem' : 'indentItem', id: node.id });
+            }
+          }}
+        />
+        <span className="squisq-tree-controls">
+          <button
+            type="button"
+            title="Add child"
+            onClick={() => dispatch({ kind: 'addItem', targetId: node.id, position: 'child' })}
+          >
+            <Icon icon="fa-solid fa-plus" />
+          </button>
+          <button
+            type="button"
+            title="Outdent"
+            onClick={() => dispatch({ kind: 'outdentItem', id: node.id })}
+          >
+            <Icon icon="fa-solid fa-outdent" />
+          </button>
+          <button
+            type="button"
+            title="Indent"
+            onClick={() => dispatch({ kind: 'indentItem', id: node.id })}
+          >
+            <Icon icon="fa-solid fa-indent" />
+          </button>
+          <button
+            type="button"
+            title="Move up"
+            onClick={() => dispatch({ kind: 'moveItemUp', id: node.id })}
+          >
+            <Icon icon="fa-solid fa-arrow-up" />
+          </button>
+          <button
+            type="button"
+            title="Move down"
+            onClick={() => dispatch({ kind: 'moveItemDown', id: node.id })}
+          >
+            <Icon icon="fa-solid fa-arrow-down" />
+          </button>
+          <button
+            type="button"
+            title="Delete"
+            className="squisq-tree-delete"
+            onClick={() => dispatch({ kind: 'removeItem', id: node.id })}
+          >
+            <Icon icon="fa-solid fa-trash" />
+          </button>
+        </span>
+      </div>
+      {hasChildren && !isCollapsed ? (
+        <ul className="squisq-tree-rows" role="group">
+          {node.children.map((child) => (
+            <TreeRowView
+              key={child.id}
+              node={child}
+              depth={depth + 1}
+              collapsed={collapsed}
+              toggleCollapse={toggleCollapse}
+              dispatch={dispatch}
+            />
+          ))}
+        </ul>
+      ) : null}
+    </li>
+  );
+}
+
+export default TreeOutlineWidget;

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