@dxos/react-ui-editor 0.8.4-main.f9ba587 → 0.8.4-main.fcfe5033a5

package/src/extensions/markdown/table.ts

@@ -1,144 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import {
-  type EditorState,
-  type Extension,
-  type RangeSet,
-  RangeSetBuilder,
-  StateField,
-  type Transaction,
-} from '@codemirror/state';
-import { Decoration, EditorView, WidgetType } from '@codemirror/view';
-
-// TODO(burdon): Snippet to create basic table.
-//  https://codemirror.net/docs/ref/#autocomplete.snippet
-// TODO(burdon): Advanced formatting (left/right/center).
-// TODO(burdon): Editor to auto balance columns.
-
-export type TableOptions = {};
-
-/**
- * GFM tables.
- * https://github.github.com/gfm/#tables-extension
- */
-export const table = (options: TableOptions = {}): Extension => {
-  return StateField.define<RangeSet<Decoration>>({
-    create: (state) => update(state, options),
-    update: (_: RangeSet<Decoration>, tr: Transaction) => update(tr.state, options),
-    provide: (field) => EditorView.decorations.from(field),
-  });
-};
-
-type Table = {
-  from: number;
-  to: number;
-  header?: string[];
-  rows?: string[][];
-};
-
-const update = (state: EditorState, _options: TableOptions) => {
-  const builder = new RangeSetBuilder<Decoration>();
-  const cursor = state.selection.main.head;
-
-  const tables: Table[] = [];
-  const getTable = () => tables[tables.length - 1];
-  const getRow = () => {
-    const table = getTable();
-    return table.rows?.[table.rows.length - 1];
-  };
-
-  // Parse table.
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      // Check if cursor is inside text.
-      switch (node.name) {
-        case 'Table': {
-          tables.push({ from: node.from, to: node.to });
-          break;
-        }
-        case 'TableHeader': {
-          getTable().header = [];
-          break;
-        }
-        case 'TableRow': {
-          (getTable().rows ??= []).push([]);
-          break;
-        }
-        case 'TableCell': {
-          const row = getRow();
-          if (row) {
-            row.push(state.sliceDoc(node.from, node.to));
-          } else {
-            getTable().header?.push(state.sliceDoc(node.from, node.to));
-          }
-          break;
-        }
-      }
-    },
-  });
-
-  tables.forEach((table) => {
-    const replace = state.readOnly || cursor < table.from || cursor > table.to;
-    if (replace) {
-      builder.add(
-        table.from,
-        table.to,
-        Decoration.replace({
-          block: true,
-          widget: new TableWidget(table),
-        }),
-      );
-    } else {
-      // Add class for styling.
-      // TODO(burdon): Apply to each line?
-      builder.add(table.from, table.to, Decoration.mark({ class: 'cm-table' }));
-    }
-  });
-
-  return builder.finish();
-};
-
-class TableWidget extends WidgetType {
-  constructor(readonly _table: Table) {
-    super();
-  }
-
-  override eq(other: this): boolean {
-    return (
-      this._table.header?.join() === other._table.header?.join() &&
-      this._table.rows?.join() === other._table.rows?.join()
-    );
-  }
-
-  override toDOM(view: EditorView): HTMLDivElement {
-    const div = document.createElement('div');
-    const table = div.appendChild(document.createElement('table'));
-
-    const header = table.appendChild(document.createElement('thead'));
-    const tr = header.appendChild(document.createElement('tr'));
-    this._table.header?.forEach((cell) => {
-      const th = document.createElement('th');
-      th.setAttribute('class', 'cm-table-head');
-      tr.appendChild(th).textContent = cell;
-    });
-
-    const body = table.appendChild(document.createElement('tbody'));
-    this._table.rows?.forEach((row) => {
-      const tr = body.appendChild(document.createElement('tr'));
-      row.forEach((cell) => {
-        const td = document.createElement('td');
-        td.setAttribute('class', 'cm-table-cell');
-        tr.appendChild(td).textContent = cell;
-      });
-    });
-
-    return div;
-  }
-
-  override ignoreEvent(e: Event): boolean {
-    return !/^mouse/.test(e.type);
-  }
-}

package/src/extensions/mention.ts

@@ -1,41 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { autocompletion, type CompletionContext, type CompletionResult } from '@codemirror/autocomplete';
-import type { Extension } from '@codemirror/state';
-
-import { log } from '@dxos/log';
-
-export type MentionOptions = {
-  debug?: boolean;
-  onSearch: (text: string) => string[];
-};
-
-// TODO(burdon): Can only have a single autocompletion. Merge configuration with autocomplete.
-export const mention = ({ debug, onSearch }: MentionOptions): Extension => {
-  return autocompletion({
-    // TODO(burdon): Not working.
-    activateOnTyping: true,
-    // activateOnTypingDelay: 100,
-    // selectOnOpen: true,
-    closeOnBlur: !debug,
-    // defaultKeymap: false,
-    icons: false,
-    override: [
-      (context: CompletionContext): CompletionResult | null => {
-        log.info('completion context', { context });
-
-        const match = context.matchBefore(/@(\w+)?/);
-        if (!match || (match.from === match.to && !context.explicit)) {
-          return null;
-        }
-
-        return {
-          from: match.from,
-          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({ label: `@${value}` })),
-        };
-      },
-    ],
-  });
-};

