@dxos/react-ui-editor 0.8.4-main.3a94e84 → 0.8.4-main.3c1ae3b

package/src/extensions/markdown/decorate.ts

@@ -3,20 +3,21 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder, type EditorState, StateEffect } from '@codemirror/state';
-import { EditorView, Decoration, type DecorationSet, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { type EditorState, Prec, RangeSetBuilder, StateEffect } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 import { type SyntaxNodeRef } from '@lezer/common';
 
 import { invariant } from '@dxos/invariant';
 import { mx } from '@dxos/react-ui-theme';
 
+import { type HeadingLevel, markdownTheme } from '../../styles';
+import { type RenderCallback } from '../../types';
+import { wrapWithCatch } from '../../util';
+
 import { adjustChanges } from './changes';
 import { image } from './image';
-import { formattingStyles, bulletListIndentationWidth, orderedListIndentationWidth } from './styles';
+import { bulletListIndentationWidth, formattingStyles, orderedListIndentationWidth } from './styles';
 import { table } from './table';
-import { theme, type HeadingLevel } from '../../styles';
-import { type RenderCallback } from '../../types';
-import { wrapWithCatch } from '../../util';
 
 /**
  * Unicode characters.
@@ -51,12 +52,12 @@ class LinkButton extends WidgetType {
     super();
   }
 
-  override eq(other: this): boolean {
+  override eq(other: this) {
     return this.url === other.url;
   }
 
   // TODO(burdon): Create icon and link directly without react?
-  override toDOM(view: EditorView): HTMLSpanElement {
+  override toDOM(view: EditorView) {
     const el = document.createElement('span');
     this.render(el, { url: this.url }, view);
     return el;
@@ -68,11 +69,15 @@ class CheckboxWidget extends WidgetType {
     super();
   }
 
-  override eq(other: this): boolean {
+  override eq(other: this) {
     return this._checked === other._checked;
   }
 
-  override toDOM(view: EditorView): HTMLSpanElement {
+  override ignoreEvent() {
+    return false;
+  }
+
+  override toDOM(view: EditorView) {
     const input = document.createElement('input');
     input.className = 'cm-task-checkbox dx-checkbox';
     input.type = 'checkbox';
@@ -104,10 +109,6 @@ class CheckboxWidget extends WidgetType {
     span.appendChild(input);
     return span;
   }
-
-  override ignoreEvent(): boolean {
-    return false;
-  }
 }
 
 class TextWidget extends WidgetType {
@@ -168,8 +169,8 @@ const autoHideTags = new Set([
 type NumberingLevel = { type: string; from: number; to: number; level: number; number: number };
 
 const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boolean) => {
-  const deco = new RangeSetBuilder<Decoration>();
-  const atomicDeco = new RangeSetBuilder<Decoration>();
+  const decoRanges: { from: number; to: number; deco: Decoration }[] = [];
+  const atomicDecoRanges: { from: number; to: number; deco: Decoration }[] = [];
   const { state } = view;
 
   // Header numbering.
@@ -233,10 +234,10 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         const mark = node.node.firstChild!;
         if (mark?.name === 'HeaderMark') {
           const { from, to = 6 } = options.numberedHeadings ?? {};
-          const text = view.state.sliceDoc(node.from, node.to);
+          const text = state.sliceDoc(node.from, node.to);
           const len = text.match(/[#\s]+/)![0].length;
           if (!from || level < from || level > to) {
-            atomicDeco.add(mark.from, mark.from + len, hide);
+            atomicDecoRanges.push({ from: mark.from, to: mark.from + len, deco: hide });
           } else {
             // TODO(burdon): Number format/style.
             const num =
@@ -246,13 +247,13 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
                 .join('.') + ' ';
 
             if (num.length) {
-              atomicDeco.add(
-                mark.from,
-                mark.from + len,
-                Decoration.replace({
-                  widget: new TextWidget(num, theme.heading(level)),
+              atomicDecoRanges.push({
+                from: mark.from,
+                to: mark.from + len,
+                deco: Decoration.replace({
+                  widget: new TextWidget(num, markdownTheme.heading(level)),
                 }),
-              );
+              });
             }
           }
         }
@@ -285,16 +286,16 @@ 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,
-          Decoration.line({
+        decoRanges.push({
+          from: line.from,
+          to: line.from,
+          deco: Decoration.line({
             class: 'cm-list-item',
             attributes: {
               style: `padding-left: ${offset}px; text-indent: -${width}px;`,
             },
           }),
-        );
+        });
 
         break;
       }
@@ -313,16 +314,16 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         const label = list.type === 'OrderedList' ? `${++list.number}.` : Unicode.bulletSmall;
         const line = state.doc.lineAt(node.from);
         const to = state.doc.sliceString(node.to, node.to + 1) === ' ' ? node.to + 1 : node.to;
-        atomicDeco.add(
-          line.from,
+        atomicDecoRanges.push({
+          from: line.from,
           to,
-          Decoration.replace({
+          deco: Decoration.replace({
             widget: new TextWidget(
               label,
               list.type === 'OrderedList' ? 'cm-list-mark cm-list-mark-ordered' : 'cm-list-mark cm-list-mark-bullet',
             ),
           }),
-        );
+        });
         break;
       }
 
@@ -331,7 +332,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         // Check if the next character is a space and if so, include it in the replacement.
         const line = state.doc.lineAt(node.from);
         const to = state.doc.sliceString(node.to, node.to + 1) === ' ' ? node.to + 1 : node.to;
-        atomicDeco.add(line.from, to, checked ? checkedTask : uncheckedTask);
+        atomicDecoRanges.push({ from: line.from, to, deco: checked ? checkedTask : uncheckedTask });
         break;
       }
 
@@ -344,7 +345,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         const quoteMark = node.node.getChild('QuoteMark');
         const paragraph = node.node.getChild('Paragraph');
         if (!editing && quoteMark && paragraph) {
-          atomicDeco.add(quoteMark.from, paragraph.from, hide);
+          atomicDecoRanges.push({ from: quoteMark.from, to: paragraph.from, deco: hide });
         }
 
         for (const block of view.viewportLineBlocks) {
@@ -355,7 +356,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
             break;
           }
 
-          deco.add(block.from, block.from, blockQuote);
+          decoRanges.push({ from: block.from, to: block.from, deco: blockQuote });
         }
 
         break;
@@ -378,14 +379,14 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
           const isFirst = block.from <= node.from;
           const isLast = block.to >= node.to && /^(\s>)*-->$/.test(state.doc.sliceString(block.from, block.to));
 
-          deco.add(
-            block.from,
-            block.from,
-            isFirst ? commentBlockLineFirst : isLast ? commentBlockLineLast : commentBlockLine,
-          );
+          decoRanges.push({
+            from: block.from,
+            to: block.from,
+            deco: isFirst ? commentBlockLineFirst : isLast ? commentBlockLineLast : commentBlockLine,
+          });
 
           if (!editing && (isFirst || isLast)) {
-            atomicDeco.add(block.from, block.to, hide);
+            atomicDecoRanges.push({ from: block.from, to: block.to, deco: hide });
           }
         }
         break;
@@ -406,11 +407,15 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
           const first = block.from <= node.from;
           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);
+          decoRanges.push({
+            from: block.from,
+            to: block.from,
+            deco: first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine,
+          });
 
           const editing = editingRange(state, node, focus);
           if (!editing && (first || last)) {
-            atomicDeco.add(block.from, block.to, hide);
+            atomicDecoRanges.push({ from: block.from, to: block.to, deco: hide });
           }
         }
         return false;
@@ -426,14 +431,17 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         const editing = editingRange(state, node, focus);
         if (urlNode && marks.length >= 2) {
           const url = state.sliceDoc(urlNode.from, urlNode.to);
+          if (options.skip?.({ name: 'Link', url })) {
+            break;
+          }
           if (!editing) {
-            atomicDeco.add(node.from, marks[0].to, hide);
+            atomicDecoRanges.push({ from: node.from, to: marks[0].to, deco: hide });
           }
 
-          deco.add(
-            marks[0].to,
-            marks[1].from,
-            Decoration.mark({
+          decoRanges.push({
+            from: marks[0].to,
+            to: marks[1].from,
+            deco: Decoration.mark({
               tagName: 'a',
               attributes: {
                 class: 'cm-link',
@@ -442,15 +450,16 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
                 target: '_blank',
               },
             }),
-          );
+          });
+
           if (!editing) {
-            atomicDeco.add(
-              marks[1].from,
-              node.to,
-              options.renderLinkButton
+            atomicDecoRanges.push({
+              from: marks[1].from,
+              to: node.to,
+              deco: options.renderLinkButton
                 ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
                 : hide,
-            );
+            });
           }
         }
         break;
@@ -462,7 +471,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
       case 'HorizontalRule': {
         if (!editingRange(state, node, focus)) {
-          deco.add(node.from, node.to, horizontalRule);
+          decoRanges.push({ from: node.from, to: node.to, deco: horizontalRule });
         }
         break;
       }
@@ -470,7 +479,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       default: {
         if (autoHideTags.has(node.name)) {
           if (!editingRange(state, node.node.parent!, focus)) {
-            atomicDeco.add(node.from, node.to, hide);
+            atomicDecoRanges.push({ from: node.from, to: node.to, deco: hide });
           }
         }
       }
@@ -493,18 +502,35 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       tree.iterate({
         from,
         to,
-        enter: wrapWithCatch(enterNode),
-        leave: wrapWithCatch(leaveNode),
+        enter: wrapWithCatch(enterNode, 'decorate.enter'),
+        leave: wrapWithCatch(leaveNode, 'decorate.leave'),
       });
     }
   } else {
     // NOTE: If line numbering then we must iterate from the start of document.
     tree.iterate({
-      enter: wrapWithCatch(enterNode),
-      leave: wrapWithCatch(leaveNode),
+      enter: wrapWithCatch(enterNode, 'decorate.enter'),
+      leave: wrapWithCatch(leaveNode, 'decorate.leave'),
     });
   }
 
+  // Sort and build decoration sets.
+  const sortRanges = (a: { from: number; to: number }, b: { from: number; to: number }) =>
+    a.from - b.from || a.to - b.to;
+
+  decoRanges.sort(sortRanges);
+  atomicDecoRanges.sort(sortRanges);
+
+  const deco = new RangeSetBuilder<Decoration>();
+  for (const { from, to, deco: d } of decoRanges) {
+    deco.add(from, to, d);
+  }
+
+  const atomicDeco = new RangeSetBuilder<Decoration>();
+  for (const { from, to, deco: d } of atomicDecoRanges) {
+    atomicDeco.add(from, to, d);
+  }
+
   return {
     deco: deco.finish(),
     atomicDeco: atomicDeco.finish(),
@@ -513,15 +539,20 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
 const forceUpdate = StateEffect.define<null>();
 
+export type NodeData = { name: 'Link'; url: string } | { name: 'Image'; url: string };
+
 export interface DecorateOptions {
   /**
    * Prevents triggering decorations as the cursor moves through the document.
    */
   selectionChangeDelay?: number;
   numberedHeadings?: { from: number; to?: number };
-  renderLinkButton?: RenderCallback<{ url: string }>;
   // TODO(burdon): Additional padding for each line.
   listPaddingLeft?: number;
+  // TODO(burdon): Use consistently.
+  skip?: (node: NodeData) => boolean;
+  // TODO(burdon): Remove.
+  renderLinkButton?: RenderCallback<{ url: string }>;
 }
 
 export const decorateMarkdown = (options: DecorateOptions = {}) => {
@@ -577,9 +608,9 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
       },
       {
         provide: (plugin) => [
-          EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
+          Prec.low(EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)),
           EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
-          EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none),
+          EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
         ],
       },
     ),

