@dxos/ui-editor 0.9.1-staging.ee54ba693a → 0.11.0

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

@@ -0,0 +1,193 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { EditorSelection, EditorState } from '@codemirror/state';
+import { type Command, EditorView } from '@codemirror/view';
+import { describe, test } from 'vitest';
+
+import { join } from '../../../util';
+import { createMarkdownExtensions } from '../../language/markdown';
+import { blockSelectionField, setBlockSelection } from '../blocks';
+import {
+  deleteItem,
+  getItemText,
+  indentItemLess,
+  indentItemMore,
+  moveItemDown,
+  moveItemUp,
+  replaceItemWithLink,
+  toggleTask,
+} from './commands';
+import { outlinerTree } from './tree';
+
+const LINES = [
+  '- [ ] 1',
+  '- [ ] 2',
+  '  - [ ] 2.1',
+  '  - [ ] 2.2',
+  '    - 2.2.1',
+  '    - 2.2.2',
+  '    - 2.2.3',
+  '  - [ ] 2.3',
+  '- [ ] 3',
+];
+
+const DOC = join(...LINES);
+const extensions = [createMarkdownExtensions(), outlinerTree(), blockSelectionField];
+
+// Line-start offset of the nth (0-based) line.
+const lineStart = (doc: string, line: number): number =>
+  doc
+    .split('\n')
+    .slice(0, line)
+    .reduce((acc, text) => acc + text.length + 1, 0);
+
+// Runs `command` with the caret on `line` and returns the resulting document. A fresh view per call
+// (destroyed after) keeps the cases independent and cancels any pending measure — the source of the
+// former flakiness that had this suite gated out of CI.
+const run = (doc: string, line: number, command: Command): string => {
+  const view = new EditorView({ state: EditorState.create({ doc, extensions }) });
+  try {
+    view.dispatch({ selection: EditorSelection.cursor(lineStart(doc, line)) });
+    command(view);
+    return view.state.doc.toString();
+  } finally {
+    view.destroy();
+  }
+};
+
+describe('outliner commands', () => {
+  test('indent carries the whole subtree with its parent', ({ expect }) => {
+    // Indenting item "2" nests it under "1"; its descendants must move with it (not become its peers).
+    expect(run(DOC, 1, indentItemMore)).to.eq(
+      join(
+        '- [ ] 1',
+        '  - [ ] 2',
+        '    - [ ] 2.1',
+        '    - [ ] 2.2',
+        '      - 2.2.1',
+        '      - 2.2.2',
+        '      - 2.2.3',
+        '    - [ ] 2.3',
+        '- [ ] 3',
+      ),
+    );
+  });
+
+  test('indent is a no-op for the first item (nothing to nest under)', ({ expect }) => {
+    expect(run(DOC, 0, indentItemMore)).to.eq(DOC);
+  });
+
+  test('unindent carries the whole subtree with its parent', ({ expect }) => {
+    // Outdent "2.2" (with 2.2.1–2.2.3) from level 2 to level 1.
+    expect(run(DOC, 3, indentItemLess)).to.eq(
+      join(
+        '- [ ] 1',
+        '- [ ] 2',
+        '  - [ ] 2.1',
+        '- [ ] 2.2',
+        '  - 2.2.1',
+        '  - 2.2.2',
+        '  - 2.2.3',
+        '  - [ ] 2.3',
+        '- [ ] 3',
+      ),
+    );
+  });
+
+  test('unindent is a no-op at the top level', ({ expect }) => {
+    expect(run(DOC, 0, indentItemLess)).to.eq(DOC);
+  });
+
+  test('move down swaps the item (with its subtree) past the next sibling', ({ expect }) => {
+    // "1" moves below "2" and its whole subtree.
+    expect(run(DOC, 0, moveItemDown)).to.eq(join(...LINES.slice(1, 8), LINES[0], LINES[8]));
+  });
+
+  test('move up swaps the item past the previous sibling', ({ expect }) => {
+    // "3" moves above "2"'s subtree, back under "1".
+    expect(run(DOC, 8, moveItemUp)).to.eq(join(LINES[0], LINES[8], ...LINES.slice(1, 8)));
+  });
+
+  test('delete removes a leaf item and its separator', ({ expect }) => {
+    expect(run(DOC, 2, deleteItem)).to.eq(
+      join('- [ ] 1', '- [ ] 2', '  - [ ] 2.2', '    - 2.2.1', '    - 2.2.2', '    - 2.2.3', '  - [ ] 2.3', '- [ ] 3'),
+    );
+  });
+
+  test('delete removes the whole subtree under the caret item', ({ expect }) => {
+    // Caret on "2" (a parent): its descendants 2.1–2.3 go with it.
+    expect(run(DOC, 1, deleteItem)).to.eq(join('- [ ] 1', '- [ ] 3'));
+  });
+
+  test('delete acts on the block selection, scoped to each selected subtree', ({ expect }) => {
+    // Select "2.2" (owns 2.2.1–2.2.3); delete removes the whole subtree, not just its line.
+    const view = new EditorView({ state: EditorState.create({ doc: DOC, extensions }) });
+    try {
+      view.dispatch({ effects: setBlockSelection.of([lineStart(DOC, 3)]) });
+      deleteItem(view);
+      expect(view.state.doc.toString()).to.eq(join('- [ ] 1', '- [ ] 2', '  - [ ] 2.1', '  - [ ] 2.3', '- [ ] 3'));
+      // The selection is cleared after the delete.
+      expect(view.state.field(blockSelectionField)).to.have.length(0);
+    } finally {
+      view.destroy();
+    }
+  });
+
+  test('toggle turns a bullet into a task and back, preserving indentation', ({ expect }) => {
+    const asTask = run(DOC, 4, toggleTask);
+    expect(asTask).to.eq(
+      join(
+        '- [ ] 1',
+        '- [ ] 2',
+        '  - [ ] 2.1',
+        '  - [ ] 2.2',
+        '    - [ ] 2.2.1',
+        '    - 2.2.2',
+        '    - 2.2.3',
+        '  - [ ] 2.3',
+        '- [ ] 3',
+      ),
+    );
+    // Toggling a task turns it back into a bullet.
+    expect(run(DOC, 0, toggleTask)).to.eq(join('- 1', ...LINES.slice(1)));
+  });
+
+  test('item text excludes indentation and the marker', ({ expect }) => {
+    const view = new EditorView({ state: EditorState.create({ doc: DOC, extensions }) });
+    try {
+      view.dispatch({ selection: EditorSelection.cursor(lineStart(DOC, 4)) });
+      expect(getItemText(view.state)).to.eq('2.2.1');
+    } finally {
+      view.destroy();
+    }
+  });
+
+  test('replace with link demotes the task marker and preserves indentation', ({ expect }) => {
+    const view = new EditorView({ state: EditorState.create({ doc: DOC, extensions }) });
+    try {
+      view.dispatch({ selection: EditorSelection.cursor(lineStart(DOC, 2)) });
+      replaceItemWithLink(view, { label: '2.1', url: 'dxn:echo:@:01ABC' });
+      expect(view.state.doc.toString()).to.eq(
+        join('- [ ] 1', '- [ ] 2', '  - [2.1](dxn:echo:@:01ABC)', '  - [ ] 2.2', ...LINES.slice(4)),
+      );
+      // The caret lands after the inserted link.
+      expect(view.state.selection.main.head).to.eq(lineStart(view.state.doc.toString(), 3) - 1);
+    } finally {
+      view.destroy();
+    }
+  });
+
+  test('replace with link strips brackets and newlines from the label', ({ expect }) => {
+    const doc = join('- [ ] a [b] c');
+    const view = new EditorView({ state: EditorState.create({ doc, extensions }) });
+    try {
+      view.dispatch({ selection: EditorSelection.cursor(0) });
+      replaceItemWithLink(view, { label: 'a [b]\n  c ', url: 'dxn:echo:@:01ABC' });
+      expect(view.state.doc.toString()).to.eq('- [a b c](dxn:echo:@:01ABC)');
+    } finally {
+      view.destroy();
+    }
+  });
+});

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

