@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/treeview/TreeOutlineWidget.tsx

@@ -0,0 +1,390 @@
+/**
+ * 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 { type DragEvent as ReactDragEvent, useCallback, useRef, 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';
+import type { TreeDropPosition } from './treeOps';
+
+interface TreeOutlineWidgetProps {
+  editor: Editor;
+  blockId: string;
+  fallbackPos: number;
+  host?: HTMLElement | null;
+}
+
+interface TreeDropTarget {
+  id: string;
+  position: TreeDropPosition;
+}
+
+const TREE_DRAG_MIME = 'application/x-squisq-tree-node';
+
+function findNode(nodes: readonly TreeNode[], id: string): TreeNode | null {
+  for (const node of nodes) {
+    if (node.id === id) return node;
+    const child = findNode(node.children, id);
+    if (child) return child;
+  }
+  return null;
+}
+
+function nodeContains(node: TreeNode, id: string): boolean {
+  return node.id === id || node.children.some((child) => nodeContains(child, id));
+}
+
+function canDropNode(nodes: readonly TreeNode[], sourceId: string, targetId: string): boolean {
+  const source = findNode(nodes, sourceId);
+  return source != null && !nodeContains(source, targetId);
+}
+
+function dropPositionForPointer(event: ReactDragEvent<HTMLElement>): TreeDropPosition {
+  const rect = event.currentTarget.getBoundingClientRect();
+  if (rect.height <= 0) return 'child';
+  const ratio = (event.clientY - rect.top) / rect.height;
+  if (ratio < 0.3) return 'before';
+  if (ratio > 0.7) return 'after';
+  return 'child';
+}
+
+export function TreeOutlineWidget({ editor, blockId }: TreeOutlineWidgetProps) {
+  const view = useTreeViewData(editor, blockId);
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(() => new Set());
+  const activeDragRef = useRef<string | null>(null);
+  const [draggedId, setDraggedId] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<TreeDropTarget | null>(null);
+
+  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;
+    });
+  }, []);
+
+  const clearDragState = useCallback(() => {
+    activeDragRef.current = null;
+    setDraggedId(null);
+    setDropTarget(null);
+  }, []);
+
+  const handleDragStart = useCallback((event: ReactDragEvent<HTMLElement>, id: string) => {
+    event.stopPropagation();
+    activeDragRef.current = id;
+    setDraggedId(id);
+    setDropTarget(null);
+    event.dataTransfer.effectAllowed = 'move';
+    // Firefox requires a text payload before it starts a native drag.
+    event.dataTransfer.setData(TREE_DRAG_MIME, id);
+    event.dataTransfer.setData('text/plain', id);
+  }, []);
+
+  const handleDragOver = useCallback(
+    (event: ReactDragEvent<HTMLElement>, targetId: string) => {
+      const sourceId = activeDragRef.current;
+      if (!sourceId) return;
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (!view || !canDropNode(view.tree.roots, sourceId, targetId)) {
+        event.dataTransfer.dropEffect = 'none';
+        setDropTarget(null);
+        return;
+      }
+
+      const position = dropPositionForPointer(event);
+      event.dataTransfer.dropEffect = 'move';
+      setDropTarget((current) =>
+        current?.id === targetId && current.position === position
+          ? current
+          : { id: targetId, position },
+      );
+    },
+    [view],
+  );
+
+  const handleDrop = useCallback(
+    (event: ReactDragEvent<HTMLElement>, targetId: string) => {
+      const sourceId = activeDragRef.current;
+      if (!sourceId) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const position = dropPositionForPointer(event);
+      const canMove = view && canDropNode(view.tree.roots, sourceId, targetId);
+
+      clearDragState();
+      if (!canMove) return;
+      const moved = dispatch({ kind: 'moveItem', id: sourceId, targetId, position });
+      if (moved && position === 'child') {
+        // Make the result visible when a node is dropped into a collapsed row.
+        setCollapsed((current) => {
+          if (!current.has(targetId)) return current;
+          const next = new Set(current);
+          next.delete(targetId);
+          return next;
+        });
+      }
+    },
+    [clearDragState, dispatch, view],
+  );
+
+  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}
+            draggedId={draggedId}
+            dropTarget={dropTarget}
+            toggleCollapse={toggleCollapse}
+            dispatch={dispatch}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+            onDragEnd={clearDragState}
+          />
+        ))}
+      </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,
+  draggedId,
+  dropTarget,
+  toggleCollapse,
+  dispatch,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+}: {
+  node: TreeNode;
+  depth: number;
+  collapsed: ReadonlySet<string>;
+  draggedId: string | null;
+  dropTarget: TreeDropTarget | null;
+  toggleCollapse: (id: string) => void;
+  dispatch: (cmd: TreeCommand) => boolean;
+  onDragStart: (event: ReactDragEvent<HTMLElement>, id: string) => void;
+  onDragOver: (event: ReactDragEvent<HTMLElement>, id: string) => void;
+  onDrop: (event: ReactDragEvent<HTMLElement>, id: string) => void;
+  onDragEnd: () => void;
+}) {
+  const hasChildren = node.children.length > 0;
+  const isCollapsed = collapsed.has(node.id);
+  const isDir = node.isDir || hasChildren;
+  const [draft, setDraft] = useState(node.label);
+  const dropPosition = dropTarget?.id === node.id ? dropTarget.position : null;
+  const itemClassName = [
+    'squisq-tree-item',
+    draggedId === node.id ? 'squisq-tree-item--dragging' : '',
+    dropPosition ? `squisq-tree-item--drop-${dropPosition}` : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const commit = () => {
+    if (draft !== node.label && draft.trim().length > 0) {
+      dispatch({ kind: 'renameItem', id: node.id, label: draft });
+    }
+  };
+
+  return (
+    <li className={itemClassName} role="treeitem" style={{ paddingLeft: `${depth * 18}px` }}>
+      <div
+        className="squisq-tree-row"
+        onDragOver={(event) => onDragOver(event, node.id)}
+        onDrop={(event) => onDrop(event, node.id)}
+      >
+        {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">
+          <span
+            className="squisq-tree-drag-handle"
+            draggable
+            aria-hidden="true"
+            title={`Drag ${node.label} to move`}
+            onDragStart={(event) => onDragStart(event, node.id)}
+            onDragEnd={onDragEnd}
+          >
+            <Icon icon="fa-solid fa-grip-vertical" />
+          </span>
+          <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}
+              draggedId={draggedId}
+              dropTarget={dropTarget}
+              toggleCollapse={toggleCollapse}
+              dispatch={dispatch}
+              onDragStart={onDragStart}
+              onDragOver={onDragOver}
+              onDrop={onDrop}
+              onDragEnd={onDragEnd}
+            />
+          ))}
+        </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;