@dxos/react-ui-editor 0.8.3-main.7f5a14c → 0.8.3-staging.0fa589b

package/src/extensions/command/command-menu.ts

@@ -0,0 +1,210 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { RangeSetBuilder, StateField, StateEffect, Prec } from '@codemirror/state';
+import { EditorView, ViewPlugin, type ViewUpdate, Decoration, keymap, type DecorationSet } from '@codemirror/view';
+
+import { placeholder, type PlaceholderOptions } from './placeholder';
+import { type Range } from '../../types';
+
+export type CommandMenuOptions = {
+  trigger: string | string[];
+  placeholder?: Partial<PlaceholderOptions>;
+
+  // TODO(burdon): Replace with onKey?
+  onClose?: () => void;
+  onArrowDown?: () => void;
+  onArrowUp?: () => void;
+  onEnter?: () => void;
+
+  onTextChange?: (trigger: string, text: string) => void;
+};
+
+export const commandMenu = (options: CommandMenuOptions) => {
+  const commandMenuPlugin = ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet = Decoration.none;
+
+      constructor(readonly view: EditorView) {}
+
+      // TODO(wittjosiah): The decorations are repainted on every update, this occasionally causes menu to flicker.
+      update(update: ViewUpdate) {
+        const builder = new RangeSetBuilder<Decoration>();
+        const selection = update.view.state.selection.main;
+        const { range: activeRange, trigger } = update.view.state.field(commandMenuState) ?? {};
+
+        // Check if we should show the widget - only if cursor is within the active command range.
+        const shouldShowWidget = activeRange && selection.head >= activeRange.from && selection.head <= activeRange.to;
+        if (shouldShowWidget) {
+          // Create mark decoration that wraps the entire line content in a dx-ref-tag.
+          builder.add(
+            activeRange.from,
+            activeRange.to,
+            Decoration.mark({
+              tagName: 'dx-ref-tag',
+              class: 'cm-ref-tag',
+              attributes: {
+                'data-auto-trigger': 'true',
+                'data-trigger': trigger!,
+              },
+            }),
+          );
+        }
+
+        const activeRangeChanged = update.transactions.some((tr) =>
+          tr.effects.some((effect) => effect.is(commandRangeEffect)),
+        );
+        if (activeRange && activeRangeChanged && trigger) {
+          const content = update.view.state.sliceDoc(
+            activeRange.from + 1, // Skip the trigger character.
+            activeRange.to,
+          );
+          options.onTextChange?.(trigger, content);
+        }
+
+        this.decorations = builder.finish();
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+    },
+  );
+
+  const triggers = Array.isArray(options.trigger) ? options.trigger : [options.trigger];
+
+  const commandKeymap = keymap.of([
+    ...triggers.map((trigger) => ({
+      key: trigger,
+      preventDefault: true,
+      run: (view: EditorView) => {
+        const selection = view.state.selection.main;
+        const line = view.state.doc.lineAt(selection.head);
+
+        // Check if we should trigger the command menu:
+        // 1. Empty lines or at the beginning of a line
+        // 2. When there's a preceding space
+        if (
+          line.text.trim() === '' ||
+          selection.head === line.from ||
+          (selection.head > line.from && line.text[selection.head - line.from - 1] === ' ')
+        ) {
+          // Insert and select the trigger.
+          view.dispatch({
+            changes: { from: selection.head, insert: trigger },
+            selection: { anchor: selection.head + 1, head: selection.head + 1 },
+            effects: commandRangeEffect.of({ trigger, range: { from: selection.head, to: selection.head + 1 } }),
+          });
+
+          return true;
+        }
+
+        return false;
+      },
+    })),
+    {
+      key: 'Enter',
+      run: (view) => {
+        const activeRange = view.state.field(commandMenuState)?.range;
+        if (activeRange) {
+          view.dispatch({ changes: { from: activeRange.from, to: activeRange.to, insert: '' } });
+          options.onEnter?.();
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      key: 'ArrowDown',
+      run: (view) => {
+        const activeRange = view.state.field(commandMenuState)?.range;
+        if (activeRange) {
+          options.onArrowDown?.();
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      key: 'ArrowUp',
+      run: (view) => {
+        const activeRange = view.state.field(commandMenuState)?.range;
+        if (activeRange) {
+          options.onArrowUp?.();
+          return true;
+        }
+
+        return false;
+      },
+    },
+  ]);
+
+  // Listen for selection and document changes to clean up the command menu.
+  const updateListener = EditorView.updateListener.of((update) => {
+    const { trigger, range: activeRange } = update.view.state.field(commandMenuState) ?? {};
+    if (!activeRange || !trigger) {
+      return;
+    }
+
+    const selection = update.view.state.selection.main;
+    const firstChar = update.view.state.doc.sliceString(activeRange.from, activeRange.from + 1);
+    const shouldRemove =
+      firstChar !== trigger || // Trigger deleted.
+      selection.head < activeRange.from || // Cursor moved before the range.
+      selection.head > activeRange.to + 1; // Cursor moved after the range (+1 to handle selection changing before doc).
+
+    const nextRange = shouldRemove
+      ? null
+      : update.docChanged
+        ? { from: activeRange.from, to: selection.head }
+        : activeRange;
+    if (nextRange !== activeRange) {
+      update.view.dispatch({ effects: commandRangeEffect.of(nextRange ? { trigger, range: nextRange } : null) });
+    }
+
+    // TODO(burdon): Should delete if user presses escape? How else to insert the trigger character?
+    if (shouldRemove) {
+      options.onClose?.();
+    }
+  });
+
+  return [
+    Prec.highest(commandKeymap),
+    placeholder(
+      Object.assign(
+        {
+          content: `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`,
+        },
+        options.placeholder,
+      ),
+    ),
+    updateListener,
+    commandMenuState,
+    commandMenuPlugin,
+  ];
+};
+
+type CommandState = {
+  trigger: string;
+  range: Range;
+};
+
+// State effects for managing command menu state.
+export const commandRangeEffect = StateEffect.define<CommandState | null>();
+
+// State field to track the active command menu range.
+const commandMenuState = StateField.define<CommandState | null>({
+  create: () => null,
+  update: (value, tr) => {
+    let newValue = value;
+    for (const effect of tr.effects) {
+      if (effect.is(commandRangeEffect)) {
+        newValue = effect.value;
+      }
+    }
+
+    return newValue;
+  },
+});

package/src/extensions/command/command.ts

@@ -2,11 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Extension } from '@codemirror/state';
+import { Prec, type Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
+import { isNonNullable } from '@dxos/util';
+
 import { closeEffect, commandKeyBindings } from './action';
-import { hintViewPlugin, type HintOptions } from './hint';
+import { hint, type HintOptions } from './hint';
 import { commandConfig, commandState, type PopupOptions } from './state';
 
 // TODO(burdon): Create knowledge base for CM notes and ideas.
@@ -18,17 +20,15 @@ export type CommandOptions = Partial<PopupOptions & HintOptions>;
 
 export const command = (options: CommandOptions = {}): Extension => {
   return [
-    keymap.of(commandKeyBindings),
+    Prec.highest(keymap.of(commandKeyBindings)),
     commandConfig.of(options),
     commandState,
-    options.onHint ? hintViewPlugin({ onHint: options.onHint }) : [],
-    EditorView.focusChangeEffect.of((_, focusing) => {
-      return focusing ? closeEffect.of(null) : null;
-    }),
+    options.onHint && hint(options),
+    EditorView.focusChangeEffect.of((_, focusing) => (focusing ? closeEffect.of(null) : null)),
     EditorView.theme({
       '.cm-tooltip': {
         background: 'transparent',
       },
     }),
-  ];
+  ].filter(isNonNullable);
 };

package/src/extensions/command/floating-menu.ts

@@ -0,0 +1,133 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+import { type CleanupFn, addEventListener } from '@dxos/async';
+
+import { closeEffect, openEffect } from './action';
+
+export type FloatingMenuOptions = {
+  icon?: string;
+  height?: number;
+  padding?: number;
+};
+
+export const floatingMenu = (options: FloatingMenuOptions = {}) => [
+  ViewPlugin.fromClass(
+    class {
+      view: EditorView;
+      tag: HTMLElement;
+      rafId?: number | null;
+      cleanup?: CleanupFn;
+
+      constructor(view: EditorView) {
+        this.view = view;
+
+        // Position context.
+        const container = view.scrollDOM;
+        if (getComputedStyle(container).position === 'static') {
+          container.style.position = 'relative';
+        }
+
+        {
+          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);
+        }
+
+        container.appendChild(this.tag);
+
+        // Listen for scroll events.
+        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.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 (
+          update.docChanged ||
+          update.focusChanged ||
+          update.geometryChanged ||
+          update.selectionSet ||
+          update.viewportChanged
+        ) {
+          this.scheduleUpdate();
+        }
+      }
+
+      updateButtonPosition() {
+        const { x, width } = this.view.contentDOM.getBoundingClientRect();
+
+        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 lineHeight = coords.bottom - coords.top;
+        const dy = (lineHeight - (options.height ?? 32)) / 2;
+
+        const offsetTop = coords.top + dy;
+        const offsetLeft = x + width + (options.padding ?? 8);
+
+        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.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',
+    },
+    '.cm-ref-tag button': {
+      display: 'grid',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '2rem',
+      height: '2rem',
+    },
+  }),
+];

package/src/extensions/command/hint.ts

@@ -1,5 +1,6 @@
 //
 // Copyright 2024 DXOS.org
+// Based on https://github.com/codemirror/view/blob/main/src/placeholder.ts
 //
 
 import { RangeSetBuilder } from '@codemirror/state';
@@ -9,37 +10,56 @@ import { commandState } from './state';
 import { clientRectsFor, flattenRect } from '../../util';
 
 export type HintOptions = {
-  onHint: () => string | undefined;
+  delay?: number;
+  onHint?: () => string | undefined;
 };
 
-export const hintViewPlugin = ({ onHint }: HintOptions) =>
-  ViewPlugin.fromClass(
+export const hint = ({ delay = 3_000, onHint }: HintOptions) => {
+  return ViewPlugin.fromClass(
     class {
       decorations = Decoration.none;
+      timeout: ReturnType<typeof setTimeout> | undefined;
+
       update(update: ViewUpdate) {
+        if (this.timeout) {
+          clearTimeout(this.timeout);
+          this.timeout = undefined;
+        }
+
         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) }));
-            }
+            // Set timeout to add decoration after delay.
+            this.timeout = setTimeout(() => {
+              const hint = onHint?.();
+              if (hint) {
+                const builder = new RangeSetBuilder<Decoration>();
+                builder.add(selection.from, selection.to, Decoration.widget({ widget: new Hint(hint) }));
+                this.decorations = builder.finish();
+                update.view.update([]);
+              }
+            }, delay);
           }
         }
 
         this.decorations = builder.finish();
       }
