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

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,10 +6,11 @@ import { EditorSelection, EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { describe, test } from 'vitest';
 
+import { str } from '../../util';
+import { createMarkdownExtensions } from '../markdown';
+
 import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';
 import { listItemToString, outlinerTree, treeFacet } from './tree';
-import { str } from '../../testing';
-import { createMarkdownExtensions } from '../markdown';
 
 const lines = [
   '- [ ] 1',

package/src/extensions/outliner/outliner.ts

@@ -7,12 +7,13 @@ import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate
 
 import { mx } from '@dxos/react-ui-theme';
 
+import { decorateMarkdown } from '../markdown';
+
 import { commands } from './commands';
 import { editor } from './editor';
-import { selectionCompartment, selectionFacet, selectionEquals } from './selection';
+import { menu } from './menu';
+import { selectionCompartment, selectionEquals, selectionFacet } from './selection';
 import { outlinerTree, treeFacet } from './tree';
-import { floatingMenu } from '../command';
-import { decorateMarkdown } from '../markdown';
 
 // ISSUES:
 // TODO(burdon): Remove requirement for continuous lines to be indented (so that user's can't accidentally delete them and break the layout).
@@ -37,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()),
 
@@ -51,7 +52,7 @@ export const outliner = (options: OutlinerProps = {}): Extension => [
   editor(),
 
   // Floating menu.
-  floatingMenu(),
+  menu(),
 
   // Line decorations.
   decorations(),
@@ -156,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/selection.ts

@@ -3,7 +3,7 @@
 //
 
 import { Compartment, type EditorState, Facet, type SelectionRange } from '@codemirror/state';
-import { type EditorView, type Command } from '@codemirror/view';
+import { type Command, type EditorView } from '@codemirror/view';
 
 import { treeFacet } from './tree';
 

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

@@ -6,9 +6,10 @@ import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { EditorState } from '@codemirror/state';
 import { beforeEach, describe, test } from 'vitest';
 
-import { outlinerTree, treeFacet, listItemToString, type Item } from './tree';
-import { str } from '../../testing';
 import { type Range } from '../../types';
+import { str } from '../../util';
+
+import { type Item, listItemToString, outlinerTree, treeFacet } from './tree';
 
 const lines = [
   '- [ ] 1',

package/src/extensions/outliner/tree.ts

@@ -3,7 +3,7 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { StateField, type Transaction, type Extension, type EditorState } from '@codemirror/state';
+import { type EditorState, type Extension, StateField, type Transaction } from '@codemirror/state';
 import { Facet } from '@codemirror/state';
 import { type SyntaxNode } from '@lezer/common';
 
@@ -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';

package/src/extensions/preview/preview.ts

@@ -2,20 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos/lit-ui/dx-ref-tag.pcss';
-
 import { syntaxTree } from '@codemirror/language';
-import {
-  type EditorState,
-  type Extension,
-  type RangeSet,
-  RangeSetBuilder,
-  StateField,
-  type Transaction,
-} from '@codemirror/state';
+import { type EditorState, type Extension, RangeSetBuilder, StateField } from '@codemirror/state';
 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;
@@ -29,13 +25,9 @@ export type PreviewLinkTarget = {
   object?: any;
 };
 
-// TODO(wittjosiah): Remove.
-// TODO(burdon): Handle error.
-export type PreviewLookup = (link: PreviewLinkRef) => Promise<PreviewLinkTarget | null | undefined>;
-
 export type PreviewOptions = {
-  addBlockContainer?: (link: PreviewLinkRef, el: HTMLElement) => void;
-  removeBlockContainer?: (link: PreviewLinkRef) => void;
+  addBlockContainer?: (block: PreviewBlock) => void;
+  removeBlockContainer?: (block: PreviewBlock) => void;
 };
 
 /**
@@ -44,10 +36,16 @@ export type PreviewOptions = {
 export const preview = (options: PreviewOptions = {}): Extension => {
   return [
     // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
-    // "Block decorations may not be specified via plugins"
+    // "Block decorations may not be specified via plugins".
     StateField.define<DecorationSet>({
       create: (state) => buildDecorations(state, options),
-      update: (_: RangeSet<Decoration>, tr: Transaction) => buildDecorations(tr.state, options),
+      update: (decorations, tr) => {
+        if (tr.docChanged) {
+          return buildDecorations(tr.state, options);
+        }
+
+        return decorations.map(tr.changes);
+      },
       provide: (field) => [
         EditorView.decorations.from(field),
         EditorView.atomicRanges.of((view) => view.state.field(field)),
@@ -56,42 +54,19 @@ export const preview = (options: PreviewOptions = {}): Extension => {
   ];
 };
 
-/**
- * Link references.
- *
- *  [Label][dxn:echo:123]    Inline reference
- * ![Label][dxn:echo:123]    Block reference
- * ![Label][?dxn:echo:123]   Suggestion
- */
-export const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef | undefined => {
-  const mark = node.getChild('LinkMark');
-  const label = node.getChild('LinkLabel');
-  if (mark && label) {
-    const ref = state.sliceDoc(label.from + 1, label.to - 1);
-    return {
-      suggest: ref.startsWith('?'),
-      block: state.sliceDoc(mark.from, mark.from + 1) === '!',
-      label: state.sliceDoc(mark.to, label.from - 1),
-      ref: ref.startsWith('?') ? ref.slice(1) : ref,
-    };
-  }
-};
-
 /**
  * Echo references are represented as markdown reference links.
  * https://www.markdownguide.org/basic-syntax/#reference-style-links
- * [Label|block][dxn:echo:123]
- * [Label|inline][dxn:echo:123]
  */
-const buildDecorations = (state: EditorState, options: PreviewOptions) => {
+const buildDecorations = (state: EditorState, options: PreviewOptions): DecorationSet => {
   const builder = new RangeSetBuilder<Decoration>();
 
   syntaxTree(state).iterate({
     enter: (node) => {
       switch (node.name) {
         //
-        // Decoration.
-        // [Label][dxn:echo:123]
+        // Inline widget.
+        // [Label](dxn:echo:123)
         //
         case 'Link': {
           const link = getLinkRef(state, node.node);
@@ -101,29 +76,32 @@ const buildDecorations = (state: EditorState, options: PreviewOptions) => {
               node.to,
               Decoration.replace({
                 widget: new PreviewInlineWidget(options, link),
+                side: 1,
               }),
             );
           }
-          break;
+          return false;
         }
+
         //
-        // Block widget.
-        // ![Label][dxn:echo:123]
+        // Block widget (transclusion).
+        // ![Label](dxn:echo:123)
         //
         case 'Image': {
-          const link = getLinkRef(state, node.node);
-          if (options.addBlockContainer && options.removeBlockContainer && link) {
-            builder.add(
-              node.from,
-              node.to,
-              Decoration.replace({
-                block: true,
-                // atomic: true,
-                widget: new PreviewBlockWidget(options, link),
-              }),
-            );
+          if (options.addBlockContainer && options.removeBlockContainer) {
+            const link = getLinkRef(state, node.node);
+            if (link) {
+              builder.add(
+                node.from,
+                node.to,
+                Decoration.replace({
+                  block: true,
+                  widget: new PreviewBlockWidget(options, link),
+                }),
+              );
+            }
           }
-          break;
+          return false;
         }
       }
     },
@@ -132,9 +110,30 @@ const buildDecorations = (state: EditorState, options: PreviewOptions) => {
   return builder.finish();
 };
 
+/**
+ * Link references.
+ *  [Label](dxn:echo:123) Inline reference
+ * ![Label](dxn:echo:123) Block reference
+ */
+export const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef | undefined => {
+  const mark = node.getChildren('LinkMark');
+  const urlNode = node.getChild('URL');
+  if (mark && urlNode) {
+    const url = state.sliceDoc(urlNode.from, urlNode.to);
+    if (url.startsWith('dxn:')) {
+      const label = state.sliceDoc(mark[0].to, mark[1].from);
+      return {
+        block: state.sliceDoc(mark[0].from, mark[0].from + 1) === '!',
+        label,
+        ref: url,
+      };
+    }
+  }
+};
+
 /**
  * Inline widget.
- * [Label][dxn:echo:123]
+ *  [Label](dxn:echo:123)
  */
 class PreviewInlineWidget extends WidgetType {
   constructor(
@@ -148,12 +147,13 @@ 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 {
-    const root = document.createElement('dx-ref-tag');
+  override toDOM(_view: EditorView) {
+    const root = document.createElement('dx-anchor');
+    root.classList.add('dx-tag--anchor');
     root.textContent = this._link.label;
     root.setAttribute('refId', this._link.ref);
     return root;
@@ -161,7 +161,7 @@ class PreviewInlineWidget extends WidgetType {
 }
 
 /**
- * Block widget.
+ * Block widget (e.g., for surfaces).
  * ![Label][dxn:echo:123]
  */
 class PreviewBlockWidget extends WidgetType {
@@ -176,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;
+  });
+};