@dxos/react-ui-editor 0.8.2 → 0.8.3-main.7f5a14c

package/src/extensions/command/menu.ts

@@ -2,9 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { RangeSetBuilder, StateField, StateEffect, Prec } from '@codemirror/state';
+import { EditorView, ViewPlugin, type ViewUpdate, Decoration, keymap, type DecorationSet } from '@codemirror/view';
+import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
+
+import { type CleanupFn, addEventListener } from '@dxos/async';
+import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
+import { type MaybePromise } from '@dxos/util';
 
 import { closeEffect, openEffect } from './action';
+import { getItem, getNextItem, getPreviousItem, type CommandMenuGroup, type CommandMenuItem } from '../../components';
+import { type Range } from '../../types';
+import { multilinePlaceholder } from '../placeholder';
 
 export type FloatingMenuOptions = {
   icon?: string;
@@ -17,7 +26,8 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
     class {
       view: EditorView;
       tag: HTMLElement;
-      rafId: number | null = null;
+      rafId?: number | null;
+      cleanup?: CleanupFn;
 
       constructor(view: EditorView) {
         this.view = view;
@@ -28,23 +38,34 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
           container.style.position = 'relative';
         }
 
-        const icon = document.createElement('dx-icon');
-        icon.setAttribute('icon', options.icon ?? 'ph--dots-three-outline--regular');
+        {
+          const icon = document.createElement('dx-icon');
+          icon.setAttribute('icon', options.icon ?? 'ph--dots-three-vertical--regular');
+
+          const button = document.createElement('button');
+          button.appendChild(icon);
 
-        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);
+        }
 
-        // 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.bind(this));
+        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) {
@@ -96,13 +117,6 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
 
         this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
       }
-
-      destroy() {
-        this.tag.remove();
-        if (this.rafId != null) {
-          cancelAnimationFrame(this.rafId);
-        }
-      }
     },
   ),
 
@@ -111,8 +125,10 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
       position: 'fixed',
       padding: '0',
       border: 'none',
-      transition: 'opacity 0.3s ease-in-out',
-      opacity: 0.1,
+      opacity: '0',
+    },
+    '[data-has-focus] & .cm-ref-tag': {
+      opacity: '1',
     },
     '.cm-ref-tag button': {
       display: 'grid',
@@ -121,8 +137,303 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
       width: '2rem',
       height: '2rem',
     },
-    '.cm-ref-tag[data-focused="true"]': {
-      opacity: 1,
-    },
   }),
 ];
+
+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;
+  },
+});
+
+export type CommandMenuOptions = {
+  trigger: string | string[];
+  placeholder?: Parameters<typeof multilinePlaceholder>[0];
+  onArrowDown?: () => void;
+  onArrowUp?: () => void;
+  onDeactivate?: () => 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,
+      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
+        const shouldTrigger =
+          line.text.trim() === '' ||
+          selection.head === line.from ||
+          (selection.head > line.from && line.text[selection.head - line.from - 1] === ' ');
+
+        if (shouldTrigger) {
+          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) });
+    }
+
+    if (shouldRemove) {
+      options.onDeactivate?.();
+    }
+  });
+
+  return [
+    multilinePlaceholder(
+      options.placeholder ??
+        `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`,
+    ),
+    Prec.highest(commandKeymap),
+    updateListener,
+    commandMenuState,
+    commandMenuPlugin,
+  ];
+};
+
+export type UseCommandMenuOptions = {
+  viewRef: RefObject<EditorView | undefined>;
+  trigger: string | string[];
+  placeholder?: Parameters<typeof multilinePlaceholder>[0];
+  getGroups: (trigger: string, query?: string) => MaybePromise<CommandMenuGroup[]>;
+};
+
+export const useCommandMenu = ({ viewRef, trigger, placeholder, getGroups }: UseCommandMenuOptions) => {
+  const triggerRef = useRef<DxRefTag | null>(null);
+  const currentRef = useRef<CommandMenuItem | null>(null);
+  const groupsRef = useRef<CommandMenuGroup[]>([]);
+  const [currentItem, setCurrentItem] = useState<string>();
+  const [open, setOpen] = useState(false);
+  const [_, update] = useState({});
+
+  const handleOpenChange = useCallback(
+    async (open: boolean, trigger?: string) => {
+      if (open && trigger) {
+        groupsRef.current = await getGroups(trigger);
+      }
+      setOpen(open);
+      if (!open) {
+        triggerRef.current = null;
+        setCurrentItem(undefined);
+        viewRef.current?.dispatch({ effects: [commandRangeEffect.of(null)] });
+      }
+    },
+    [getGroups],
+  );
+
+  const handleActivate = useCallback(
+    async (event: DxRefTagActivate) => {
+      const item = getItem(groupsRef.current, currentItem);
+      if (item) {
+        currentRef.current = item;
+      }
+
+      triggerRef.current = event.trigger;
+      const triggerKey = event.trigger.getAttribute('data-trigger');
+      if (!open && triggerKey) {
+        await handleOpenChange(true, triggerKey);
+      }
+    },
+    [open, handleOpenChange],
+  );
+
+  const handleSelect = useCallback((item: CommandMenuItem) => {
+    const view = viewRef.current;
+    if (!view) {
+      return;
+    }
+
+    const selection = view.state.selection.main;
+    void item.onSelect?.(view, selection.head);
+  }, []);
+
+  const serializedTrigger = Array.isArray(trigger) ? trigger.join(',') : trigger;
+  const _commandMenu = useMemo(
+    () =>
+      commandMenu({
+        trigger,
+        placeholder,
+        onArrowDown: () => {
+          setCurrentItem((currentItem) => {
+            const next = getNextItem(groupsRef.current, currentItem);
+            currentRef.current = next;
+            return next.id;
+          });
+        },
+        onArrowUp: () => {
+          setCurrentItem((currentItem) => {
+            const previous = getPreviousItem(groupsRef.current, currentItem);
+            currentRef.current = previous;
+            return previous.id;
+          });
+        },
+        onDeactivate: () => handleOpenChange(false),
+        onEnter: () => {
+          if (currentRef.current) {
+            handleSelect(currentRef.current);
+          }
+        },
+        onTextChange: async (trigger, text) => {
+          groupsRef.current = await getGroups(trigger, text);
+          const firstItem = groupsRef.current.filter((group) => group.items.length > 0)[0]?.items[0];
+          if (firstItem) {
+            setCurrentItem(firstItem.id);
+            currentRef.current = firstItem;
+          }
+          update({});
+        },
+      }),
+    [handleOpenChange, getGroups, serializedTrigger, placeholder],
+  );
+
+  return {
+    commandMenu: _commandMenu,
+    currentItem,
+    groupsRef,
+    ref: triggerRef,
+    open,
+    onActivate: handleActivate,
+    onOpenChange: setOpen,
+    onSelect: handleSelect,
+  };
+};

