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

package/src/hooks/useTextEditor.ts

@@ -4,8 +4,8 @@
 
 import { EditorState, type EditorStateConfig, type Text } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { type TabsterTypes, useFocusableGroup } from '@fluentui/react-tabster';
 import {
+  type ComponentPropsWithoutRef,
   type DependencyList,
   type KeyboardEventHandler,
   type RefObject,
@@ -17,9 +17,9 @@ import {
 } from 'react';
 
 import { log } from '@dxos/log';
-import { type MaybeProvider, getProviderValue, isNotFalsy } from '@dxos/util';
+import { type MaybeProvider, getProviderValue, isTruthy } from '@dxos/util';
 
-import { type EditorSelection, createEditorStateTransaction, documentId, editorInputMode } from '../extensions';
+import { type EditorSelection, createEditorStateTransaction, documentId, modalStateField } from '../extensions';
 import { debugDispatcher } from '../util';
 
 let instanceCount = 0;
@@ -34,13 +34,9 @@ export type CursorInfo = {
 };
 
 export type UseTextEditor = {
-  // TODO(burdon): Rename.
-  parentRef: RefObject<HTMLDivElement>;
-  view?: EditorView;
-  focusAttributes?: TabsterTypes.TabsterDOMAttribute & {
-    tabIndex: 0;
-    onKeyUp: KeyboardEventHandler<HTMLDivElement>;
-  };
+  parentRef: RefObject<HTMLDivElement | null>;
+  view: EditorView | null;
+  focusAttributes?: ComponentPropsWithoutRef<'div'>;
 };
 
 export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
@@ -66,11 +62,11 @@ export const useTextEditor = (
 
   // NOTE: Increments by 2 in strict mode.
   const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
-  const [view, setView] = useState<EditorView>();
+  const [view, setView] = useState<EditorView | null>(null);
   const parentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    let view: EditorView;
+    let view: EditorView | null = null;
     if (parentRef.current) {
       log('create', { id, instanceId, doc: initialValue?.length ?? 0 });
 
@@ -96,19 +92,7 @@ export const useTextEditor = (
           EditorView.exceptionSink.of((err) => {
             log.catch(err);
           }),
-          // TODO(burdon): Factor out debug inspector.
-          // ViewPlugin.fromClass(
-          //   class {
-          //     constructor(_view: EditorView) {
-          //       log('construct', { id });
-          //     }
-          //
-          //     destroy() {
-          //       log('destroy', { id });
-          //     }
-          //   },
-          // ),
-        ].filter(isNotFalsy),
+        ].filter(isTruthy),
       });
 
       // https://codemirror.net/docs/ref/#view.EditorViewConfig
@@ -155,23 +139,28 @@ export const useTextEditor = (
     }
   }, [autoFocus, view]);
 
-  const focusableGroupAttrs = useFocusableGroup({
-    tabBehavior: 'limited',
-    ignoreDefaultKeydown: {
-      Escape: view?.state.facet(editorInputMode).noTabster,
-    },
-  });
-
   // Focus editor on Enter (e.g., when tabbing to this component).
