@dxos/ui-editor 0.10.0 → 0.11.0

package/src/extensions/{outliner → structure/outliner}/commands.ts

@@ -2,27 +2,55 @@
 // Copyright 2025 DXOS.org
 //
 
-import { indentMore } from '@codemirror/commands';
 import { getIndentUnit } from '@codemirror/language';
-import { type ChangeSpec, EditorSelection, type Extension } from '@codemirror/state';
+import { type ChangeSpec, EditorSelection, type EditorState, type Extension } from '@codemirror/state';
 import { type Command, type EditorView, keymap } from '@codemirror/view';
 
-import { getSelection, selectAll, selectDown, selectNone, selectUp } from './selection';
-import { getRange, treeFacet } from './tree';
+import { escapeLinkLabel } from '../../language/markdown';
+import { blockSelectionField, setBlockSelection } from '../blocks';
+import { mergeRanges, selectAllItems, selectDown, selectNoneItems, selectUp } from './dnd';
+import { type Item, getRange, treeFacet } from './tree';
+
+//
+// Menu / action scope.
+//
+
+/**
+ * The items a menu action operates on: the block selection expanded to whole subtrees, or — with no
+ * selection — the caret's item. Menu commands (delete, toggle, ...) act over this scope so that a
+ * selected subtree is the unit of the action rather than a single line.
+ */
+export const getActionScope = (state: EditorState): Item[] => {
+  const tree = state.facet(treeFacet);
+  const anchors = state.field(blockSelectionField, false) ?? [];
+  const found =
+    anchors.length > 0 ? anchors.map((anchor) => tree.find(anchor)) : [tree.find(state.selection.main.from)];
+  return found.filter((item): item is Item => item != null);
+};
 
 //
 // Indentation comnmands.
 //
 
 export const indentItemMore: Command = (view: EditorView) => {
-  const pos = getSelection(view.state).from;
+  const pos = view.state.selection.main.from;
   const tree = view.state.facet(treeFacet);
   const current = tree.find(pos);
   if (current) {
     const previous = tree.prev(current);
     if (previous && current.level <= previous.level) {
-      // TODO(burdon): Indent descendants?
-      indentMore(view);
+      // Indent the current line and all descendants so the whole subtree moves with its parent.
+      // NOTE: The markdown extension doesn't provide an indentation service.
+      const insert = ' '.repeat(getIndentUnit(view.state));
+      const changes: ChangeSpec[] = [];
+      tree.traverse(current, (item) => {
+        const line = view.state.doc.lineAt(item.lineRange.from);
+        changes.push({ from: line.from, insert });
+      });
+
+      if (changes.length > 0) {
+        view.dispatch({ changes });
+      }
     }
   }
 
@@ -30,7 +58,7 @@ export const indentItemMore: Command = (view: EditorView) => {
 };
 
 export const indentItemLess: Command = (view: EditorView) => {
-  const pos = getSelection(view.state).from;
+  const pos = view.state.selection.main.from;
   const tree = view.state.facet(treeFacet);
   const current = tree.find(pos);
   if (current) {
@@ -58,7 +86,7 @@ export const indentItemLess: Command = (view: EditorView) => {
 //
 
 export const moveItemDown: Command = (view: EditorView) => {
-  const pos = getSelection(view.state)?.from;
+  const pos = view.state.selection.main.from;
   const tree = view.state.facet(treeFacet);
   const current = tree.find(pos);
   if (current && current.nextSibling) {
@@ -89,7 +117,7 @@ export const moveItemDown: Command = (view: EditorView) => {
 };
 
 export const moveItemUp: Command = (view: EditorView) => {
-  const pos = getSelection(view.state)?.from;
+  const pos = view.state.selection.main.from;
   const tree = view.state.facet(treeFacet);
   const current = tree.find(pos);
   if (current && current.prevSibling) {
@@ -119,50 +147,105 @@ export const moveItemUp: Command = (view: EditorView) => {
   return true;
 };
 
+//
+// Link commands.
+//
+
+/** Content of the action scope's first item, excluding its indentation and list/task marker. */
+export const getItemText = (state: EditorState): string | undefined => {
+  const [item] = getActionScope(state);
+  return item && state.doc.sliceString(item.contentRange.from, item.contentRange.to);
+};
+
+export type ItemLink = {
+  label: string;
+  url: string;
+};
+
+/**
+ * Replaces the action scope's first item with a markdown link to `url`.
+ * A task marker is demoted to a bullet since completion state now belongs to the linked object.
+ */
+export const replaceItemWithLink = (view: EditorView, { label, url }: ItemLink): boolean => {
+  const { state } = view;
+  const [item] = getActionScope(state);
+  if (!item) {
+    return false;
+  }
+
+  const marker = ' '.repeat(getIndentUnit(state) * item.level) + '- ';
+  const insert = `[${escapeLinkLabel(label)}](${url})`;
+  view.dispatch({
+    changes: [
+      { from: item.lineRange.from, to: item.contentRange.from, insert: marker },
+      { from: item.contentRange.from, to: item.contentRange.to, insert },
+    ],
+    selection: EditorSelection.cursor(item.lineRange.from + marker.length + insert.length),
+    effects: setBlockSelection.of([]),
+    userEvent: 'input.link',
+  });
+
+  return true;
+};
+
 //
 // Misc commands.
 //
 
+/** Deletes the action scope — each selected item's whole subtree (or the caret item's) — and clears the selection. */
 export const deleteItem: Command = (view: EditorView) => {
-  const tree = view.state.facet(treeFacet);
-  const pos = getSelection(view.state).from;
-  const current = tree.find(pos);
-  if (current) {
-    view.dispatch({
-      selection: EditorSelection.cursor(current.lineRange.from),
-      changes: [
-        {
-          from: current.lineRange.from,
-          to: Math.min(current.lineRange.to + 1, view.state.doc.length),
-        },
-      ],
-    });
+  const { state } = view;
+  const tree = state.facet(treeFacet);
+  const items = getActionScope(state);
+  if (items.length === 0) {
+    return true;
   }
 
+  // Each item's whole subtree plus its trailing newline; merged so a selected parent and child (or
+  // adjacent selections) collapse into one non-overlapping range.
+  const ranges = mergeRanges(
+    items.map((item) => {
+      const [from, to] = getRange(tree, item);
+      return { from, to: Math.min(to + 1, state.doc.length) };
+    }),
+  );
+
+  view.dispatch({
+    changes: ranges.map((range) => ({ from: range.from, to: range.to })),
+    selection: EditorSelection.cursor(ranges[0].from),
+    effects: setBlockSelection.of([]),
+    userEvent: 'delete.item',
+  });
+
   return true;
 };
 
+/** Toggles every item in the action scope between task and bullet, uniformly (by the first item's type). */
 export const toggleTask: Command = (view: EditorView) => {
-  const tree = view.state.facet(treeFacet);
-  const pos = getSelection(view.state)?.from;
-  const current = tree.find(pos);
-  if (current) {
-    const type = current.type === 'task' ? 'bullet' : 'task';
-    const indent = ' '.repeat(getIndentUnit(view.state) * current.level);
-    view.dispatch({
-      changes: [
-        {
-          from: current.lineRange.from,
-          to: current.contentRange.from,
-          insert: indent + (type === 'task' ? '- [ ] ' : '- '),
-        },
-      ],
-    });
+  const { state } = view;
+  const items = getActionScope(state);
+  if (items.length === 0) {
+    return true;
+  }
+
+  const unit = getIndentUnit(state);
+  const toTask = items[0].type !== 'task';
+  const changes: ChangeSpec[] = items
+    .filter((item) => (toTask ? item.type !== 'task' : item.type === 'task'))
+    .map((item) => ({
+      from: item.lineRange.from,
+      to: item.contentRange.from,
+      insert: ' '.repeat(unit * item.level) + (toTask ? '- [ ] ' : '- '),
+    }));
+
+  if (changes.length > 0) {
+    view.dispatch({ changes });
   }
 
   return true;
 };
 
+/** Keymap binding outliner keys: Tab indent, Enter continuation, arrow navigation, move, delete, and toggle-task. */
 export const commands = (): Extension =>
   keymap.of([
     //
@@ -181,7 +264,7 @@ export const commands = (): Extension =>
     {
       key: 'Enter',
       shift: (view) => {
-        const pos = getSelection(view.state).from;
+        const pos = view.state.selection.main.from;
         const insert = '\n  '; // TODO(burdon): Fix parsing.
         view.dispatch({
           changes: [{ from: pos, to: pos, insert }],
@@ -199,7 +282,7 @@ export const commands = (): Extension =>
       // Jump to next item (default moves to end of currentline).
       run: (view) => {
         const tree = view.state.facet(treeFacet);
-        const item = tree.find(getSelection(view.state).from);
+        const item = tree.find(view.state.selection.main.from);
         if (
           item &&
           view.state.doc.lineAt(item.lineRange.to).number - view.state.doc.lineAt(item.lineRange.from).number === 0
@@ -222,12 +305,12 @@ export const commands = (): Extension =>
     {
       key: 'Mod-a',
       preventDefault: true,
-      run: selectAll,
+      run: selectAllItems,
     },
     {
       key: 'Escape',
       preventDefault: true,
-      run: selectNone,
+      run: selectNoneItems,
     },
     {
       key: 'ArrowUp',

package/src/extensions/structure/outliner/dnd.test.ts

@@ -0,0 +1,142 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { EditorSelection, EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { describe, test } from 'vitest';
+
+import { join } from '../../../util';
+import { createMarkdownExtensions } from '../../language/markdown';
+import { blockSelectionField } from '../blocks';
+import { getDropIndent, getExtent, moveBlocks, replaceBlocks, selectAllItems, selectDown, selectUp } from './dnd';
+import { outlinerTree, treeFacet } from './tree';
+
+const LINES = ['- [ ] 1', '- [ ] 2', '  - [ ] 2.1', '  - [ ] 2.2', '    - 2.2.1', '  - [ ] 2.3', '- [ ] 3'];
+const DOC = join(...LINES);
+const extensions = [createMarkdownExtensions(), outlinerTree(), blockSelectionField];
+
+const getPos = (line: number) => LINES.slice(0, line).reduce((acc, text) => acc + text.length + 1, 0);
+const makeState = () => EditorState.create({ doc: DOC, extensions });
+
+// Runs `fn` against a fresh view (destroyed after, so pending measures can't leak between cases — the
+// former flakiness that had this suite gated out of CI) and returns the resulting document.
+const withView = (fn: (view: EditorView) => void): string => {
+  const view = new EditorView({ state: makeState() });
+  try {
+    fn(view);
+    return view.state.doc.toString();
+  } finally {
+    view.destroy();
+  }
+};
+
+describe('outliner blocks', () => {
+  test('getExtent spans the whole subtree', ({ expect }) => {
+    // Item "2" (line 1) owns 2.1, 2.2 (with 2.2.1), and 2.3 — lines 1..5.
+    const extent = getExtent(makeState(), { from: getPos(1), to: getPos(1) });
+    expect(makeState().doc.sliceString(extent.from, extent.to)).to.eq(join(...LINES.slice(1, 6)));
+  });
+
+  test('getExtent of a leaf is the item itself', ({ expect }) => {
+    const extent = getExtent(makeState(), { from: getPos(6), to: getPos(6) });
+    expect(makeState().doc.sliceString(extent.from, extent.to)).to.eq(LINES[6]);
+  });
+
+  test('moving a nested item to the top level re-roots its subtree indentation', ({ expect }) => {
+    // Drag "2.2" (with 2.2.1) from level 1 to the slot before "3" (top level).
+    expect(withView((view) => moveBlocks(view, [3], 6))).to.eq(
+      join('- [ ] 1', '- [ ] 2', '  - [ ] 2.1', '  - [ ] 2.3', '- [ ] 2.2', '  - 2.2.1', '- [ ] 3'),
+    );
+  });
+
+  test('deleting the last item leaves no orphaned separator', ({ expect }) => {
+    expect(withView((view) => replaceBlocks(view, [6], null))).to.eq(
+      join('- [ ] 1', '- [ ] 2', '  - [ ] 2.1', '  - [ ] 2.2', '    - 2.2.1', '  - [ ] 2.3'),
+    );
+  });
+
+  test('deleting an interior item removes it and its separator, promoting its children', ({ expect }) => {
+    // "2" owns 2.1/2.2/2.3; deleting its own line leaves the descendants in place.
+    expect(withView((view) => replaceBlocks(view, [1], null))).to.eq(
+      join('- [ ] 1', '  - [ ] 2.1', '  - [ ] 2.2', '    - 2.2.1', '  - [ ] 2.3', '- [ ] 3'),
+    );
+  });
+
+  test('selectAllItems selects every item anchor', ({ expect }) => {
+    const view = new EditorView({ state: makeState() });
+    try {
+      selectAllItems(view);
+      const tree = view.state.facet(treeFacet);
+      const expected: number[] = [];
+      tree.traverse((item) => {
+        // A block-body callback (no return) so `traverse` doesn't stop early on a truthy value.
+        expected.push(item.lineRange.from);
+      });
+      expect([...view.state.field(blockSelectionField)]).to.deep.eq(expected.sort((a, b) => a - b));
+
+      // Toggles off when everything is already selected.
+      selectAllItems(view);
+      expect(view.state.field(blockSelectionField)).to.have.length(0);
+    } finally {
+      view.destroy();
+    }
+  });
+
+  test('selectDown / selectUp extend the block selection by one item', ({ expect }) => {
+    const view = new EditorView({ state: makeState() });
+    try {
+      view.dispatch({ selection: EditorSelection.cursor(getPos(0) + 6) });
+
+      selectDown(view);
+      // The caret item (1) and the next item (2) are now selected.
+      expect([...view.state.field(blockSelectionField)]).to.deep.eq([getPos(0), getPos(1)]);
+
+      selectUp(view);
+      // Extending back up adds the item above the caret's current item.
+      expect(view.state.field(blockSelectionField)).to.include(getPos(0));
+    } finally {
+      view.destroy();
+    }
+  });
+});
+
+// See DESIGN "Drag reindent — drop level rules". The live `getDropIndent` (pointer-driven) is verified in
+// storybook; here we lock in the drop application: `moveBlocks(view, sources, dropIndex, indent)` re-roots
+// the moved subtree to the given level. Doc:  - A / (  - B) / (  - C) / - D.
+describe('outliner drag reindent', () => {
+  const BRANCH = ['- A', '  - B', '  - C', '- D'];
+  const branchView = (fn: (view: EditorView) => void): string => {
+    const view = new EditorView({
+      state: EditorState.create({ doc: join(...BRANCH), extensions }),
+    });
+    try {
+      fn(view);
+      return view.state.doc.toString();
+    } finally {
+      view.destroy();
+    }
+  };
+
+  test('(i) default — B dropped before D keeps its level (a child of A)', ({ expect }) => {
+    // indent 2 = a sibling of C = a child of A.
+    expect(branchView((view) => moveBlocks(view, [1], 3, 2))).to.eq(join('- A', '  - C', '  - B', '- D'));
+  });
+
+  test('(ii) outdent — B dropped before D at level 0 becomes a sibling of A', ({ expect }) => {
+    expect(branchView((view) => moveBlocks(view, [1], 3, 0))).to.eq(join('- A', '  - C', '- B', '- D'));
+  });
+
+  test('getDropIndent defaults to (i) — keeps the item in its branch, no preview shift', ({ expect }) => {
+    const view = new EditorView({ state: EditorState.create({ doc: join(...BRANCH), extensions }) });
+    try {
+      // Drop B (idx 1) before D (idx 3) with the pointer well above D's row (not over it): stays a child
+      // of A (indent 2, its own level), so the preview is not shifted.
+      expect(getDropIndent(view, [1], 3, -1000)).to.deep.eq({ indent: 2, offset: 0 });
+      // Multi-item drags do not single-re-root.
+      expect(getDropIndent(view, [1, 2], 3, -1000)).to.eq(null);
+    } finally {
+      view.destroy();
+    }
+  });
+});