@dxos/react-ui-editor 0.8.2-main.f11618f → 0.8.2-staging.42af850

package/src/extensions/outliner/editor.ts

@@ -0,0 +1,184 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ChangeSpec, EditorSelection, EditorState } from '@codemirror/state';
+import { type EditorView, ViewPlugin } from '@codemirror/view';
+
+import { log } from '@dxos/log';
+
+import { getSelection } from './selection';
+import { treeFacet } from './tree';
+
+const LIST_ITEM_REGEX = /^\s*- (\[ \]|\[x\])? /;
+
+/**
+ * Initialize empty document.
+ */
+const initialize = () => {
+  return ViewPlugin.fromClass(
+    class {
+      constructor(view: EditorView) {
+        const first = view.state.doc.lineAt(0);
+        const text = view.state.sliceDoc(first.from, first.to);
+        const match = text.match(LIST_ITEM_REGEX);
+        if (!match) {
+          setTimeout(() => {
+            const insert = '- [ ] ';
+            view.dispatch({
+              changes: [{ from: 0, to: 0, insert }],
+              selection: EditorSelection.cursor(insert.length),
+            });
+          });
+        }
+      }
+    },
+  );
+};
+
+/**
+ * Handle cursor movement, selection, and editing.
+ */
+export const editor = () => [
+  initialize(),
+
+  EditorState.transactionFilter.of((tr) => {
+    const tree = tr.state.facet(treeFacet);
+
+    //
+    // Check cursor is in a valid position.
+    //
+    if (!tr.docChanged) {
+      const current = getSelection(tr.state).from;
+      if (current != null) {
+        const currentItem = tree.find(current);
+        if (!currentItem) {
+          return [];
+        }
+
+        // Check if outside of editable range.
+        if (current < currentItem.contentRange.from || current > currentItem.contentRange.to) {
+          const prev = getSelection(tr.startState).from;
+          const prevItem = prev != null ? tree.find(prev) : undefined;
+          if (!prevItem) {
+            return [{ selection: EditorSelection.cursor(currentItem.contentRange.from) }];
+          } else {
+            if (currentItem.index < prevItem.index) {
+              // Moving line up.
+              return [{ selection: EditorSelection.cursor(currentItem.contentRange.to) }];
+            } else if (currentItem.index > prevItem.index) {
+              // Moving line down.
+              return [{ selection: EditorSelection.cursor(currentItem.contentRange.from) }];
+            } else {
+              // Moving left.
+              if (current < prev) {
+                if (currentItem.index === 0) {
+                  // At start of the list.
+                  return [];
+                } else {
+                  // Go to previous line.
+                  return [{ selection: EditorSelection.cursor(currentItem.lineRange.from - 1) }];
+                }
+              } else {
+                // Go to end of line.
+                return [{ selection: EditorSelection.cursor(currentItem.contentRange.to) }];
+              }
+            }
+          }
+        }
+      }
+
+      return tr;
+    }
+
+    //
+    // Validate changes that don't break the tree.
+    //
+    let cancel = false;
+    const changes: ChangeSpec[] = [];
+    tr.changes.iterChanges((fromA, toA, fromB, toB, insert) => {
+      const line = tr.startState.doc.lineAt(fromA);
+      const match = line.text.match(LIST_ITEM_REGEX);
+      if (match) {
+        // Check cursor was in a valid position.
+        const startTree = tr.startState.facet(treeFacet);
+        const startItem = startTree.find(tr.startState.selection.main.from);
+
+        // Check if entire line was deleted (which is ok).
+        const deleteLine = fromA === startItem?.lineRange.from && toA === startItem?.lineRange.to + 1;
+        if (deleteLine) {
+          return;
+        }
+
+        // if (!deleteLine && (!startItem || fromA < startItem.contentRange.from || toA > startItem.contentRange.to)) {
+        //   cancel = true;
+        //   return;
+        // }
+
+        // Check valid item.
+        const currentItem = tree.find(tr.state.selection.main.from);
+        if (!currentItem?.contentRange) {
+          cancel = true;
+          return;
+        }
+
+        // Detect and cancel replacement of task marker with continuation indent.
+        // Task markers are atomic so will be deleted when backspace is pressed.
+        // The markdown extension inserts 2 or 6 spaces when deleting a list or task marker in order to create a continuation.
+        // - [ ] <- backspace here deletes the task marker.
+        // - [ ] <- backspace here inserts 6 spaces (creates continuation).
+        //   - [ ] <- backspace here deletes the task marker.
+        const start = line.from + (match?.[0]?.length ?? 0);
+        const replace = start === toA && toA - fromA === insert.length;
+        if (replace) {
+          changes.push({ from: line.from - 1, to: toA });
+          return;
+        }
+
+        // Detect deletion of marker.
+        if (fromB === toB) {
+          if (toA === line.to) {
+            const line = tr.state.doc.lineAt(fromA);
+            if (line.text.match(/^\s*$/)) {
+              if (line.from === 0) {
+                // Don't delete first line.
+                cancel = true;
+                return;
+              } else {
+                // Delete indent and marker.
+                changes.push({ from: line.from - 1, to: toA });
+                return;
+              }
+            }
+          }
+          return;
+        }
+
+        // Prevent newline if line is empty.
+        const item = tree.find(fromA);
+        if (item?.contentRange.from === item?.contentRange.to && fromA === toA) {
+          cancel = true;
+          return;
+        }
+
+        log('change', {
+          item,
+          line: { from: line.from, to: line.to },
+          a: [fromA, toA],
+          b: [fromB, toB],
+          insert: { text: insert.toString(), length: insert.length },
+        });
+      }
+    });
+
+    if (changes.length > 0) {
+      log('modified,', { changes });
+      return [{ changes }];
+    } else if (cancel) {
+      log('cancel');
+      return [];
+    }
+
+    return tr;
+  }),
+];

package/src/extensions/outliner/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './commands';
+export * from './outliner';
+export * from './tree';

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