@dxos/react-ui-editor 0.8.4-main.5ad4a44 → 0.8.4-main.66e292d

package/src/extensions/blocks.ts

@@ -0,0 +1,131 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { RangeSetBuilder } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+import { mx } from '@dxos/react-ui-theme';
+
+const paragraphBlockPlugin = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+
+    constructor(view: EditorView) {
+      this.decorations = this.build(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = this.build(update.view);
+      }
+    }
+
+    build({ state }: EditorView) {
+      const builder = new RangeSetBuilder<Decoration>();
+
+      // Helper: commit a block from blockStart to endLine (inclusive).
+      const pushBlock = (fromLine: number, toLine: number) => {
+        // Add line decorations for each line in the block.
+        for (let lineNum = fromLine; lineNum <= toLine; lineNum++) {
+          const line = state.doc.line(lineNum);
+          builder.add(
+            line.from,
+            line.from,
+            Decoration.line({
+              class: mx(
+                'block-line',
+                fromLine === toLine && 'block-single',
+                lineNum === fromLine && 'block-first',
+                lineNum > fromLine && lineNum < toLine && 'block-middle',
+                lineNum === toLine && 'block-last',
+              ),
+            }),
+          );
+        }
+      };
+
+      let blockStart: number | null = null;
+      let consecutiveBlankLines = 0;
+      const totalLines = state.doc.lines;
+      for (let i = 1; i <= totalLines; i++) {
+        const line = state.doc.line(i);
+        const isBlank = /^\s*$/.test(line.text);
+
+        if (!isBlank) {
+          // Reset blank line counter.
+          consecutiveBlankLines = 0;
+          // Start a new block if we're not already in one.
+          if (blockStart === null) {
+            blockStart = i;
+          }
+        } else {
+          // Increment blank line counter.
+          consecutiveBlankLines++;
+
+          // End the current block if we have 2+ consecutive blank lines.
+          if (consecutiveBlankLines >= 2 && blockStart !== null) {
+            pushBlock(blockStart, i - consecutiveBlankLines);
+            blockStart = null;
+          }
+        }
+      }
+
+      // Handle any remaining block at the end of the document.
+      if (blockStart !== null) {
+        // Find the last non-blank line for the block end.
+        let lastNonBlankLine = totalLines;
+        while (lastNonBlankLine >= blockStart) {
+          const line = state.doc.line(lastNonBlankLine);
+          if (!/^\s*$/.test(line.text)) {
+            break;
+          }
+          lastNonBlankLine--;
+        }
+        if (lastNonBlankLine >= blockStart) {
+          pushBlock(blockStart, lastNonBlankLine);
+        }
+      }
+
+      return builder.finish();
+    }
+  },
+  {
+    decorations: (v) => v.decorations,
+  },
+);
+
+export const blocks = () => [
+  paragraphBlockPlugin,
+  EditorView.baseTheme({
+    '.cm-line.block-line': {
+      paddingLeft: '0.75rem',
+      paddingRight: '0.75rem',
+      borderLeft: '1px solid var(--dx-subduedSeparator)',
+      borderRight: '1px solid var(--dx-subduedSeparator)',
+    },
+    '.cm-line.block-single': {
+      border: '1px solid var(--dx-subduedSeparator)',
+      borderRadius: '6px',
+      paddingTop: '0.5rem',
+      paddingBottom: '0.5rem',
+      marginTop: '0.5rem',
+      marginBottom: '0.5rem',
+    },
+    '.cm-line.block-first': {
+      borderTop: '1px solid var(--dx-subduedSeparator)',
+      borderTopLeftRadius: '6px',
+      borderTopRightRadius: '6px',
+      paddingTop: '0.5rem',
+      marginTop: '0.5rem',
+    },
+    '.cm-line.block-middle': {},
+    '.cm-line.block-last': {
+      borderBottom: '1px solid var(--dx-subduedSeparator)',
+      borderBottomLeftRadius: '6px',
+      borderBottomRightRadius: '6px',
+      paddingBottom: '0.5rem',
+      marginBottom: '0.5rem',
+    },
+  }),
+];

package/src/extensions/bookmarks.ts

