@dxos/react-ui-editor 0.8.4-main.a4bbb77 → 0.8.4-main.ae835ea

package/src/extensions/command-dialog/state.ts

@@ -1,90 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { StateField } from '@codemirror/state';
-import { type EditorView, type Tooltip, type TooltipView, showTooltip } from '@codemirror/view';
-
-import { type RenderCallback } from '../../types';
-import { singleValueFacet } from '../../util';
-
-import { type Action, closeEffect, openEffect } from './action';
-import { type CommandOptions } from './command-dialog';
-
-export const commandConfig = singleValueFacet<CommandOptions>();
-
-export type PopupOptions = {
-  renderDialog: RenderCallback<{ onAction: (action?: Action) => void }>;
-};
-
-type CommandState = {
-  tooltip?: Tooltip;
-};
-
-export const commandState = StateField.define<CommandState>({
-  create: () => ({}),
-  update: (state, tr) => {
-    for (const effect of tr.effects) {
-      if (effect.is(closeEffect)) {
-        return {};
-      }
-
-      const { renderDialog } = tr.state.facet(commandConfig);
-      if (effect.is(openEffect) && renderDialog) {
-        const { pos, fullWidth } = effect.value;
-        const tooltip: Tooltip = {
-          pos,
-          above: false,
-          arrow: false,
-          strictSide: true,
-          create: (view: EditorView) => {
-            const root = document.createElement('div');
-            const tooltipView: TooltipView = {
-              dom: root,
-              mount: (view: EditorView) => {
-                if (fullWidth) {
-                  const parent = root.parentElement!;
-                  const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
-                  const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
-                  root.style.width = `${widthWithoutPadding}px`;
-                }
-
-                // Render react component.
-                renderDialog(
-                  root,
-                  {
-                    onAction: (action) => {
-                      view.dispatch({ effects: closeEffect.of(null) });
-                      switch (action?.type) {
-                        case 'insert': {
-                          // Insert into editor.
-                          const text = action.text + '\n';
-                          view.dispatch({
-                            changes: { from: pos, insert: text },
-                            selection: { anchor: pos + text.length },
-                          });
-                          break;
-                        }
-                      }
-
-                      // NOTE: Truncates text if set focus immediately.
-                      requestAnimationFrame(() => view.focus());
-                    },
-                  },
-                  view,
-                );
-              },
-            };
-
-            return tooltipView;
-          },
-        };
-
-        return { tooltip };
-      }
-    }
-
-    return state;
-  },
-  provide: (field) => [showTooltip.from(field, (value) => value.tooltip ?? null)],
-});

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

@@ -1,210 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension, 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): Extension => {
-  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-visible-focus': 'false',
-                '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
-        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-menu/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './command-menu';
-export * from './useCommandMenu';

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

@@ -1,134 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
-
-import { type DxAnchorActivate } from '@dxos/react-ui';
-import { type MaybePromise } from '@dxos/util';
-
-import { type CommandMenuGroup, type CommandMenuItem, getItem, getNextItem, getPreviousItem } from '../../components';
-
-import { commandMenu, commandRangeEffect } from './command-menu';
-import { type PlaceholderOptions } from './placeholder';
-
-export type UseCommandMenuOptions = {
-  // TODO(burdon): Extensions should not depend directly on the editor view.
-  viewRef: RefObject<EditorView | null>;
-  trigger: string | string[];
-  placeholder?: Partial<PlaceholderOptions>;
-  getMenu: (trigger: string, query?: string) => MaybePromise<CommandMenuGroup[]>;
-};
-
-export type UseCommandMenu = {
-  groupsRef: RefObject<CommandMenuGroup[]>;
-  commandMenu: Extension;
-  currentItem: string | undefined;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onActivate: (event: DxAnchorActivate) => void;
-  onSelect: (item: CommandMenuItem) => void;
-};
-
-export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCommandMenuOptions): UseCommandMenu => {
-  const currentRef = useRef<CommandMenuItem | null>(null);
-  const groupsRef = useRef<CommandMenuGroup[]>([]);
-  const [currentItem, setCurrentItem] = useState<string>();
-  const [open, setOpen] = useState(false);
-  const [_, refresh] = useState({});
-
-  const handleOpenChange = useCallback(
-    async (open: boolean, trigger?: string) => {
-      if (open && trigger) {
-        groupsRef.current = await getMenu(trigger);
-      }
-
-      setOpen(open);
-      if (!open) {
-        setCurrentItem(undefined);
-        viewRef.current?.dispatch({ effects: [commandRangeEffect.of(null)] });
-      }
-    },
-    [getMenu],
-  );
-
-  const handleActivate = useCallback<UseCommandMenu['onActivate']>(
-    async (event) => {
-      const item = getItem(groupsRef.current, currentItem);
-      if (item) {
-        currentRef.current = item;
-      }
-
-      const triggerKey = event.trigger.getAttribute('data-trigger');
-      if (!open && triggerKey) {
-        await handleOpenChange(true, triggerKey);
-      }
-    },
-    [open, handleOpenChange],
-  );
-
-  // TODO(burdon): Move outside.
-  const handleSelect = useCallback<UseCommandMenu['onSelect']>((item) => {
-    if (!viewRef.current) {
-      return;
-    }
-
-    const selection = viewRef.current.state.selection.main;
-    void item.onSelect?.(viewRef.current, selection.head);
-  }, []);
-
-  const serializedTrigger = Array.isArray(trigger) ? trigger.join(',') : trigger;
-
-  const memoizedCommandMenu = useMemo<Extension>(() => {
-    return commandMenu({
-      trigger,
-      placeholder,
-      onClose: () => handleOpenChange(false),
-      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;
-        });
-      },
-      onEnter: () => {
-        if (currentRef.current) {
-          handleSelect(currentRef.current);
-        }
-      },
-      onTextChange: async (trigger, text) => {
-        if (/\W/.test(text)) {
-          return queueMicrotask(() => handleOpenChange(false));
-        }
-
-        groupsRef.current = await getMenu(trigger, text);
-        const firstItem = groupsRef.current.filter((group) => group.items.length > 0)[0]?.items[0];
-        if (firstItem) {
-          setCurrentItem(firstItem.id);
-          currentRef.current = firstItem;
-        }
-
-        refresh({});
-      },
-    });
-  }, [handleOpenChange, getMenu, serializedTrigger, placeholder]);
-
-  return {
-    groupsRef,
-    commandMenu: memoizedCommandMenu,
-    currentItem,
-    open,
-    onOpenChange: setOpen,
-    onActivate: handleActivate,
-    onSelect: handleSelect,
-  };
-};

