@dxos/ui-editor 0.0.0

package/src/extensions/markdown/table.ts

@@ -0,0 +1,150 @@
+//
+// 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) {
+    return (
+      this._table.header?.join() === other._table.header?.join() &&
+      this._table.rows?.join() === other._table.rows?.join()
+    );
+  }
+
+  override ignoreEvent(e: Event): boolean {
+    return !/^mouse/.test(e.type);
+  }
+
+  override toDOM(_view: EditorView) {
+    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;
+  }
+}

package/src/extensions/mention.ts

@@ -0,0 +1,41 @@
+//
+// 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/modal.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect, StateField } from '@codemirror/state';
+
+export const modalStateEffect = StateEffect.define<boolean>();
+
+/**
+ * Determines if a modal dialog (e.g., popover) is active.
+ */
+export const modalStateField = StateField.define<boolean>({
+  create: () => false,
+  update: (value, tr) => {
+    let newValue = value;
+    for (const effect of tr.effects) {
+      if (effect.is(modalStateEffect)) {
+        newValue = effect.value;
+      }
+    }
+
+    return newValue;
+  },
+});

package/src/extensions/modes.ts

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

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

@@ -0,0 +1,33 @@
+//
+// 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('- [ ] ');
+  });
+});