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

package/src/extensions/command/useCommandMenu.ts

@@ -0,0 +1,118 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
+
+import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
+import { type MaybePromise } from '@dxos/util';
+
+import { commandMenu, commandRangeEffect } from './command-menu';
+import { type PlaceholderOptions } from './placeholder';
+import { getItem, getNextItem, getPreviousItem, type CommandMenuGroup, type CommandMenuItem } from '../../components';
+
+export type UseCommandMenuOptions = {
+  viewRef: RefObject<EditorView | undefined>;
+  trigger: string | string[];
+  placeholder?: Partial<PlaceholderOptions>;
+  getMenu: (trigger: string, query?: string) => MaybePromise<CommandMenuGroup[]>;
+};
+
+export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: 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 [_, refresh] = useState({});
+
+  const handleOpenChange = useCallback(
+    async (open: boolean, trigger?: string) => {
+      if (open && trigger) {
+        groupsRef.current = await getMenu(trigger);
+      }
+      setOpen(open);
+      if (!open) {
+        triggerRef.current = null;
+        setCurrentItem(undefined);
+        viewRef.current?.dispatch({ effects: [commandRangeEffect.of(null)] });
+      }
+    },
+    [getMenu],
+  );
+
+  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(() => {
+    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) => {
+        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 {
+    commandMenu: _commandMenu,
+    currentItem,
+    groupsRef,
+    ref: triggerRef,
+    open,
+    onActivate: handleActivate,
+    onOpenChange: setOpen,
+    onSelect: handleSelect,
+  };
+};

package/src/extensions/index.ts

@@ -21,7 +21,6 @@ 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/markdown/bundle.ts

@@ -7,7 +7,6 @@ import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
 import { syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
-import { lintKeymap } from '@codemirror/lint';
 import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 
@@ -66,7 +65,6 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
         // https://codemirror.net/docs/ref/#commands.defaultKeymap
         ...defaultKeymap,
         ...completionKeymap,
-        ...lintKeymap,
       ].filter(isNotFalsy),
     ),
   ];

package/src/extensions/outliner/tree.test.ts

@@ -4,7 +4,7 @@
 
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { EditorState } from '@codemirror/state';
-import { describe, test } from 'vitest';
+import { beforeEach, describe, test } from 'vitest';
 
 import { outlinerTree, treeFacet, listItemToString, type Item } from './tree';
 import { str } from '../../testing';
