@dxos/react-ui-editor 0.8.4-main.e098934 → 0.8.4-main.ead640a

package/src/components/CommandMenu/CommandMenu.tsx

@@ -1,346 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { Fragment, type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
-
-import { addEventListener } from '@dxos/async';
-import {
-  type DxAnchorActivate,
-  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 = PropsWithChildren<{
-  groups: CommandMenuGroup[];
-  onSelect: (item: CommandMenuItem) => void;
-  onActivate?: (event: DxAnchorActivate) => void;
-  currentItem?: string;
-  open?: boolean;
-  onOpenChange?: (nextOpen: boolean) => void;
-  defaultOpen?: boolean;
-}>;
-
-// NOTE: Not using DropdownMenu because the command menu needs to manage focus explicitly.
-export const CommandMenuProvider = ({
-  groups,
-  onSelect,
-  onActivate,
-  currentItem,
-  children,
-  open: propsOpen,
-  onOpenChange,
-  defaultOpen,
-}: CommandMenuProps) => {
-  const { tx } = useThemeContext();
-  const groupsWithItems = groups.filter((group) => group.items.length > 0);
-  const trigger = useRef<HTMLButtonElement | null>(null);
-
-  const [open, setOpen] = useControllableState({
-    prop: propsOpen,
-    onChange: onOpenChange,
-    defaultProp: defaultOpen,
-  });
-
-  const handleDxAnchorActivate = useCallback(
-    (event: DxAnchorActivate) => {
-      const { trigger: dxTrigger, refId } = event;
-      // If this has a `refId`, then it’s probably a URL or DXN and out of scope for this component.
-      if (!refId) {
-        trigger.current = dxTrigger as HTMLButtonElement;
-        if (onActivate) {
-          onActivate(event);
-        } else {
-          queueMicrotask(() => setOpen(true));
-        }
-      }
-    },
-    [onActivate],
-  );
-
-  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (!rootRef || !handleDxAnchorActivate) {
-      return;
-    }
-
-    return addEventListener(rootRef, 'dx-anchor-activate' as any, handleDxAnchorActivate, {
-      capture: true,
-      passive: false,
-    });
-  }, [rootRef, handleDxAnchorActivate]);
-
-  return (
-    <Popover.Root modal={false} open={open} onOpenChange={setOpen}>
-      <Popover.Portal>
-        <Popover.Content
-          align='start'
-          onOpenAutoFocus={(event) => event.preventDefault()}
-          classNames={tx('menu.content', 'menu--exotic-unfocusable', { elevation: 'positioned' }, [
-            'max-bs-80 overflow-y-auto',
-          ])}
-        >
-          <Popover.Viewport classNames={tx('menu.viewport', 'menu__viewport--exotic-unfocusable', {})}>
-            <ul>
-              {groupsWithItems.map((group, index) => (
-                <Fragment key={group.id}>
-                  <CommandGroup group={group} currentItem={currentItem} onSelect={onSelect} />
-                  {index < groupsWithItems.length - 1 && <div className={tx('menu.separator', 'menu__item', {})} />}
-                </Fragment>
-              ))}
-            </ul>
-          </Popover.Viewport>
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Portal>
-      <Popover.VirtualTrigger virtualRef={trigger} />
-      <div role='none' className='contents' ref={setRootRef}>
-        {children}
-      </div>
-    </Popover.Root>
-  );
-};
-
-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/CommandMenu/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './CommandMenu';

package/src/extensions/command/action.ts

@@ -1,55 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { StateEffect } from '@codemirror/state';
-import { type Command, type EditorView, type KeyBinding } 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-menu.ts

@@ -1,211 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Prec, RangeSetBuilder, StateEffect, StateField } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, keymap } from '@codemirror/view';
-
-import { type Range } from '../../types';
-
-import { type PlaceholderOptions, placeholder } from './placeholder';
-
-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-anchor.
-          builder.add(
-            activeRange.from,
-            activeRange.to,
-            Decoration.mark({
-              tagName: 'dx-anchor',
-              class: 'cm-floating-menu-trigger',
-              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

@@ -1,34 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension, Prec } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
-
-import { isNonNullable } from '@dxos/util';
-
-import { closeEffect, commandKeyBindings } from './action';
-import { type HintOptions, hint } from './hint';
-import { type PopupOptions, commandConfig, commandState } 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
-
-export type CommandOptions = Partial<PopupOptions & HintOptions>;
-
-export const command = (options: CommandOptions = {}): Extension => {
-  return [
-    Prec.highest(keymap.of(commandKeyBindings)),
-    commandConfig.of(options),
-    commandState,
-    options.onHint && hint(options),
-    EditorView.focusChangeEffect.of((_, focusing) => (focusing ? closeEffect.of(null) : null)),
-    EditorView.theme({
-      '.cm-tooltip': {
-        background: 'transparent',
-      },
-    }),
-  ].filter(isNonNullable);
-};