-  const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
     (event) => {
       const { key, target, currentTarget } = event;
-      if (target === currentTarget) {
-        switch (key) {
-          case 'Enter': {
+      switch (key) {
+        case 'Escape': {
+          // Check if popover is open.
+          const modal = view?.state.field(modalStateField, false);
+          if (modal) {
+            return;
+          }
+
+          // Focus the closest focusable parent.
+          const element = view?.contentDOM.closest('[tabindex="0"]') as HTMLDivElement | null;
+          element?.focus();
+          break;
+        }
+        case 'Enter': {
+          if (target === currentTarget) {
             view?.focus();
-            break;
           }
+          break;
         }
       }
     },
@@ -183,8 +172,7 @@ export const useTextEditor = (
     view,
     focusAttributes: {
       tabIndex: 0 as const,
-      ...focusableGroupAttrs,
-      onKeyUp: handleKeyUp,
+      onKeyDown: handleKeyDown,
     },
   };
 };

package/src/stories/{Command.stories.tsx → CommandDialog.stories.tsx}

@@ -2,28 +2,25 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type KeyboardEvent, useState } from 'react';
 
 import { Button, Icon, Input } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { editorWidth } from '../defaults';
-import { type Action, command, floatingMenu } from '../extensions';
 import { str } from '../testing';
-import { createRenderer } from '../util';
 
 import { EditorStory } from './components';
 
-const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) => {
+// TODO(burdon): Reimplement with Popover.
+const CommandDialog = ({ onAction }: { onAction: (action?: any) => void }) => {
   const [text, setText] = useState('');
 
   const handleInsert = () => {
     // TODO(burdon): Use queue ref.
-    const link = `[${text}](dxn:queue:data:123)`;
+    const link = `![${text}](dxn:queue:data:123)`;
     onAction(text.length ? { type: 'insert', text: link } : undefined);
   };
 
@@ -66,21 +63,12 @@ const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) =>
 };
 
 const meta = {
-  title: 'ui/react-ui-editor/Command',
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: () => (
-    <EditorStory
-      text={str('# Command', '', '', '')}
-      extensions={[
-        floatingMenu(),
-        command({
-          renderDialog: createRenderer(CommandDialog),
-          onHint: () => "Press '/' for commands",
-        }),
-      ]}
-    />
-  ),
-  parameters: { layout: 'fullscreen' },
+  title: 'ui/react-ui-editor/CommandDialog',
+  render: () => <EditorStory text={str('# Command', '', '')} extensions={[]} />,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof Button>;
 
 export default meta;

package/src/stories/Comments.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { effect, useSignal } from '@preact/signals-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type FC } from 'react';
@@ -11,7 +9,7 @@ import React, { type FC } from 'react';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { annotations, comments, createExternalCommentSync } from '../extensions';
 import { str } from '../testing';
@@ -23,8 +21,10 @@ import { EditorStory, content, longText } from './components';
 const meta = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof EditorStory>;
 
 export default meta;

package/src/stories/EditorToolbar.stories.tsx

@@ -2,15 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { useThemeContext } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { attentionSurface, mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { EditorToolbar, useEditorToolbarState } from '../components';
 import { editorWidth } from '../defaults';
@@ -78,8 +76,11 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-editor/EditorToolbar',
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { translations, layout: 'fullscreen' },
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/stories/Experimental.stories.tsx

@@ -2,15 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React from 'react';
 
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { blast, defaultOptions, dropFile, typewriter } from '../extensions';
 import { str } from '../testing';
@@ -20,8 +18,10 @@ import { EditorStory, content } from './components';
 const meta = {
   title: 'ui/react-ui-editor/Experimental',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof EditorStory>;
 
 export default meta;
@@ -32,7 +32,7 @@ type Story = StoryObj<typeof meta>;
 // Typewriter
 //
 
-const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
+const typewriterItems = localStorage.getItem('dxos.org/testing/typewriter')?.split(',');
 
 export const Typewriter: Story = {
   render: () => (

package/src/stories/Markdown.stories.tsx

@@ -2,13 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { markdown } from '@codemirror/lang-markdown';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { decorateMarkdown, image, linkTooltip, table } from '../extensions';
 import { str } from '../testing';
@@ -18,8 +16,10 @@ import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, t
 const meta = {
   title: 'ui/react-ui-editor/Markdown',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof EditorStory>;
 
 export default meta;

package/src/stories/Outliner.stories.tsx

@@ -2,18 +2,22 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type EditorView } from '@codemirror/view';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 
-import { DropdownMenu } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { RefDropdownMenuProvider } from '../components';
-import { deleteItem, hashtag, listItemToString, outliner, treeFacet } from '../extensions';
+import {
+  type PopoverMenuGroup,
+  PopoverMenuProvider,
+  deleteItem,
+  hashtag,
+  listItemToString,
+  outliner,
+  treeFacet,
+} from '../extensions';
 import { str } from '../testing';
 
 import { EditorStory } from './components';
@@ -25,19 +29,38 @@ type StoryProps = {
 const DefaultStory = ({ text }: StoryProps) => {
   const viewRef = useRef<EditorView>(null);
 
-  const handleDelete = () => {
-    if (viewRef.current) {
-      deleteItem(viewRef.current);
-    }
-  };
+  const commandGroups: PopoverMenuGroup[] = useMemo(
+    () => [
+      {
+        id: 'outliner-actions',
+        items: [
+          {
+            id: 'delete-row',
+            label: 'Delete',
+            onSelect: (view: EditorView) => {
+              deleteItem(view);
+            },
+          },
+        ],
+      },
+    ],
+    [],
+  );
 
   return (
-    <RefDropdownMenuProvider>
+    <PopoverMenuProvider
+      view={viewRef.current}
+      groups={commandGroups}
+      onSelect={({ view, item }) => {
+        if (item.onSelect) {
+          return item.onSelect(view, view.state.selection.main.head);
+        }
+      }}
+    >
       <EditorStory
         ref={viewRef}
         text={text}
         extensions={[outliner(), hashtag()]}
-        placeholder=''
         debug='raw+tree'
         debugCustom={(view) => {
           const tree = view.state.facet(treeFacet);
@@ -46,24 +69,17 @@ const DefaultStory = ({ text }: StoryProps) => {
           return <pre className='p-1 overflow-auto text-xs text-green-800 dark:text-green-200'>{lines.join('\n')}</pre>;
         }}
       />
-
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content>
-          <DropdownMenu.Viewport>
-            <DropdownMenu.Item onClick={handleDelete}>Delete</DropdownMenu.Item>
-          </DropdownMenu.Viewport>
-          <DropdownMenu.Arrow />
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </RefDropdownMenuProvider>
+    </PopoverMenuProvider>
   );
 };
 
 const meta = {
   title: 'ui/react-ui-editor/Outliner',
   render: DefaultStory,
-  decorators: [withAttention, withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
+  decorators: [withTheme, withAttention],
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/stories/Popover.stories.tsx

@@ -0,0 +1,163 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useState } 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 PopoverMenuGroup,
+  type PopoverMenuItem,
+  PopoverMenuProvider,
+  type UsePopoverMenuProps,
+  createMenuGroup,
+  filterMenuGroups,
+  formattingCommands,
+  insertAtCursor,
+  insertAtLineStart,
+  linkSlashCommands,
+  usePopoverMenu,
+} from '../extensions';
+import { str } from '../testing';
+
+import { EditorStory } from './components';
+
+const generator: ValueGenerator = faker as any;
+
+const customCompletions: PopoverMenuGroup = createMenuGroup({
+  id: 'test',
+  items: ['Hello world!', 'Hello DXOS', 'Hello Composer', 'https://dxos.org'],
+});
+
+const placeholder = (trigger: string[]) =>
+  Domino.of('div')
+    .children(
+      Domino.of('span').text('Press'),
+      ...trigger.map((trigger) =>
+        Domino.of('span')
+          .text(trigger)
+          .classNames('border border-separator rounded-sm mx-1 pis-1 pie-1 pbs-[2px] pbe-[3px]'),
+      ),
+      Domino.of('span').text('for commands'),
+    )
+    .build();
+
+type StoryProps = Omit<UsePopoverMenuProps, 'viewRef'> & { text: string };
+
+const DefaultStory = ({ text, ...props }: StoryProps) => {
+  const [view, setView] = useState<EditorView | null>(null);
+  const { groupsRef, extension, ...menuProps } = usePopoverMenu(props);
+
+  return (
+    <PopoverMenuProvider view={view} groups={groupsRef.current} {...menuProps}>
+      <EditorStory ref={setView} text={text} extensions={extension} />
+    </PopoverMenuProvider>
+  );
+};
+
+const LinkStory = (args: StoryProps) => {
+  const { space } = useClientProvider();
+  const getMenu = useCallback<NonNullable<UsePopoverMenuProps['getMenu']>>(
+    async ({ text, trigger }): Promise<PopoverMenuGroup[]> => {
+      if (trigger === '/') {
+        return filterMenuGroups([linkSlashCommands], (item) =>
+          text ? (item.label as string).toLowerCase().includes(text.toLowerCase()) : true,
+        );
+      }
+
+      if (!space) {
+        return [];
+      }
+
+      const name = text?.startsWith('@') ? text.slice(1).toLowerCase() : (text?.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): PopoverMenuItem => ({
+            id: object.id,
+            label: object.name,
+            icon: 'ph--user--regular',
+            onSelect: (view, head) => {
+              const link = `[${object.name}](${Obj.getDXN(object)})`;
+              if (text?.startsWith('@')) {
+                insertAtLineStart(view, head, `!${link}\n`);
+              } else {
+                insertAtCursor(view, head, `${link} `);
+              }
+            },
+          }),
+        );
+
+      return [{ id: 'test', items }];
+    },
+    [space],
+  );
+
+  return <DefaultStory {...args} getMenu={getMenu} />;
+};
+
+const meta = {
+  title: 'ui/react-ui-editor/Popover',
+  render: DefaultStory,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: str('# Autocomplete', '', ''),
+    triggerKey: 'Ctrl-Space',
+    filter: true,
+    getMenu: () => [customCompletions],
+  },
+};
+
+export const Formatting: Story = {
+  args: {
+    text: str('# Slash command', '', ''),
+    trigger: '/',
+    placeholder: {
+      content: () => placeholder(['/']),
+    },
+    getMenu: () => [formattingCommands],
+  },
+};
+
+export const Link: Story = {
+  render: LinkStory,
+  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('# Links', '', ''),
+    trigger: ['/', '@'],
+    placeholder: {
+      content: () => placeholder(['/', '@']),
+    },
+  },
+};

package/src/stories/Preview.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { syntaxTree } from '@codemirror/language';
 import { type EditorView } from '@codemirror/view';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
@@ -13,13 +11,13 @@ import { createPortal } from 'react-dom';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { Popover } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { Card } from '@dxos/react-ui-stack';
 import { hoverableControlItem, hoverableControlItemTransition, hoverableControls } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { trim } from '@dxos/util';
 
-import { PreviewProvider, useRefPopover } from '../components';
 import { type PreviewLinkRef, type PreviewLinkTarget, getLinkRef, image, preview } from '../extensions';
+import { PreviewPopoverProvider, usePreviewPopover } from '../testing';
 
 import { EditorStory } from './components';
 
@@ -45,7 +43,7 @@ const useRefTarget = (link: PreviewLinkRef): PreviewLinkTarget | undefined => {
 };
 
 const PreviewCard = () => {
-  const { target } = useRefPopover('PreviewCard');
+  const { target } = usePreviewPopover('PreviewCard');
   return (
     <Popover.Portal>
       <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
@@ -169,8 +167,10 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
 const meta = {
   title: 'ui/react-ui-editor/Preview',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof EditorStory>;
 
 export default meta;
@@ -200,7 +200,7 @@ export const Default: Story = {
     }, []);
 
     return (
-      <PreviewProvider onLookup={handlePreviewLookup}>
+      <PreviewPopoverProvider onLookup={handlePreviewLookup}>
         <EditorStory
           ref={handleViewRef}
           text={trim`
@@ -223,7 +223,7 @@ export const Default: Story = {
         {previewBlocks.map(({ link, el }) => (
           <PreviewBlock key={link.ref} link={link} el={el} view={view} />
         ))}
-      </PreviewProvider>
+      </PreviewPopoverProvider>
     );
   },
 };

package/src/stories/Tags.stories.tsx

@@ -2,14 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useThemeContext } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 import { trim } from '@dxos/util';
 
 import {
@@ -66,8 +64,10 @@ const text = trim`
 const meta = {
   title: 'ui/react-ui-editor/Tags',
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;