@@ -71,7 +71,11 @@ describe('tree (boundary conditions)', () => {
 });
 
 describe('tree (advanced)', () => {
-  const state = EditorState.create({ doc: str(...lines), extensions });
+  let state: EditorState;
+
+  beforeEach(() => {
+    state = EditorState.create({ doc: str(...lines), extensions });
+  });
 
   test('traverse', ({ expect }) => {
     const tree = state.facet(treeFacet);
@@ -80,15 +84,15 @@ describe('tree (advanced)', () => {
       console.log(listItemToString(item, level));
       count++;
     });
-    expect(count).toBe(9);
+    expect(count).to.eq(9);
   });
 
   test('continguous', ({ expect }) => {
     const tree = state.facet(treeFacet);
     const ranges: Range[] = [];
     tree.traverse((item) => {
-      ranges.push(item.lineRange);
       console.log(listItemToString(item));
+      ranges.push(item.lineRange);
     });
 
     // Check no gaps between ranges.
@@ -97,18 +101,17 @@ describe('tree (advanced)', () => {
     for (let i = 0; i < ranges.length - 1; i++) {
       const current = ranges[i];
       const next = ranges[i + 1];
-      expect(current.to + 1).toBe(next.from);
+      expect(current.to + 1).to.eq(next.from);
     }
   });
 
   test('find', ({ expect }) => {
     const tree = state.facet(treeFacet);
-
     expect(tree.find(0)).to.include({ type: 'task' });
     expect(tree.find(state.doc.length)).to.include({ type: 'task' });
 
     expect(tree.find(getPos(1))).to.include({ type: 'task' });
-    expect(tree.find(getPos(1))).toBe(tree.find(getPos(1) + 4));
+    expect(tree.find(getPos(1))).to.eq(tree.find(getPos(1) + 4));
     expect(tree.find(getPos(5))).to.include({ type: 'bullet' });
   });
 
@@ -148,17 +151,17 @@ describe('tree (advanced)', () => {
     const tree = state.facet(treeFacet);
     {
       const item = tree.find(getPos(0))!;
-      expect(tree.lastDescendant(item).index).toBe(item.index);
+      expect(tree.lastDescendant(item).index).to.eq(item.index);
     }
     {
       const item = tree.find(getPos(1))!;
       const last = tree.find(getPos(7))!;
-      expect(tree.lastDescendant(item).index).toBe(last.index);
+      expect(tree.lastDescendant(item).index).to.eq(last.index);
     }
     {
       const item = tree.find(getPos(3))!;
       const last = tree.find(getPos(6))!;
-      expect(tree.lastDescendant(item).index).toBe(last.index);
+      expect(tree.lastDescendant(item).index).to.eq(last.index);
     }
   });
 });

package/src/extensions/outliner/tree.ts

@@ -69,8 +69,8 @@ export class Tree implements Item {
   traverse<T = any>(cb: (item: Item, level: number) => T | void): T | undefined;
   traverse<T = any>(item: Item, cb: (item: Item, level: number) => T | void): T | undefined;
   traverse<T = any>(
-    itemOrCb: Item | ((item: Item, level: number) => T | void),
-    maybeCb?: (item: Item, level: number) => T | void,
+    itemOrCb: Item | ((item: Item, level: number) => T | undefined | void),
+    maybeCb?: (item: Item, level: number) => T | undefined | void,
   ): T | undefined {
     if (typeof itemOrCb === 'function') {
       return traverse<T>(this, itemOrCb);
@@ -83,7 +83,7 @@ export class Tree implements Item {
    * Return the closest item.
    */
   find(pos: number): Item | undefined {
-    return this.traverse((item) => (item.lineRange.from <= pos && item.lineRange.to >= pos ? item : undefined));
+    return this.traverse<Item>((item) => (item.lineRange.from <= pos && item.lineRange.to >= pos ? item : undefined));
   }
 
   /**
@@ -148,6 +148,8 @@ export const traverse = <T = any>(root: Item, cb: (item: Item, level: number) =>
         return value;
       }
     }
+
+    return undefined;
   };
 
   return t(root, root.type === 'root' ? -1 : 0);

package/src/extensions/preview/preview.ts

@@ -16,8 +16,6 @@ import {
 import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 
-import { type RenderCallback } from '../../types';
-
 export type PreviewLinkRef = {
   suggest?: boolean;
   block?: boolean;
@@ -31,32 +29,13 @@ export type PreviewLinkTarget = {
   object?: any;
 };
 
-export type PreviewAction =
-  | {
-      type: 'insert';
-      link: PreviewLinkRef;
-      target: PreviewLinkTarget;
-    }
-  | {
-      type: 'delete';
-      link: PreviewLinkRef;
-    };
-
+// TODO(wittjosiah): Remove.
 // TODO(burdon): Handle error.
 export type PreviewLookup = (link: PreviewLinkRef) => Promise<PreviewLinkTarget | null | undefined>;
 
-export type PreviewActionHandler = (action: PreviewAction) => void;
-
-export type PreviewRenderProps = {
-  readonly: boolean;
-  link: PreviewLinkRef;
-  onAction: PreviewActionHandler;
-  onLookup?: PreviewLookup;
-};
-
 export type PreviewOptions = {
-  renderBlock?: RenderCallback<PreviewRenderProps>;
-  onLookup?: PreviewLookup;
+  addBlockContainer?: (link: PreviewLinkRef, el: HTMLElement) => void;
+  removeBlockContainer?: (link: PreviewLinkRef) => void;
 };
 
 /**
@@ -74,14 +53,6 @@ export const preview = (options: PreviewOptions = {}): Extension => {
         EditorView.atomicRanges.of((view) => view.state.field(field)),
       ],
     }),
-
-    EditorView.theme({
-      '.cm-preview-block': {
-        '--dx-card-spacing-inline': 'var(--dx-trimMd)',
-        '--dx-card-spacing-block': 'var(--dx-trimMd)',
-        marginInline: 'calc(-1*var(--dx-trimMd))',
-      },
-    }),
   ];
 };
 
@@ -92,7 +63,7 @@ export const preview = (options: PreviewOptions = {}): Extension => {
  * ![Label][dxn:echo:123]    Block reference
  * ![Label][?dxn:echo:123]   Suggestion
  */
-const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef | undefined => {
+export const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef | undefined => {
   const mark = node.getChild('LinkMark');
   const label = node.getChild('LinkLabel');
   if (mark && label) {
@@ -141,7 +112,7 @@ const buildDecorations = (state: EditorState, options: PreviewOptions) => {
         //
         case 'Image': {
           const link = getLinkRef(state, node.node);
-          if (options.renderBlock && link) {
+          if (options.addBlockContainer && options.removeBlockContainer && link) {
             builder.add(
               node.from,
               node.to,
@@ -211,58 +182,12 @@ class PreviewBlockWidget extends WidgetType {
 
   override toDOM(view: EditorView): HTMLDivElement {
     const root = document.createElement('div');
-    root.classList.add('cm-preview-block');
-
-    // TODO(burdon): Inject handler.
-    const handleAction: PreviewActionHandler = (action) => {
-      const pos = view.posAtDOM(root);
-      const node = syntaxTree(view.state).resolve(pos + 1).node.parent;
-      if (!node) {
-        return;
-      }
-
-      const link = getLinkRef(view.state, node);
-      if (link?.ref !== action.link.ref) {
-        return;
-      }
-
-      switch (action.type) {
-        // TODO(burdon): Should we dispatch to the view or mutate the document? (i.e., handle externally?)
-        // Insert ref text.
-        case 'insert': {
-          view.dispatch({
-            changes: {
-              from: node.from,
-              to: node.to,
-              insert: action.target.text,
-            },
-          });
-          break;
-        }
-        // Remove ref.
-        case 'delete': {
-          view.dispatch({
-            changes: {
-              from: node.from,
-              to: node.to,
-            },
-          });
-          break;
-        }
-      }
-    };
-
-    this._options.renderBlock!(
-      root,
-      {
-        readonly: view.state.readOnly,
-        link: this._link,
-        onAction: handleAction,
-        onLookup: this._options.onLookup,
-      },
-      view,
-    );
-
+    root.classList.add('cm-preview-block', 'density-coarse');
+    this._options.addBlockContainer?.(this._link, root);
     return root;
   }
+
+  override destroy() {
+    this._options.removeBlockContainer?.(this._link);
+  }
 }

package/src/stories/Command.stories.tsx

@@ -75,7 +75,7 @@ const meta: Meta<typeof EditorStory> = {
           floatingMenu(),
           command({
             renderDialog: createRenderer(CommandDialog),
-            onHint: () => 'Press / for commands.',
+            onHint: () => "Press '/' for commands",
           }),
         ]}
       />

package/src/stories/CommandMenu.stories.tsx

@@ -16,24 +16,25 @@ import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
 import { EditorStory, names } from './components';
 import {
-  coreSlashCommands,
-  filterItems,
-  RefPopover,
-  type CommandMenuGroup,
   CommandMenu,
+  type CommandMenuGroup,
   type CommandMenuItem,
+  RefPopover,
+  coreSlashCommands,
+  filterItems,
   insertAtCursor,
   insertAtLineStart,
   linkSlashCommands,
 } from '../components';
 import { useCommandMenu, type UseCommandMenuOptions } from '../extensions';
 import { str } from '../testing';
+import { createElement } from '../util';
 
 const generator: ValueGenerator = faker as any;
 
-type Args = Omit<UseCommandMenuOptions, 'viewRef'> & { text: string };
+type StoryProps = Omit<UseCommandMenuOptions, 'viewRef'> & { text: string };
 
-const Story = ({ text, ...options }: Args) => {
+const DefaultStory = ({ text, ...options }: StoryProps) => {
   const viewRef = useRef<EditorView>();
   const { commandMenu, groupsRef, currentItem, onSelect, ...props } = useCommandMenu({ viewRef, ...options });
 
@@ -62,30 +63,45 @@ const groups: CommandMenuGroup[] = [
   },
 ];
 
-const meta: Meta<Args> = {
+const meta: Meta<StoryProps> = {
   title: 'ui/react-ui-editor/CommandMenu',
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: (args) => <Story {...args} />,
-  parameters: { layout: 'fullscreen' },
+  render: (args) => <DefaultStory {...args} />,
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
 
-export const Slash: StoryObj<Args> = {
+type Story = StoryObj<StoryProps>;
+
+// TODO(burdon): Not working.
+export const Slash: Story = {
   args: {
-    trigger: '/',
-    getGroups: (query) =>
-      filterItems(groups, (item) =>
-        query ? (item.label as string).toLowerCase().includes(query.toLowerCase()) : true,
-      ),
     text: str('# Slash', '', names.join(' '), ''),
+    trigger: '/',
+    placeholder: {
+      content: () => {
+        return createElement('div', undefined, [
+          createElement('span', { text: 'Press' }),
+          createElement('span', { className: 'border border-separator rounded-sm mx-1 px-1', text: '/' }),
+          createElement('span', { text: 'for commands' }),
+        ]);
+      },
+    },
+    getMenu: (text) => {
+      return filterItems(groups, (item) =>
+        text ? (item.label as string).toLowerCase().includes(text.toLowerCase()) : true,
+      );
+    },
   },
 };
 
-export const Link: StoryObj<Args> = {
+export const Link: Story = {
   render: (args) => {
     const { space } = useClientProvider();
-    const getGroups = useCallback(
+    const getMenu = useCallback(
       async (trigger: string, query?: string): Promise<CommandMenuGroup[]> => {
         if (trigger === '/') {
           return filterItems(groups, (item) =>
@@ -121,11 +137,11 @@ export const Link: StoryObj<Args> = {
       [space],
     );
 
-    return <Story {...args} getGroups={getGroups} />;
+    return <DefaultStory {...args} getMenu={getMenu} />;
   },
   args: {
-    trigger: ['/', '@'],
     text: str('# Link', '', names.join(' '), ''),
+    trigger: ['/', '@'],
   },
   decorators: [
     withClientProvider({