@dxos/react-ui-editor 0.8.4-main.fd6878d → 0.8.4-main.fffef41

package/src/extensions/index.ts

@@ -4,10 +4,12 @@
 
 export * from './annotations';
 export * from './autocomplete';
+export * from './autoscroll';
 export * from './automerge';
 export * from './awareness';
 export * from './blast';
-export * from './command';
+export * from './blocks';
+export * from './bookmarks';
 export * from './comments';
 export * from './debug';
 export * from './dnd';
@@ -19,8 +21,15 @@ export * from './json';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
+export * from './modal';
 export * from './modes';
 export * from './outliner';
 export * from './preview';
+export * from './replacer';
 export * from './selection';
+export * from './scrolling';
+export * from './state';
+export * from './submit';
+export * from './tab';
+export * from './tags';
 export * from './typewriter';

package/src/extensions/json.ts

@@ -7,7 +7,7 @@ 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';
+import { type JsonSchemaType } from '@dxos/echo/internal';
 
 export type JsonExtensionsOptions = {
   schema?: JsonSchemaType;

package/src/extensions/listener.ts

@@ -5,34 +5,28 @@
 import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
+import { isNonNullable } from '@dxos/util';
+
 import { documentId } from './selection';
 
 export type ListenerOptions = {
-  onFocus?: (focusing: boolean) => void;
-  onChange?: (text: string, id: string) => void;
+  onFocus?: (event: { id: string; focusing: boolean }) => void;
+  onChange?: (event: { id: string; text: string }) => void;
 };
 
-/**
- * Event listener.
- * @deprecated Use EditorView.updateListener and listen for specific update events.
- */
 export const listener = ({ onFocus, onChange }: ListenerOptions): Extension => {
-  const extensions: Extension[] = [];
-
-  onFocus &&
-    extensions.push(
-      EditorView.focusChangeEffect.of((_, focusing) => {
-        onFocus(focusing);
+  return [
+    onFocus &&
+      EditorView.focusChangeEffect.of((state, focusing) => {
+        onFocus({ id: state.facet(documentId), focusing });
         return null;
       }),
-    );
 
-  onChange &&
-    extensions.push(
-      EditorView.updateListener.of((update) => {
-        onChange(update.state.doc.toString(), update.state.facet(documentId));
+    onChange &&
+      EditorView.updateListener.of(({ state, docChanged }) => {
+        if (docChanged) {
+          onChange({ id: state.facet(documentId), text: state.doc.toString() });
+        }
       }),
-    );
-
-  return extensions;
+  ].filter(isNonNullable);
 };

package/src/extensions/markdown/bundle.ts

@@ -4,20 +4,23 @@
 
 import { completionKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { jsonLanguage } from '@codemirror/lang-json';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import { syntaxHighlighting } from '@codemirror/language';
+import { xml } from '@codemirror/lang-xml';
+import { LanguageDescription, syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
+import { type MarkdownConfig } from '@lezer/markdown';
 
-import { type ThemeMode } from '@dxos/react-ui';
-import { isNotFalsy } from '@dxos/util';
+import { isTruthy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
 
 export type MarkdownBundleOptions = {
-  themeMode?: ThemeMode;
+  extensions?: MarkdownConfig[];
   indentWithTab?: boolean;
+  setextHeading?: boolean;
 };
 
 /**
@@ -42,6 +45,7 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
       base: markdownLanguage,
 
       // Languages for syntax highlighting fenced code blocks.
+      defaultCodeLanguage: jsonLanguage,
       codeLanguages: languages,
 
       // Don't complete HTML tags.
@@ -51,6 +55,7 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
       extensions: [
         // GFM provided by default.
         markdownTagsExtensions,
+        ...(options.extensions ?? defaultExtensions()),
       ],
     }),
 
@@ -64,8 +69,37 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
 
         // https://codemirror.net/docs/ref/#commands.defaultKeymap
         ...defaultKeymap,
+
+        // TODO(burdon): Remove?
         ...completionKeymap,
-      ].filter(isNotFalsy),
+      ].filter(isTruthy),
     ),
   ];
 };
+
+const xmlLanguageDesc = LanguageDescription.of({
+  name: 'xml',
+  alias: ['html', 'xhtml'],
+  extensions: ['xml', 'xhtml'],
+  load: async () => xml(),
+});
+
+/**
+ * Default customizations.
+ * https://github.com/lezer-parser/markdown/blob/main/src/markdown.ts
+ */
+export const defaultExtensions = (): MarkdownConfig[] => [noSetExtHeading, noHtml];
+
+/**
+ * Remove SetextHeading (e.g., headings created from "---").
+ */
+const noSetExtHeading: MarkdownConfig = {
+  remove: ['SetextHeading'],
+};
+
+/**
+ * Remove HTML and XML parsing.
+ */
+const noHtml: MarkdownConfig = {
+  // remove: ['HTMLBlock', 'HTMLTag'],
+};

package/src/extensions/markdown/decorate.ts

@@ -3,7 +3,7 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type EditorState, RangeSetBuilder, StateEffect } from '@codemirror/state';
+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';
 
@@ -52,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;
@@ -69,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';
@@ -105,10 +109,6 @@ class CheckboxWidget extends WidgetType {
     span.appendChild(input);
     return span;
   }
-
-  override ignoreEvent(): boolean {
-    return false;
-  }
 }
 
 class TextWidget extends WidgetType {
@@ -234,7 +234,7 @@ 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);
@@ -427,6 +427,9 @@ 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);
           }
@@ -444,6 +447,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
               },
             }),
           );