@@ -0,0 +1,183 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorState, type Extension, Prec, type Range } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+import { mx } from '@dxos/ui-theme';
+
+import { decorateMarkdown } from '../../language';
+import { CONTENT_WIDTH, blockSelectionField } from '../blocks';
+import { commands } from './commands';
+import { outlinerDnd } from './dnd';
+import { editor } from './editor';
+import { menu } from './menu';
+import { getRange, outlinerTree, treeFacet } from './tree';
+
+// ISSUES: (move to DESIGN.md)
+// TODO(burdon): Remove requirement for continuous lines to be indented (so that user's can't accidentally delete them and break the layout).
+// TODO(burdon): Prevent unterminated fenced code from breaking subsequent items ("firewall" markdown parsing within each item?)
+// TODO(burdon): What if a different editor "breaks" the layout?
+// TODO(burdon): Check Automerge recognizes text that is moved/indented (e.g., concurrent editing item while being moved).
+// TODO(burdon): When selecting across items, select entire items (don't show selection that spans the gaps).
+// TODO(burdon): Handle backspace at start of line (or empty line).
+// TODO(burdon): Convert to task object and insert link (menu button).
+
+export type OutlinerProps = {};
+
+/**
+ * Outliner extension.
+ * - Stores outline as a standard markdown document with task and list markers.
+ * - Supports continuation lines and rich formatting (with Shift+Enter).
+ * - Constrains editor to outline structure.
+ * - Supports smart cut-and-paste.
+ */
+export const outliner = (_options: OutlinerProps = {}): Extension => [
+  // Commands.
+  Prec.highest(commands()),
+
+  // State.
+  outlinerTree(),
+
+  // Filter and possibly modify changes.
+  editor(),
+
+  // Block selection, drag-to-reorder, highlight, and clipboard (built on the `blocks` extensions).
+  outlinerDnd(),
+
+  // Current-item indicator (the selection highlight is drawn by `outlinerDnd`).
+  decorations(),
+
+  // Default markdown decorations.
+  decorateMarkdown({ listPaddingLeft: 8 }),
+
+  // Floating menu (with reserved margins left/right for the grip and menu).
+  menu(),
+  EditorView.contentAttributes.of({
+    class: CONTENT_WIDTH,
+  }),
+];
+
+/**
+ * Structural row layout plus a subtle border on the current (caret) item. The selection highlight is
+ * drawn by `outlinerDnd` (the shared `blocks` layer), so this no longer renders selection.
+ */
+const decorations = () => [
+  ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet = Decoration.none;
+      constructor(view: EditorView) {
+        this.updateDecorations(view.state, view);
+      }
+
+      update(update: ViewUpdate) {
+        const selectionChanged =
+          update.startState.field(blockSelectionField, false) !== update.state.field(blockSelectionField, false);
+        if (
+          update.focusChanged ||
+          update.docChanged ||
+          update.viewportChanged ||
+          update.selectionSet ||
+          selectionChanged
+        ) {
+          this.updateDecorations(update.state, update.view);
+        }
+      }
+
+      private updateDecorations(state: EditorState, { viewport: { from, to }, hasFocus }: EditorView) {
+        const tree = state.facet(treeFacet);
+        const current = tree.find(state.selection.main.from);
+        const doc = state.doc;
+
+        // The block selection stores each selected item's line-start anchor; a line is selected when it
+        // falls within any selected item's subtree. Rendered as a line background (not the `blocks`
+        // RectangleMarker layer) so it stays aligned to the actual rows.
+        const selectedRanges = (state.field(blockSelectionField, false) ?? [])
+          .map((anchor) => {
+            const item = tree.find(anchor);
+            return item ? getRange(tree, item) : null;
+          })
+          .filter((range): range is [number, number] => range != null);
+        const isSelected = (pos: number) =>
+          selectedRanges.some(([rangeFrom, rangeTo]) => pos >= rangeFrom && pos <= rangeTo);
+
+        const decorations: Range<Decoration>[] = [];
+        for (let lineNum = doc.lineAt(from).number; lineNum <= doc.lineAt(to).number; lineNum++) {
+          const line = doc.line(lineNum);
+          const item = tree.find(line.from);
+          if (item) {
+            const lineFrom = doc.lineAt(item.contentRange.from);
+            const lineTo = doc.lineAt(item.contentRange.to);
+            decorations.push(
+              Decoration.line({
+                class: mx(
+                  'cm-list-item',
+                  lineFrom.number === line.number && 'cm-list-item-start',
+                  lineTo.number === line.number && 'cm-list-item-end',
+                  isSelected(line.from) && 'cm-list-item-selected',
+                  hasFocus && item === current && 'cm-list-item-current',
+                ),
+              }).range(line.from, line.from),
+            );
+          }
+        }
+
+        this.decorations = Decoration.set(decorations);
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+    },
+  ),
+
+  // Theme.
+  EditorView.theme({
+    '.cm-list-item': {
+      // borderLeftWidth: '1px',
+      // borderRightWidth: '1px',
+      paddingLeft: '32px',
+      borderColor: 'transparent',
+    },
+    '.cm-list-item.cm-codeblock-start': {
+      borderRadius: '0',
+    },
+
+    // No vertical margins: CodeMirror's gutter/height-map measures each line's border-box but not its
+    // margins, so any inter-row margin makes the drag grips drift further from center down the list (and
+    // shows as gaps between selected rows). Keep row spacing in the padding, which CM does measure.
+    '.cm-list-item-start': {
+      // borderTopWidth: '1px',
+      // borderTopLeftRadius: '4px',
+      // borderTopRightRadius: '4px',
+      paddingTop: '4px',
+    },
+    '.cm-list-item-end': {
+      // borderBottomWidth: '1px',
+      // borderBottomLeftRadius: '4px',
+      // borderBottomRightRadius: '4px',
+      paddingBottom: '4px',
+    },
+
+    // Accent background behind the selected subtree; flat so adjacent selected rows read as one region.
+    '.cm-list-item-selected': {
+      boxSizing: 'border-box',
+      backgroundColor: 'var(--color-cm-highlight-surface)',
+      borderRadius: '0',
+    },
+    // Subtle border on the item under the caret; distinct from the accent selection highlight.
+    '.cm-list-item-current': {
+      borderColor: 'var(--color-focus-ring-subtle)',
+    },
+
+    // The drag preview clones the selected rows, whose content is shifted horizontally to preview the
+    // drop indent — so the highlight must come from the (full-width) container, not the cloned lines,
+    // to span the editor width regardless of the indent level.
+    '.cm-blockDragPreview': {
+      backgroundImage: 'linear-gradient(var(--color-cm-highlight-surface), var(--color-cm-highlight-surface))',
+    },
+    '.cm-blockDragPreview .cm-list-item-selected': {
+      backgroundColor: 'transparent',
+    },
+  }),
+];

