@dxos/react-ui-editor 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/src/extensions/automerge/sync.ts

@@ -4,10 +4,10 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { next as A } from '@automerge/automerge';
 import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
-import { next as A } from '@dxos/automerge/automerge';
 import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { getLastHeads, getPath, isReconcile, reconcileAnnotation, type State, updateHeads } from './defs';
@@ -26,7 +26,7 @@ export class Syncer {
     private readonly _state: StateField<State>
   ) {}
 
-  reconcile(view: EditorView, editor: boolean) {
+  reconcile(view: EditorView, editor: boolean): void {
     // TODO(burdon): Better way to do mutex?
     if (this._pending) {
       return;
@@ -41,7 +41,7 @@ export class Syncer {
     this._pending = false;
   }
 
-  onEditorChange(view: EditorView) {
+  onEditorChange(view: EditorView): void {
     // Apply the unreconciled transactions to the document.
     const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
     const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
@@ -54,18 +54,18 @@ export class Syncer {
     }
   }
 
-  onAutomergeChange(view: EditorView) {
+  onAutomergeChange(view: EditorView): void {
     // Get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const oldHeads = getLastHeads(view.state, this._state);
-    const newHeads = A.getHeads(this._handle.docSync()!);
-    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.docSync()!, oldHeads, newHeads);
+    const newHeads = A.getHeads(this._handle.doc()!);
+    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.doc()!, oldHeads, newHeads);
 
     const selection = view.state.selection;
     const path = getPath(view.state, this._state);
     updateCodeMirror(view, selection, path, diff);
 
     // TODO(burdon): Test conflicts?
-    // A.getConflicts(this._handle.docSync()!, path[0]);
+    // A.getConflicts(this._handle.doc()!, path[0]);
 
     view.dispatch({
       effects: updateHeads(newHeads),

package/src/extensions/automerge/update-automerge.ts

@@ -4,9 +4,9 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { next as A, type Heads } from '@automerge/automerge';
 import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
 
-import { next as A, type Heads } from '@dxos/automerge/automerge';
 import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { type State } from './defs';

package/src/extensions/automerge/update-codemirror.ts

@@ -4,9 +4,6 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-
 import {
   type DelPatch,
   type InsertPatch,
@@ -14,7 +11,9 @@ import {
   type Prop,
   type PutPatch,
   type SpliceTextPatch,
-} from '@dxos/automerge/automerge';
+} from '@automerge/automerge';
+import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
 
 import { reconcileAnnotation } from './defs';
 

package/src/extensions/awareness/awareness-provider.ts

@@ -53,7 +53,7 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
     this._info = params.info;
   }
 
-  open() {
+  open(): void {
     this._ctx = new Context();
     this._postTask = new DeferredTask(this._ctx, async () => {
       if (this._localState) {
@@ -92,7 +92,7 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
       });
   }
 
-  close() {
+  close(): void {
     void this._ctx?.dispose();
     this._ctx = undefined;
     this._postTask = undefined;
@@ -113,12 +113,12 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
     this._postTask.schedule();
   }
 
-  private _handleQueryMessage() {
+  private _handleQueryMessage(): void {
     invariant(this._postTask);
     this._postTask.schedule();
   }
 
-  private _handlePostMessage(message: ProtocolMessage) {
+  private _handlePostMessage(message: ProtocolMessage): void {
     invariant(message.kind === 'post');
     // TODO(wittjosiah): Is it helpful or confusing to show cursors for self on other devices?
     this._remoteStates.set(message.state.peerId, message.state);

package/src/extensions/awareness/awareness.ts

@@ -95,17 +95,17 @@ export class RemoteSelectionsDecorator implements PluginValue {
     });
   }
 
-  destroy() {
+  destroy(): void {
     void this._ctx.dispose();
     this._provider.close();
   }
 
-  update(update: ViewUpdate) {
+  update(update: ViewUpdate): void {
     this._updateLocalSelection(update.view);
     this._updateRemoteSelections(update.view);
   }
 
-  private _updateLocalSelection(view: EditorView) {
+  private _updateLocalSelection(view: EditorView): void {
     const hasFocus = view.hasFocus && view.dom.ownerDocument.hasFocus();
     const { anchor = undefined, head = undefined } = hasFocus ? view.state.selection.main : {};
     if (this._lastAnchor === anchor && this._lastHead === head) {
@@ -125,7 +125,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
     );
   }
 
-  private _updateRemoteSelections(view: EditorView) {
+  private _updateRemoteSelections(view: EditorView): void {
     const decorations: Range<Decoration>[] = [
       // TODO(burdon): Factor out for testing.
       // {
@@ -239,11 +239,11 @@ class RemoteCaretWidget extends WidgetType {
     return span;
   }
 
-  override updateDOM() {
+  override updateDOM(): boolean {
     return false;
   }
 
-  override eq(widget: this) {
+  override eq(widget: this): boolean {
     return widget._color === this._color;
   }
 
@@ -251,7 +251,7 @@ class RemoteCaretWidget extends WidgetType {
     return -1;
   }
 
-  override ignoreEvent() {
+  override ignoreEvent(): boolean {
     return true;
   }
 }

package/src/extensions/blast.ts

@@ -136,7 +136,7 @@ class Blaster {
     return this._node;
   }
 
-  initialize() {
+  initialize(): void {
     // console.log('initialize');
     invariant(!this._canvas && !this._ctx);
 
@@ -155,7 +155,7 @@ class Blaster {
     this.resize();
   }
 
-  destroy() {
+  destroy(): void {
     this.stop();
     // console.log('destroy');
     if (this._canvas) {
@@ -165,7 +165,7 @@ class Blaster {
     }
   }
 
-  resize() {
+  resize(): void {
     if (this._node.parentElement && this._canvas) {
       const { offsetLeft: x, offsetTop: y, offsetWidth: width, offsetHeight: height } = this._node.parentElement;
       this._canvas.style.top = `${y}px`;
@@ -175,20 +175,20 @@ class Blaster {
     }
   }
 
-  start() {
+  start(): void {
     // console.log('start');
     invariant(this._canvas && this._ctx);
     this._running = true;
     this.loop();
   }
 
-  stop() {
+  stop(): void {
     // console.log('stop');
     this._running = false;
     this._node.style.transform = 'translate(0px, 0px)';
   }
 
-  loop() {
+  loop(): void {
     if (!this._running || !this._canvas || !this._ctx) {
       return;
     }
@@ -230,7 +230,7 @@ class Blaster {
     }
   }, 100);
 
-  drawParticles() {
+  drawParticles(): void {
     for (let i = this._particles.length; i--; i > 0) {
       const particle = this._particles[i];
       if (!particle) {
@@ -282,7 +282,7 @@ class Effect1 extends Effect {
     };
   }
 
-  update(ctx: CanvasRenderingContext2D, particle: Particle) {
+  update(ctx: CanvasRenderingContext2D, particle: Particle): void {
     particle.vy += this._options.particleGravity;
     particle.x += particle.vx;
     particle.y += particle.vy;
@@ -313,7 +313,7 @@ class Effect2 extends Effect {
     };
   }
 
-  update(ctx: CanvasRenderingContext2D, particle: Particle) {
+  update(ctx: CanvasRenderingContext2D, particle: Particle): void {
     particle.vy += this._options.particleGravity;
     particle.x += particle.vx;
     particle.y += particle.vy;

package/src/extensions/command/action.ts

@@ -0,0 +1,49 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect } from '@codemirror/state';
+import { type KeyBinding, type Command, type EditorView } from '@codemirror/view';
+
+import { commandState } from './state';
+
+export type Action =
+  | {
+      type: 'insert';
+      text: string;
+    }
+  | {
+      type: 'cancel';
+    };
+
+export type ActionHandler = (action: Action) => void;
+
+export const openEffect = StateEffect.define<{ pos: number; fullWidth?: boolean }>();
+export const closeEffect = StateEffect.define<null>();
+
+export const openCommand: Command = (view: EditorView) => {
+  if (view.state.field(commandState, false)) {
+    const selection = view.state.selection.main;
+    const line = view.state.doc.lineAt(selection.from);
+    if (line.from === selection.from && line.from === line.to) {
+      view.dispatch({ effects: openEffect.of({ pos: selection.anchor, fullWidth: true }) });
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export const closeCommand: Command = (view: EditorView) => {
+  if (view.state.field(commandState, false)) {
+    view.dispatch({ effects: closeEffect.of(null) });
+    return true;
+  }
+
+  return false;
+};
+
+export const commandKeyBindings: readonly KeyBinding[] = [
+  { key: '/', run: openCommand },
+  { key: 'Escape', run: closeCommand },
+];

package/src/extensions/command/command.ts

@@ -5,35 +5,23 @@
 import { type Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
-import { hintViewPlugin } from './hint';
-import { floatingMenu } from './menu';
-import { preview, type PreviewOptions } from './preview';
-import { closeEffect, commandConfig, commandKeyBindings, commandState } from './state';
+import { closeEffect, commandKeyBindings } from './action';
+import { hintViewPlugin, type HintOptions } from './hint';
+import { commandConfig, commandState, type PopupOptions } from './state';
 
 // TODO(burdon): Create knowledge base for CM notes and ideas.
 // https://discuss.codemirror.net/t/inline-code-hints-like-vscode/5533/4
 // https://github.com/saminzadeh/codemirror-extension-inline-suggestion
 // https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/ui/components/text_editor/config.ts#L370
 
-// TODO(burdon): Discriminated union.
-export type CommandAction = {
-  insert?: string;
-};
-
-export type CommandOptions = {
-  onHint: () => string | undefined;
-  onRenderDialog: (el: HTMLElement, cb: (action?: CommandAction) => void) => void;
-  onRenderMenu: (el: HTMLElement, cb: () => void) => void;
-} & Pick<PreviewOptions, 'onRenderPreview'>;
+export type CommandOptions = Partial<PopupOptions & HintOptions>;
 
-export const command = (options: CommandOptions): Extension => {
+export const command = (options: CommandOptions = {}): Extension => {
   return [
+    keymap.of(commandKeyBindings),
     commandConfig.of(options),
     commandState,
-    keymap.of(commandKeyBindings),
-    preview(options),
-    floatingMenu(options),
-    hintViewPlugin(options),
+    options.onHint ? hintViewPlugin({ onHint: options.onHint }) : [],
     EditorView.focusChangeEffect.of((_, focusing) => {
       return focusing ? closeEffect.of(null) : null;
     }),
@@ -41,14 +29,6 @@ export const command = (options: CommandOptions): Extension => {
       '.cm-tooltip': {
         background: 'transparent',
       },
-      '.cm-preview': {
-        marginLeft: '-1rem',
-        marginRight: '-1rem',
-        padding: '1rem',
-        borderRadius: '1rem',
-        background: 'var(--dx-modalSurface)',
-        border: '1px solid var(--dx-separator)',
-      },
     }),
   ];
 };

package/src/extensions/command/hint.ts

@@ -5,16 +5,48 @@
 import { RangeSetBuilder } from '@codemirror/state';
 import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 
-import { type CommandOptions } from './command';
 import { commandState } from './state';
 import { clientRectsFor, flattenRect } from '../../util';
 
-class CommandHint extends WidgetType {
+export type HintOptions = {
+  onHint: () => string | undefined;
+};
+
+export const hintViewPlugin = ({ onHint }: HintOptions) =>
+  ViewPlugin.fromClass(
+    class {
+      decorations = Decoration.none;
+      update(update: ViewUpdate) {
+        const builder = new RangeSetBuilder<Decoration>();
+        const cState = update.view.state.field(commandState, false);
+        if (!cState?.tooltip) {
+          const selection = update.view.state.selection.main;
+          const line = update.view.state.doc.lineAt(selection.from);
+          // Only show if blank line.
+          // TODO(burdon): Clashes with placeholder if pos === 0.
+          // TODO(burdon): Show after delay or if blank line above?
+          if (selection.from === selection.to && line.from === line.to) {
+            const hint = onHint();
+            if (hint) {
+              builder.add(selection.from, selection.to, Decoration.widget({ widget: new Hint(hint) }));
+            }
+          }
+        }
+
+        this.decorations = builder.finish();
+      }
+    },
+    {
+      provide: (plugin) => [EditorView.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none)],
+    },
+  );
+
+export class Hint extends WidgetType {
   constructor(readonly content: string | HTMLElement) {
     super();
   }
 
-  toDOM() {
+  toDOM(): HTMLSpanElement {
     const wrap = document.createElement('span');
     wrap.className = 'cm-placeholder';
     wrap.style.pointerEvents = 'none';
@@ -44,36 +76,7 @@ class CommandHint extends WidgetType {
     return rect;
   }
 
-  override ignoreEvent() {
+  override ignoreEvent(): boolean {
     return false;
   }
 }
-
-export const hintViewPlugin = ({ onHint }: CommandOptions) =>
-  ViewPlugin.fromClass(
-    class {
-      deco = Decoration.none;
-      update(update: ViewUpdate) {
-        const builder = new RangeSetBuilder<Decoration>();
-        const cState = update.view.state.field(commandState, false);
-        if (!cState?.tooltip) {
-          const selection = update.view.state.selection.main;
-          const line = update.view.state.doc.lineAt(selection.from);
-          // Only show if blank line.
-          // TODO(burdon): Clashes with placeholder if pos === 0.
-          // TODO(burdon): Show after delay or if blank line above?
-          if (selection.from === selection.to && line.from === line.to) {
-            const hint = onHint();
-            if (hint) {
-              builder.add(selection.from, selection.to, Decoration.widget({ widget: new CommandHint(hint) }));
-            }
-          }
-        }
-
-        this.deco = builder.finish();
-      }
-    },
-    {
-      provide: (plugin) => [EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)],
-    },
-  );

package/src/extensions/command/index.ts

@@ -2,4 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './action';
 export * from './command';
+export * from './menu';
+export * from './typeahead';

package/src/extensions/command/menu.ts

@@ -2,99 +2,136 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type BlockInfo, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
-import { type CommandOptions } from './command';
-import { closeEffect, openCommand, openEffect } from './state';
+import { type CleanupFn, addEventListener } from '@dxos/async';
 
-// TODO(burdon): Trigger completion on click.
-// TODO(burdon): Hide when dialog is open.
-export const floatingMenu = (options: CommandOptions) =>
+import { closeEffect, openEffect } from './action';
+
+export type FloatingMenuOptions = {
+  icon?: string;
+  height?: number;
+  padding?: number;
+};
+
+export const floatingMenu = (options: FloatingMenuOptions = {}) => [
   ViewPlugin.fromClass(
     class {
-      button: HTMLElement;
       view: EditorView;
-      rafId: number | null = null;
+      tag: HTMLElement;
+      rafId?: number | null;
+      cleanup?: CleanupFn;
 
       constructor(view: EditorView) {
         this.view = view;
 
-        // Position context: scrollDOM
+        // Position context.
         const container = view.scrollDOM;
         if (getComputedStyle(container).position === 'static') {
           container.style.position = 'relative';
         }
 
-        // Render menu externally.
-        this.button = document.createElement('div');
-        this.button.style.position = 'absolute';
-        this.button.style.zIndex = '10';
-        this.button.style.display = 'none';
+        {
+          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);
+        }
 
-        options.onRenderMenu(this.button, () => {
-          openCommand(view);
-        });
-        container.appendChild(this.button);
+        container.appendChild(this.tag);
 
         // Listen for scroll events.
-        container.addEventListener('scroll', this.scheduleUpdate);
+        const handler = () => this.scheduleUpdate();
+        this.cleanup = addEventListener(container, 'scroll', handler);
         this.scheduleUpdate();
       }
 
+      destroy() {
+        this.cleanup?.();
+        this.tag.remove();
+        if (this.rafId != null) {
+          cancelAnimationFrame(this.rafId);
+        }
+      }
+
       update(update: ViewUpdate) {
+        this.tag.dataset.focused = update.view.hasFocus ? 'true' : 'false';
+        if (!update.view.hasFocus) {
+          return;
+        }
+
         // TODO(burdon): Timer to fade in/out.
         if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
-          this.button.style.display = 'none';
+          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.button.style.display = 'block';
-        } else if (update.selectionSet || update.viewportChanged || update.docChanged || update.geometryChanged) {
+          this.tag.style.display = 'block';
+        } else if (
+          update.docChanged ||
+          update.focusChanged ||
+          update.geometryChanged ||
+          update.selectionSet ||
+          update.viewportChanged
+        ) {
           this.scheduleUpdate();
         }
       }
 
-      scheduleUpdate() {
-        if (this.rafId != null) {
-          cancelAnimationFrame(this.rafId);
-        }
-        this.rafId = requestAnimationFrame(() => this.updateButtonPosition());
-      }
-
       updateButtonPosition() {
-        const pos = this.view.state.selection.main.head;
-        const lineBlock: BlockInfo = this.view.lineBlockAt(pos);
-        const domInfo = this.view.domAtPos(lineBlock.from);
-
-        // Find nearest HTMLElement for the line block
-        let node: Node | null = domInfo.node;
-        while (node && !(node instanceof HTMLElement)) {
-          node = node.parentNode;
-        }
+        const { x, width } = this.view.contentDOM.getBoundingClientRect();
 
-        if (!node) {
-          this.button.style.display = 'none';
+        const pos = this.view.state.selection.main.head;
+        const line = this.view.lineBlockAt(pos);
+        const coords = this.view.coordsAtPos(line.from);
+        if (!coords) {
           return;
         }
 
-        const lineRect = (node as HTMLElement).getBoundingClientRect();
-        const containerRect = this.view.scrollDOM.getBoundingClientRect();
+        const lineHeight = coords.bottom - coords.top;
+        const dy = (lineHeight - (options.height ?? 32)) / 2;
 
-        // Account for scroll and padding/margin in scrollDOM.
-        const offsetTop = lineRect.top - containerRect.top + this.view.scrollDOM.scrollTop;
-        const offsetLeft = this.view.scrollDOM.clientWidth + this.view.scrollDOM.scrollLeft - lineRect.x;
+        const offsetTop = coords.top + dy;
+        const offsetLeft = x + width + (options.padding ?? 8);
 
-        // TODO(burdon): Position is incorrect if cursor is in fenced code block.
-        // console.log('offsetTop', lineRect, containerRect);
-
-        this.button.style.top = `${offsetTop}px`;
-        this.button.style.left = `${offsetLeft}px`;
-        this.button.style.display = 'block';
+        this.tag.style.top = `${offsetTop}px`;
+        this.tag.style.left = `${offsetLeft}px`;
+        this.tag.style.display = 'block';
       }
 
-      destroy() {
-        this.button.remove();
+      scheduleUpdate() {
         if (this.rafId != null) {
           cancelAnimationFrame(this.rafId);
         }
+
+        this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
       }
     },
-  );
+  ),
+
+  EditorView.theme({
+    '.cm-ref-tag': {
+      position: 'fixed',
+      padding: '0',
+      border: 'none',
+      opacity: '0',
+    },
+    '[data-has-focus] & .cm-ref-tag': {
+      opacity: '1',
+    },
+    '[data-is-attention-source] & .cm-ref-tag': {
+      opacity: '1',
+    },
+    '.cm-ref-tag button': {
+      display: 'grid',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '2rem',
+      height: '2rem',
+    },
+  }),
+];