+
+      destroy() {
+        if (this.timeout) {
+          clearTimeout(this.timeout);
+        }
+      }
     },
     {
       provide: (plugin) => [EditorView.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none)],
     },
   );
+};
 
 export class Hint extends WidgetType {
   constructor(readonly content: string | HTMLElement) {

package/src/extensions/command/index.ts

@@ -4,5 +4,7 @@
 
 export * from './action';
 export * from './command';
-export * from './menu';
+export * from './command-menu';
+export * from './floating-menu';
+export * from './useCommandMenu';
 export * from './typeahead';

package/src/extensions/command/placeholder.ts

@@ -0,0 +1,113 @@
+//
+// Copyright 2025 DXOS.org
+// Based on https://github.com/codemirror/view/blob/main/src/placeholder.ts
+//
+
+import { type Extension } from '@codemirror/state';
+import { Decoration, EditorView, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+import { clientRectsFor, flattenRect } from '../../util';
+
+type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
+
+export type PlaceholderOptions = {
+  delay?: number;
+  content: Content;
+};
+
+export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Extension => {
+  const plugin = ViewPlugin.fromClass(
+    class {
+      decorations = Decoration.none;
+      timeout: ReturnType<typeof setTimeout> | undefined;
+
+      update(update: ViewUpdate) {
+        if (this.timeout) {
+          window.clearTimeout(this.timeout);
+          this.timeout = undefined;
+        }
+
+        // Check if the active line (where cursor is) is empty.
+        const activeLine = update.view.state.doc.lineAt(update.view.state.selection.main.head);
+        const isEmpty = activeLine.text.trim() === '';
+        if (isEmpty) {
+          // Create widget decoration at the start of the current line.
+          const lineStart = activeLine.from;
+          this.timeout = setTimeout(() => {
+            this.decorations = Decoration.set([
+              Decoration.widget({
+                widget: new Placeholder(content),
+                side: 1,
+              }).range(lineStart),
+            ]);
+
+            update.view.update([]);
+          }, delay);
+        }
+
+        this.decorations = Decoration.none;
+      }
+
+      destroy() {
+        if (this.timeout) {
+          clearTimeout(this.timeout);
+        }
+      }
+    },
+    {
+      provide: (plugin) => {
+        return [EditorView.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none)];
+      },
+    },
+  );
+
+  return typeof content === 'string'
+    ? [plugin, EditorView.contentAttributes.of({ 'aria-placeholder': content })]
+    : plugin;
+};
+
+class Placeholder extends WidgetType {
+  constructor(readonly content: Content) {
+    super();
+  }
+
+  toDOM(view: EditorView) {
+    const wrap = document.createElement('span');
+    wrap.className = 'cm-placeholder';
+    wrap.style.pointerEvents = 'none';
+    wrap.appendChild(
+      typeof this.content === 'string'
+        ? document.createTextNode(this.content)
+        : typeof this.content === 'function'
+          ? this.content(view)
+          : this.content.cloneNode(true),
+    );
+    wrap.setAttribute('aria-hidden', 'true');
+    return wrap;
+  }
+
+  override coordsAt(dom: HTMLElement) {
+    const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+    if (!rects.length) {
+      return null;
+    }
+
+    const style = window.getComputedStyle(dom.parentNode as HTMLElement);
+    const rect = flattenRect(rects[0], style.direction !== 'rtl');
+    const lineHeight = parseInt(style.lineHeight);
+    if (rect.bottom - rect.top > lineHeight * 1.5) {
+      return {
+        left: rect.left,
+        right: rect.right,
+        top: rect.top,
+        bottom: rect.top + lineHeight,
+      };
+    }
+
+    return rect;
+  }
+
+  override ignoreEvent() {
+    return false;
+  }
+}

package/src/extensions/command/state.ts

@@ -17,7 +17,7 @@ export type PopupOptions = {
 };
 
 type CommandState = {
-  tooltip?: Tooltip | null;
+  tooltip?: Tooltip;
 };
 
 export const commandState = StateField.define<CommandState>({
@@ -38,7 +38,6 @@ export const commandState = StateField.define<CommandState>({
           strictSide: true,
           create: (view: EditorView) => {
             const root = document.createElement('div');
-
             const tooltipView: TooltipView = {
               dom: root,
               mount: (view: EditorView) => {