@dxos/react-ui-editor 0.8.4-main.e8ec1fe → 0.8.4-main.ef1bc66f44

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/menu.ts

@@ -1,128 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-
-import { type CleanupFn, addEventListener } from '@dxos/async';
-
-export type MenuOptions = {
-  icon?: string;
-  height?: number;
-  padding?: number;
-};
-
-// TODO(burdon): Replace with popover.
-export const menu = (options: MenuOptions = {}): Extension => [
-  ViewPlugin.fromClass(
-    class {
-      view: EditorView;
-      tag: HTMLElement;
-      rafId?: number | null;
-      cleanup?: CleanupFn;
-
-      constructor(view: EditorView) {
-        this.view = view;
-
-        // Position context.
-        const container = view.scrollDOM;
-        if (getComputedStyle(container).position === 'static') {
-          container.style.position = 'relative';
-        }
-
-        {
-          const icon = document.createElement('dx-icon');
-          icon.setAttribute('icon', options.icon ?? 'ph--dots-three-vertical--regular');
-
-          this.tag = document.createElement('dx-anchor');
-          this.tag.classList.add('cm-popover-trigger');
-          this.tag.appendChild(icon);
-        }
-
-        container.appendChild(this.tag);
-
-        // Listen for scroll events.
-        const handler = () => this.scheduleUpdate();
-        this.cleanup = addEventListener(container, 'scroll', handler);
-        this.scheduleUpdate();
-      }
-
-      destroy() {
-        this.cleanup?.();
-        this.tag.remove();
-        if (this.rafId != null) {
-          cancelAnimationFrame(this.rafId);
-        }
-      }
-
-      update(update: ViewUpdate) {
-        this.tag.dataset.focused = update.view.hasFocus ? 'true' : 'false';
-        if (!update.view.hasFocus) {
-          return;
-        }
-
-        // TODO(burdon): Timer to fade in/out.
-        /*if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
-          this.tag.style.display = 'none';
-          this.tag.classList.add('opacity-10');
-        } else if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
-          this.tag.style.display = '';
-        } else */ if (
-          update.docChanged ||
-          update.focusChanged ||
-          update.geometryChanged ||
-          update.selectionSet ||
-          update.viewportChanged
-        ) {
-          this.scheduleUpdate();
-        }
-      }
-
-      updateButtonPosition() {
-        const { x, width } = this.view.contentDOM.getBoundingClientRect();
-
-        const pos = this.view.state.selection.main.head;
-        const line = this.view.lineBlockAt(pos);
-        const coords = this.view.coordsAtPos(line.from);
-        if (!coords) {
-          return;
-        }
-
-        const lineHeight = coords.bottom - coords.top;
-        const dy = (lineHeight - (options.height ?? 32)) / 2;
-
-        const offsetTop = coords.top + dy;
-        const offsetLeft = x + width + (options.padding ?? 8);
-
-        this.tag.style.top = `${offsetTop}px`;
-        this.tag.style.left = `${offsetLeft}px`;
-        this.tag.style.display = '';
-      }
-
-      scheduleUpdate() {
-        if (this.rafId != null) {
-          cancelAnimationFrame(this.rafId);
-        }
-
-        this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
-      }
-    },
-  ),
-
-  EditorView.theme({
-    '.cm-popover-trigger': {
-      position: 'fixed',
-      padding: '0',
-      border: 'none',
-      opacity: '0',
-      display: 'grid',
-      placeContent: 'center',
-      width: '2rem',
-      height: '2rem',
-    },
-    '&:focus-within .cm-popover-trigger': {
-      opacity: '1',
-    },
-  }),
-];

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 '../../util';
-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 { decorateMarkdown } from '../markdown';
-
-import { commands } from './commands';
-import { editor } from './editor';
-import { menu } from './menu';
-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.
-  menu(),
-
-  // 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-neutralFocusIndicator)',
-      },
-      '&: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;
-};