package/src/extensions/modes.ts

@@ -1,41 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
-import { vim } from '@replit/codemirror-vim';
-import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
-
-import { singleValueFacet } from '../util';
-
-export type EditorInputConfig = {
-  type?: string;
-  noTabster?: boolean;
-};
-
-export const editorInputMode = singleValueFacet<EditorInputConfig>({});
-
-export const InputModeExtensions: { [mode: string]: Extension } = {
-  default: [],
-  vscode: [
-    // https://github.com/replit/codemirror-vscode-keymap
-    editorInputMode.of({ type: 'vscode' }),
-    keymap.of(vscodeKeymap),
-  ],
-  vim: [
-    // https://github.com/replit/codemirror-vim
-    vim(),
-    editorInputMode.of({ type: 'vim', noTabster: true }),
-    keymap.of([
-      {
-        key: 'Alt-Escape',
-        run: (view) => {
-          // Focus container for tab navigation.
-          view.dom.parentElement?.focus();
-          return true;
-        },
-      },
-    ]),
-  ],
-};

package/src/extensions/outliner/commands.ts

@@ -1,270 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { indentMore } from '@codemirror/commands';
-import { getIndentUnit } from '@codemirror/language';
-import { type ChangeSpec, EditorSelection, type Extension } from '@codemirror/state';
-import { type Command, type EditorView, keymap } from '@codemirror/view';
-
-import { getSelection, selectAll, selectDown, selectNone, selectUp } from './selection';
-import { getRange, treeFacet } from './tree';
-
-//
-// Indentation comnmands.
-//
-
-export const indentItemMore: Command = (view: EditorView) => {
-  const pos = getSelection(view.state).from;
-  const tree = view.state.facet(treeFacet);
-  const current = tree.find(pos);
-  if (current) {
-    const previous = tree.prev(current);
-    if (previous && current.level <= previous.level) {
-      // TODO(burdon): Indent descendants?
-      indentMore(view);
-    }
-  }
-
-  return true;
-};
-
-export const indentItemLess: Command = (view: EditorView) => {
-  const pos = getSelection(view.state).from;
-  const tree = view.state.facet(treeFacet);
-  const current = tree.find(pos);
-  if (current) {
-    if (current.level > 0) {
-      // Unindent current line and all descendants.
-      // NOTE: The markdown extension doesn't provide an indentation service.
-      const indentUnit = getIndentUnit(view.state);
-      const changes: ChangeSpec[] = [];
-      tree.traverse(current, (item) => {
-        const line = view.state.doc.lineAt(item.lineRange.from);
-        changes.push({ from: line.from, to: line.from + indentUnit });
-      });
-
-      if (changes.length > 0) {
-        view.dispatch({ changes });
-      }
-    }
-  }
-
-  return true;
-};
-
-//
-// Moving commands.
-//
-
-export const moveItemDown: Command = (view: EditorView) => {
-  const pos = getSelection(view.state)?.from;
-  const tree = view.state.facet(treeFacet);
-  const current = tree.find(pos);
-  if (current && current.nextSibling) {
-    const next = current.nextSibling;
-    const currentContent = view.state.doc.sliceString(...getRange(tree, current));
-    const nextContent = view.state.doc.sliceString(...getRange(tree, next));
-    const changes: ChangeSpec[] = [
-      {
-        from: current.lineRange.from,
-        to: current.lineRange.from + currentContent.length,
-        insert: nextContent,
-      },
-      {
-        from: next.lineRange.from,
-        to: next.lineRange.from + nextContent.length,
-        insert: currentContent,
-      },
-    ];
-
-    view.dispatch({
-      changes,
-      selection: EditorSelection.cursor(pos + nextContent.length + 1),
-      scrollIntoView: true,
-    });
-  }
-
-  return true;
-};
-
-export const moveItemUp: Command = (view: EditorView) => {
-  const pos = getSelection(view.state)?.from;
-  const tree = view.state.facet(treeFacet);
-  const current = tree.find(pos);
-  if (current && current.prevSibling) {
-    const prev = current.prevSibling;
-    const currentContent = view.state.doc.sliceString(...getRange(tree, current));
-    const prevContent = view.state.doc.sliceString(...getRange(tree, prev));
-    const changes: ChangeSpec[] = [
-      {
-        from: prev.lineRange.from,
-        to: prev.lineRange.from + prevContent.length,
-        insert: currentContent,
-      },
-      {
-        from: current.lineRange.from,
-        to: current.lineRange.from + currentContent.length,
-        insert: prevContent,
-      },
-    ];
-
-    view.dispatch({
-      changes,
-      selection: EditorSelection.cursor(pos - prevContent.length - 1),
-      scrollIntoView: true,
-    });
-  }
-
-  return true;
-};
-
-//
-// Misc commands.
-//
-
-export const deleteItem: Command = (view: EditorView) => {
-  const tree = view.state.facet(treeFacet);
-  const pos = getSelection(view.state).from;
-  const current = tree.find(pos);
-  if (current) {
-    view.dispatch({
-      selection: EditorSelection.cursor(current.lineRange.from),
-      changes: [
-        {
-          from: current.lineRange.from,
-          to: Math.min(current.lineRange.to + 1, view.state.doc.length),
-        },
-      ],
-    });
-  }
-
-  return true;
-};
-
-export const toggleTask: Command = (view: EditorView) => {
-  const tree = view.state.facet(treeFacet);
-  const pos = getSelection(view.state)?.from;
-  const current = tree.find(pos);
-  if (current) {
-    const type = current.type === 'task' ? 'bullet' : 'task';
-    const indent = ' '.repeat(getIndentUnit(view.state) * current.level);
-    view.dispatch({
-      changes: [
-        {
-          from: current.lineRange.from,
-          to: current.contentRange.from,
-          insert: indent + (type === 'task' ? '- [ ] ' : '- '),
-        },
-      ],
-    });
-  }
-
-  return true;
-};
-
-export const commands = (): Extension =>
-  keymap.of([
-    //
-    // Indentation.
-    //
-    {
-      key: 'Tab',
-      preventDefault: true,
-      run: indentItemMore,
-      shift: indentItemLess,
-    },
-
-    //
-    // Continuation.
-    //
-    {
-      key: 'Enter',
-      shift: (view) => {
-        const pos = getSelection(view.state).from;
-        const insert = '\n  '; // TODO(burdon): Fix parsing.
-        view.dispatch({
-          changes: [{ from: pos, to: pos, insert }],
-          selection: EditorSelection.cursor(pos + insert.length),
-        });
-        return true;
-      },
-    },
-
-    //
-    // Navigation.
-    //
-    {
-      key: 'ArrowDown',
-      // Jump to next item (default moves to end of currentline).
-      run: (view) => {
-        const tree = view.state.facet(treeFacet);
-        const item = tree.find(getSelection(view.state).from);
-        if (
-          item &&
-          view.state.doc.lineAt(item.lineRange.to).number - view.state.doc.lineAt(item.lineRange.from).number === 0
-        ) {
-          const next = tree.next(item);
-          if (next) {
-            view.dispatch({ selection: EditorSelection.cursor(next.contentRange.from) });
-            return true;
-          }
-        }
-
-        return false;
-      },
-    },
-
-    //
-    // Line selection.
-    // TODO(burdon): Shortcut to select current item?
-    //
-    {
-      key: 'Mod-a',
-      preventDefault: true,
-      run: selectAll,
-    },
-    {
-      key: 'Escape',
-      preventDefault: true,
-      run: selectNone,
-    },
-    {
-      key: 'ArrowUp',
-      shift: selectUp,
-    },
-    {
-      key: 'ArrowDown',
-      shift: selectDown,
-    },
-
-    //
-    // Move.
-    //
-    {
-      key: 'Alt-ArrowDown',
-      preventDefault: true,
-      run: moveItemDown,
-    },
-    {
-      key: 'Alt-ArrowUp',
-      preventDefault: true,
-      run: moveItemUp,
-    },
-    //
-    // Delete.
-    //
-    {
-      key: 'Mod-Backspace',
-      preventDefault: true,
-      run: deleteItem,
-    },
-    //
-    // Misc.
-    //
-    {
-      key: 'Alt-t',
-      preventDefault: true,
-      run: toggleTask,
-    },
-  ]);

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

@@ -1,33 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import { EditorSelection, EditorState } from '@codemirror/state';
-import { describe, test } from 'vitest';
-
-import { editor } from './editor';
-import { outlinerTree, treeFacet } from './tree';
-
-const extensions = [markdown({ base: markdownLanguage }), outlinerTree(), editor()];
-
-describe('editor', () => {
-  test('empty', ({ expect }) => {
-    const state = EditorState.create({ extensions });
-    const tree = state.facet(treeFacet);
-    expect(tree).to.exist;
-  });
-
-  test('prevent moving out of range', ({ expect }) => {
-    const state = EditorState.create({ doc: '- [ ] ', extensions });
-    const spec = state.update({ selection: EditorSelection.cursor(1) });
-    expect(spec.state.selection.ranges[0].from).to.eq(6);
-  });
-
-  test.skip('prevent deleting task marker', ({ expect }) => {
-    const state = EditorState.create({ doc: '- [ ] ', extensions });
-    state.update({ selection: EditorSelection.cursor(6) });
-    const spec = state.update({ changes: { from: 5, to: 6 } });
-    expect(spec.state.doc.toString()).to.eq('- [ ] ');
-  });
-});

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;
-  }),
-];