@dxos/react-ui-editor 0.8.4-main.3f58842 → 0.8.4-main.406dc2a

package/src/stories/Comments.stories.tsx

@@ -2,36 +2,40 @@
 // 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';
 
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { EditorStory, content, longText } from './components';
 import { annotations, comments, createExternalCommentSync } from '../extensions';
 import { str } from '../testing';
 import { type Comment } from '../types';
 import { createRenderer } from '../util';
 
-const meta: Meta<typeof EditorStory> = {
+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;
 
+type Story = StoryObj<typeof meta>;
+
 //
 // Comments
 //
 
-export const Comments = {
+export const Comments: Story = {
   render: () => {
     const _comments = useSignal<Comment[]>([]);
     return (
@@ -91,7 +95,7 @@ const CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
 // Annotations
 //
 
-export const Annotations = {
+export const Annotations: Story = {
   render: () => (
     <EditorStory text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />
   ),

package/src/stories/EditorToolbar.stories.tsx

@@ -2,28 +2,26 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj } from '@storybook/react-vite';
+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 { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { EditorToolbar, useEditorToolbarState } from '../components';
 import { editorWidth } from '../defaults';
 import {
   InputModeExtensions,
-  createMarkdownExtensions,
   createBasicExtensions,
+  createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
   formattingKeymap,
   useFormattingState,
 } from '../extensions';
-import { useTextEditor, type UseTextEditorProps } from '../hooks';
+import { type UseTextEditorProps, useTextEditor } from '../hooks';
 import { translations } from '../translations';
 import { type EditorInputMode, type EditorViewMode } from '../types';
 
@@ -43,8 +41,8 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
       moveToEndOfLine: true,
       extensions: [
         editorInputMode ? InputModeExtensions[editorInputMode] : [],
-        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly' }),
-        createMarkdownExtensions({ themeMode }),
+        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly', search: true }),
+        createMarkdownExtensions(),
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         viewMode === 'source' ? [] : decorateMarkdown(),
         formattingKeymap(),
@@ -75,12 +73,15 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   );
 };
 
-const meta: Meta<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,35 +2,39 @@
 // 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, type Meta } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { EditorStory, content } from './components';
-import { typewriter, blast, defaultOptions, dropFile } from '../extensions';
+import { blast, defaultOptions, dropFile, typewriter } from '../extensions';
 import { str } from '../testing';
 
-const meta: Meta<typeof EditorStory> = {
+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;
 
+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 = {
+export const Typewriter: Story = {
   render: () => (
     <EditorStory
       text={str('# Typewriter', '', content.paragraphs, content.footer)}
@@ -43,7 +47,7 @@ export const Typewriter = {
 // Blast
 //
 
-export const Blast = {
+export const Blast: Story = {
   render: () => (
     <EditorStory
       text={str('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
@@ -70,7 +74,7 @@ export const Blast = {
 // DND
 //
 
-export const DND = {
+export const DND: Story = {
   render: () => (
     <EditorStory
       text={str('# DND', '')}

package/src/stories/Markdown.stories.tsx

@@ -2,35 +2,39 @@
 // 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, type Meta } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
 import { decorateMarkdown, image, linkTooltip, table } from '../extensions';
 import { str } from '../testing';
 
-const meta: Meta<typeof EditorStory> = {
+import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
+
+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;
 
+type Story = StoryObj<typeof meta>;
+
 //
 // Default
 //
 
-export const Default = {
+export const Default: Story = {
   render: () => <EditorStory text={text} extensions={defaultExtensions} />,
 };
 
-export const Blockquote = {
+export const Blockquote: Story = {
   render: () => (
     <EditorStory
       text={str('> Blockquote', 'continuation', content.footer)}
@@ -40,23 +44,23 @@ export const Blockquote = {
   ),
 };
 
-export const Headings = {
+export const Headings: Story = {
   render: () => <EditorStory text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />,
 };
 
-export const Links = {
+export const Links: Story = {
   render: () => <EditorStory text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
 };
 
-export const Image = {
+export const Image: Story = {
   render: () => <EditorStory text={str(content.image, content.footer)} extensions={[image()]} />,
 };
 
-export const Code = {
+export const Code: Story = {
   render: () => <EditorStory text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
-export const Lists = {
+export const Lists: Story = {
   render: () => (
     <EditorStory
       text={str(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
@@ -69,7 +73,7 @@ export const Lists = {
 // Bullet List
 //
 
-export const BulletList = {
+export const BulletList: Story = {
   render: () => <EditorStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
@@ -77,7 +81,7 @@ export const BulletList = {
 // Ordered List
 //
 
-export const OrderedList = {
+export const OrderedList: Story = {
   render: () => <EditorStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
@@ -85,13 +89,13 @@ export const OrderedList = {
 // Task List
 //
 
-export const TaskList = {
+export const TaskList: Story = {
   render: () => (
     <EditorStory text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
   ),
 };
 
-export const TaskListEmpty = {
+export const TaskListEmpty: Story = {
   render: () => <EditorStory text={str('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
 };
 
@@ -99,7 +103,7 @@ export const TaskListEmpty = {
 // Table
 //
 
-export const Table = {
+export const Table: Story = {
   render: () => <EditorStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
 };
 
@@ -107,7 +111,7 @@ export const Table = {
 // Commented out
 //
 
-export const CommentedOut = {
+export const CommentedOut: Story = {
   render: () => (
     <EditorStory
       text={str('# Commented out', '', content.comment, content.footer)}

package/src/stories/Outliner.stories.tsx

@@ -2,41 +2,65 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type EditorView } from '@codemirror/view';
-import React, { useRef } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+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, type Meta } from '@dxos/storybook-utils';
 
-import { EditorStory } from './components';
-import { RefDropdownMenu } from '../components';
-import { outliner, listItemToString, treeFacet, deleteItem, hashtag } from '../extensions';
+import {
+  type PopoverMenuGroup,
+  PopoverMenuProvider,
+  deleteItem,
+  hashtag,
+  listItemToString,
+  outliner,
+  treeFacet,
+} from '../extensions';
 import { str } from '../testing';
 
+import { EditorStory } from './components';
+
 type StoryProps = {
-  text: string;
+  text?: string;
 };
 
 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 (
-    <RefDropdownMenu.Provider>
+    <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=''
-        slots={{}}
         debug='raw+tree'
         debugCustom={(view) => {
           const tree = view.state.facet(treeFacet);
@@ -45,33 +69,28 @@ 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>
-    </RefDropdownMenu.Provider>
+    </PopoverMenuProvider>
   );
 };
 
-const meta: Meta<StoryProps> = {
+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;
 
-export const Empty = {
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
   args: {},
 };
 
-export const Basic = {
+export const Basic: Story = {
   args: {
     text: str(
       //
@@ -86,7 +105,7 @@ export const Basic = {
   },
 };
 
-export const Nested = {
+export const Nested: Story = {
   args: {
     text: str(
       //
@@ -101,7 +120,7 @@ export const Nested = {
   },
 };
 
-export const Continuation = {
+export const Continuation: Story = {
   args: {
     text: str(
       //

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(['/', '@']),
+    },
+  },
+};