@@ -0,0 +1,75 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension, Prec, StateEffect, StateField } from '@codemirror/state';
+import { keymap } from '@codemirror/view';
+
+type Bookmark = {
+  id: string;
+  pos: number;
+  name: string;
+};
+
+export const addBookmark = StateEffect.define<Bookmark>();
+export const removeBookmark = StateEffect.define<string>();
+export const clearBookmarks = StateEffect.define<void>();
+
+export const bookmarks = (): Extension => {
+  return [
+    bookmarksField,
+    Prec.highest(
+      keymap.of([
+        {
+          key: 'Mod-ArrowUp',
+          run: (view) => {
+            const bookmarks = view.state.field(bookmarksField);
+            console.log('up', bookmarks);
+            return true;
+          },
+        },
+        {
+          key: 'Mod-ArrowDown',
+          run: (view) => {
+            const bookmarks = view.state.field(bookmarksField);
+            console.log('down', bookmarks);
+            return true;
+          },
+        },
+      ]),
+    ),
+  ];
+};
+
+type BookmarkFieldState = {
+  bookmarks: Bookmark[];
+};
+
+const bookmarksField = StateField.define<BookmarkFieldState>({
+  create: (): BookmarkFieldState => ({
+    bookmarks: [],
+  }),
+
+  update: (value: BookmarkFieldState, tr): BookmarkFieldState => {
+    // Map bookmark positions through document changes.
+    let bookmarks = value.bookmarks.map((bookmark) => ({
+      ...bookmark,
+      pos: tr.changes.mapPos(bookmark.pos),
+    }));
+
+    // Process effects.
+    for (const effect of tr.effects) {
+      if (effect.is(addBookmark)) {
+        bookmarks = [...bookmarks, effect.value];
+      } else if (effect.is(removeBookmark)) {
+        bookmarks = bookmarks.filter((b) => b.id !== effect.value);
+      } else if (effect.is(clearBookmarks)) {
+        bookmarks = [];
+      }
+    }
+
+    // Sort bookmarks by position.
+    bookmarks.sort(({ pos: a }, { pos: b }) => a - b);
+    return { bookmarks };
+  },
+});

package/src/extensions/comments.ts

