@dxos/react-ui-editor 0.8.2-staging.7ac8446 → 0.8.2

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

@@ -0,0 +1,99 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { EditorSelection, EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { describe, test } from 'vitest';
+
+import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';
+import { listItemToString, outlinerTree, treeFacet } from './tree';
+import { str } from '../../testing';
+import { createMarkdownExtensions } from '../markdown';
+
+const lines = [
+  '- [ ] 1',
+  '- [ ] 2',
+  '  - [ ] 2.1',
+  '  - [ ] 2.2',
+  '    - 2.2.1',
+  '    - 2.2.2',
+  '    - 2.2.3',
+  '  - [ ] 2.3',
+  '- [ ] 3',
+];
+
+const getPos = (line: number) => {
+  return lines.slice(0, line).reduce((acc, line) => acc + line.length + 1, 0);
+};
+
+const extensions = [createMarkdownExtensions(), outlinerTree()];
+
+// TODO(burdon): Flaky.
+describe.runIf(!process.env.CI)('outliner', () => {
+  const state = EditorState.create({ doc: str(...lines), extensions });
+
+  test('sanity', ({ expect }) => {
+    const tree = state.facet(treeFacet);
+    let i = 0;
+    tree.traverse((item, level) => {
+      const pos = getPos(i++);
+      expect(item.lineRange.from).toBe(pos);
+      console.log(listItemToString(item, level), pos);
+    });
+  });
+
+  test('indent', ({ expect }) => {
+    const view = new EditorView({ state });
+    const pos = getPos(1);
+
+    {
+      const tree = view.state.facet(treeFacet);
+      const item = tree.find(pos);
+      expect(item?.level).toBe(0);
+    }
+
+    view.dispatch({ selection: EditorSelection.cursor(pos) });
+    indentItemMore(view);
+
+    {
+      const tree = view.state.facet(treeFacet);
+      const item = tree.find(pos);
+      expect(item?.level).toBe(1);
+    }
+  });
+
+  test('unindent', ({ expect }) => {
+    const view = new EditorView({ state });
+    const pos = getPos(2);
+
+    {
+      const tree = view.state.facet(treeFacet);
+      const item = tree.find(pos);
+      expect(item?.level).toBe(1);
+    }
+
+    view.dispatch({ selection: EditorSelection.cursor(pos) });
+    indentItemLess(view);
+
+    {
+      const tree = view.state.facet(treeFacet);
+      const item = tree.find(pos);
+      expect(item?.level).toBe(0);
+    }
+  });
+
+  test('move down', ({ expect }) => {
+    const view = new EditorView({ state });
+    view.dispatch({ selection: EditorSelection.cursor(getPos(0)) });
+    moveItemDown(view);
+    expect(view.state.doc.sliceString(0, view.state.doc.length)).toBe(str(...lines.slice(1, 8), lines[0], lines[8]));
+  });
+
+  test('move up', ({ expect }) => {
+    const view = new EditorView({ state });
+    view.dispatch({ selection: EditorSelection.cursor(getPos(8)) });
+    moveItemUp(view);
+    expect(view.state.doc.sliceString(0, view.state.doc.length)).toBe(str(lines[0], lines[8], ...lines.slice(1, 8)));
+  });
+});

package/src/extensions/outliner/outliner.ts

@@ -0,0 +1,168 @@
+//
+// 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/react-ui-theme';
+
+import { commands } from './commands';
+import { editor } from './editor';
+import { selectionCompartment, selectionFacet, selectionEquals } from './selection';
+import { outlinerTree, treeFacet } from './tree';
+import { floatingMenu } from '../command';
+import { decorateMarkdown } from '../markdown';
+
+// ISSUES:
+// 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).
+
+// NEXT:
+// TODO(burdon): Update selection when adding/removing items.
+// 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).
+// TODO(burdon): Smart Cut-and-paste.
+// TODO(burdon): DND.
+
+export type OutlinerProps = {
+  showSelected?: boolean;
+};
+
+/**
+ * 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()),
+
+  // Selection.
+  selectionCompartment.of(selectionFacet.of([])),
+
+  // State.
+  outlinerTree(),
+
+  // Filter and possibly modify changes.
+  editor(),
+
+  // Floating menu.
+  floatingMenu(),
+
+  // Line decorations.
+  decorations(options),
+
+  // Default markdown decorations.
+  decorateMarkdown({ listPaddingLeft: 8 }),
+
+  // Researve space for menu.
+  EditorView.contentAttributes.of({ class: 'is-full !mr-[3rem]' }),
+];
+
+/**
+ * Line decorations (for border and selection).
+ */
+const decorations = (options: OutlinerProps) => [
+  ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet = Decoration.none;
+      constructor(view: EditorView) {
+        this.updateDecorations(view.state, view);
+      }
+
+      update(update: ViewUpdate) {
+        const selectionChanged = !selectionEquals(
+          update.state.facet(selectionFacet),
+          update.startState.facet(selectionFacet),
+        );
+
+        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 selection = state.facet(selectionFacet);
+        const tree = state.facet(treeFacet);
+        const current = tree.find(state.selection.ranges[state.selection.mainIndex]?.from);
+        const doc = state.doc;
+
+        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);
+            const isSelected = selection.includes(item.index) || item === current;
+            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 && (hasFocus ? 'cm-list-item-focused' : 'cm-list-item-selected'),
+                ),
+              }).range(line.from, line.from),
+            );
+          }
+        }
+
+        this.decorations = Decoration.set(decorations);
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+    },
+  ),
+
+  // Theme.
+  EditorView.theme(
+    Object.assign({
+      '.cm-list-item': {
+        borderLeftWidth: '1px',
+        borderRightWidth: '1px',
+        paddingLeft: '32px',
+        borderColor: 'transparent',
+      },
+      '.cm-list-item.cm-codeblock-start': {
+        borderRadius: '0',
+      },
+
+      '.cm-list-item-start': {
+        borderTopWidth: '1px',
+        borderTopLeftRadius: '4px',
+        borderTopRightRadius: '4px',
+        paddingTop: '4px',
+        marginTop: '2px',
+      },
+
+      '.cm-list-item-end': {
+        borderBottomWidth: '1px',
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px',
+        paddingBottom: '4px',
+        marginBottom: '2px',
+      },
+
+      '.cm-list-item-selected': {
+        borderColor: options.showSelected ? 'var(--dx-separator)' : undefined,
+      },
+      '.cm-list-item-focused': {
+        borderColor: 'var(--dx-accentFocusIndicator)',
+      },
+    }),
+  ),
+];

