@dxos/react-ui-editor 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

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;
+  },
+});

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;
@@ -36,7 +36,7 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
           icon.setAttribute('icon', options.icon ?? 'ph--dots-three-vertical--regular');
 
           this.tag = document.createElement('dx-anchor');
-          this.tag.classList.add('cm-floating-menu-trigger');
+          this.tag.classList.add('cm-popover-trigger');
           this.tag.appendChild(icon);
         }
 
@@ -63,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 = '';
-        } else if (
+        } else */ if (
           update.docChanged ||
           update.focusChanged ||
           update.geometryChanged ||
@@ -111,7 +111,7 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
   ),
 
   EditorView.theme({
-    '.cm-floating-menu-trigger': {
+    '.cm-popover-trigger': {
       position: 'fixed',
       padding: '0',
       border: 'none',
@@ -121,7 +121,7 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
       width: '2rem',
       height: '2rem',
     },
-    '&:focus-within .cm-floating-menu-trigger': {
+    '&: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';
 
@@ -52,7 +52,7 @@ export const outliner = (_options: OutlinerProps = {}): Extension => [
   editor(),
 
   // Floating menu.
-  floatingMenu(),
+  menu(),
 
   // Line decorations.
   decorations(),
@@ -157,7 +157,7 @@ const decorations = () => [
       },
 
       '.cm-list-item-focused': {
-        borderColor: 'var(--dx-accentFocusIndicator)',
+        borderColor: 'var(--dx-neutralFocusIndicator)',
       },
       '&: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/preview/index.ts

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

package/src/extensions/preview/preview.ts

@@ -7,9 +7,12 @@ import { type EditorState, type Extension, RangeSetBuilder, StateField } from '@
 import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 
+export type PreviewBlock = {
+  link: PreviewLinkRef;
+  el: HTMLElement;
+};
+
 export type PreviewLinkRef = {
-  /** @deprecated */
-  // TODO(burdon): Remove?
   suggest?: boolean;
   block?: boolean;
   label: string;
@@ -23,8 +26,8 @@ export type PreviewLinkTarget = {
 };
 
 export type PreviewOptions = {
-  addBlockContainer?: (link: PreviewLinkRef, el: HTMLElement) => void;
-  removeBlockContainer?: (link: PreviewLinkRef) => void;
+  addBlockContainer?: (block: PreviewBlock) => void;
+  removeBlockContainer?: (block: PreviewBlock) => void;
 };
 
 /**
@@ -144,11 +147,11 @@ class PreviewInlineWidget extends WidgetType {
   //   return false;
   // }
 
-  override eq(other: this): boolean {
+  override eq(other: this) {
     return this._link.ref === other._link.ref && this._link.label === other._link.label;
   }
 
-  override toDOM(_view: EditorView): HTMLElement {
+  override toDOM(_view: EditorView) {
     const root = document.createElement('dx-anchor');
     root.classList.add('dx-tag--anchor');
     root.textContent = this._link.label;
@@ -173,18 +176,18 @@ class PreviewBlockWidget extends WidgetType {
   //   return true;
   // }
 
-  override eq(other: this): boolean {
+  override eq(other: this) {
     return this._link.ref === other._link.ref;
   }
 
-  override toDOM(_view: EditorView): HTMLDivElement {
+  override toDOM(_view: EditorView) {
     const root = document.createElement('div');
     root.classList.add('cm-preview-block', 'density-coarse');
-    this._options.addBlockContainer?.(this._link, root);
+    this._options.addBlockContainer?.({ link: this._link, el: root });
     return root;
   }
 
-  override destroy() {
-    this._options.removeBlockContainer?.(this._link);
+  override destroy(root: HTMLDivElement) {
+    this._options.removeBlockContainer?.({ link: this._link, el: root });
   }
 }

package/src/extensions/replacer.test.ts

@@ -0,0 +1,75 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { describe, expect, test } from 'vitest';
+
+import { replacer } from './replacer';
+
+describe('replacer extension', () => {
+  test('creates extension with custom replacements and simulates typing', () => {
+    const state = EditorState.create({
+      extensions: [
+        replacer({
+          replacements: [
+            { input: ':)', output: '😊' },
+            { input: ':(', output: '😢' },
+          ],
+        }),
+      ],
+      doc: '',
+    });
+
+    // Create a minimal mock EditorView to test input handler
+    let currentState = state;
+    const mockView = {
+      get state() {
+        return currentState;
+      },
+      dispatch: (transaction: any) => {
+        currentState = transaction.state || currentState.update(transaction).state;
+      },
+    } as any;
+
+    // Get the input handler from the extension
+    const extensions = currentState.facet(EditorView.inputHandler);
+    const inputHandler = extensions[0];
+
+    // Test typing ':' first - should not trigger replacement.
+    let handled = inputHandler(mockView, 0, 0, ':', () =>
+      mockView.state.update({ changes: { from: 0, to: 0, insert: ':' } }),
+    );
+    expect(handled).toBe(false); // Should not handle single ':'
+
+    // Manually insert ':' to simulate first character.
+    mockView.dispatch({
+      changes: { from: 0, to: 0, insert: ':' },
+      selection: { anchor: 1 },
+    });
+    expect(mockView.state.doc.toString()).toBe(':');
+
+    // Test typing ')' which should trigger replacement.
+    // The input handler is called with the position where the character will be inserted.
+    // and it should handle the replacement before the character is actually inserted.
+    handled = inputHandler(mockView, 1, 1, ')', () =>
+      mockView.state.update({ changes: { from: 1, to: 1, insert: ')' } }),
+    );
+    expect(handled).toBe(true); // Should handle and replace ':)'
+    expect(mockView.state.doc.toString()).toBe('😊');
+  });
+
+  test('creates extension with default replacements', () => {
+    const state = EditorState.create({
+      extensions: [replacer()],
+      doc: 'test',
+    });
+
+    expect(state.doc.toString()).toBe('test');
+
+    // Verify the extension is installed.
+    const inputHandlers = state.facet(EditorView.inputHandler);
+    expect(inputHandlers.length).toBeGreaterThan(0);
+  });
+});

package/src/extensions/replacer.ts

@@ -0,0 +1,93 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+type Replacement = {
+  input: string;
+  output: string;
+};
+
+/**
+ * Default character replacements for common typography.
+ */
+export const defaultReplacements: Replacement[] = [
+  { input: '--', output: '—' },
+  { input: '...', output: '…' },
+  { input: '->', output: '→' },
+  { input: '<-', output: '←' },
+  { input: '=>', output: '⇒' },
+  { input: '<=>', output: '⇔' },
+  { input: '+-', output: '±' },
+  { input: '!=', output: '≠' },
+  { input: '<=', output: '≤' },
+  { input: '>=', output: '≥' },
+  { input: '(c)', output: '©' },
+  { input: 'EUR', output: '€' },
+  { input: 'GBP', output: '£' },
+  { input: 'BTC', output: '₿' },
+];
+
+/**
+ * Options for the replacer extension.
+ */
+export interface ReplacerOptions {
+  replacements?: Replacement[];
+}
+
+/**
+ * Creates a CodeMirror extension that automatically replaces typed character sequences.
+ */
+export const replacer = ({ replacements = defaultReplacements }: ReplacerOptions = {}): Extension => {
+  // Sort replacements by input length (longest first) to handle overlapping patterns correctly.
+  const sortedReplacements = [...replacements].sort((a, b) => b.input.length - a.input.length);
+
+  return EditorView.inputHandler.of((view, from, to, insert) => {
+    // Only process single character insertions for performance.
+    if (insert.length !== 1) {
+      return false;
+    }
+
+    const state = view.state;
+    const doc = state.doc;
+
+    // Get the text before the insertion point to check for patterns.
+    const lineStart = doc.lineAt(from).from;
+    const textBefore = doc.sliceString(lineStart, from);
+    const textWithInsert = textBefore + insert;
+
+    // Check each replacement pattern.
+    for (const replacement of sortedReplacements) {
+      if (textWithInsert.endsWith(replacement.input)) {
+        const range = {
+          from: from - replacement.input.length + 1,
+          to: from,
+        };
+
+        // Ensure we don't go before the line start.
+        if (range.from < lineStart) {
+          continue;
+        }
+
+        // Create the replacement transaction.
+        view.dispatch(
+          state.update({
+            changes: {
+              ...range,
+              insert: replacement.output,
+            },
+            selection: {
+              anchor: range.from + replacement.output.length,
+            },
+          }),
+        );
+
+        return true;
+      }
+    }
+
+    return false;
+  });
+};

package/src/extensions/scrolling.ts

@@ -0,0 +1,189 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+/**
+ * Configuration options for smooth scrolling behavior.
+ */
+export type SmoothScrollOptions = {
+  /**
+   * Additional offset from the target line in pixels.
+   * Positive values scroll past the line, negative values stop before it.
+   * @default 0
+   */
+  offset?: number;
+  /**
+   * Position of the target line in the viewport.
+   * - 'start': Line appears at the start (top) of the screen
+   * - 'end': Line appears at the end (bottom) of the screen
+   * @default 'start'
+   */
+  position?: 'start' | 'end';
+  /**
+   * Whether to use smooth scrolling.
+   * @default 'smooth'
+   */
+  behavior?: ScrollBehavior;
+};
+
+/**
+ * Parameters for the scroll to line effect.
+ */
+export type ScrollToLineParams = {
+  /**
+   * The line number to scroll to (1-based).
+   */
+  line: number;
+  /**
+   * Optional configuration to override default scroll behavior.
+   */
+  options?: SmoothScrollOptions;
+};
+
+/**
+ * StateEffect for triggering smooth scroll to a specific line.
+ */
+export const scrollToLineEffect = StateEffect.define<ScrollToLineParams>();
+
+/**
+ * Extension that provides smooth scrolling to specific lines in the editor.
+ *
+ * @example
+ * ```typescript
+ * // Add to editor extensions.
+ * const extensions = [
+ *   smoothScroll()
+ * ];
+ *
+ * // Trigger scroll to line 42.
+ * view.dispatch({
+ *   effects: scrollToLineEffect.of({ line: 42 })
+ * });
+ *
+ * // Scroll with custom options.
+ * view.dispatch({
+ *   effects: scrollToLineEffect.of({ line: 100, options: { offset: -50 } })
+ * });
+ *
+ * // Scroll so line appears at end (bottom) of screen.
+ * view.dispatch({
+ *   effects: scrollToLineEffect.of({ line: 50, options: { position: 'end' } })
+ * });
+ * ```
+ */
+export const smoothScroll = ({ offset = 0, position = 'start' }: Partial<SmoothScrollOptions> = {}) => {
+  // ViewPlugin to manage scroll animations.
+  const scrollPlugin = ViewPlugin.fromClass(
+    class SmoothScrollPlugin {
+      constructor(private readonly view: EditorView) {}
+
+      // No-op.
+      destroy() {}
+
+      /**
+       * Perform smooth scroll to the specified line.
+       */
+      scrollToLine(lineNumber: number, options: SmoothScrollOptions) {
+        const { offset: animOffset = 0, position: animPosition, behavior } = options;
+        const doc = this.view.state.doc;
+        const scroller = this.view.scrollDOM;
+
+        // Convert 1-based line number to 0-based.
+        const targetLine = Math.max(0, lineNumber - 1);
+        if (behavior === 'instant') {
+          requestAnimationFrame(() => {
+            this.view.dispatch({
+              selection: { anchor: doc.line(targetLine + 1).from },
+              scrollIntoView: true,
+            });
+          });
+          return;
+        }
+
+        // Get the position of the target line.
+        if (targetLine >= doc.lines) {
+          // Line doesn't exist, scroll to end.
+          const targetScrollTop = scroller.scrollHeight - scroller.clientHeight + (animOffset || 0);
+          this.animateScroll(scroller, targetScrollTop);
+          return;
+        }
+
+        const lineStart = doc.line(targetLine + 1).from;
+        const coords = this.view.coordsAtPos(lineStart);
+        if (!coords) {
+          return;
+        }
+
+        // Calculate target scroll position based on position option.
+        const currentScrollTop = scroller.scrollTop;
+        const scrollerRect = scroller.getBoundingClientRect();
+        const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
+
+        let targetScrollTop: number;
+        if (animPosition === 'end') {
+          // Position line at end (bottom) of viewport.
+          // Calculate how far down we need to scroll so the line's bottom aligns with viewport bottom.
+          targetScrollTop = currentScrollTop + coords.bottom - scrollerRect.bottom + animOffset;
+        } else {
+          // Default: position line at start (top) of viewport.
+          targetScrollTop = currentScrollTop + coords.top - scrollerRect.top + animOffset;
+        }
+
+        // Clamp to valid scroll range.
+        const clampedScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
+        this.animateScroll(scroller, clampedScrollTop);
+      }
+
+      /**
+       * Animate scroll using browser's built-in smooth scrolling.
+       */
+      private animateScroll(element: HTMLElement, targetScrollTop: number) {
+        if (Math.abs(targetScrollTop - element.scrollTop) < 1) {
+          return;
+        }
+
+        // Use browser's built-in smooth scrolling.
+        element.scrollTo({
+          top: targetScrollTop,
+          behavior: 'smooth',
+        });
+      }
+    },
+  );
+
+  return [
+    scrollPlugin,
+
+    // Update listener to handle scroll effects.
+    EditorView.updateListener.of((update) => {
+      update.transactions.forEach((transaction) => {
+        for (const effect of transaction.effects) {
+          if (effect.is(scrollToLineEffect)) {
+            const { line, options = {} } = effect.value;
+            const plugin = update.view.plugin(scrollPlugin);
+            if (plugin) {
+              plugin.scrollToLine(line, { offset, position, ...options });
+            }
+          }
+        }
+      });
+    }),
+  ];
+};
+
+/**
+ * Helper function to scroll to a specific line.
+ * This is a convenience function that can be used directly with an EditorView.
+ *
+ * @param view - The CodeMirror EditorView instance
+ * @param line - The line number to scroll to (1-based)
+ * @param options - Optional scroll configuration
+ */
+export const scrollToLine = (view: EditorView, line: number, options?: SmoothScrollOptions) => {
+  view.dispatch({
+    effects: scrollToLineEffect.of({ line, options }),
+  });
+};

package/src/extensions/selection.ts

@@ -7,7 +7,7 @@ import { EditorView, keymap } from '@codemirror/view';
 
 import { debounce } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
-import { isNotFalsy } from '@dxos/util';
+import { isTruthy } from '@dxos/util';
 
 import { singleValueFacet } from '../util';
 
@@ -86,7 +86,7 @@ export const selectionState = ({ getState, setState }: Partial<EditorStateStore>
     getState &&
       keymap.of([
         {
-          key: 'ctrl-r', // TODO(burdon): Setting to jump back to selection.
+          key: 'Ctrl-r', // TODO(burdon): Setting to jump back to selection.
           run: (view) => {
             const state = getState(view.state.facet(documentId));
             if (state) {
@@ -96,5 +96,5 @@ export const selectionState = ({ getState, setState }: Partial<EditorStateStore>
           },
         },
       ]),
-  ].filter(isNotFalsy);
+  ].filter(isTruthy);
 };

package/src/extensions/state.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Transaction } from '@codemirror/state';
+
+export const initialSync = Transaction.userEvent.of('initial.sync');