@dxos/react-ui-editor 0.8.4-main.c4373fc → 0.8.4-main.cb12b3f963

package/src/stories/Markdown.stories.tsx

@@ -6,17 +6,15 @@ import { markdown } from '@codemirror/lang-markdown';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { decorateMarkdown, image, linkTooltip, table } from '../extensions';
-import { str } from '../testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { decorateMarkdown, image, join, linkTooltip, table } from '@dxos/ui-editor';
 
 import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
 
 const meta = {
   title: 'ui/react-ui-editor/Markdown',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -37,7 +35,7 @@ export const Default: Story = {
 export const Blockquote: Story = {
   render: () => (
     <EditorStory
-      text={str('> Blockquote', 'continuation', content.footer)}
+      text={join('> Blockquote', 'continuation', content.footer)}
       extensions={decorateMarkdown()}
       debug='raw'
     />
@@ -49,21 +47,23 @@ export const Headings: Story = {
 };
 
 export const Links: Story = {
-  render: () => <EditorStory text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
+  render: () => (
+    <EditorStory text={join(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />
+  ),
 };
 
 export const Image: Story = {
-  render: () => <EditorStory text={str(content.image, content.footer)} extensions={[image()]} />,
+  render: () => <EditorStory text={join(content.image, content.footer)} extensions={[image()]} />,
 };
 
 export const Code: Story = {
-  render: () => <EditorStory text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <EditorStory text={join(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 export const Lists: Story = {
   render: () => (
     <EditorStory
-      text={str(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
+      text={join(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
       extensions={[decorateMarkdown()]}
     />
   ),
@@ -74,7 +74,7 @@ export const Lists: Story = {
 //
 
 export const BulletList: Story = {
-  render: () => <EditorStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <EditorStory text={join(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 //
@@ -82,7 +82,7 @@ export const BulletList: Story = {
 //
 
 export const OrderedList: Story = {
-  render: () => <EditorStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <EditorStory text={join(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 //
@@ -91,12 +91,12 @@ export const OrderedList: Story = {
 
 export const TaskList: Story = {
   render: () => (
-    <EditorStory text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
+    <EditorStory text={join(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
   ),
 };
 
 export const TaskListEmpty: Story = {
-  render: () => <EditorStory text={str('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
+  render: () => <EditorStory text={join('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
 };
 
 //
@@ -104,7 +104,7 @@ export const TaskListEmpty: Story = {
 //
 
 export const Table: Story = {
-  render: () => <EditorStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
+  render: () => <EditorStory text={join(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
 };
 
 //
@@ -114,7 +114,7 @@ export const Table: Story = {
 export const CommentedOut: Story = {
   render: () => (
     <EditorStory
-      text={str('# Commented out', '', content.comment, content.footer)}
+      text={join('# Commented out', '', content.comment, content.footer)}
       extensions={[
         decorateMarkdown(),
         markdown(),

package/src/stories/Outliner.stories.tsx

@@ -2,27 +2,25 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useState } from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { deleteItem, hashtag, join, listItemToString, outliner, treeFacet } from '@dxos/ui-editor';
 
-import { type CommandMenuGroup, type CommandMenuItem, CommandMenuProvider } from '../components';
-import { deleteItem, hashtag, listItemToString, outliner, treeFacet } from '../extensions';
-import { str } from '../testing';
-
+import { type EditorController, type EditorMenuGroup, EditorMenuProvider } from '../components';
 import { EditorStory } from './components';
 
-type StoryProps = {
+type DefaultStoryProps = {
   text?: string;
 };
 
-const DefaultStory = ({ text }: StoryProps) => {
-  const viewRef = useRef<EditorView>(null);
+const DefaultStory = ({ text }: DefaultStoryProps) => {
+  const [controller, setController] = useState<EditorController | null>(null);
 
-  const commandGroups: CommandMenuGroup[] = useMemo(
+  const extensions = useMemo(() => [outliner(), hashtag()], []);
+  const commandGroups: EditorMenuGroup[] = useMemo(
     () => [
       {
         id: 'outliner-actions',
@@ -30,7 +28,7 @@ const DefaultStory = ({ text }: StoryProps) => {
           {
             id: 'delete-row',
             label: 'Delete',
-            onSelect: (view: EditorView) => {
+            onSelect: ({ view }) => {
               deleteItem(view);
             },
           },
@@ -41,19 +39,19 @@ const DefaultStory = ({ text }: StoryProps) => {
   );
 
   return (
-    <CommandMenuProvider
+    <EditorMenuProvider
+      view={controller?.view}
       groups={commandGroups}
-      onSelect={(item: CommandMenuItem) => {
-        if (viewRef.current && item.onSelect) {
-          return item.onSelect(viewRef.current, viewRef.current.state.selection.main.head);
+      onSelect={({ view, item }) => {
+        if (item.onSelect) {
+          return item.onSelect({ view, head: view.state.selection.main.head });
         }
       }}
     >
       <EditorStory
-        ref={viewRef}
+        ref={setController}
         text={text}
-        extensions={[outliner(), hashtag()]}
-        placeholder=''
+        extensions={extensions}
         debug='raw+tree'
         debugCustom={(view) => {
           const tree = view.state.facet(treeFacet);
@@ -62,14 +60,14 @@ const DefaultStory = ({ text }: StoryProps) => {
           return <pre className='p-1 overflow-auto text-xs text-green-800 dark:text-green-200'>{lines.join('\n')}</pre>;
         }}
       />
-    </CommandMenuProvider>
+    </EditorMenuProvider>
   );
 };
 
 const meta = {
   title: 'ui/react-ui-editor/Outliner',
   render: DefaultStory,
-  decorators: [withTheme, withAttention],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withAttention()],
   parameters: {
     layout: 'fullscreen',
   },
@@ -85,7 +83,7 @@ export const Empty: Story = {
 
 export const Basic: Story = {
   args: {
-    text: str(
+    text: join(
       //
       '- [ ] A',
       '- [ ] B',
@@ -100,7 +98,7 @@ export const Basic: Story = {
 
 export const Nested: Story = {
   args: {
-    text: str(
+    text: join(
       //
       '- [ ] A',
       '  - [ ] B',
@@ -115,7 +113,7 @@ export const Nested: Story = {
 
 export const Continuation: Story = {
   args: {
-    text: str(
+    text: join(
       //
       '- [ ] A',
       '- [ ] B',

package/src/stories/Popover.stories.tsx

@@ -0,0 +1,157 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useState } from 'react';
+
+import { Obj, Query } from '@dxos/echo';
+import { random } from '@dxos/random';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { TestSchema, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { Domino, mx } from '@dxos/ui';
+import { insertAtCursor, insertAtLineStart, join } from '@dxos/ui-editor';
+
+import {
+  type EditorController,
+  type EditorMenuGroup,
+  type EditorMenuItem,
+  EditorMenuProvider,
+  type UseEditorMenuProps,
+  createMenuGroup,
+  filterMenuGroups,
+  formattingCommands,
+  linkSlashCommands,
+  useEditorMenu,
+} from '../components';
+import { EditorStory } from './components';
+
+const generator: ValueGenerator = random as any;
+
+const customCompletions: EditorMenuGroup = createMenuGroup({
+  id: 'test',
+  items: ['Hello world!', 'Hello DXOS', 'Hello Composer', 'https://dxos.org'],
+});
+
+const placeholder = (trigger: string[]) => {
+  const pressEl = Domino.of('span').text('Press');
+  const triggerEls = trigger.map((trigger) =>
+    Domino.of('span').classNames(mx('border border-separator rounded-xs mx-1 px-1 py-[2px] pb-[3px]')).text(trigger),
+  );
+  const forCommandsEl = Domino.of('span').text('for commands');
+  return Domino.of('div').append(pressEl, ...triggerEls, forCommandsEl).root;
+};
+
+type DefaultStoryProps = Omit<UseEditorMenuProps, 'viewRef'> & { text: string };
+
+const DefaultStory = ({ text, ...props }: DefaultStoryProps) => {
+  const [controller, setController] = useState<EditorController | null>(null);
+  const { groupsRef, extension, ...menuProps } = useEditorMenu(props);
+
+  return (
+    <EditorMenuProvider view={controller?.view} groups={groupsRef.current} {...menuProps}>
+      <EditorStory ref={setController} text={text} extensions={extension} />
+    </EditorMenuProvider>
+  );
+};
+
+const LinkStory = (args: DefaultStoryProps) => {
+  const { space } = useClientStory();
+
+  const getMenu = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
+    async ({ text, trigger }): Promise<EditorMenuGroup[]> => {
+      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(TestSchema.Person)).run();
+      const items = result
+        .filter((object) => object.name.toLowerCase().includes(name))
+        .map(
+          (object): EditorMenuItem => ({
+            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(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: join('# Autocomplete', '', ''),
+    triggerKey: 'Ctrl-Space',
+    filter: true,
+    getMenu: () => [customCompletions],
+  },
+};
+
+export const Formatting: Story = {
+  args: {
+    text: join('# Slash command', '', ''),
+    trigger: '/',
+    placeholder: {
+      content: () => placeholder(['/']),
+    },
+    getMenu: () => [formattingCommands],
+  },
+};
+
+export const Link: Story = {
+  render: LinkStory,
+  decorators: [
+    withClientProvider({
+      createSpace: true,
+      onInitialized: async (client) => {
+        await client.addTypes([TestSchema.Person]);
+      },
+      onCreateSpace: async ({ space }) => {
+        const createObjects = createObjectFactory(space.db, generator);
+        await createObjects([{ type: TestSchema.Person, count: 10 }]);
+        await space.db.flush({ indexes: true });
+      },
+    }),
+  ],
+  args: {
+    text: join('# Links', '', ''),
+    trigger: ['/', '@'],
+    placeholder: {
+      content: () => placeholder(['/', '@']),
+    },
+  },
+};

package/src/stories/Preview.stories.tsx

@@ -9,22 +9,28 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 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 { random } from '@dxos/random';
+import { Card, Popover, Toolbar } from '@dxos/react-ui';
+import { Menu, createMenuAction } from '@dxos/react-ui-menu';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import {
+  type PreviewBlock,
+  type PreviewLinkRef,
+  type PreviewLinkTarget,
+  getLinkRef,
+  image,
+  preview,
+} from '@dxos/ui-editor';
+import { hoverableControls } from '@dxos/ui-theme';
 import { trim } from '@dxos/util';
 
-import { type PreviewLinkRef, type PreviewLinkTarget, getLinkRef, image, preview } from '../extensions';
-import { PreviewPopoverProvider, usePreviewPopover } from '../testing';
-
+import { type EditorController, EditorPreviewProvider, useEditorPreview } from '../components';
 import { EditorStory } from './components';
 
-const handlePreviewLookup = async ({ label, ref }: PreviewLinkRef): Promise<PreviewLinkTarget> => {
+const handlePreviewLookup = async ({ dxn, label }: PreviewLinkRef): Promise<PreviewLinkTarget> => {
   // Random text.
-  faker.seed(ref.split('').reduce((acc: number, char: string) => acc + char.charCodeAt(0), 1));
-  const text = Array.from({ length: 2 }, () => faker.lorem.paragraphs()).join('\n\n');
+  random.seed(dxn.split('').reduce((acc: number, char: string) => acc + char.charCodeAt(0), 1));
+  const text = Array.from({ length: 2 }, () => random.lorem.paragraphs()).join('\n\n');
   return {
     label,
     text,
@@ -43,15 +49,27 @@ const useRefTarget = (link: PreviewLinkRef): PreviewLinkTarget | undefined => {
 };
 
 const PreviewCard = () => {
-  const { target } = usePreviewPopover('PreviewCard');
+  const { target } = useEditorPreview('PreviewCard');
+  if (!target) {
+    return null;
+  }
+
   return (
     <Popover.Portal>
       <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
-        <Popover.Viewport>
-          <Card.SurfaceRoot role='card--popover'>
-            <Card.Heading>{target?.label}</Card.Heading>
-            {target && <Card.Text classNames='line-clamp-3'>{target.text}</Card.Text>}
-          </Card.SurfaceRoot>
+        <Popover.Viewport classNames='dx-card-popover-width'>
+          <Card.Root border={false}>
+            <Card.Toolbar>
+              <Card.Icon icon='ph--file-text--regular' />
+              <Card.Title>{target.label}</Card.Title>
+              <Popover.Close asChild>
+                <Card.CloseIconButton />
+              </Popover.Close>
+            </Card.Toolbar>
+            <Card.Row>
+              <Card.Text variant='description'>{target.text}</Card.Text>
+            </Card.Row>
+          </Card.Root>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -70,7 +88,7 @@ type PreviewAction =
       link: PreviewLinkRef;
     };
 
-const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElement; view?: EditorView }) => {
+const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElement; view?: EditorView }) => {
   const target = useRefTarget(link);
 
   const handleAction = useCallback(
@@ -83,7 +101,7 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
       }
 
       const link = getLinkRef(view.state, node);
-      if (link?.ref !== action.link.ref) {
+      if (link?.dxn !== action.link.dxn) {
         return;
       }
 
@@ -125,41 +143,45 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
     }
   }, [handleAction, link, target]);
 
+  const menuItems = useMemo(
+    () => [
+      createMenuAction('delete', handleDelete, {
+        label: link.suggest ? 'Discard' : 'Delete',
+        icon: 'ph--x--regular',
+      }),
+      ...(target
+        ? [
+            createMenuAction('apply', handleInsert, {
+              label: 'Apply',
+              icon: 'ph--check--regular',
+            }),
+          ]
+        : []),
+    ],
+    [handleDelete, handleInsert, link.suggest, target],
+  );
+
   return createPortal(
-    <Card.StaticRoot classNames={hoverableControls}>
-      <div className='flex items-start'>
+    <Menu.Root>
+      <Card.Root classNames={hoverableControls}>
         {!view?.state.readOnly && (
-          <Card.Toolbar classNames='is-min p-[--dx-cardSpacingInline]'>
-            {(link.suggest && (
-              <>
-                <Card.ToolbarIconButton label='Discard' icon='ph--x--regular' onClick={handleDelete} />
-                {target && (
-                  <Card.ToolbarIconButton
-                    classNames='bg-successSurface text-successSurfaceText'
-                    label='Apply'
-                    icon='ph--check--regular'
-                    onClick={handleInsert}
-                  />
-                )}
-              </>
-            )) || (
-              <Card.ToolbarIconButton
-                iconOnly
-                label='Delete'
-                icon='ph--x--regular'
-                classNames={[hoverableControlItem, hoverableControlItemTransition]}
-                onClick={handleDelete}
-              />
-            )}
+          <Card.Toolbar>
+            <Card.Icon icon='ph--bookmark--regular' />
+            <Card.Title>{link.label}</Card.Title>
+            {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
+            <Menu.Trigger asChild disabled={!menuItems?.length}>
+              <Toolbar.IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Menu' />
+            </Menu.Trigger>
+            <Menu.Content items={menuItems} />
           </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 && <Card.Text classNames='line-clamp-3 mbs-0'>{target.text}</Card.Text>}
-    </Card.StaticRoot>,
+        {target && (
+          <Card.Row>
+            <Card.Text className='text-description'>{target.text}</Card.Text>
+          </Card.Row>
+        )}
+      </Card.Root>
+    </Menu.Root>,
     el,
   );
 };
@@ -167,7 +189,7 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
 const meta = {
   title: 'ui/react-ui-editor/Preview',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -177,53 +199,49 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const text = trim`
+  # 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)
+
+`;
+
 export const Default: Story = {
   render: () => {
-    const [view, setView] = useState<EditorView>();
-    const [previewBlocks, setPreviewBlocks] = useState<{ link: PreviewLinkRef; el: HTMLElement }[]>([]);
+    const [controller, setController] = useState<EditorController | null>(null);
+    const [previewBlocks, setPreviewBlocks] = useState<PreviewBlock[]>([]);
     const extensions = useMemo(() => {
       return [
         image(),
         preview({
-          addBlockContainer: (link, el) => {
-            setPreviewBlocks((prev) => [...prev, { link, el }]);
+          addBlockContainer: (block) => {
+            setPreviewBlocks((prev) => [...prev, block]);
           },
-          removeBlockContainer: (link) => {
-            setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
+          removeBlockContainer: (block) => {
+            setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.dxn !== block.link.dxn));
           },
         }),
       ];
     }, []);
 
-    const handleViewRef = useCallback((instance?: EditorView | null) => {
-      setView(instance ?? undefined);
-    }, []);
-
+    // TODO(burdon): Migrate to Editor.Root.
     return (
-      <PreviewPopoverProvider onLookup={handlePreviewLookup}>
-        <EditorStory
-          ref={handleViewRef}
-          text={trim`
-            # 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}
-        />
+      <EditorPreviewProvider onLookup={handlePreviewLookup}>
+        <EditorStory ref={setController} text={text} extensions={extensions} />
         <PreviewCard />
-        {previewBlocks.map(({ link, el }) => (
-          <PreviewBlock key={link.ref} link={link} el={el} view={view} />
-        ))}
-      </PreviewPopoverProvider>
+        {controller?.view &&
+          previewBlocks.map(({ link, el }) => (
+            <PreviewBlockComponent key={link.dxn} link={link} el={el} view={controller.view!} />
+          ))}
+      </EditorPreviewProvider>
     );
   },
 };