package/src/extensions/factories.ts

@@ -34,6 +34,7 @@ import { hexToHue, isNotFalsy } from '@dxos/util';
 import { automerge } from './automerge';
 import { SpaceAwarenessProvider, awareness } from './awareness';
 import { focus } from './focus';
+import { editorGutter, editorMonospace } from '../defaults';
 import { type ThemeStyles, defaultTheme } from '../styles';
 
 //
@@ -62,6 +63,7 @@ export type BasicExtensionsOptions = {
   lineNumbers?: boolean;
   /** If false then do not set a max-width or side margin on the editor. */
   lineWrapping?: boolean;
+  monospace?: boolean;
   placeholder?: string;
   /** If true user cannot edit the text, but they can still select and copy it. */
   readOnly?: boolean;
@@ -107,8 +109,9 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
-    props.lineNumbers && lineNumbers(),
+    props.lineNumbers && [lineNumbers(), editorGutter],
     props.lineWrapping && EditorView.lineWrapping,
+    props.monospace && editorMonospace,
     props.placeholder && placeholder(props.placeholder),
     props.readOnly !== undefined && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),

package/src/extensions/hashtag.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+} from '@codemirror/view';
+
+import { getHashColor, mx } from '@dxos/react-ui-theme';
+
+class TagWidget extends WidgetType {
+  constructor(private _text: string) {
+    super();
+  }
+
+  toDOM(): HTMLSpanElement {
+    const span = document.createElement('span');
+    span.className = mx('cm-tag', getHashColor(this._text).tag);
+    span.textContent = this._text;
+    return span;
+  }
+}
+
+const tagMatcher = new MatchDecorator({
+  regexp: /#(\w+)\W/g,
+  decoration: (match) =>
+    Decoration.replace({
+      widget: new TagWidget(match[1]),
+    }),
+});
+
+// TODO(burdon): Autocomplete from existing tags?
+export const hashtag = (): Extension => [
+  ViewPlugin.fromClass(
+    class {
+      tags: DecorationSet;
+      constructor(view: EditorView) {
+        this.tags = tagMatcher.createDeco(view);
+      }
+
+      update(update: ViewUpdate) {
+        this.tags = tagMatcher.updateDeco(update, this.tags);
+      }
+    },
+    {
+      decorations: (instance) => instance.tags,
+      provide: (plugin) =>
+        EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.tags || Decoration.none;
+        }),
+    },
+  ),
+
+  EditorView.theme({
+    '.cm-tag': {
+      borderRadius: '4px',
+      marginRight: '6px',
+      padding: '2px 6px',
+    },
+  }),
+];

package/src/extensions/index.ts

@@ -14,12 +14,14 @@ export * from './dnd';
 export * from './factories';
 export * from './focus';
 export * from './folding';
+export * from './hashtag';
 export * from './json';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
 export * from './outliner';
+export * from './placeholder';
 export * from './preview';
 export * from './selection';
 export * from './typewriter';