package/src/extensions/{outliner → structure/outliner}/tree.test.ts

@@ -6,8 +6,8 @@ import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { EditorState } from '@codemirror/state';
 import { beforeEach, describe, test } from 'vitest';
 
-import { type Range } from '../../types';
-import { join } from '../../util';
+import { type Range } from '../../../types';
+import { join } from '../../../util';
 import { type Item, listItemToString, outlinerTree, treeFacet } from './tree';
 
 const lines = [

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

@@ -9,7 +9,7 @@ import { type SyntaxNode } from '@lezer/common';
 
 import { invariant } from '@dxos/invariant';
 
-import { type Range } from '../../types';
+import { type Range } from '../../../types';
 
 /**
  * Represents a single item in the tree.

package/src/headless.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// A UI-free entrypoint. The root barrel pulls every editor extension, `@dxos/ui` and `@dxos/lit-ui`,
+// so operation handlers running under node or bun cannot import from it — these helpers only need
+// CodeMirror state. Re-exported from the modules that own them rather than moved, so the editor
+// keeps a single definition.
+// TODO(wittjosiah): Factor these out into a package that does not carry a UI dependency at all.
+
+export { cherryPickHunk, revertHunk } from './extensions/review/diff';
+export { createComment, isRangeVisible, scrollCommentIntoView } from './extensions/review/comments';
+export { Cursor } from './util/cursor';

package/src/styles/theme.ts

@@ -44,7 +44,7 @@ const headings: Record<HeadingLevel, { className: string; fontSize: string; line
 };
 
 // Font families matching --font-body and --font-mono in theme.css.
-export const fontBody = '"Inter Variable", ui-sans-serif, system-ui, sans-serif';
+export const fontBody = '"Nunito Variable", "Inter Variable", ui-sans-serif, system-ui, sans-serif';
 export const fontMono = '"JetBrains Mono Variable", ui-monospace, "Cascadia Code", "Source Code Pro", monospace';
 
 export const markdownTheme = {
@@ -194,6 +194,8 @@ export const baseTheme = EditorView.baseTheme({
 
   /**
    * Selection (layer).
+   * NOTE: A browser dark-mode/reader extension can override `::selection` and reveal a second
+   * (native) selection over this layer; that is an extension artifact, not an editor bug.
    */
   '.cm-selectionBackground': {
     background: 'var(--color-cm-selection)',

package/src/util/util.ts

@@ -4,6 +4,9 @@
 
 import { type EditorView } from '@codemirror/view';
 
+/** Escapes a string for safe embedding in RegExp source. */
+export const escapeRegExpSource = (value: string): string => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
 export const insertAtCursor = (view: EditorView, from: number, insert: string) => {
   view.dispatch({
     changes: { from, to: from, insert },