@dxos/react-ui-editor 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/extensions/markdown/table.ts

@@ -1,150 +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 { type CompletionContext, type CompletionResult, autocompletion } 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;
-  ignoreEscape?: 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', ignoreEscape: 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('- [ ] ');
-  });
-});