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

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/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,45 @@ 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(() => {
+      return rootRef && onActivate
+        ? addEventListener(rootRef, 'dx-ref-tag-activate', onActivate, customEventOptions)
+        : undefined;
+    }, [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 +83,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',
   },
 });