package/src/extensions/outliner/selection.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Compartment, type EditorState, Facet, type SelectionRange } from '@codemirror/state';
+import { type EditorView, type Command } from '@codemirror/view';
+
+import { treeFacet } from './tree';
+
+export type Selection = number[];
+
+export const getSelection = (state: EditorState): SelectionRange => state.selection.main;
+
+export const selectionEquals = (a: number[], b: number[]) => a.length === b.length && a.every((i) => b.includes(i));
+
+export const selectionFacet = Facet.define<Selection, Selection>({
+  combine: (values) => values[0],
+});
+
+export const selectionCompartment = new Compartment();
+
+export const selectNone: Command = (view: EditorView) => {
+  view.dispatch({
+    effects: selectionCompartment.reconfigure(selectionFacet.of([])),
+  });
+
+  return true;
+};
+
+export const selectAll: Command = (view: EditorView) => {
+  const tree = view.state.facet(treeFacet);
+  const selection = view.state.facet(selectionFacet);
+  const items: Selection = [];
+  tree.traverse((item) => items.push(item.index));
+  view.dispatch({
+    effects: selectionCompartment.reconfigure(selectionFacet.of(selectionEquals(selection, items) ? [] : items)),
+  });
+
+  return true;
+};
+
+// TODO(burdon): Implement.
+export const selectUp: Command = (view: EditorView) => {
+  return true;
+};
+
+// TODO(burdon): Implement.
+export const selectDown: Command = (view: EditorView) => {
+  return true;
+};

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

