@bendyline/squisq-editor-react 2.0.0 → 2.1.0

package/src/timeline/timelineCommands.ts

@@ -19,13 +19,26 @@ import {
 import { replaceAsciiFenceText } from '../asciiDiagram/asciiDiagramCommands';
 import { findTimelineBlockPos, parseTimelineForNode } from './TimelineViewExtension';
 import {
+  addTimelineTrackOp,
   addTimelineEventOp,
+  removeTimelineTrackOp,
   removeTimelineEventOp,
+  sanitizeTimelineText,
+  updateTimelineTrackOp,
   updateTimelineEventOp,
   type TimelineEventPatch,
 } from './timelineOps';
 
 export type TimelineCommand =
+  | {
+      kind: 'addTrack';
+      id?: string;
+      label?: string;
+      eventId?: string;
+      eventLabel?: string;
+    }
+  | { kind: 'updateTrack'; trackId: string; label: string }
+  | { kind: 'removeTrack'; trackId: string }
   | {
       kind: 'addEvent';
       trackId: string;
@@ -46,6 +59,8 @@ export interface TimelineCommandResult {
   applied: boolean;
   /** Present after add so the widget can select/focus the new marker. */
   eventId?: string;
+  /** Present after adding a track. */
+  trackId?: string;
   /** Why an otherwise valid semantic edit was deliberately blocked. */
   reason?: 'read-only' | 'unsafe-source';
 }
@@ -53,6 +68,7 @@ export interface TimelineCommandResult {
 interface OpResult {
   timeline: AsciiTimeline;
   eventId?: string;
+  trackId?: string;
 }
 
 const NOT_APPLIED: TimelineCommandResult = { applied: false };
@@ -67,6 +83,10 @@ function hasEvent(timeline: AsciiTimeline, eventId: string): boolean {
   return timeline.tracks.some((track) => track.events.some((event) => event.id === eventId));
 }
 
+function hasTrack(timeline: AsciiTimeline, trackId: string): boolean {
+  return timeline.tracks.some((track) => track.id === trackId);
+}
+
 /**
  * Layout rows and source dimensions are deliberately absent: canonical
  * rendering is allowed to compact hand-authored art. Everything the editor
@@ -276,6 +296,8 @@ function verifyRenderedTimeline(next: AsciiTimeline, rendered: string): AsciiTim
   const ids = new Set(
     verification.tracks.flatMap((track) => track.events.map((event) => event.id)),
   );
+  const trackIds = new Set(verification.tracks.map((track) => track.id));
+  if (trackIds.size !== verification.tracks.length) return null;
   if (ids.size !== countEvents(verification)) return null;
   if (verification.links.some((link) => !ids.has(link.source) || !ids.has(link.target))) {
     return null;
@@ -306,6 +328,7 @@ function applyOp(
   if (
     !verification ||
     (result.eventId && !hasEvent(verification, result.eventId)) ||
+    (result.trackId && !hasTrack(verification, result.trackId)) ||
     (verifyResult && !verifyResult(verification))
   ) {
     return NOT_APPLIED;
@@ -317,6 +340,7 @@ function applyOp(
   return {
     applied: true,
     ...(result.eventId ? { eventId: result.eventId } : {}),
+    ...(result.trackId ? { trackId: result.trackId } : {}),
   };
 }
 
@@ -331,6 +355,36 @@ export function applyTimelineCommand(
   if (!editor.isEditable) return READ_ONLY;
 
   switch (command.kind) {
+    case 'addTrack':
+      return applyOp(editor, blockId, (timeline) =>
+        addTimelineTrackOp(timeline, {
+          id: command.id,
+          label: command.label,
+          eventId: command.eventId,
+          eventLabel: command.eventLabel,
+        }),
+      );
+    case 'updateTrack': {
+      const expectedLabel = sanitizeTimelineText(command.label);
+      return applyOp(
+        editor,
+        blockId,
+        (timeline) => ({
+          timeline: updateTimelineTrackOp(timeline, command.trackId, command.label),
+        }),
+        (timeline) =>
+          timeline.tracks.some(
+            (track) => track.id === command.trackId && track.label === expectedLabel,
+          ),
+      );
+    }
+    case 'removeTrack':
+      return applyOp(
+        editor,
+        blockId,
+        (timeline) => ({ timeline: removeTimelineTrackOp(timeline, command.trackId) }),
+        (timeline) => !hasTrack(timeline, command.trackId),
+      );
     case 'addEvent':
       return applyOp(editor, blockId, (timeline) => {
         const result = addTimelineEventOp(timeline, command.trackId, command.position, {

package/src/timeline/timelineOps.ts

@@ -12,6 +12,7 @@ import type {
   AsciiTimelineEvent,
   AsciiTimelineMarker,
   AsciiTimelineSide,
+  AsciiTimelineTrack,
 } from '@bendyline/squisq/doc';
 
 const STRUCTURAL_MARKERS = /[●○◉◆◇•]+/gu;
@@ -47,6 +48,19 @@ export interface AddTimelineEventResult {
   eventId: string;
 }
 
+export interface AddTimelineTrackOptions {
+  id?: string;
+  label?: string;
+  eventId?: string;
+  eventLabel?: string;
+}
+
+export interface AddTimelineTrackResult {
+  timeline: AsciiTimeline;
+  trackId: string;
+  eventId: string;
+}
+
 /**
  * Normalize editable one-line prose exactly as the canonical core renderer
  * does. This prevents the verified command path from accepting a value that
@@ -70,13 +84,103 @@ export function sanitizeTimelineText(value: string): string {
 /** Return a globally unique, renderer-safe event id. */
 export function nextTimelineEventId(timeline: AsciiTimeline, base = 'event'): string {
   const used = new Set(timeline.tracks.flatMap((track) => track.events.map((event) => event.id)));
-  const safeBase = safeId(base) || 'event';
+  const safeBase = safeId(base, 'event');
   if (!used.has(safeBase)) return safeBase;
   let suffix = 2;
   while (used.has(`${safeBase}-${suffix}`)) suffix++;
   return `${safeBase}-${suffix}`;
 }
 
+/** Return a renderer-safe id that is unique among timeline tracks. */
+export function nextTimelineTrackId(timeline: AsciiTimeline, base = 'track'): string {
+  const used = new Set(timeline.tracks.map((track) => track.id));
+  const safeBase = safeId(base, 'track');
+  if (!used.has(safeBase)) return safeBase;
+  let suffix = 2;
+  while (used.has(`${safeBase}-${suffix}`)) suffix++;
+  return `${safeBase}-${suffix}`;
+}
+
+/**
+ * Add a representable track with one starter point. Empty tracks are not part
+ * of the authored ASCII grammar, so line creation and its first point are one
+ * atomic operation/undo step.
+ */
+export function addTimelineTrackOp(
+  timeline: AsciiTimeline,
+  options: AddTimelineTrackOptions = {},
+): AddTimelineTrackResult {
+  const label = sanitizeTimelineText(options.label ?? '') || 'New line';
+  const eventLabel = sanitizeTimelineText(options.eventLabel ?? '') || 'New event';
+  const trackId = nextTimelineTrackId(timeline, options.id ?? label);
+  const eventId = nextTimelineEventId(timeline, options.eventId ?? eventLabel);
+  const { start, span } = globalBounds(timeline);
+  const column = Math.round((start + span / 2) * COORDINATE_PRECISION) / COORDINATE_PRECISION;
+  const row = timeline.tracks.reduce((maximum, track) => Math.max(maximum, track.row), -1) + 1;
+  const track: AsciiTimelineTrack = {
+    id: trackId,
+    label,
+    row,
+    startColumn: start,
+    endColumn: start + span,
+    events: [
+      {
+        id: eventId,
+        label: eventLabel,
+        column,
+        side: 'above',
+        marker: 'filled',
+      },
+    ],
+  };
+
+  return {
+    timeline: {
+      ...timeline,
+      tracks: [...timeline.tracks, track],
+      width: Math.max(timeline.width, Math.ceil(track.endColumn) + 1),
+      height: Math.max(timeline.height, row + 1),
+    },
+    trackId,
+    eventId,
+  };
+}
+
+/** Rename a track without changing its stable id, points, or branches. */
+export function updateTimelineTrackOp(
+  timeline: AsciiTimeline,
+  trackId: string,
+  label: string,
+): AsciiTimeline {
+  const track = timeline.tracks.find((candidate) => candidate.id === trackId);
+  const nextLabel = sanitizeTimelineText(label);
+  if (!track || !nextLabel || track.label === nextLabel) return timeline;
+  return {
+    ...timeline,
+    tracks: timeline.tracks.map((candidate) =>
+      candidate.id === trackId ? { ...candidate, label: nextLabel } : candidate,
+    ),
+  };
+}
+
+/**
+ * Remove a whole track, including branches incident to any of its points.
+ * Keep the last track so the source fence remains representable and mounted.
+ */
+export function removeTimelineTrackOp(timeline: AsciiTimeline, trackId: string): AsciiTimeline {
+  if (timeline.tracks.length <= 1) return timeline;
+  const track = timeline.tracks.find((candidate) => candidate.id === trackId);
+  if (!track) return timeline;
+  const removedEventIds = new Set(track.events.map((event) => event.id));
+  return {
+    ...timeline,
+    tracks: timeline.tracks.filter((candidate) => candidate.id !== trackId),
+    links: timeline.links.filter(
+      (link) => !removedEventIds.has(link.source) && !removedEventIds.has(link.target),
+    ),
+  };
+}
+
 /**
  * Add a visible point to `trackId` at a normalized global rail position.
  * Returns the stable id so the canvas can select/focus the new point after
@@ -243,12 +347,12 @@ function columnAtPosition(timeline: AsciiTimeline, position: number): number {
   return Math.round((start + clamped * span) * COORDINATE_PRECISION) / COORDINATE_PRECISION;
 }
 
-function safeId(value: string): string {
+function safeId(value: string, fallback: string): string {
   return (
     sanitizeTimelineText(value)
       .toLowerCase()
       .replace(/[^a-z0-9_.~-]+/g, '-')
-      .replace(/^-+|-+$/g, '') || 'event'
+      .replace(/^-+|-+$/g, '') || fallback
   );
 }
 

package/src/tiptapBridge.ts

@@ -282,7 +282,14 @@ export function markdownToTiptap(markdown: string): string {
     // Blockquote
     if (line.startsWith('> ')) {
       flushList();
-      pushBlock(`<blockquote><p>${inlineToHtml(line.slice(2))}</p></blockquote>`);
+      const quoteLines = [line.slice(2)];
+      while (i + 1 < lines.length && lines[i + 1].startsWith('> ')) {
+        i++;
+        quoteLines.push(lines[i].slice(2));
+      }
+      pushBlock(
+        `<blockquote>${quoteLines.map((quoteLine) => `<p>${inlineToHtml(quoteLine)}</p>`).join('')}</blockquote>`,
+      );
       continue;
     }
 
@@ -470,10 +477,21 @@ export function tiptapToMarkdown(html: string): string {
     // Blockquote
     const bqMatch = remaining.match(/^<blockquote>(.*?)<\/blockquote>/s);
     if (bqMatch) {
-      const inner = htmlToInline(bqMatch[1].replace(/<\/?p>/g, ''));
-      lines.push('> ' + inner);
-      lines.push('');
-      remaining = remaining.slice(bqMatch[0].length);
+      const paragraphs = bqMatch[1]
+        .split(/<\/p>\s*<p[^>]*>/i)
+        .map((paragraph) => paragraph.replace(/^<p[^>]*>/i, '').replace(/<\/p>\s*$/i, ''));
+      for (const paragraph of paragraphs) {
+        for (const quoteLine of htmlToInline(paragraph).split('\n')) {
+          lines.push('> ' + quoteLine);
+        }
+      }
+      const next = remaining.slice(bqMatch[0].length);
+      // Older bridge output and direct Tiptap edits can still leave adjacent
+      // blockquote nodes. Keep those nodes adjacent when serializing;
+      // inserting the normal block separator here turns one quote into two
+      // paragraphs every time the document passes through WYSIWYG mode.
+      if (!/^\s*<blockquote>/.test(next)) lines.push('');
+      remaining = next;
       continue;
     }
 

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