@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

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,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('- [ ] ');
+  });
+});