@dxos/react-ui-editor 0.8.4-main.406dc2a → 0.8.4-main.548089c

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,10 +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';
 
@@ -1251,17 +1249,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: () => EditorToolbarState | 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/popover/PopoverMenuProvider.tsx

@@ -22,7 +22,7 @@ import { type PopoverMenuGroup, type PopoverMenuItem } from './menu';
 
 export type PopoverMenuProviderProps = PropsWithChildren<{
   view?: EditorView | null;
-  groups: PopoverMenuGroup[];
+  groups?: PopoverMenuGroup[];
   currentItem?: string;
   open?: boolean;
   defaultOpen?: boolean;
@@ -77,7 +77,6 @@ export const PopoverMenuProvider = ({
       'dx-anchor-activate' as any,
       (event: DxAnchorActivate) => {
         const { trigger, refId } = event;
-        console.log('update', trigger, refId);
 
         // If this has a `refId`, then it’s probably a URL or DXN and out of scope for this component.
         if (!refId) {
@@ -104,7 +103,7 @@ export const PopoverMenuProvider = ({
     [viewRef, onSelect],
   );
 
-  const menuGroups = groups.filter((group) => group.items.length > 0);
+  const menuGroups = groups?.filter((group) => group.items.length > 0) ?? [];
 
   return (
     <Popover.Root modal={false} open={open} onOpenChange={setOpen}>

package/src/extensions/popover/popover.ts

@@ -149,7 +149,6 @@ const popoverKeymap = (options: PopoverOptions) => {
 
             // Create anchor even if zero length (append space).
             const from = line.from + idx;
-            console.log('effect', from + 1, selection.head);
             view.dispatch({
               effects: popoverRangeEffect.of({ range: { from: from + 1, to: selection.head } }),
               changes:
@@ -223,7 +222,6 @@ const popoverAnchorDecoration = (options: PopoverOptions) => {
           // Check if we should show the widget (only if cursor is within the active command range).
           const selection = view.state.selection.main;
           const showWidget = selection.head >= range.from && selection.head <= range.to;
-          console.log('update', showWidget, range.from, range.to + 1);
           if (showWidget) {
             builder.add(
               range.from,
@@ -246,8 +244,6 @@ const popoverAnchorDecoration = (options: PopoverOptions) => {
             const content = view.state.sliceDoc(range.from + (trigger ? trigger.length : 0), range.to);
             options.onTextChange?.({ view, pos: selection.head, text: content, trigger });
           }
-        } else {
-          console.log('remove');
         }
 
         this._decorations = builder.finish();

package/src/extensions/preview/preview.ts

@@ -7,6 +7,11 @@ 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 = {
   suggest?: boolean;
   block?: boolean;
@@ -21,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;
 };
 
 /**
@@ -142,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;
@@ -171,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

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

package/src/extensions/tags/extended-markdown.test.ts

@@ -40,8 +40,9 @@ describe('extended-markdown', () => {
       <toolkit />
     `;
 
-    const nodes: SyntaxNode[] = [];
     const state = createEditorState(doc);
+
+    const nodes: SyntaxNode[] = [];
     const tree = syntaxTree(state);
     tree.iterate({
       enter: (node) => {