package/src/extensions/json.ts

@@ -16,7 +16,8 @@ export type JsonExtensionsOptions = {
 export const createJsonExtensions = ({ schema }: JsonExtensionsOptions = {}): Extension => {
   let lintSource: LintSource = jsonParseLinter();
   if (schema) {
-    const ajv = new Ajv({ allErrors: false });
+    // NOTE: Relaxing strict mode to allow additional custom schema properties.
+    const ajv = new Ajv({ allErrors: false, strict: false });
     const validate = ajv.compile(schema);
     lintSource = schemaLinter(validate);
   }

package/src/extensions/markdown/debug.ts

@@ -3,10 +3,10 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type EditorState, StateField } from '@codemirror/state';
+import { type EditorState, type Extension, StateField } from '@codemirror/state';
 import { type TreeCursor } from '@lezer/common';
 
-export const debugTree = (cb: (tree: DebugNode) => void) =>
+export const debugTree = (cb: (tree: DebugNode) => void): Extension =>
   StateField.define({
     create: (state) => cb(convertTreeToJson(state)),
     update: (value, tr) => cb(convertTreeToJson(tr.state)),

package/src/extensions/outliner/outliner.ts

@@ -28,9 +28,7 @@ import { decorateMarkdown } from '../markdown';
 // TODO(burdon): Smart Cut-and-paste.
 // TODO(burdon): DND.
 
-export type OutlinerProps = {
-  showSelected?: boolean;
-};
+export type OutlinerProps = {};
 
 /**
  * Outliner extension.
@@ -56,7 +54,7 @@ export const outliner = (options: OutlinerProps = {}): Extension => [
   floatingMenu(),
 
   // Line decorations.
-  decorations(options),
+  decorations(),
 
   // Default markdown decorations.
   decorateMarkdown({ listPaddingLeft: 8 }),
@@ -68,7 +66,7 @@ export const outliner = (options: OutlinerProps = {}): Extension => [
 /**
  * Line decorations (for border and selection).
  */
-const decorations = (options: OutlinerProps) => [
+const decorations = () => [
   ViewPlugin.fromClass(
     class {
       decorations: DecorationSet = Decoration.none;
@@ -157,12 +155,12 @@ const decorations = (options: OutlinerProps) => [
         marginBottom: '2px',
       },
 
-      '.cm-list-item-selected': {
-        borderColor: options.showSelected ? 'var(--dx-separator)' : undefined,
-      },
       '.cm-list-item-focused': {
         borderColor: 'var(--dx-accentFocusIndicator)',
       },
+      '[data-has-focus] & .cm-list-item-selected': {
+        borderColor: 'var(--dx-separator)',
+      },
     }),
   ),
 ];

package/src/extensions/placeholder.ts

@@ -0,0 +1,82 @@
+//
+// 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 } from '@codemirror/view';
+
+import { clientRectsFor, flattenRect } from '../util';
+
+class Placeholder extends WidgetType {
+  constructor(readonly content: string | HTMLElement | ((view: EditorView) => HTMLElement)) {
+    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;
+  }
+}
+
+export function multilinePlaceholder(content: string | HTMLElement | ((view: EditorView) => HTMLElement)): Extension {
+  const plugin = ViewPlugin.fromClass(
+    class {
+      constructor(readonly view: EditorView) {}
+
+      declare update: () => void; // Kludge to convince TypeScript that this is a plugin value
+
+      get decorations() {
+        // Check if the active line (where cursor is) is empty
+        const activeLine = this.view.state.doc.lineAt(this.view.state.selection.main.head);
+        const isEmpty = activeLine.text.trim() === '';
+
+        if (!isEmpty || !content) {
+          return Decoration.none;
+        }
+
+        // Create widget decoration at the start of the current line
+        const lineStart = activeLine.from;
+        return Decoration.set([
+          Decoration.widget({
+            widget: new Placeholder(content),
+            side: 1,
+          }).range(lineStart),
+        ]);
+      }
+    },
+    { decorations: (v) => v.decorations },
+  );
+  return typeof content === 'string'
+    ? [plugin, EditorView.contentAttributes.of({ 'aria-placeholder': content })]
+    : plugin;
+}

package/src/extensions/preview/preview.ts

@@ -77,12 +77,9 @@ export const preview = (options: PreviewOptions = {}): Extension => {
 
     EditorView.theme({
       '.cm-preview-block': {
-        marginLeft: '-1rem',
-        marginRight: '-1rem',
-        padding: '1rem',
-        borderRadius: '0.5rem',
-        background: 'var(--dx-modalSurface)',
-        border: '1px solid var(--dx-separator)',
+        '--dx-card-spacing-inline': 'var(--dx-trimMd)',
+        '--dx-card-spacing-block': 'var(--dx-trimMd)',
+        marginInline: 'calc(-1*var(--dx-trimMd))',
       },
     }),
   ];