package/src/stories/CommandMenu.stories.tsx

@@ -1,158 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useRef } from 'react';
-
-import { Obj, Query } from '@dxos/echo';
-import { faker } from '@dxos/random';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { Domino } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { Testing, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
-
-import {
-  type CommandMenuGroup,
-  type CommandMenuItem,
-  CommandMenuProvider,
-  coreSlashCommands,
-  filterItems,
-  insertAtCursor,
-  insertAtLineStart,
-  linkSlashCommands,
-} from '../components';
-import { type UseCommandMenuOptions, useCommandMenu } from '../extensions';
-import { str } from '../testing';
-
-import { EditorStory, names } from './components';
-
-const generator: ValueGenerator = faker as any;
-
-type StoryProps = Omit<UseCommandMenuOptions, 'viewRef'> & { text: string };
-
-const DefaultStory = ({ text, ...options }: StoryProps) => {
-  const viewRef = useRef<EditorView>(null);
-  const { groupsRef, commandMenu, ...commandMenuProps } = useCommandMenu({ viewRef, ...options });
-
-  return (
-    <CommandMenuProvider groups={groupsRef.current} {...commandMenuProps}>
-      <EditorStory ref={viewRef} text={text} placeholder={''} extensions={commandMenu} />
-    </CommandMenuProvider>
-  );
-};
-
-const groups: CommandMenuGroup[] = [
-  coreSlashCommands,
-  linkSlashCommands,
-  {
-    id: 'custom',
-    label: 'Custom',
-    items: [
-      {
-        id: 'custom-1',
-        label: 'Log',
-        icon: 'ph--log--regular',
-        onSelect: console.log,
-      },
-    ],
-  },
-];
-
-const meta = {
-  title: 'ui/react-ui-editor/CommandMenu',
-  render: DefaultStory,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// TODO(burdon): Not working.
-export const Slash: Story = {
-  args: {
-    text: str('# Slash', '', names.join(' '), ''),
-    trigger: '/',
-    placeholder: {
-      content: () =>
-        Domino.of('div')
-          .children(
-            Domino.of('span').text('Press'),
-            Domino.of('span').text('/').classNames('border border-separator rounded-sm mx-1 px-1'),
-            Domino.of('span').text('for commands'),
-          )
-          .build(),
-    },
-    getMenu: (text) => {
-      return filterItems(groups, (item) =>
-        text ? (item.label as string).toLowerCase().includes(text.toLowerCase()) : true,
-      );
-    },
-  },
-};
-
-export const Link: Story = {
-  render: (args: StoryProps) => {
-    const { space } = useClientProvider();
-    const getMenu = useCallback(
-      async (trigger: string, query?: string): Promise<CommandMenuGroup[]> => {
-        if (trigger === '/') {
-          return filterItems(groups, (item) =>
-            query ? (item.label as string).toLowerCase().includes(query.toLowerCase()) : true,
-          );
-        }
-
-        if (!space) {
-          return [];
-        }
-
-        const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
-        const result = await space?.db.query(Query.type(Testing.Contact)).run();
-        const items = result.objects
-          .filter((object) => object.name.toLowerCase().includes(name))
-          .map(
-            (object): CommandMenuItem => ({
-              id: object.id,
-              label: object.name,
-              icon: 'ph--user--regular',
-              onSelect: (view, head) => {
-                const link = `[${object.name}](${Obj.getDXN(object)})`;
-                if (query?.startsWith('@')) {
-                  insertAtLineStart(view, head, `!${link}\n`);
-                } else {
-                  insertAtCursor(view, head, `${link} `);
-                }
-              },
-            }),
-          );
-        return [{ id: 'echo', items }];
-      },
-      [space],
-    );
-
-    return <DefaultStory {...args} getMenu={getMenu} />;
-  },
-  decorators: [
-    withClientProvider({
-      createSpace: true,
-      onInitialized: async (client) => {
-        client.addTypes([Testing.Contact]);
-      },
-      onCreateSpace: async ({ space }) => {
-        const createObjects = createObjectFactory(space.db, generator);
-        await createObjects([{ type: Testing.Contact, count: 10 }]);
-        await space.db.flush({ indexes: true });
-      },
-    }),
-  ],
-  args: {
-    text: str('# Link', '', names.join(' '), ''),
-    trigger: ['/', '@'],
-    getMenu: () => [],
-  },
-};