@dxos/react-ui-editor 0.8.4-main.1da679c → 0.8.4-main.21d9917

package/src/extensions/outliner/editor.ts

@@ -1,184 +0,0 @@
-//
-// 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

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

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

@@ -1,100 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { EditorSelection, EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { describe, test } from 'vitest';
-
-import { str } from '../../testing';
-import { createMarkdownExtensions } from '../markdown';
-
-import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';
-import { listItemToString, outlinerTree, treeFacet } from './tree';
-
-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

@@ -1,167 +0,0 @@
-//
-// 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 { floatingMenu } from '../command';
-import { decorateMarkdown } from '../markdown';
-
-import { commands } from './commands';
-import { editor } from './editor';
-import { selectionCompartment, selectionEquals, selectionFacet } from './selection';
-import { outlinerTree, treeFacet } from './tree';
-
-// 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 = {};
-
-/**
- * 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(),
-
-  // 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 = () => [
-  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-focused': {
-        borderColor: 'var(--dx-accentFocusIndicator)',
-      },
-      '&:focus-within .cm-list-item-selected': {
-        borderColor: 'var(--dx-separator)',
-      },
-    }),
-  ),
-];

package/src/extensions/outliner/selection.ts

@@ -1,50 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Compartment, type EditorState, Facet, type SelectionRange } from '@codemirror/state';
-import { type Command, type EditorView } 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

@@ -1,168 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import { EditorState } from '@codemirror/state';
-import { beforeEach, describe, test } from 'vitest';
-
-import { str } from '../../testing';
-import { type Range } from '../../types';
-
-import { type Item, listItemToString, outlinerTree, treeFacet } from './tree';
-
-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)', () => {
-  let state: EditorState;
-
-  beforeEach(() => {
-    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).to.eq(9);
-  });
-
-  test('continguous', ({ expect }) => {
-    const tree = state.facet(treeFacet);
-    const ranges: Range[] = [];
-    tree.traverse((item) => {
-      console.log(listItemToString(item));
-      ranges.push(item.lineRange);
-    });
-
-    // 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).to.eq(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))).to.eq(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).to.eq(item.index);
-    }
-    {
-      const item = tree.find(getPos(1))!;
-      const last = tree.find(getPos(7))!;
-      expect(tree.lastDescendant(item).index).to.eq(last.index);
-    }
-    {
-      const item = tree.find(getPos(3))!;
-      const last = tree.find(getPos(6))!;
-      expect(tree.lastDescendant(item).index).to.eq(last.index);
-    }
-  });
-});