@dxos/react-ui-editor 0.8.4-main.84f28bd → 0.8.4-main.9735255

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

@@ -1,166 +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 { 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 = {};
-
-/**
- * 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)',
-      },
-      '[data-has-focus] & .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 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

@@ -1,167 +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 { 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)', () => {
-  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);
-    }
-  });
-});