package/src/extensions/markdown/formatting.test.ts

@@ -7,21 +7,21 @@ import { EditorState, type StateCommand } from '@codemirror/state';
 import { describe, expect, test } from 'vitest';
 
 import {
+  type Formatting,
+  Inline,
+  List,
   addBlockquote,
   addCodeblock,
   addLink,
   addList,
   addStyle,
   getFormatting,
-  removeStyle,
-  removeLink,
-  removeList,
   removeBlockquote,
   removeCodeblock,
+  removeLink,
+  removeList,
+  removeStyle,
   setHeading,
-  Inline,
-  List,
-  type Formatting,
 } from './formatting';
 
 export const emptyFormatting: Formatting = {

package/src/extensions/markdown/formatting.ts

@@ -7,20 +7,16 @@ import { syntaxTree } from '@codemirror/language';
 import {
   type ChangeSpec,
   EditorSelection,
-  type Extension,
   type EditorState,
+  type Extension,
   type Line,
   type StateCommand,
   type Text,
 } from '@codemirror/state';
-import { EditorView, keymap, type ViewUpdate } from '@codemirror/view';
-import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
-import { useCallback, useMemo } from 'react';
+import { EditorView, type ViewUpdate, keymap } from '@codemirror/view';
+import { type SyntaxNode, type SyntaxNodeRef } from '@lezer/common';
 
 import { debounceAndThrottle } from '@dxos/async';
-import { type Live } from '@dxos/live-object';
-
-import { type EditorToolbarState } from '../../components';
 
 // Markdown refs:
 // https://github.github.com/gfm
@@ -1251,17 +1247,19 @@ export const getFormatting = (state: EditorState): Formatting => {
 /**
  * Hook provides an extension to compute the current formatting state.
  */
-export const useFormattingState = (state: Live<EditorToolbarState>): Extension => {
-  const handleUpdate = useCallback(
+export const formattingListener = (stateProvider: () => Formatting | undefined, delay = 100): Extension => {
+  return EditorView.updateListener.of(
     debounceAndThrottle((update: ViewUpdate) => {
       if (update.docChanged || update.selectionSet) {
+        const state = stateProvider();
+        if (!state) {
+          return;
+        }
+
         Object.entries(getFormatting(update.state)).forEach(([key, active]) => {
           state[key as keyof Formatting] = active as any;
         });
       }
-    }, 100),
-    [state],
+    }, delay),
   );
-
-  return useMemo(() => EditorView.updateListener.of(handleUpdate), [handleUpdate]);
 };

package/src/extensions/markdown/highlight.ts

@@ -4,10 +4,10 @@
 
 import { markdownLanguage } from '@codemirror/lang-markdown';
 import { HighlightStyle } from '@codemirror/language';
-import { tags, styleTags, Tag } from '@lezer/highlight';
+import { Tag, styleTags, tags } from '@lezer/highlight';
 import { type MarkdownConfig, Table } from '@lezer/markdown';
 
-import { fontBody, theme } from '../../styles';
+import { fontBody, markdownTheme } from '../../styles';
 
 /**
  * Custom tags defined and processed by the GFM lezer extension.
@@ -114,7 +114,7 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
           markdownTags.LinkReference,
           markdownTags.ListMark,
         ],
-        class: theme.mark,
+        class: markdownTheme.mark,
       },
 
       // Markdown marks.
@@ -126,7 +126,7 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
           markdownTags.QuoteMark,
           markdownTags.EmphasisMark,
         ],
-        class: theme.mark,
+        class: markdownTheme.mark,
       },
 
       // E.g., code block language (after ```).
@@ -136,22 +136,22 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
           tags.function(tags.variableName),
           tags.labelName,
         ],
-        class: theme.codeMark,
+        class: markdownTheme.codeMark,
       },
 
       // Fonts.
       {
-        tag: [tags.monospace],
+        tag: [tags.monospace, tags.comment],
         class: 'font-mono',
       },
 
       // Headings.
-      { tag: tags.heading1, class: theme.heading(1) },
-      { tag: tags.heading2, class: theme.heading(2) },
-      { tag: tags.heading3, class: theme.heading(3) },
-      { tag: tags.heading4, class: theme.heading(4) },
-      { tag: tags.heading5, class: theme.heading(5) },
-      { tag: tags.heading6, class: theme.heading(6) },
+      { tag: tags.heading1, class: markdownTheme.heading(1) },
+      { tag: tags.heading2, class: markdownTheme.heading(2) },
+      { tag: tags.heading3, class: markdownTheme.heading(3) },
+      { tag: tags.heading4, class: markdownTheme.heading(4) },
+      { tag: tags.heading5, class: markdownTheme.heading(5) },
+      { tag: tags.heading6, class: markdownTheme.heading(6) },
 
       // Emphasis.
       { tag: tags.emphasis, class: 'italic' },
@@ -165,7 +165,7 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
       // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
       {
         tag: [markdownTags.CodeText, markdownTags.InlineCode],
-        class: theme.code,
+        class: markdownTheme.code,
       },
 
       {

package/src/extensions/markdown/image.ts

@@ -17,8 +17,7 @@ export const image = (_options: ImageOptions = {}): Extension => {
   return [
     StateField.define<DecorationSet>({
       create: (state) => {
-        // Process all images.
-        return Decoration.set(buildDecorations(0, state.doc.length, state));
+        return Decoration.set(buildDecorations(state, 0, state.doc.length));
       },
       update: (value: DecorationSet, tr: Transaction) => {
         if (!tr.docChanged && !tr.selection) {
@@ -43,7 +42,7 @@ export const image = (_options: ImageOptions = {}): Extension => {
           filterFrom: from,
           filterTo: to,
           filter: () => false,
-          add: buildDecorations(from, to, tr.state),
+          add: buildDecorations(tr.state, from, to),
         });
       },
       provide: (field) => EditorView.decorations.from(field),
@@ -51,7 +50,7 @@ export const image = (_options: ImageOptions = {}): Extension => {
   ];
 };
 
-const buildDecorations = (from: number, to: number, state: EditorState) => {
+const buildDecorations = (state: EditorState, from: number, to: number) => {
   const decorations: Range<Decoration>[] = [];
   const cursor = state.selection.main.head;
   syntaxTree(state).iterate({
@@ -99,11 +98,11 @@ class ImageWidget extends WidgetType {
     super();
   }
 
-  override eq(other: this): boolean {
+  override eq(other: this) {
     return this._url === other._url;
   }
 
-  override toDOM(view: EditorView): HTMLImageElement {
+  override toDOM(view: EditorView) {
     const img = document.createElement('img');
     img.setAttribute('src', this._url);
     img.setAttribute('class', 'cm-image');

package/src/extensions/markdown/link.ts

@@ -26,6 +26,9 @@ export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
       }
 
       const urlText = view.state.sliceDoc(url.from, url.to);
+      if (urlText.startsWith('dxn')) {
+        return null;
+      }
       return {
         pos: link.from,
         end: link.to,

package/src/extensions/markdown/table.ts

@@ -94,7 +94,13 @@ const update = (state: EditorState, _options: TableOptions) => {
     } else {
       // Add class for styling.
       // TODO(burdon): Apply to each line?
-      builder.add(table.from, table.to, Decoration.mark({ class: 'cm-table' }));
+      builder.add(
+        table.from,
+        table.to,
+        Decoration.mark({
+          class: 'cm-table',
+        }),
+      );
     }
   });
 
@@ -106,14 +112,18 @@ class TableWidget extends WidgetType {
     super();
   }
 
-  override eq(other: this): boolean {
+  override eq(other: this) {
     return (
       this._table.header?.join() === other._table.header?.join() &&
       this._table.rows?.join() === other._table.rows?.join()
     );
   }
 
-  override toDOM(view: EditorView): HTMLDivElement {
+  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'));
 
@@ -137,8 +147,4 @@ class TableWidget extends WidgetType {
 
     return div;
   }
-
-  override ignoreEvent(e: Event): boolean {
-    return !/^mouse/.test(e.type);
-  }
 }

package/src/extensions/mention.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { autocompletion, type CompletionContext, type CompletionResult } from '@codemirror/autocomplete';
+import { type CompletionContext, type CompletionResult, autocompletion } from '@codemirror/autocomplete';
 import type { Extension } from '@codemirror/state';
 
 import { log } from '@dxos/log';

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

@@ -11,7 +11,7 @@ import { singleValueFacet } from '../util';
 
 export type EditorInputConfig = {
   type?: string;
-  noTabster?: boolean;
+  ignoreEscape?: boolean;
 };
 
 export const editorInputMode = singleValueFacet<EditorInputConfig>({});
@@ -26,7 +26,7 @@ export const InputModeExtensions: { [mode: string]: Extension } = {
   vim: [
     // https://github.com/replit/codemirror-vim
     vim(),
-    editorInputMode.of({ type: 'vim', noTabster: true }),
+    editorInputMode.of({ type: 'vim', ignoreEscape: true }),
     keymap.of([
       {
         key: 'Alt-Escape',