@@ -104,13 +104,14 @@ export const commentsState = StateField.define<CommentsState>({
 const styles = EditorView.theme({
   '.cm-comment, .cm-comment-current': {
     padding: '3px 0',
+    color: 'var(--dx-cmCommentText)',
     backgroundColor: 'var(--dx-cmCommentSurface)',
   },
   '.cm-comment > span, .cm-comment-current > span': {
     boxDecorationBreak: 'clone',
     boxShadow: '0 0 1px 3px var(--dx-cmCommentSurface)',
     backgroundColor: 'var(--dx-cmCommentSurface)',
-    color: 'var(--dx-cmComment)',
+    color: 'var(--dx-cmCommentText)',
     cursor: 'pointer',
   },
 });

package/src/extensions/factories.ts

@@ -4,7 +4,7 @@
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
-import { bracketMatching } from '@codemirror/language';
+import { HighlightStyle, bracketMatching, syntaxHighlighting } from '@codemirror/language';
 import { searchKeymap } from '@codemirror/search';
 import { type ChangeSpec, EditorState, type Extension, type TransactionSpec } from '@codemirror/state';
 import {
@@ -19,14 +19,15 @@ import {
   placeholder,
   scrollPastEnd,
 } from '@codemirror/view';
-import { vscodeDarkInit, vscodeDarkStyle, vscodeLightInit, vscodeLightStyle } from '@uiw/codemirror-theme-vscode';
+import { vscodeDarkStyle, vscodeLightStyle } from '@uiw/codemirror-theme-vscode';
 import defaultsDeep from 'lodash.defaultsdeep';
 import merge from 'lodash.merge';
 
 import { generateName } from '@dxos/display-name';
+import { type DocAccessor } from '@dxos/echo-db';
 import { log } from '@dxos/log';
-import { type DocAccessor, type Space } from '@dxos/react-client/echo';
-import { type Identity } from '@dxos/react-client/halo';
+import { type Messenger } from '@dxos/protocols';
+import { type Identity } from '@dxos/protocols/proto/dxos/client/services';
 import { type ThemeMode } from '@dxos/react-ui';
 import { type HuePalette } from '@dxos/react-ui-theme';
 import { hexToHue, isTruthy } from '@dxos/util';
@@ -44,7 +45,9 @@ import { focus } from './focus';
 
 export const filterChars = (chars: RegExp) => {
   return EditorState.transactionFilter.of((transaction) => {
-    if (!transaction.docChanged) return transaction;
+    if (!transaction.docChanged) {
+      return transaction;
+    }
 
     const changes: ChangeSpec[] = [];
     transaction.changes.iterChanges((fromA, toA, fromB, toB, text) => {
@@ -62,6 +65,7 @@ export const filterChars = (chars: RegExp) => {
     if (changes.length) {
       return [transaction, { changes, sequential: true } as TransactionSpec];
     }
+
     return transaction;
   });
 };
@@ -87,7 +91,6 @@ export type BasicExtensionsOptions = {
   lineNumbers?: boolean;
   /** If false then do not set a max-width or side margin on the editor. */
   lineWrapping?: boolean;
-  monospace?: boolean;
   placeholder?: string;
   /** If true user cannot edit the text, but they can still select and copy it. */
   readOnly?: boolean;
@@ -136,7 +139,6 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.history && history(),
     props.lineNumbers && [lineNumbers(), editorGutter],
     props.lineWrapping && EditorView.lineWrapping,
-    props.monospace && editorMonospace,
     props.placeholder && placeholder(props.placeholder),
     props.readOnly !== undefined && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),
@@ -173,6 +175,7 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
 
 export type ThemeExtensionsOptions = {
   themeMode?: ThemeMode;
+  monospace?: boolean;
   styles?: ThemeStyles;
   syntaxHighlighting?: boolean;
   slots?: {
@@ -180,6 +183,7 @@ export type ThemeExtensionsOptions = {
       className?: string;
     };
     scroll?: {
+      // NOTE: Do not apply vertical padding to scroll container.
       className?: string;
     };
     content?: {
@@ -190,7 +194,7 @@ export type ThemeExtensionsOptions = {
 
 export const grow: ThemeExtensionsOptions['slots'] = {
   editor: {
-    className: 'is-full bs-full',
+    className: 'bs-full is-full',
   },
 } as const;
 
@@ -202,13 +206,6 @@ export const fullWidth: ThemeExtensionsOptions['slots'] = {
 
 export const defaultThemeSlots = grow;
 
-const semanticTokensSettings = {
-  settings: {
-    background: 'var(--dx-baseSurface)',
-    foreground: 'var(--dx-baseText)',
-  },
-};
-
 export const defaultStyles = {
   dark: vscodeDarkStyle,
   light: vscodeLightStyle,
@@ -219,17 +216,18 @@ export const defaultStyles = {
  */
 export const createThemeExtensions = ({
   themeMode,
+  monospace,
   styles,
-  syntaxHighlighting: syntaxHighlightingProps,
+  syntaxHighlighting: syntaxHighlightingProp,
   slots: slotsParam,
 }: ThemeExtensionsOptions = {}): Extension => {
   const slots = defaultsDeep({}, slotsParam, defaultThemeSlots);
   return [
     EditorView.darkTheme.of(themeMode === 'dark'),
     EditorView.baseTheme(styles ? merge({}, defaultTheme, styles) : defaultTheme),
-    syntaxHighlightingProps && [
-      themeMode === 'dark' ? vscodeDarkInit(semanticTokensSettings) : vscodeLightInit(semanticTokensSettings),
-    ],
+    monospace && editorMonospace,
+    syntaxHighlightingProp &&
+      syntaxHighlighting(HighlightStyle.define(themeMode === 'dark' ? defaultStyles.dark : defaultStyles.light)),
     slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
     slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
     slots.scroll?.className &&
@@ -250,24 +248,24 @@ export const createThemeExtensions = ({
 export type DataExtensionsProps<T> = {
   id: string;
   text?: DocAccessor<T>;
-  space?: Space;
+  messenger?: Messenger;
   identity?: Identity | null;
 };
 
-// TODO(burdon): Move out of react-ui-editor (remove echo deps).
-export const createDataExtensions = <T>({ id, text, space, identity }: DataExtensionsProps<T>): Extension[] => {
+// TODO(burdon): Move out of react-ui-editor?
+export const createDataExtensions = <T>({ id, text, messenger, identity }: DataExtensionsProps<T>): Extension[] => {
   const extensions: Extension[] = [];
   if (text) {
     extensions.push(automerge(text));
   }
 
-  if (space && identity) {
+  if (messenger && identity) {
     const peerId = identity?.identityKey.toHex();
     const hue = (identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0');
     extensions.push(
       awareness(
         new SpaceAwarenessProvider({
-          space,
+          messenger,
           channel: `awareness.${id}`,
           peerId: identity.identityKey.toHex(),
           info: {

package/src/extensions/folding.tsx

@@ -25,8 +25,7 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
   foldGutter({
     markerDOM: (open) => {
       return renderRoot(
-        Domino.of('div').classNames('flex h-full items-center').build(),
-        // TODO(burdon): Use sprite directly.
+        Domino.of('div').classNames('flex bs-full items-center').build(),
         <Icon icon='ph--caret-right--bold' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
       );
     },

package/src/extensions/index.ts

@@ -8,13 +8,12 @@ export * from './autoscroll';
 export * from './automerge';
 export * from './awareness';
 export * from './blast';
-export * from './command-dialog';
-export * from './command-menu';
+export * from './blocks';
+export * from './bookmarks';
 export * from './comments';
 export * from './debug';
 export * from './dnd';
 export * from './factories';
-export * from './floating-menu';
 export * from './focus';
 export * from './folding';
 export * from './hashtag';
@@ -22,9 +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/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,8 +4,10 @@
 
 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';
@@ -43,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.
@@ -66,12 +69,21 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
 
         // https://codemirror.net/docs/ref/#commands.defaultKeymap
         ...defaultKeymap,
+
+        // TODO(burdon): Remove?
         ...completionKeymap,
       ].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
@@ -89,5 +101,5 @@ const noSetExtHeading: MarkdownConfig = {
  * Remove HTML and XML parsing.
  */
 const noHtml: MarkdownConfig = {
-  remove: ['HTMLBlock', 'HTMLTag'],
+  // remove: ['HTMLBlock', 'HTMLTag'],
 };

package/src/extensions/markdown/decorate.ts

@@ -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 {

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

@@ -98,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/table.ts

@@ -112,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'));
 
@@ -143,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;
+  },
+});