@dxos/react-ui-editor 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

package/src/components/Popover/CommandMenu.tsx

@@ -0,0 +1,279 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import { Icon, type Label, Popover, toLocalizedString, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { type MaybePromise } from '@dxos/util';
+
+import { commandRangeEffect } from '../../extensions';
+
+export type CommandMenuGroup = {
+  id: string;
+  label?: Label;
+  items: CommandMenuItem[];
+};
+
+export type CommandMenuItem = {
+  id: string;
+  label: Label;
+  icon?: string;
+  onSelect?: (view: EditorView, head: number) => MaybePromise<void>;
+};
+
+export type CommandMenuProps = {
+  groups: CommandMenuGroup[];
+  currentItem?: string;
+  onSelect: (item: CommandMenuItem) => void;
+};
+
+// NOTE: Not using DropdownMenu because the command menu needs to manage focus explicitly.
+export const CommandMenu = ({ groups, currentItem, onSelect }: CommandMenuProps) => {
+  const { tx } = useThemeContext();
+  const groupsWithItems = groups.filter((group) => group.items.length > 0);
+  return (
+    <Popover.Portal>
+      <Popover.Content
+        align='start'
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        classNames={tx('menu.content', 'menu--exotic-unfocusable', { elevation: 'positioned' }, [
+          'max-h-[300px] overflow-y-auto',
+        ])}
+      >
+        <Popover.Viewport classNames={tx('menu.viewport', 'menu__viewport--exotic-unfocusable', {})}>
+          <ul>
+            {groupsWithItems.map((group, index) => (
+              <React.Fragment key={group.id}>
+                <CommandGroup group={group} currentItem={currentItem} onSelect={onSelect} />
+                {index < groupsWithItems.length - 1 && <div className={tx('menu.separator', 'menu__item', {})} />}
+              </React.Fragment>
+            ))}
+          </ul>
+        </Popover.Viewport>
+      </Popover.Content>
+    </Popover.Portal>
+  );
+};
+
+const CommandGroup = ({
+  group,
+  currentItem,
+  onSelect,
+}: {
+  group: CommandMenuGroup;
+  currentItem?: string;
+  onSelect: (item: CommandMenuItem) => void;
+}) => {
+  const { tx } = useThemeContext();
+  const { t } = useTranslation();
+  return (
+    <>
+      {group.label && (
+        <div className={tx('menu.groupLabel', 'menu__group__label', {})}>
+          <span>{toLocalizedString(group.label, t)}</span>
+        </div>
+      )}
+      {group.items.map((item) => (
+        <CommandItem key={item.id} item={item} current={currentItem === item.id} onSelect={onSelect} />
+      ))}
+    </>
+  );
+};
+
+const CommandItem = ({
+  item,
+  current,
+  onSelect,
+}: {
+  item: CommandMenuItem;
+  current: boolean;
+  onSelect: (item: CommandMenuItem) => void;
+}) => {
+  const ref = useRef<HTMLLIElement>(null);
+  const { tx } = useThemeContext();
+  const { t } = useTranslation();
+  const handleSelect = useCallback(() => onSelect(item), [item, onSelect]);
+
+  useEffect(() => {
+    if (current && ref.current) {
+      ref.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+  }, [current]);
+
+  return (
+    <li
+      ref={ref}
+      className={tx('menu.item', 'menu__item--exotic-unfocusable', {}, [current && 'bg-hoverSurface'])}
+      onClick={handleSelect}
+    >
+      {item.icon && <Icon icon={item.icon} size={5} />}
+      <span className='grow truncate'>{toLocalizedString(item.label, t)}</span>
+    </li>
+  );
+};
+
+// TODO(wittjosiah): Factor out into a separate file.
+
+//
+// Helpers
+//
+
+export const getItem = (groups: CommandMenuGroup[], id?: string): CommandMenuItem | undefined => {
+  return groups.flatMap((group) => group.items).find((item) => item.id === id);
+};
+
+export const getNextItem = (groups: CommandMenuGroup[], id?: string): CommandMenuItem => {
+  const items = groups.flatMap((group) => group.items);
+  const index = items.findIndex((item) => item.id === id);
+  return items[(index + 1) % items.length];
+};
+
+export const getPreviousItem = (groups: CommandMenuGroup[], id?: string): CommandMenuItem => {
+  const items = groups.flatMap((group) => group.items);
+  const index = items.findIndex((item) => item.id === id);
+  return items[(index - 1 + items.length) % items.length];
+};
+
+export const filterItems = (
+  groups: CommandMenuGroup[],
+  filter: (item: CommandMenuItem) => boolean,
+): CommandMenuGroup[] => {
+  return groups.map((group) => ({
+    ...group,
+    items: group.items.filter(filter),
+  }));
+};
+
+export const insertAtCursor = (view: EditorView, head: number, insert: string) => {
+  view.dispatch({
+    changes: { from: head, to: head, insert },
+    selection: { anchor: head + insert.length, head: head + insert.length },
+  });
+};
+
+/**
+ * If the cursor is at the start of a line, insert the text at the cursor.
+ * Otherwise, insert the text on a new line.
+ */
+export const insertAtLineStart = (view: EditorView, head: number, insert: string) => {
+  const line = view.state.doc.lineAt(head);
+  if (line.from === head) {
+    insertAtCursor(view, head, insert);
+  } else {
+    insert = '\n' + insert;
+    view.dispatch({
+      changes: { from: line.to, to: line.to, insert },
+      selection: { anchor: line.to + insert.length, head: line.to + insert.length },
+    });
+  }
+};
+
+export const coreSlashCommands: CommandMenuGroup = {
+  id: 'markdown',
+  label: 'Markdown',
+  items: [
+    {
+      id: 'heading-1',
+      label: 'Heading 1',
+      icon: 'ph--text-h-one--regular',
+      onSelect: (view, head) => insertAtLineStart(view, head, '# '),
+    },
+    {
+      id: 'heading-2',
+      label: 'Heading 2',
+      icon: 'ph--text-h-two--regular',
+      onSelect: (view, head) => insertAtLineStart(view, head, '## '),
+    },
+    {
+      id: 'heading-3',
+      label: 'Heading 3',
+      icon: 'ph--text-h-three--regular',
+      onSelect: (view, head) => insertAtLineStart(view, head, '### '),
+    },
+    {
+      id: 'heading-4',
+      label: 'Heading 4',
+      icon: 'ph--text-h-four--regular',
+      onSelect: (view, head) => insertAtLineStart(view, head, '#### '),
+    },
+    {
+      id: 'heading-5',
+      label: 'Heading 5',
+      icon: 'ph--text-h-five--regular',
+      onSelect: (view, head) => insertAtLineStart(view, head, '##### '),
+    },
+    {
+      id: 'heading-6',
+      label: 'Heading 6',
+      icon: 'ph--text-h-six--regular',
+      onSelect: (view, head) => insertAtLineStart(view, head, '###### '),
+    },
+    {
+      id: 'bullet-list',
+      label: 'Bullet List',
+      icon: 'ph--list-bullets--regular',
+      onSelect: (view, head) => insertAtLineStart(view, head, '- '),
+    },
+    {
+      id: 'numbered-list',
+      label: 'Numbered List',
+      icon: 'ph--list-numbers--regular',
+      onSelect: (view, head) => insertAtLineStart(view, head, '1. '),
+    },
+    {
+      id: 'task-list',
+      label: 'Task List',
+      icon: 'ph--list-checks--regular',
+      onSelect: (view, head) => insertAtLineStart(view, head, '- [ ] '),
+    },
+    {
+      id: 'quote',
+      label: 'Quote',
+      icon: 'ph--quotes--regular',
+      onSelect: (view, head) => insertAtLineStart(view, head, '> '),
+    },
+    {
+      id: 'code-block',
+      label: 'Code Block',
+      icon: 'ph--code-block--regular',
+      onSelect: (view, head) => insertAtLineStart(view, head, '```\n\n```'),
+    },
+    {
+      id: 'table',
+      label: 'Table',
+      icon: 'ph--table--regular',
+      onSelect: (view, head) => insertAtLineStart(view, head, '| | | |\n|---|---|---|\n| | | |'),
+    },
+  ],
+};
+
+export const linkSlashCommands: CommandMenuGroup = {
+  id: 'link',
+  label: 'Link',
+  items: [
+    {
+      id: 'inline-link',
+      label: 'Inline link',
+      icon: 'ph--link--regular',
+      onSelect: (view, head) =>
+        view.dispatch({
+          changes: { from: head, insert: '@' },
+          selection: { anchor: head + 1, head: head + 1 },
+          effects: commandRangeEffect.of({ trigger: '@', range: { from: head, to: head + 1 } }),
+        }),
+    },
+    {
+      id: 'block-embed',
+      label: 'Block embed',
+      icon: 'ph--lego--regular',
+      onSelect: (view, head) =>
+        view.dispatch({
+          changes: { from: head, insert: '@@' },
+          selection: { anchor: head + 2, head: head + 2 },
+          effects: commandRangeEffect.of({ trigger: '@', range: { from: head, to: head + 2 } }),
+        }),
+    },
+  ],
+};

package/src/components/Popover/RefDropdownMenu.tsx

@@ -51,9 +51,11 @@ const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProvider
   );
 
   useEffect(() => {
-    return rootRef
-      ? addEventListener(rootRef, 'dx-ref-tag-activate', handleDxRefTagActivate, customEventOptions)
-      : undefined;
+    if (!rootRef) {
+      return;
+    }
+
+    return addEventListener(rootRef, 'dx-ref-tag-activate' as any, handleDxRefTagActivate, customEventOptions);
   }, [rootRef]);
 
   return (

package/src/components/Popover/RefPopover.tsx

@@ -3,7 +3,15 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';
+import React, {
+  type PropsWithChildren,
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  type RefObject,
+  forwardRef,
+} from 'react';
 
 import { addEventListener } from '@dxos/async';
 import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
@@ -13,18 +21,47 @@ import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from
 
 const customEventOptions = { capture: true, passive: false };
 
+export type RefPopoverProps = PropsWithChildren<{
+  modal?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onActivate?: (event: DxRefTagActivate) => void;
+}>;
+
+export const RefPopover = forwardRef<DxRefTag | null, RefPopoverProps>(
+  ({ children, open, onOpenChange, modal, onActivate }, ref) => {
+    const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+      if (!rootRef || !onActivate) {
+        return;
+      }
+
+      return addEventListener(rootRef, 'dx-ref-tag-activate' as any, onActivate, customEventOptions);
+    }, [rootRef, onActivate]);
+
+    return (
+      <Popover.Root open={open} onOpenChange={onOpenChange} modal={modal}>
+        <Popover.VirtualTrigger virtualRef={ref as unknown as RefObject<HTMLButtonElement>} />
+        <div role='none' className='contents' ref={setRootRef}>
+          {children}
+        </div>
+      </Popover.Root>
+    );
+  },
+);
+
 // Create a context for the dxn value.
 type RefPopoverValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
 
 const REF_POPOVER = 'RefPopover';
 const [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>(REF_POPOVER, {});
 
-type RefPopoverProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
+type PreviewProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
 
-const RefPopoverProvider = ({ children, onLookup }: RefPopoverProviderProps) => {
+const PreviewProvider = ({ children, onLookup }: PreviewProviderProps) => {
   const trigger = useRef<DxRefTag | null>(null);
   const [value, setValue] = useState<RefPopoverValue>({});
-  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
   const [open, setOpen] = useState(false);
 
   const handleDxRefTagActivate = useCallback(
@@ -48,28 +85,15 @@ const RefPopoverProvider = ({ children, onLookup }: RefPopoverProviderProps) =>
     [onLookup],
   );
 
-  useEffect(() => {
-    return rootRef
-      ? addEventListener(rootRef, 'dx-ref-tag-activate', handleDxRefTagActivate, customEventOptions)
-      : undefined;
-  }, [rootRef]);
-
   return (
     <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <Popover.Root open={open} onOpenChange={setOpen}>
-        <Popover.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRootRef}>
-          {children}
-        </div>
-      </Popover.Root>
+      <RefPopover ref={trigger} open={open} onOpenChange={setOpen} onActivate={handleDxRefTagActivate}>
+        {children}
+      </RefPopover>
     </RefPopoverContextProvider>
   );
 };
 
-export const RefPopover = {
-  Provider: RefPopoverProvider,
-};
-
-export { useRefPopover };
+export { PreviewProvider, useRefPopover };
 
-export type { RefPopoverProviderProps, RefPopoverValue };
+export type { PreviewProviderProps, RefPopoverValue };

package/src/components/Popover/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './CommandMenu';
 export * from './RefPopover';
 export * from './RefDropdownMenu';

package/src/defaults.ts

@@ -28,6 +28,7 @@ export const editorSlots: ThemeExtensionsOptions['slots'] = {
 
 export const editorGutter = EditorView.theme({
   '.cm-gutters': {
+    background: 'var(--dx-baseSurface)',
     paddingRight: '1rem',
   },
 });
@@ -46,9 +47,3 @@ export const stackItemContentEditorClassNames = (role?: string) =>
     'attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2',
     role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
   );
-
-export const stackItemContentToolbarClassNames = (role?: string) =>
-  mx(
-    'relative z-[1] flex is-full bg-toolbarSurface border-be border-subduedSeparator',
-    role === 'section' && 'sticky block-start-0 -mbe-px min-is-0',
-  );

package/src/extensions/automerge/automerge.stories.tsx

@@ -10,8 +10,8 @@ import { Repo } from '@automerge/automerge-repo';
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import React, { useEffect, useState } from 'react';
 
-import { Expando } from '@dxos/echo-schema';
-import { DocAccessor, live, createDocAccessor, useQuery, useSpace, type Space, Query } from '@dxos/react-client/echo';
+import { Obj, Ref, Type } from '@dxos/echo';
+import { DocAccessor, createDocAccessor, useQuery, useSpace, type Space, Query } from '@dxos/react-client/echo';
 import { useIdentity, type Identity } from '@dxos/react-client/halo';
 import { ClientRepeater, type ClientRepeatedComponentProps } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
@@ -100,7 +100,7 @@ const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
   const [source, setSource] = useState<DocAccessor>();
-  const objects = useQuery(space, Query.type(Expando, { type: 'test' }));
+  const objects = useQuery(space, Query.type(Type.Expando, { type: 'test' }));
 
   useEffect(() => {
     if (!source && objects.length) {
@@ -128,9 +128,9 @@ export const WithEcho = {
         createSpace
         onSpaceCreated={async ({ space }) => {
           space.db.add(
-            live({
+            Obj.make(Type.Expando, {
               type: 'test',
-              content: live(Expando, { content: initialContent }),
+              content: Ref.make(Obj.make(Type.Expando, { content: initialContent })),
             }),
           );
         }}

package/src/extensions/command/action.ts

@@ -44,6 +44,13 @@ export const closeCommand: Command = (view: EditorView) => {
 };
 
 export const commandKeyBindings: readonly KeyBinding[] = [
-  { key: '/', run: openCommand },
-  { key: 'Escape', run: closeCommand },
+  {
+    key: '/',
+    preventDefault: true,
+    run: openCommand,
+  },
+  {
+    key: 'Escape',
+    run: closeCommand,
+  },
 ];

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;
+  },
+});