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

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,17 +53,6 @@ export const preview = (options: PreviewOptions = {}): Extension => {
         EditorView.atomicRanges.of((view) => view.state.field(field)),
       ],
     }),
-
-    EditorView.theme({
-      '.cm-preview-block': {
-        marginLeft: '-1rem',
-        marginRight: '-1rem',
-        padding: '1rem',
-        borderRadius: '0.5rem',
-        background: 'var(--dx-modalSurface)',
-        border: '1px solid var(--dx-separator)',
-      },
-    }),
   ];
 };
 
@@ -95,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) {
@@ -144,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,
@@ -214,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/hooks/useTextEditor.ts

@@ -22,15 +22,7 @@ import { getProviderValue, isNotFalsy, type MaybeProvider } from '@dxos/util';
 import { type EditorSelection, documentId, createEditorStateTransaction, editorInputMode } from '../extensions';
 import { debugDispatcher } from '../util';
 
-export type UseTextEditor = {
-  // TODO(burdon): Rename.
-  parentRef: RefObject<HTMLDivElement>;
-  view?: EditorView;
-  focusAttributes?: TabsterTypes.TabsterDOMAttribute & {
-    tabIndex: 0;
-    onKeyUp: KeyboardEventHandler<HTMLDivElement>;
-  };
-};
+let instanceCount = 0;
 
 export type CursorInfo = {
   from: number;
@@ -41,11 +33,20 @@ export type CursorInfo = {
   after?: string;
 };
 
+export type UseTextEditor = {
+  // TODO(burdon): Rename.
+  parentRef: RefObject<HTMLDivElement>;
+  view?: EditorView;
+  focusAttributes?: TabsterTypes.TabsterDOMAttribute & {
+    tabIndex: 0;
+    onKeyUp: KeyboardEventHandler<HTMLDivElement>;
+  };
+};
+
 export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
   id?: string;
   doc?: Text;
   initialValue?: string;
-  className?: string;
   autoFocus?: boolean;
   scrollTo?: number;
   selection?: EditorSelection;
@@ -53,8 +54,6 @@ export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
   debug?: boolean;
 };
 
-let instanceCount = 0;
-
 /**
  * Creates codemirror text editor.
  */

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

@@ -0,0 +1,159 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type EditorView } from '@codemirror/view';
+import { type StoryObj } from '@storybook/react';
+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 { createObjectFactory, Testing, type ValueGenerator } from '@dxos/schema/testing';
+import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import { EditorStory, names } from './components';
+import {
+  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 StoryProps = Omit<UseCommandMenuOptions, 'viewRef'> & { text: string };
+
+const DefaultStory = ({ text, ...options }: StoryProps) => {
+  const viewRef = useRef<EditorView>();
+  const { commandMenu, groupsRef, currentItem, onSelect, ...props } = useCommandMenu({ viewRef, ...options });
+
+  return (
+    <RefPopover modal={false} {...props}>
+      <EditorStory ref={viewRef} text={text} placeholder={''} extensions={commandMenu} />
+      <CommandMenu groups={groupsRef.current} currentItem={currentItem} onSelect={onSelect} />
+    </RefPopover>
+  );
+};
+
+const groups: CommandMenuGroup[] = [
+  coreSlashCommands,
+  linkSlashCommands,
+  {
+    id: 'custom',
+    label: 'Custom',
+    items: [
+      {
+        id: 'custom-1',
+        label: 'Log',
+        icon: 'ph--log--regular',
+        onSelect: console.log,
+      },
+    ],
+  },
+];
+
+const meta: Meta<StoryProps> = {
+  title: 'ui/react-ui-editor/CommandMenu',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: (args) => <DefaultStory {...args} />,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<StoryProps>;
+
+// TODO(burdon): Not working.
+export const Slash: Story = {
+  args: {
+    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: Story = {
+  render: (args) => {
+    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} />;
+  },
+  args: {
+    text: str('# Link', '', names.join(' '), ''),
+    trigger: ['/', '@'],
+  },
+  decorators: [
+    withClientProvider({
+      createSpace: true,
+      onInitialized: async (client) => {
+        client.addTypes([Testing.Contact]);
+      },
+      onSpaceCreated: async ({ space }) => {
+        const createObjects = createObjectFactory(space.db, generator);
+        await createObjects([{ type: Testing.Contact, count: 10 }]);
+        await space.db.flush({ indexes: true });
+      },
+    }),
+  ],
+};

package/src/stories/Preview.stories.tsx

@@ -4,25 +4,22 @@
 
 import '@dxos-theme';
 
-import React, { useState, useEffect, type FC } from 'react';
+import { syntaxTree } from '@codemirror/language';
+import { type EditorView } from '@codemirror/view';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 
+import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { IconButton, Popover } from '@dxos/react-ui';
-import { hoverableHidden } from '@dxos/react-ui-theme';
+import { Popover } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui-stack';
+import { hoverableControlItem, hoverableControlItemTransition, hoverableControls } from '@dxos/react-ui-theme';
 import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
 import { EditorStory } from './components';
-import { RefPopover, useRefPopover } from '../components';
-import {
-  preview,
-  image,
-  type PreviewOptions,
-  type PreviewLinkRef,
-  type PreviewLinkTarget,
-  type PreviewRenderProps,
-} from '../extensions';
+import { PreviewProvider, useRefPopover } from '../components';
+import { preview, image, type PreviewLinkRef, type PreviewLinkTarget, getLinkRef } from '../extensions';
 import { str } from '../testing';
-import { createRenderer } from '../util';
 
 const handlePreviewLookup = async ({ label, ref }: PreviewLinkRef): Promise<PreviewLinkTarget> => {
   // Random text.
@@ -36,11 +33,11 @@ const handlePreviewLookup = async ({ label, ref }: PreviewLinkRef): Promise<Prev
 
 // Async lookup.
 // TODO(burdon): Handle errors.
-const useRefTarget = (link: PreviewLinkRef, onLookup: PreviewOptions['onLookup']): PreviewLinkTarget | undefined => {
+const useRefTarget = (link: PreviewLinkRef): PreviewLinkTarget | undefined => {
   const [target, setTarget] = useState<PreviewLinkTarget | undefined>();
   useEffect(() => {
-    void onLookup?.(link).then((target) => setTarget(target ?? undefined));
-  }, [link, onLookup]);
+    void handlePreviewLookup(link).then((target) => setTarget(target ?? undefined));
+  }, [link]);
 
   return target;
 };
@@ -49,10 +46,12 @@ const PreviewCard = () => {
   const { target } = useRefPopover('PreviewCard');
   return (
     <Popover.Portal>
-      <Popover.Content classNames='popover-card-width p-2' onOpenAutoFocus={(event) => event.preventDefault()}>
+      <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
         <Popover.Viewport>
-          <h2 className='grow truncate'>{target?.label}</h2>
-          {target && <div className='line-clamp-3'>{target.text}</div>}
+          <Card.Container role='popover'>
+            <Card.Heading>{target?.label}</Card.Heading>
+            {target && <Card.Text classNames='line-clamp-3'>{target.text}</Card.Text>}
+          </Card.Container>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -60,49 +59,108 @@ const PreviewCard = () => {
   );
 };
 
-// TODO(burdon): Replace with card.
-const PreviewBlock: FC<PreviewRenderProps> = ({ readonly, link, onAction, onLookup }) => {
-  const target = useRefTarget(link, onLookup);
-  return (
-    <div className='group flex flex-col gap-2'>
-      <div className='flex items-center gap-4'>
-        <div className='grow truncate'>
-          {/* <span className='text-xs text-subdued mie-2'>Prompt</span> */}
-          {link.label}
-        </div>
-        {!readonly && (
-          <div className='flex gap-1'>
+type PreviewAction =
+  | {
+      type: 'insert';
+      link: PreviewLinkRef;
+      target: PreviewLinkTarget;
+    }
+  | {
+      type: 'delete';
+      link: PreviewLinkRef;
+    };
+
+const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElement; view?: EditorView }) => {
+  const target = useRefTarget(link);
+
+  const handleAction = useCallback(
+    (action: PreviewAction) => {
+      invariant(view, 'View not found');
+      const pos = view.posAtDOM(el);
+      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;
+        }
+      }
+    },
+    [view, el],
+  );
+
+  const handleDelete = useCallback(() => {
+    handleAction({ type: 'delete', link });
+  }, [handleAction, link]);
+
+  const handleInsert = useCallback(() => {
+    if (target) {
+      handleAction({ type: 'insert', link, target });
+    }
+  }, [handleAction, link, target]);
+
+  return createPortal(
+    <Card.Content classNames={hoverableControls}>
+      <div className='flex items-start'>
+        {!view?.state.readOnly && (
+          <Card.Toolbar classNames='is-min p-[--dx-cardSpacingInline]'>
             {(link.suggest && (
               <>
+                <Card.ToolbarIconButton label='Discard' icon={'ph--x--regular'} onClick={handleDelete} />
                 {target && (
-                  <IconButton
-                    classNames='text-green-500'
+                  <Card.ToolbarIconButton
+                    classNames='bg-successSurface text-successSurfaceText'
                     label='Apply'
-                    icon={'ph--check--regular'}
-                    onClick={() => onAction({ type: 'insert', link, target })}
+                    icon='ph--check--regular'
+                    onClick={handleInsert}
                   />
                 )}
-                <IconButton
-                  classNames='text-red-500'
-                  label='Cancel'
-                  icon={'ph--x--regular'}
-                  onClick={() => onAction({ type: 'delete', link })}
-                />
               </>
             )) || (
-              <IconButton
+              <Card.ToolbarIconButton
                 iconOnly
                 label='Delete'
-                icon={'ph--x--regular'}
-                classNames={hoverableHidden}
-                onClick={() => onAction({ type: 'delete', link })}
+                icon='ph--x--regular'
+                classNames={[hoverableControlItem, hoverableControlItemTransition]}
+                onClick={handleDelete}
               />
             )}
-          </div>
+          </Card.Toolbar>
         )}
+        <Card.Heading classNames='grow order-first mie-0'>
+          {/* <span className='text-xs text-subdued mie-2'>Prompt</span> */}
+          {link.label}
+        </Card.Heading>
       </div>
-      {target && <div className='line-clamp-3'>{target.text}</div>}
-    </div>
+      {target && <Card.Text classNames='line-clamp-3 mbs-0'>{target.text}</Card.Text>}
+    </Card.Content>,
+    el,
   );
 };
 
@@ -116,34 +174,55 @@ const meta: Meta<typeof EditorStory> = {
 export default meta;
 
 export const Default = {
-  render: () => (
-    <RefPopover.Provider onLookup={handlePreviewLookup}>
-      <EditorStory
-        text={str(
-          '# Preview',
-          '',
-          'This project is part of the [DXOS][dxn:queue:data:123] SDK.',
-          '',
-          '![DXOS][?dxn:queue:data:123]',
-          '',
-          'It consists of [ECHO][dxn:queue:data:echo], [HALO][dxn:queue:data:halo], and [MESH][dxn:queue:data:mesh].',
-          '',
-          '## Deep dive',
-          '',
-          '![ECHO][dxn:queue:data:echo]',
-          '',
-          '',
-          '',
-        )}
-        extensions={[
-          image(),
-          preview({
-            renderBlock: createRenderer(PreviewBlock),
-            onLookup: handlePreviewLookup,
-          }),
-        ]}
-      />
-      <PreviewCard />
-    </RefPopover.Provider>
-  ),
+  render: () => {
+    const [view, setView] = useState<EditorView>();
+    const [previewBlocks, setPreviewBlocks] = useState<{ link: PreviewLinkRef; el: HTMLElement }[]>([]);
+
+    const extensions = useMemo(() => {
+      return [
+        image(),
+        preview({
+          addBlockContainer: (link, el) => {
+            setPreviewBlocks((prev) => [...prev, { link, el }]);
+          },
+          removeBlockContainer: (link) => {
+            setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
+          },
+        }),
+      ];
+    }, []);
+
+    const handleViewRef = useCallback((instance?: EditorView | null) => {
+      setView(instance ?? undefined);
+    }, []);
+
+    return (
+      <PreviewProvider onLookup={handlePreviewLookup}>
+        <EditorStory
+          ref={handleViewRef}
+          text={str(
+            '# Preview',
+            '',
+            'This project is part of the [DXOS][dxn:queue:data:123] SDK.',
+            '',
+            '![DXOS][?dxn:queue:data:123]',
+            '',
+            'It consists of [ECHO][dxn:queue:data:echo], [HALO][dxn:queue:data:halo], and [MESH][dxn:queue:data:mesh].',
+            '',
+            '## Deep dive',
+            '',
+            '![ECHO][dxn:queue:data:echo]',
+            '',
+            '',
+            '',
+          )}
+          extensions={extensions}
+        />
+        <PreviewCard />
+        {previewBlocks.map(({ link, el }) => (
+          <PreviewBlock key={link.ref} link={link} el={el} view={view} />
+        ))}
+      </PreviewProvider>
+    );
+  },
 };

package/src/stories/components/util.tsx

@@ -196,7 +196,7 @@ const LinkButton: FC<{ url: string }> = ({ url }) => {
 
 export const renderLinkButton = createRenderer(LinkButton);
 
-// Shared extensions
+// Shared extensions.
 export const defaultExtensions: Extension[] = [
   decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100 }),
   formattingKeymap(),
@@ -212,7 +212,7 @@ export const allExtensions: Extension[] = [
   folding(),
 ];
 
-// Long text for scrolling stories
+// Long text for scrolling stories.
 export const longText = faker.helpers
   .multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 })
   .join('\n\n');