@dxos/react-ui-editor 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/src/extensions/markdown/debug.ts

@@ -3,10 +3,10 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type EditorState, StateField } from '@codemirror/state';
+import { type EditorState, type Extension, StateField } from '@codemirror/state';
 import { type TreeCursor } from '@lezer/common';
 
-export const debugTree = (cb: (tree: DebugNode) => void) =>
+export const debugTree = (cb: (tree: DebugNode) => void): Extension =>
   StateField.define({
     create: (state) => cb(convertTreeToJson(state)),
     update: (value, tr) => cb(convertTreeToJson(tr.state)),

package/src/extensions/markdown/decorate.ts

@@ -15,6 +15,7 @@ import { image } from './image';
 import { formattingStyles, bulletListIndentationWidth, orderedListIndentationWidth } from './styles';
 import { table } from './table';
 import { theme, type HeadingLevel } from '../../styles';
+import { type RenderCallback } from '../../types';
 import { wrapWithCatch } from '../../util';
 
 /**
@@ -35,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;
@@ -45,19 +46,19 @@ class HorizontalRuleWidget extends WidgetType {
 class LinkButton extends WidgetType {
   constructor(
     private readonly url: string,
-    private readonly render: (el: HTMLElement, url: string) => void,
+    private readonly render: RenderCallback<{ url: string }>,
   ) {
     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, this.url);
+    this.render(el, { url: this.url }, view);
     return el;
   }
 }
@@ -67,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';
@@ -104,7 +105,7 @@ class CheckboxWidget extends WidgetType {
     return span;
   }
 
-  override ignoreEvent() {
+  override ignoreEvent(): boolean {
     return false;
   }
 }
@@ -117,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;
@@ -128,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;
@@ -276,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;
@@ -284,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,
@@ -405,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);
@@ -519,7 +519,9 @@ export interface DecorateOptions {
    */
   selectionChangeDelay?: number;
   numberedHeadings?: { from: number; to?: number };
-  renderLinkButton?: (el: Element, url: string) => void;
+  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,19 +5,19 @@
 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';
 import { useMemo } from 'react';
 
-import { type ReactiveObject } from '@dxos/live-object';
+import { type Live } from '@dxos/live-object';
 
 import { type EditorToolbarState } from '../../components';
 
@@ -1250,7 +1250,7 @@ export const getFormatting = (state: EditorState): Formatting => {
 /**
  * Hook provides an extension to compute the current formatting state.
  */
-export const useFormattingState = (state: ReactiveObject<EditorToolbarState>): Extension => {
+export const useFormattingState = (state: Live<EditorToolbarState>): Extension => {
   return useMemo(
     () =>
       EditorView.updateListener.of((update) => {

package/src/extensions/markdown/image.ts

@@ -51,16 +51,6 @@ export const image = (_options: ImageOptions = {}): Extension => {
   ];
 };
 
-const preloaded = new Set<string>();
-
-const preloadImage = (url: string) => {
-  if (!preloaded.has(url)) {
-    const img = document.createElement('img');
-    img.src = url;
-    preloaded.add(url);
-  }
-};
-
 const buildDecorations = (from: number, to: number, state: EditorState) => {
   const decorations: Range<Decoration>[] = [];
   const cursor = state.selection.main.head;
@@ -94,16 +84,26 @@ const buildDecorations = (from: number, to: number, state: EditorState) => {
   return decorations;
 };
 
+const preloaded = new Set<string>();
+
+const preloadImage = (url: string) => {
+  if (!preloaded.has(url)) {
+    const img = document.createElement('img');
+    img.src = url;
+    preloaded.add(url);
+  }
+};
+
 class ImageWidget extends WidgetType {
   constructor(readonly _url: string) {
     super();
   }
 
-  override eq(other: this) {
-    return this._url === (other as any as ImageWidget)._url;
+  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');
@@ -113,6 +113,7 @@ class ImageWidget extends WidgetType {
     } else {
       img.classList.add('cm-loaded-image');
     }
+
     return img;
   }
 }

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

@@ -9,30 +9,39 @@ import { type SyntaxNode } from '@lezer/common';
 
 import { tooltipContent } from '@dxos/react-ui-theme';
 
-export const linkTooltip = (render: (el: HTMLElement, url: string) => void) => {
-  return hoverTooltip((view, pos, side) => {
-    const syntax = syntaxTree(view.state).resolveInner(pos, side);
-    let link = null;
-    for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
-      link = node.name === 'Link' ? node : null;
-    }
+import { type RenderCallback } from '../../types';
 
-    const url = link && link.getChild('URL');
-    if (!url || !link) {
-      return null;
-    }
+export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
+  return hoverTooltip(
+    (view, pos, side) => {
+      const syntax = syntaxTree(view.state).resolveInner(pos, side);
+      let link = null;
+      for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
+        link = node.name === 'Link' ? node : null;
+      }
 
-    const urlText = view.state.sliceDoc(url.from, url.to);
-    return {
-      pos: link.from,
-      end: link.to,
-      above: true,
-      create: () => {
-        const el = document.createElement('div');
-        el.className = tooltipContent({}, 'pli-2 plb-1');
-        render(el, urlText);
-        return { dom: el, offset: { x: 0, y: 4 } };
-      },
-    };
-  });
+      const url = link && link.getChild('URL');
+      if (!url || !link) {
+        return null;
+      }
+
+      const urlText = view.state.sliceDoc(url.from, url.to);
+      return {
+        pos: link.from,
+        end: link.to,
+        // NOTE: Forcing above causes the tooltip to flicker.
+        // above: true,
+        create: () => {
+          const el = document.createElement('div');
+          el.className = tooltipContent({});
+          renderTooltip(el, { url: urlText }, view);
+          return { dom: el, offset: { x: 0, y: 4 } };
+        },
+      };
+    },
+    {
+      // NOTE: 0 = default of 300ms.
+      hoverTime: 1,
+    },
+  );
 };

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