@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/src/extensions/json.ts

@@ -0,0 +1,56 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { json, jsonParseLinter } from '@codemirror/lang-json';
+import { type LintSource, linter } from '@codemirror/lint';
+import { type Extension } from '@codemirror/state';
+import Ajv, { type ValidateFunction } from 'ajv';
+
+import { type JsonSchemaType } from '@dxos/echo-schema';
+
+export type JsonExtensionsOptions = {
+  schema?: JsonSchemaType;
+};
+
+export const createJsonExtensions = ({ schema }: JsonExtensionsOptions = {}): Extension => {
+  let lintSource: LintSource = jsonParseLinter();
+  if (schema) {
+    const ajv = new Ajv({ allErrors: false });
+    const validate = ajv.compile(schema);
+    lintSource = schemaLinter(validate);
+  }
+
+  return [json(), linter(lintSource)];
+};
+
+const schemaLinter =
+  (validate: ValidateFunction): LintSource =>
+  (view) => {
+    try {
+      const jsonText = view.state.doc.toString();
+      const jsonData = JSON.parse(jsonText);
+      const valid = validate(jsonData);
+      if (valid) {
+        return [];
+      }
+
+      return (
+        validate.errors?.map((err: any) => ({
+          from: 0,
+          to: jsonText.length,
+          severity: 'error',
+          message: `${err.instancePath || '(root)'} ${err.message}`,
+        })) ?? []
+      );
+    } catch (err: unknown) {
+      return [
+        {
+          from: 0,
+          to: view.state.doc.length,
+          severity: 'error',
+          message: 'Invalid JSON: ' + (err as Error).message,
+        },
+      ];
+    }
+  };

package/src/extensions/markdown/bundle.ts

@@ -12,11 +12,13 @@ import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 
 import { type ThemeMode } from '@dxos/react-ui';
+import { isNotFalsy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
+  indentWithTab?: boolean;
 };
 
 /**
@@ -27,7 +29,7 @@ export type MarkdownBundleOptions = {
  * https://codemirror.net/docs/community
  * https://codemirror.net/docs/ref/#codemirror.basicSetup
  */
-export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions = {}): Extension[] => {
+export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): Extension[] => {
   return [
     // Main extension.
     // https://github.com/codemirror/lang-markdown
@@ -56,14 +58,16 @@ export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions =
     // Custom styles.
     syntaxHighlighting(markdownHighlightStyle()),
 
-    keymap.of([
-      // https://codemirror.net/docs/ref/#commands.indentWithTab
-      indentWithTab,
+    keymap.of(
+      [
+        // https://codemirror.net/docs/ref/#commands.indentWithTab
+        options.indentWithTab !== false && indentWithTab,
 
-      // https://codemirror.net/docs/ref/#commands.defaultKeymap
-      ...defaultKeymap,
-      ...completionKeymap,
-      ...lintKeymap,
-    ]),
+        // https://codemirror.net/docs/ref/#commands.defaultKeymap
+        ...defaultKeymap,
+        ...completionKeymap,
+        ...lintKeymap,
+      ].filter(isNotFalsy),
+    ),
   ];
 };

package/src/extensions/markdown/decorate.ts

@@ -36,7 +36,7 @@ const Unicode = {
 //
 
 class HorizontalRuleWidget extends WidgetType {
-  override toDOM() {
+  override toDOM(): HTMLSpanElement {
     const el = document.createElement('span');
     el.className = 'cm-hr';
     return el;
@@ -51,12 +51,12 @@ class LinkButton extends WidgetType {
     super();
   }
 
-  override eq(other: this) {
+  override eq(other: this): boolean {
     return this.url === other.url;
   }
 
   // TODO(burdon): Create icon and link directly without react?
-  override toDOM(view: EditorView) {
+  override toDOM(view: EditorView): HTMLSpanElement {
     const el = document.createElement('span');
     this.render(el, { url: this.url }, view);
     return el;
@@ -68,11 +68,11 @@ class CheckboxWidget extends WidgetType {
     super();
   }
 
-  override eq(other: this) {
+  override eq(other: this): boolean {
     return this._checked === other._checked;
   }
 
-  override toDOM(view: EditorView) {
+  override toDOM(view: EditorView): HTMLSpanElement {
     const input = document.createElement('input');
     input.className = 'cm-task-checkbox dx-checkbox';
     input.type = 'checkbox';
@@ -105,7 +105,7 @@ class CheckboxWidget extends WidgetType {
     return span;
   }
 
-  override ignoreEvent() {
+  override ignoreEvent(): boolean {
     return false;
   }
 }
@@ -118,7 +118,7 @@ class TextWidget extends WidgetType {
     super();
   }
 
-  override toDOM() {
+  override toDOM(): HTMLSpanElement {
     const el = document.createElement('span');
     if (this.className) {
       el.className = this.className;

package/src/extensions/markdown/image.ts

@@ -99,11 +99,11 @@ class ImageWidget extends WidgetType {
     super();
   }
 
-  override eq(other: this) {
+  override eq(other: this): boolean {
     return this._url === other._url;
   }
 
-  override toDOM(view: EditorView) {
+  override toDOM(view: EditorView): HTMLImageElement {
     const img = document.createElement('img');
     img.setAttribute('src', this._url);
     img.setAttribute('class', 'cm-image');

package/src/extensions/markdown/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './editorAction';
+export * from './action';
 export * from './bundle';
 export * from './debug';
 export * from './decorate';
@@ -10,5 +10,4 @@ export * from './formatting';
 export * from './highlight';
 export * from './image';
 export * from './link';
-export * from './outliner';
 export * from './table';

package/src/extensions/markdown/styles.ts

@@ -72,8 +72,9 @@ export const formattingStyles = EditorView.theme({
    * Task list.
    */
   '& .cm-task': {
-    display: 'inline-block',
+    display: 'inline-flex',
     width: `${bulletListIndentationWidth}px`,
+    height: '20px',
   },
   '& .cm-task-checkbox': {
     display: 'grid',

package/src/extensions/markdown/table.ts

@@ -106,14 +106,14 @@ class TableWidget extends WidgetType {
     super();
   }
 
-  override eq(other: this) {
+  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) {
+  override toDOM(view: EditorView): HTMLDivElement {
     const div = document.createElement('div');
     const table = div.appendChild(document.createElement('table'));
 
@@ -138,7 +138,7 @@ class TableWidget extends WidgetType {
     return div;
   }
 
-  override ignoreEvent(e: Event) {
+  override ignoreEvent(e: Event): boolean {
     return !/^mouse/.test(e.type);
   }
 }

package/src/extensions/outliner/commands.ts

@@ -0,0 +1,242 @@
+//
+// 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 toggleTask: Command = (view: EditorView) => {
+  const pos = getSelection(view.state)?.from;
+  const tree = view.state.facet(treeFacet);
+  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,
+    },
+    //
+    // Misc.
+    //
+    {
+      key: 'Alt-t',
+      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('- [ ] ');
+  });
+});

package/src/extensions/outliner/editor.ts

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

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './outliner';
+export * from './tree';