@dxos/react-ui-editor 0.8.2-staging.7ac8446 → 0.8.2

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,127 @@
 // 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 { closeEffect, openEffect } from './action';
 
-// TODO(burdon): Trigger completion on click.
-// TODO(burdon): Hide when dialog is open.
-export const floatingMenu = (options: CommandOptions) =>
+export type FloatingMenuOptions = {
+  icon?: string;
+  height?: number;
+  padding?: number;
+};
+
+export const floatingMenu = (options: FloatingMenuOptions = {}) => [
   ViewPlugin.fromClass(
     class {
-      button: HTMLElement;
       view: EditorView;
+      tag: HTMLElement;
       rafId: number | null = null;
 
       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-outline--regular');
+
+        const button = document.createElement('button');
+        button.appendChild(icon);
 
-        options.onRenderMenu(this.button, () => {
-          openCommand(view);
-        });
-        container.appendChild(this.button);
+        // TODO(burdon): Custom tag/styles?
+        this.tag = document.createElement('dx-ref-tag');
+        this.tag.classList.add('cm-ref-tag');
+        this.tag.appendChild(button);
+        container.appendChild(this.tag);
 
         // Listen for scroll events.
-        container.addEventListener('scroll', this.scheduleUpdate);
+        container.addEventListener('scroll', this.scheduleUpdate.bind(this));
         this.scheduleUpdate();
       }
 
       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);
+        const { x, width } = this.view.contentDOM.getBoundingClientRect();
 
-        // Find nearest HTMLElement for the line block
-        let node: Node | null = domInfo.node;
-        while (node && !(node instanceof HTMLElement)) {
-          node = node.parentNode;
-        }
-
-        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.tag.style.top = `${offsetTop}px`;
+        this.tag.style.left = `${offsetLeft}px`;
+        this.tag.style.display = 'block';
+      }
+
+      scheduleUpdate() {
+        if (this.rafId != null) {
+          cancelAnimationFrame(this.rafId);
+        }
 
-        this.button.style.top = `${offsetTop}px`;
-        this.button.style.left = `${offsetLeft}px`;
-        this.button.style.display = 'block';
+        this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
       }
 
       destroy() {
-        this.button.remove();
+        this.tag.remove();
         if (this.rafId != null) {
           cancelAnimationFrame(this.rafId);
         }
       }
     },
-  );
+  ),
+
+  EditorView.theme({
+    '.cm-ref-tag': {
+      position: 'fixed',
+      padding: '0',
+      border: 'none',
+      transition: 'opacity 0.3s ease-in-out',
+      opacity: 0.1,
+    },
+    '.cm-ref-tag button': {
+      display: 'grid',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '2rem',
+      height: '2rem',
+    },
+    '.cm-ref-tag[data-focused="true"]': {
+      opacity: 1,
+    },
+  }),
+];

package/src/extensions/command/state.ts

@@ -2,25 +2,24 @@
 // Copyright 2024 DXOS.org
 //
 
-import { StateEffect, StateField } from '@codemirror/state';
-import {
-  showTooltip,
-  type Command,
-  type EditorView,
-  type KeyBinding,
-  type Tooltip,
-  type TooltipView,
-} from '@codemirror/view';
+import { StateField } from '@codemirror/state';
+import { showTooltip, type EditorView, type Tooltip, type TooltipView } from '@codemirror/view';
 
+import { closeEffect, type Action, openEffect } from './action';
 import { type CommandOptions } from './command';
+import { type RenderCallback } from '../../types';
 import { singleValueFacet } from '../../util';
 
+export const commandConfig = singleValueFacet<CommandOptions>();
+
+export type PopupOptions = {
+  renderDialog: RenderCallback<{ onAction: (action?: Action) => void }>;
+};
+
 type CommandState = {
   tooltip?: Tooltip | null;
 };
 
-export const commandConfig = singleValueFacet<CommandOptions>();
-
 export const commandState = StateField.define<CommandState>({
   create: () => ({}),
   update: (state, tr) => {
@@ -29,8 +28,8 @@ export const commandState = StateField.define<CommandState>({
         return {};
       }
 
-      if (effect.is(openEffect)) {
-        const options = tr.state.facet(commandConfig);
+      const { renderDialog } = tr.state.facet(commandConfig);
+      if (effect.is(openEffect) && renderDialog) {
         const { pos, fullWidth } = effect.value;
         const tooltip: Tooltip = {
           pos,
@@ -38,38 +37,49 @@ export const commandState = StateField.define<CommandState>({
           arrow: false,
           strictSide: true,
           create: (view: EditorView) => {
-            const dom = document.createElement('div');
+            const root = document.createElement('div');
+
             const tooltipView: TooltipView = {
-              dom,
+              dom: root,
               mount: (view: EditorView) => {
                 if (fullWidth) {
-                  const parent = dom.parentElement!;
+                  const parent = root.parentElement!;
                   const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
                   const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
-                  dom.style.width = `${widthWithoutPadding}px`;
+                  root.style.width = `${widthWithoutPadding}px`;
                 }
 
                 // Render react component.
-                options.onRenderDialog(dom, (action) => {
-                  view.dispatch({ effects: closeEffect.of(null) });
-                  if (action?.insert?.length) {
-                    // Insert into editor.
-                    const text = action.insert + '\n';
-                    view.dispatch({
-                      changes: { from: pos, insert: text },
-                      selection: { anchor: pos + text.length },
-                    });
-                  }
-
-                  // NOTE: Truncates text if set focus immediately.
-                  requestAnimationFrame(() => view.focus());
-                });
+                renderDialog(
+                  root,
+                  {
+                    onAction: (action) => {
+                      view.dispatch({ effects: closeEffect.of(null) });
+                      switch (action?.type) {
+                        case 'insert': {
+                          // Insert into editor.
+                          const text = action.text + '\n';
+                          view.dispatch({
+                            changes: { from: pos, insert: text },
+                            selection: { anchor: pos + text.length },
+                          });
+                          break;
+                        }
+                      }
+
+                      // NOTE: Truncates text if set focus immediately.
+                      requestAnimationFrame(() => view.focus());
+                    },
+                  },
+                  view,
+                );
               },
             };
 
             return tooltipView;
           },
         };
+
         return { tooltip };
       }
     }
@@ -78,33 +88,3 @@ export const commandState = StateField.define<CommandState>({
   },
   provide: (field) => [showTooltip.from(field, (value) => value.tooltip ?? null)],
 });
-
-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 },
-];