@@ -0,0 +1,164 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { EditorState } from '@codemirror/state';
+import { describe, test } from 'vitest';
+
+import { outlinerTree, treeFacet, listItemToString, type Item } from './tree';
+import { str } from '../../testing';
+import { type Range } from '../../types';
+
+const lines = [
+  '- [ ] 1',
+  '- [ ] 2',
+  '  - [ ] 2.1',
+  '  - [ ] 2.2',
+  '    - 2.2.1',
+  '    - 2.2.2',
+  '    - 2.2.3',
+  '  - [ ] 2.3',
+  '- [ ] 3',
+];
+
+const getPos = (line: number) => {
+  return lines.slice(0, line).reduce((acc, line) => acc + line.length + 1, 0);
+};
+
+const extensions = [markdown({ base: markdownLanguage }), outlinerTree()];
+
+describe('tree (boundary conditions)', () => {
+  test('empty', ({ expect }) => {
+    const state = EditorState.create({ doc: str(''), extensions });
+    const tree = state.facet(treeFacet);
+    expect(tree).to.exist;
+  });
+
+  test('content range', ({ expect }) => {
+    const state = EditorState.create({ doc: '- [ ] A', extensions });
+    const tree = state.facet(treeFacet);
+    console.log(JSON.stringify(tree, null, 2));
+    expect(tree.toJSON()).to.deep.eq({
+      type: 'root',
+      index: -1,
+      level: -1,
+      lineRange: { from: 0, to: -1 },
+      contentRange: { from: 0, to: -1 },
+      children: [
+        {
+          type: 'task',
+          index: 0,
+          level: 0,
+          lineRange: { from: 0, to: 7 },
+          contentRange: { from: 6, to: 7 },
+          children: [],
+        },
+      ],
+    });
+
+    const item = tree.find(0);
+    expect(item?.contentRange).to.include({ from: 6, to: state.doc.length });
+  });
+
+  test('empty continuation', ({ expect }) => {
+    const state = EditorState.create({ doc: str('- [ ] A', '  '), extensions });
+    const tree = state.facet(treeFacet);
+    tree.traverse((item, level) => {
+      console.log(listItemToString(item, level));
+    });
+  });
+});
+
+describe('tree (advanced)', () => {
+  const state = EditorState.create({ doc: str(...lines), extensions });
+
+  test('traverse', ({ expect }) => {
+    const tree = state.facet(treeFacet);
+    let count = 0;
+    tree.traverse((item, level) => {
+      console.log(listItemToString(item, level));
+      count++;
+    });
+    expect(count).toBe(9);
+  });
+
+  test('continguous', ({ expect }) => {
+    const tree = state.facet(treeFacet);
+    const ranges: Range[] = [];
+    tree.traverse((item) => {
+      ranges.push(item.lineRange);
+      console.log(listItemToString(item));
+    });
+
+    // Check no gaps between ranges.
+    expect(ranges[0].from).toBe(0);
+    expect(ranges[ranges.length - 1].to).toBe(state.doc.length);
+    for (let i = 0; i < ranges.length - 1; i++) {
+      const current = ranges[i];
+      const next = ranges[i + 1];
+      expect(current.to + 1).toBe(next.from);
+    }
+  });
+
+  test('find', ({ expect }) => {
+    const tree = state.facet(treeFacet);
+
+    expect(tree.find(0)).to.include({ type: 'task' });
+    expect(tree.find(state.doc.length)).to.include({ type: 'task' });
+
+    expect(tree.find(getPos(1))).to.include({ type: 'task' });
+    expect(tree.find(getPos(1))).toBe(tree.find(getPos(1) + 4));
+    expect(tree.find(getPos(5))).to.include({ type: 'bullet' });
+  });
+
+  test('siblings', ({ expect }) => {
+    const tree = state.facet(treeFacet);
+    const items: Item[] = [];
+    tree.traverse((item) => {
+      items.push(item);
+    });
+
+    expect(items[0].nextSibling).toBe(items[1]);
+    expect(items[1].prevSibling).toBe(items[0]);
+
+    expect(items[1].nextSibling).toBe(items[8]);
+    expect(items[8].prevSibling).toBe(items[1]);
+  });
+
+  test('next/previous', ({ expect }) => {
+    const tree = state.facet(treeFacet);
+    const items: Item[] = [];
+    tree.traverse((item) => {
+      items.push(item);
+    });
+
+    expect(tree.prev(items[0])).not.to.exist;
+    expect(tree.next(items[items.length - 1])).not.to.exist;
+
+    for (let i = 0; i < items.length - 1; i++) {
+      const current = items[i];
+      const next = items[i + 1];
+      expect(tree.next(current)?.index).toEqual(next.index);
+      expect(tree.prev(next)?.index).toEqual(current.index);
+    }
+  });
+
+  test('lastDescendant', ({ expect }) => {
+    const tree = state.facet(treeFacet);
+    {
+      const item = tree.find(getPos(0))!;
+      expect(tree.lastDescendant(item).index).toBe(item.index);
+    }
+    {
+      const item = tree.find(getPos(1))!;
+      const last = tree.find(getPos(7))!;
+      expect(tree.lastDescendant(item).index).toBe(last.index);
+    }
+    {
+      const item = tree.find(getPos(3))!;
+      const last = tree.find(getPos(6))!;
+      expect(tree.lastDescendant(item).index).toBe(last.index);
+    }
+  });
+});