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

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/changes.ts

@@ -56,8 +56,9 @@ export const adjustChanges = () => {
                 // Check for URL.
                 const url = getValidUrl(update.view.state.sliceDoc(fromB, toB));
                 if (url) {
+                  // Check if pasting inside existing link.
                   const node = tree.resolveInner(fromA, -1);
-                  const invalidPositions = new Set(['Link', 'LinkMark', 'Code', 'CodeText', 'FencedCode', 'URL']);
+                  const invalidPositions = new Set(['Code', 'CodeText', 'FencedCode', 'Link', 'LinkMark', 'URL']);
                   if (!invalidPositions.has(node?.name)) {
                     const replacedText = tr.startState.sliceDoc(fromA, toA);
                     adjustments.push({ from: fromA, to: toB, insert: createLink(url, replacedText) });
@@ -84,7 +85,7 @@ export const adjustChanges = () => {
           }
         }
 
-        // TODO(burdon): Is this the right way to augment changes?
+        // TODO(burdon): Is this the right way to augment changes? Alt: EditorState.transactionFilter
         if (adjustments.length) {
           setTimeout(() => {
             update.view.dispatch(

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;
@@ -129,10 +129,10 @@ class TextWidget extends WidgetType {
 }
 
 const hide = Decoration.replace({});
-const blockQuote = Decoration.line({ class: mx('cm-blockquote') });
-const fencedCodeLine = Decoration.line({ class: mx('cm-code cm-codeblock-line') });
-const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-first') });
-const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-last') });
+const blockQuote = Decoration.line({ class: 'cm-blockquote' });
+const fencedCodeLine = Decoration.line({ class: 'cm-code cm-codeblock-line' });
+const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-start') });
+const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-end') });
 const commentBlockLine = fencedCodeLine;
 const commentBlockLineFirst = fencedCodeLineFirst;
 const commentBlockLineLast = fencedCodeLineLast;
@@ -277,7 +277,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         // Set indentation.
         const list = getCurrentListLevel();
         const width = list.type === 'OrderedList' ? orderedListIndentationWidth : bulletListIndentationWidth;
-        const offset = ((list.level ?? 0) + 1) * width;
+        const offset = (options?.listPaddingLeft ?? 0) + ((list.level ?? 0) + 1) * width;
         if (node.from === line.to - 1) {
           // Abort if only the hyphen is typed.
           return false;
@@ -285,7 +285,6 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
         // Add line decoration for the continuation indent.
         // TODO(burdon): Bug if indentation is more than one indentation unit (e.g., 4 spaces) from the previous line.
-
         deco.add(
           line.from,
           line.from,
@@ -406,7 +405,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
           }
 
           const first = block.from <= node.from;
-          const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
+          const last = block.to >= node.to && /```$/.test(state.doc.sliceString(block.from, block.to));
           deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
 
           const editing = editingRange(state, node, focus);
@@ -521,6 +520,8 @@ export interface DecorateOptions {
   selectionChangeDelay?: number;
   numberedHeadings?: { from: number; to?: number };
   renderLinkButton?: RenderCallback<{ url: string }>;
+  // TODO(burdon): Additional padding for each line.
+  listPaddingLeft?: number;
 }
 
 export const decorateMarkdown = (options: DecorateOptions = {}) => {

package/src/extensions/markdown/formatting.ts

@@ -5,13 +5,13 @@
 import { snippet } from '@codemirror/autocomplete';
 import { syntaxTree } from '@codemirror/language';
 import {
-  type Extension,
-  type StateCommand,
-  type EditorState,
   type ChangeSpec,
-  type Text,
   EditorSelection,
+  type Extension,
+  type EditorState,
   type Line,
+  type StateCommand,
+  type Text,
 } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';

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';

package/src/extensions/markdown/styles.ts

@@ -59,11 +59,11 @@ export const formattingStyles = EditorView.theme({
     background: 'var(--dx-cmCodeblock)',
     paddingInline: '1rem !important',
   },
-  '& .cm-codeblock-first': {
+  '& .cm-codeblock-start': {
     borderTopLeftRadius: '.25rem',
     borderTopRightRadius: '.25rem',
   },
-  '& .cm-codeblock-last': {
+  '& .cm-codeblock-end': {
     borderBottomLeftRadius: '.25rem',
     borderBottomRightRadius: '.25rem',
   },
@@ -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/modes.ts

@@ -6,18 +6,17 @@ 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 { S } from '@dxos/echo-schema';
+import { Schema } from 'effect';
 
 import { singleValueFacet } from '../util';
 
 export const EditorViewModes = ['preview', 'readonly', 'source'] as const;
-export const EditorViewMode = S.Union(...EditorViewModes.map((mode) => S.Literal(mode)));
-export type EditorViewMode = S.Schema.Type<typeof EditorViewMode>;
+export const EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
+export type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;
 
 export const EditorInputModes = ['default', 'vim', 'vscode'] as const;
-export const EditorInputMode = S.Union(...EditorInputModes.map((mode) => S.Literal(mode)));
-export type EditorInputMode = S.Schema.Type<typeof EditorInputMode>;
+export const EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
+export type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;
 
 export type EditorInputConfig = {
   type?: string;

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