@bendyline/squisq-editor-react 2.0.1 → 2.2.0

package/src/treeview/TreeViewExtension.ts

@@ -1,250 +0,0 @@
-/**
- * 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__/TreeOutlineWidget.test.tsx

@@ -1,156 +0,0 @@
-import { Editor } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
-import { cleanup, createEvent, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
-import { parseTree } from '@bendyline/squisq/doc';
-import { markdownToTiptap } from '../../tiptapBridge';
-import { HeadingWithTemplate } from '../../TemplateAnnotation';
-import { TreeOutlineWidget } from '../TreeOutlineWidget';
-import { TREEVIEW_KEY, TreeViewExtension } from '../TreeViewExtension';
-
-const ART = ['src/', '├── index.ts', '├── utils/', '│   └── math.ts', '└── config.ts'].join('\n');
-
-const editors: Editor[] = [];
-
-beforeAll(() => {
-  if (typeof globalThis.ResizeObserver !== 'undefined') return;
-  class ResizeObserverStub {
-    observe(): void {}
-    unobserve(): void {}
-    disconnect(): void {}
-  }
-  globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver;
-});
-
-afterEach(() => {
-  cleanup();
-  for (const editor of editors) editor.destroy();
-  editors.length = 0;
-});
-
-function makeEditor(): 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(`\`\`\`tree\n${ART}\n\`\`\`\n`),
-  });
-  editors.push(editor);
-  return editor;
-}
-
-function blockIdOf(editor: Editor): string {
-  const entries = TREEVIEW_KEY.getState(editor.state)?.entries ?? [];
-  expect(entries).toHaveLength(1);
-  return entries[0].id;
-}
-
-function treeOf(editor: Editor) {
-  let text = '';
-  editor.state.doc.descendants((node) => {
-    if (node.type.name !== 'codeBlock') return true;
-    text = node.textContent;
-    return false;
-  });
-  return parseTree(text);
-}
-
-function renderWidget(): Editor {
-  const editor = makeEditor();
-  render(<TreeOutlineWidget editor={editor} blockId={blockIdOf(editor)} fallbackPos={0} />);
-  return editor;
-}
-
-function makeDataTransfer(): DataTransfer {
-  const values = new Map<string, string>();
-  return {
-    effectAllowed: 'uninitialized',
-    dropEffect: 'none',
-    setData: vi.fn((type: string, value: string) => values.set(type, value)),
-    getData: vi.fn((type: string) => values.get(type) ?? ''),
-    get types() {
-      return [...values.keys()];
-    },
-  } as unknown as DataTransfer;
-}
-
-function rowFor(label: string): HTMLElement {
-  const input = screen.getByDisplayValue(label);
-  const row = input.closest<HTMLElement>('.squisq-tree-row');
-  expect(row).not.toBeNull();
-  return row as HTMLElement;
-}
-
-function setRowRect(row: HTMLElement): void {
-  vi.spyOn(row, 'getBoundingClientRect').mockReturnValue({
-    x: 0,
-    y: 0,
-    top: 0,
-    right: 300,
-    bottom: 30,
-    left: 0,
-    width: 300,
-    height: 30,
-    toJSON: () => ({}),
-  });
-}
-
-function fireDragAt(
-  type: 'dragOver' | 'drop',
-  row: HTMLElement,
-  transfer: DataTransfer,
-  clientY: number,
-): void {
-  const event = createEvent[type](row, { dataTransfer: transfer });
-  Object.defineProperty(event, 'clientY', { value: clientY });
-  fireEvent(row, event);
-}
-
-describe('TreeOutlineWidget drag and drop', () => {
-  it('drops before a row to reorder siblings', async () => {
-    const editor = renderWidget();
-    const indexRow = rowFor('index.ts');
-    const transfer = makeDataTransfer();
-
-    fireEvent.dragStart(screen.getByTitle('Drag config.ts to move'), { dataTransfer: transfer });
-    setRowRect(indexRow);
-    expect(transfer.effectAllowed).toBe('move');
-    fireDragAt('dragOver', indexRow, transfer, 1);
-    expect(indexRow.closest('.squisq-tree-item')?.classList).toContain(
-      'squisq-tree-item--drop-before',
-    );
-    fireDragAt('drop', indexRow, transfer, 1);
-
-    await waitFor(() =>
-      expect(treeOf(editor).roots[0].children.map((node) => node.label)).toEqual([
-        'config.ts',
-        'index.ts',
-        'utils/',
-      ]),
-    );
-  });
-
-  it('drops onto the middle of a row to indent as its last child', async () => {
-    const editor = renderWidget();
-    const utilsRow = rowFor('utils/');
-    const transfer = makeDataTransfer();
-
-    fireEvent.dragStart(screen.getByTitle('Drag config.ts to move'), { dataTransfer: transfer });
-    setRowRect(utilsRow);
-    fireDragAt('dragOver', utilsRow, transfer, 15);
-    expect(utilsRow.closest('.squisq-tree-item')?.classList).toContain(
-      'squisq-tree-item--drop-child',
-    );
-    fireDragAt('drop', utilsRow, transfer, 15);
-
-    await waitFor(() => {
-      const utils = treeOf(editor).roots[0].children.find((node) => node.label === 'utils/');
-      expect(utils?.children.map((node) => node.label)).toEqual(['math.ts', 'config.ts']);
-    });
-  });
-});

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

@@ -1,122 +0,0 @@
-/**
- * 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();
-  });
-});