@bendyline/squisq-editor-react 2.0.0 → 2.0.1

package/src/treeview/TreeOutlineWidget.tsx

@@ -11,12 +11,13 @@
  * deletes it.
  */
 
-import { useCallback, useState } from 'react';
+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;
@@ -25,9 +26,46 @@ interface TreeOutlineWidgetProps {
   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),
@@ -42,6 +80,72 @@ export function TreeOutlineWidget({ editor, blockId }: TreeOutlineWidgetProps) {
     });
   }, []);
 
+  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;
@@ -89,8 +193,14 @@ export function TreeOutlineWidget({ editor, blockId }: TreeOutlineWidgetProps) {
             node={node}
             depth={0}
             collapsed={collapsed}
+            draggedId={draggedId}
+            dropTarget={dropTarget}
             toggleCollapse={toggleCollapse}
             dispatch={dispatch}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+            onDragEnd={clearDragState}
           />
         ))}
       </ul>
@@ -108,19 +218,39 @@ 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) {
@@ -129,8 +259,12 @@ function TreeRowView({
   };
 
   return (
-    <li role="treeitem" style={{ paddingLeft: `${depth * 18}px` }}>
-      <div className="squisq-tree-row">
+    <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"
@@ -174,6 +308,16 @@ function TreeRowView({
           }}
         />
         <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"
@@ -227,8 +371,14 @@ function TreeRowView({
               node={child}
               depth={depth + 1}
               collapsed={collapsed}
+              draggedId={draggedId}
+              dropTarget={dropTarget}
               toggleCollapse={toggleCollapse}
               dispatch={dispatch}
+              onDragStart={onDragStart}
+              onDragOver={onDragOver}
+              onDrop={onDrop}
+              onDragEnd={onDragEnd}
             />
           ))}
         </ul>

package/src/treeview/__tests__/TreeOutlineWidget.test.tsx

@@ -0,0 +1,156 @@
+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__/treeOps.test.ts

@@ -3,6 +3,7 @@ import { parseTree, renderTree, type Tree, type TreeNode } from '@bendyline/squi
 import {
   addItemOp,
   indentItemOp,
+  moveItemOp,
   moveItemDownOp,
   moveItemUpOp,
   outdentItemOp,
@@ -90,6 +91,56 @@ describe('treeOps', () => {
     expect(outdentItemOp(t, 'root')).toBe(t);
   });
 
+  it('moveItemOp reorders siblings before or after a target', () => {
+    expect(flat(moveItemOp(tree(BASE), 'c', 'a', 'before'))).toEqual([
+      '0:root/',
+      '1:c',
+      '1:a',
+      '1:b/',
+      '2:b1',
+    ]);
+    expect(flat(moveItemOp(tree(BASE), 'b', 'c', 'after'))).toEqual([
+      '0:root/',
+      '1:a',
+      '1:c',
+      '1:b/',
+      '2:b1',
+    ]);
+  });
+
+  it('moveItemOp reparents nodes and carries their subtrees', () => {
+    expect(flat(moveItemOp(tree(BASE), 'c', 'a', 'child'))).toEqual([
+      '0:root/',
+      '1:a',
+      '2:c',
+      '1:b/',
+      '2:b1',
+    ]);
+    expect(flat(moveItemOp(tree(BASE), 'b', 'a', 'child'))).toEqual([
+      '0:root/',
+      '1:a',
+      '2:b/',
+      '3:b1',
+      '1:c',
+    ]);
+  });
+
+  it('moveItemOp can outdent relative to a shallower target', () => {
+    expect(flat(moveItemOp(tree(BASE), 'b1', 'b', 'before'))).toEqual([
+      '0:root/',
+      '1:a',
+      '1:b1',
+      '1:b/',
+      '1:c',
+    ]);
+  });
+
+  it('moveItemOp rejects self-drops and drops into the source subtree', () => {
+    const t = tree(BASE);
+    expect(moveItemOp(t, 'b', 'b', 'child')).toBe(t);
+    expect(moveItemOp(t, 'b', 'b1', 'child')).toBe(t);
+  });
+
   it('moveItemUp / moveItemDown reorder siblings within bounds', () => {
     expect(flat(moveItemDownOp(tree(BASE), 'a'))).toEqual([
       '0:root/',
@@ -115,6 +166,7 @@ describe('treeOps', () => {
       (t: Tree) => addItemOp(t, 'b', 'child', 'b2'),
       (t: Tree) => indentItemOp(t, 'c'),
       (t: Tree) => outdentItemOp(t, 'b1'),
+      (t: Tree) => moveItemOp(t, 'c', 'a', 'child'),
       (t: Tree) => moveItemDownOp(t, 'a'),
     ]) {
       const next = op(tree(BASE));

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

@@ -111,6 +111,22 @@ describe('applyTreeCommand', () => {
     expect(utils?.children.map((c) => c.label)).toContain('config.ts');
   });
 
+  it('moveItem reorders and reparents through one fence rewrite', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstId(editor);
+    expect(
+      applyTreeCommand(editor, id, {
+        kind: 'moveItem',
+        id: 'config-ts',
+        targetId: 'utils',
+        position: 'child',
+      }),
+    ).toBe(true);
+    const tree = parseTree(fenceOf(editor).text);
+    const utils = tree.roots[0].children.find((n) => n.label === 'utils/');
+    expect(utils?.children.map((child) => child.label)).toEqual(['math.ts', 'config.ts']);
+  });
+
   it('removeItem drops a node', () => {
     const editor = makeEditor('```\n' + ART + '\n```\n');
     const id = firstId(editor);

package/src/treeview/treeOps.ts

@@ -41,6 +41,8 @@ interface Loc {
   parent: TreeNode | null;
 }
 
+export type TreeDropPosition = 'before' | 'child' | 'after';
+
 /** 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++) {
@@ -55,6 +57,10 @@ function markDir(n: TreeNode): void {
   n.isDir = n.label.endsWith('/') || n.children.length > 0;
 }
 
+function containsNode(node: TreeNode, id: string): boolean {
+  return node.id === id || node.children.some((child) => containsNode(child, id));
+}
+
 export function renameItemOp(tree: Tree, id: string, label: string): Tree {
   const clean = sanitizeTreeLabel(label);
   const next = cloneTree(tree);
@@ -127,6 +133,59 @@ export function outdentItemOp(tree: Tree, id: string): Tree {
   return next;
 }
 
+/**
+ * Move a node and its complete subtree relative to any other node. Dropping
+ * before/after adopts the target's parent; dropping as a child appends to the
+ * target. A node can never be moved into its own subtree.
+ */
+export function moveItemOp(
+  tree: Tree,
+  id: string,
+  targetId: string,
+  position: TreeDropPosition,
+): Tree {
+  const currentSource = locate(tree.roots, id);
+  const currentTarget = locate(tree.roots, targetId);
+  if (
+    !currentSource ||
+    !currentTarget ||
+    id === targetId ||
+    containsNode(currentSource.node, targetId)
+  ) {
+    return tree;
+  }
+
+  // Avoid a fence rewrite when the drop describes the node's current slot.
+  if (currentSource.siblings === currentTarget.siblings) {
+    if (position === 'before' && currentSource.index === currentTarget.index - 1) return tree;
+    if (position === 'after' && currentSource.index === currentTarget.index + 1) return tree;
+  }
+  if (
+    position === 'child' &&
+    currentSource.parent?.id === currentTarget.node.id &&
+    currentSource.index === currentSource.siblings.length - 1
+  ) {
+    return tree;
+  }
+
+  const next = cloneTree(tree);
+  const source = locate(next.roots, id);
+  if (!source) return tree;
+  const [moved] = source.siblings.splice(source.index, 1);
+  if (source.parent) markDir(source.parent);
+
+  // Locate again after removal so same-sibling indices are current.
+  const target = locate(next.roots, targetId);
+  if (!target) return tree;
+  if (position === 'child') {
+    target.node.children.push(moved);
+    markDir(target.node);
+  } else {
+    target.siblings.splice(target.index + (position === 'after' ? 1 : 0), 0, moved);
+  }
+  return next;
+}
+
 export function moveItemUpOp(tree: Tree, id: string): Tree {
   const next = cloneTree(tree);
   const loc = locate(next.roots, id);

package/src/treeview/treeViewCommands.ts

@@ -13,12 +13,14 @@ import { findTreeBlockPos, parseTreeForNode } from './TreeViewExtension';
 import {
   addItemOp,
   indentItemOp,
+  moveItemOp,
   moveItemDownOp,
   moveItemUpOp,
   outdentItemOp,
   removeItemOp,
   renameItemOp,
   toggleDirOp,
+  type TreeDropPosition,
 } from './treeOps';
 
 export type TreeCommand =
@@ -32,6 +34,7 @@ export type TreeCommand =
   | { kind: 'renameItem'; id: string; label: string }
   | { kind: 'indentItem'; id: string }
   | { kind: 'outdentItem'; id: string }
+  | { kind: 'moveItem'; id: string; targetId: string; position: TreeDropPosition }
   | { kind: 'moveItemUp'; id: string }
   | { kind: 'moveItemDown'; id: string }
   | { kind: 'removeItem'; id: string }
@@ -79,6 +82,8 @@ export function applyTreeCommand(editor: Editor, blockId: string, cmd: TreeComma
       return applyOp(editor, blockId, (t) => indentItemOp(t, cmd.id));
     case 'outdentItem':
       return applyOp(editor, blockId, (t) => outdentItemOp(t, cmd.id));
+    case 'moveItem':
+      return applyOp(editor, blockId, (t) => moveItemOp(t, cmd.id, cmd.targetId, cmd.position));
     case 'moveItemUp':
       return applyOp(editor, blockId, (t) => moveItemUpOp(t, cmd.id));
     case 'moveItemDown':