+
           if (!editing) {
             atomicDeco.add(
               marks[1].from,
@@ -494,15 +498,15 @@ 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'),
     });
   }
 
@@ -514,15 +518,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 = {}) => {
@@ -578,9 +587,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.ts

@@ -15,12 +15,8 @@ import {
 } from '@codemirror/state';
 import { EditorView, type ViewUpdate, keymap } from '@codemirror/view';
 import { type SyntaxNode, type SyntaxNodeRef } from '@lezer/common';
-import { useCallback, useMemo } from 'react';
 
 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

@@ -141,7 +141,7 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
 
       // Fonts.
       {
-        tag: [tags.monospace],
+        tag: [tags.monospace, tags.comment],
         class: 'font-mono',
       },
 

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/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',

package/src/extensions/{command/floating-menu.ts → outliner/menu.ts}

@@ -2,19 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
 import { type CleanupFn, addEventListener } from '@dxos/async';
 
-import { closeEffect, openEffect } from './action';
-
-export type FloatingMenuOptions = {
+export type MenuOptions = {
   icon?: string;
   height?: number;
   padding?: number;
 };
 
-export const floatingMenu = (options: FloatingMenuOptions = {}) => [
+// TODO(burdon): Replace with popover.
+export const menu = (options: MenuOptions = {}): Extension => [
   ViewPlugin.fromClass(
     class {
       view: EditorView;
@@ -34,12 +34,10 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
         {
           const icon = document.createElement('dx-icon');
           icon.setAttribute('icon', options.icon ?? 'ph--dots-three-vertical--regular');
-          const button = document.createElement('button');
-          button.appendChild(icon);
 
-          this.tag = document.createElement('dx-ref-tag');
-          this.tag.classList.add('cm-ref-tag');
-          this.tag.appendChild(button);
+          this.tag = document.createElement('dx-anchor');
+          this.tag.classList.add('cm-popover-trigger');
+          this.tag.appendChild(icon);
         }
 
         container.appendChild(this.tag);
@@ -65,12 +63,12 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
         }
 
         // TODO(burdon): Timer to fade in/out.
-        if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
+        /*if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
           this.tag.style.display = 'none';
           this.tag.classList.add('opacity-10');
         } else if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
-          this.tag.style.display = 'block';
-        } else if (
+          this.tag.style.display = '';
+        } else */ if (
           update.docChanged ||
           update.focusChanged ||
           update.geometryChanged ||
@@ -99,7 +97,7 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
 
         this.tag.style.top = `${offsetTop}px`;
         this.tag.style.left = `${offsetLeft}px`;
-        this.tag.style.display = 'block';
+        this.tag.style.display = '';
       }
 
       scheduleUpdate() {
@@ -113,21 +111,18 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
   ),
 
   EditorView.theme({
-    '.cm-ref-tag': {
+    '.cm-popover-trigger': {
       position: 'fixed',
       padding: '0',
       border: 'none',
       opacity: '0',
-    },
-    '[data-has-focus] & .cm-ref-tag': {
-      opacity: '1',
-    },
-    '.cm-ref-tag button': {
       display: 'grid',
-      alignItems: 'center',
-      justifyContent: 'center',
+      placeContent: 'center',
       width: '2rem',
       height: '2rem',
     },
+    '&:focus-within .cm-popover-trigger': {
+      opacity: '1',
+    },
   }),
 ];

package/src/extensions/outliner/outliner.test.ts

@@ -6,7 +6,7 @@ import { EditorSelection, EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { describe, test } from 'vitest';
 
-import { str } from '../../testing';
+import { str } from '../../util';
 import { createMarkdownExtensions } from '../markdown';
 
 import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';

package/src/extensions/outliner/outliner.ts

@@ -7,11 +7,11 @@ import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate
 
 import { mx } from '@dxos/react-ui-theme';
 
-import { floatingMenu } from '../command';
 import { decorateMarkdown } from '../markdown';
 
 import { commands } from './commands';
 import { editor } from './editor';
+import { menu } from './menu';
 import { selectionCompartment, selectionEquals, selectionFacet } from './selection';
 import { outlinerTree, treeFacet } from './tree';
 
@@ -38,7 +38,7 @@ export type OutlinerProps = {};
  * - Constrains editor to outline structure.
  * - Supports smart cut-and-paste.
  */
-export const outliner = (options: OutlinerProps = {}): Extension => [
+export const outliner = (_options: OutlinerProps = {}): Extension => [
   // Commands.
   Prec.highest(commands()),
 
@@ -52,7 +52,7 @@ export const outliner = (options: OutlinerProps = {}): Extension => [
   editor(),
 
   // Floating menu.
-  floatingMenu(),
+  menu(),
 
   // Line decorations.
   decorations(),
@@ -157,9 +157,9 @@ const decorations = () => [
       },
 
       '.cm-list-item-focused': {
-        borderColor: 'var(--dx-accentFocusIndicator)',
+        borderColor: 'var(--dx-neutralFocusIndicator)',
       },
-      '[data-has-focus] & .cm-list-item-selected': {
+      '&:focus-within .cm-list-item-selected': {
         borderColor: 'var(--dx-separator)',
       },
     }),

package/src/extensions/outliner/tree.test.ts

@@ -6,8 +6,8 @@ import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { EditorState } from '@codemirror/state';
 import { beforeEach, describe, test } from 'vitest';
 
-import { str } from '../../testing';
 import { type Range } from '../../types';
+import { str } from '../../util';
 
 import { type Item, listItemToString, outlinerTree, treeFacet } from './tree';
 

package/src/extensions/outliner/tree.ts

@@ -195,7 +195,7 @@ export type TreeOptions = {};
  * This adds overhead relative to the markdown AST, but allows for efficient traversal of the list items.
  * NOTE: Requires markdown parser to be enabled.
  */
-export const outlinerTree = (options: TreeOptions = {}): Extension => {
+export const outlinerTree = (_options: TreeOptions = {}): Extension => {
   const buildTree = (state: EditorState): Tree => {
     let tree: Tree | undefined;
     let parent: Item | undefined;

package/src/extensions/preview/index.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 export * from './preview';