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

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,58 @@
 // 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 CommandMenuGroup, type CommandMenuItem, CommandMenuProvider } from '../components';
+import { 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: CommandMenuGroup[] = useMemo(
+    () => [
+      {
+        id: 'outliner-actions',
+        items: [
+          {
+            id: 'delete-row',
+            label: 'Delete',
+            onSelect: (view: EditorView) => {
+              deleteItem(view);
+            },
+          },
+        ],
+      },
+    ],
+    [],
+  );
 
   return (
-    <RefDropdownMenu.Provider>
+    <CommandMenuProvider
+      groups={commandGroups}
+      onSelect={(item: CommandMenuItem) => {
+        if (viewRef.current && item.onSelect) {
+          return item.onSelect(viewRef.current, viewRef.current.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 +62,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>
+    </CommandMenuProvider>
   );
 };
 
-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 +98,7 @@ export const Basic = {
   },
 };
 
-export const Nested = {
+export const Nested: Story = {
   args: {
     text: str(
       //
@@ -101,7 +113,7 @@ export const Nested = {
   },
 };
 
-export const Continuation = {
+export const Continuation: Story = {
   args: {
     text: str(
       //

package/src/stories/Preview.stories.tsx

@@ -2,24 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { syntaxTree } from '@codemirror/language';
 import { type EditorView } from '@codemirror/view';
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+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 { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { trim } from '@dxos/util';
+
+import { type PreviewLinkRef, type PreviewLinkTarget, getLinkRef, image, preview } from '../extensions';
+import { PreviewPopoverProvider, usePreviewPopover } from '../testing';
 
 import { EditorStory } from './components';
-import { PreviewProvider, useRefPopover } from '../components';
-import { preview, image, type PreviewLinkRef, type PreviewLinkTarget, getLinkRef } from '../extensions';
-import { str } from '../testing';
 
 const handlePreviewLookup = async ({ label, ref }: PreviewLinkRef): Promise<PreviewLinkTarget> => {
   // Random text.
@@ -43,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()}>
@@ -132,7 +132,7 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
           <Card.Toolbar classNames='is-min p-[--dx-cardSpacingInline]'>
             {(link.suggest && (
               <>
-                <Card.ToolbarIconButton label='Discard' icon={'ph--x--regular'} onClick={handleDelete} />
+                <Card.ToolbarIconButton label='Discard' icon='ph--x--regular' onClick={handleDelete} />
                 {target && (
                   <Card.ToolbarIconButton
                     classNames='bg-successSurface text-successSurfaceText'
@@ -164,20 +164,23 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
   );
 };
 
-const meta: Meta<typeof EditorStory> = {
+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;
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   render: () => {
     const [view, setView] = useState<EditorView>();
     const [previewBlocks, setPreviewBlocks] = useState<{ link: PreviewLinkRef; el: HTMLElement }[]>([]);
-
     const extensions = useMemo(() => {
       return [
         image(),
@@ -197,32 +200,30 @@ export const Default = {
     }, []);
 
     return (
-      <PreviewProvider onLookup={handlePreviewLookup}>
+      <PreviewPopoverProvider 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]',
-            '',
-            '',
-            '',
-          )}
+          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}
         />
         <PreviewCard />
         {previewBlocks.map(({ link, el }) => (
           <PreviewBlock key={link.ref} link={link} el={el} view={view} />
         ))}
-      </PreviewProvider>
+      </PreviewPopoverProvider>
     );
   },
 };

package/src/stories/Tags.stories.tsx

@@ -0,0 +1,81 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 { withTheme } from '@dxos/react-ui/testing';
+import { trim } from '@dxos/util';
+
+import {
+  type XmlWidgetRegistry,
+  type XmlWidgetState,
+  createBasicExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+  extendedMarkdown,
+  xmlTags,
+} from '../extensions';
+import { useTextEditor } from '../hooks';
+
+const registry = {
+  // <test/>
+  ['test' as const]: {
+    block: true,
+    Component: () => <div className='p-2 border border-separator rounded'>Test</div>,
+  },
+} satisfies XmlWidgetRegistry;
+
+const DefaultStory = ({ text }: { text?: string }) => {
+  const { themeMode } = useThemeContext();
+  const [widgets, setWidgets] = useState<XmlWidgetState[]>([]);
+  const { parentRef } = useTextEditor({
+    initialValue: text,
+    extensions: [
+      createThemeExtensions({ themeMode }),
+      createBasicExtensions({ lineWrapping: true, readOnly: true }),
+      decorateMarkdown(),
+      extendedMarkdown({ registry }),
+      xmlTags({ registry, setWidgets }),
+    ],
+  });
+
+  return (
+    <>
+      <div ref={parentRef} className='is-full p-4' />
+      {widgets.map(({ Component, root, id, ...props }) => (
+        <div key={id}>{createPortal(<Component {...props} />, root)}</div>
+      ))}
+    </>
+  );
+};
+
+const text = trim`
+  # Tags
+
+  <test id="123" />
+
+  React widget above.
+`;
+
+const meta = {
+  title: 'ui/react-ui-editor/Tags',
+  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,
+  },
+};

package/src/stories/TextEditor.stories.tsx

@@ -2,28 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { javascript } from '@codemirror/lang-javascript';
 import { openSearchPanel } from '@codemirror/search';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { log } from '@dxos/log';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import {
-  EditorStory,
-  allExtensions,
-  content,
-  defaultExtensions,
-  global,
-  largeWithImages,
-  links,
-  longText,
-  names,
-  renderLinkButton,
-  text,
-} from './components';
 import { editorMonospace } from '../defaults';
 import {
   InputModeExtensions,
@@ -39,12 +25,29 @@ import {
 } from '../extensions';
 import { str } from '../testing';
 
-const meta: Meta<typeof EditorStory> = {
+import {
+  EditorStory,
+  allExtensions,
+  content,
+  defaultExtensions,
+  global,
+  largeWithImages,
+  links,
+  longText,
+  names,
+  renderLinkButton,
+  text,
+} from './components';
+
+const meta = {
   title: 'ui/react-ui-editor/TextEditor',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen', controls: { disable: true } },
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+    controls: { disable: true },
+  },
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
@@ -52,7 +55,9 @@ export default meta;
 // Default
 //
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   render: () => <EditorStory text={text} extensions={defaultExtensions} />,
 };
 
@@ -60,7 +65,7 @@ export const Default = {
 // Everything
 //
 
-export const Everything = {
+export const Everything: Story = {
   render: () => <EditorStory text={text} extensions={allExtensions} selection={{ anchor: 99, head: 110 }} />,
 };
 
@@ -68,7 +73,7 @@ export const Everything = {
 // Empty
 //
 
-export const Empty = {
+export const Empty: Story = {
   render: () => <EditorStory extensions={defaultExtensions} />,
 };
 
@@ -76,7 +81,7 @@ export const Empty = {
 // Readonly
 //
 
-export const Readonly = {
+export const Readonly: Story = {
   render: () => <EditorStory text={text} extensions={defaultExtensions} readOnly />,
 };
 
@@ -84,7 +89,7 @@ export const Readonly = {
 // No Extensions
 //
 
-export const NoExtensions = {
+export const NoExtensions: Story = {
   render: () => <EditorStory text={text} />,
 };
 
@@ -92,7 +97,7 @@ export const NoExtensions = {
 // Vim
 //
 
-export const Vim = {
+export const Vim: Story = {
   render: () => (
     <EditorStory
       text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
@@ -105,7 +110,7 @@ export const Vim = {
 // Listener
 //
 
-export const Listener = {
+export const Listener: Story = {
   render: () => (
     <EditorStory
       text={str('# Listener', '', content.footer)}
@@ -127,7 +132,7 @@ export const Listener = {
 // Folding
 //
 
-export const Folding = {
+export const Folding: Story = {
   render: () => <EditorStory text={text} extensions={[folding()]} />,
 };
 
@@ -135,7 +140,7 @@ export const Folding = {
 // Scrolling
 //
 
-export const Scrolling = {
+export const Scrolling: Story = {
   render: () => (
     <EditorStory
       text={str('# Large Document', '', longText)}
@@ -147,13 +152,13 @@ export const Scrolling = {
   ),
 };
 
-export const ScrollingWithImages = {
+export const ScrollingWithImages: Story = {
   render: () => (
     <EditorStory text={str('# Large Document', '', largeWithImages)} extensions={[decorateMarkdown(), image()]} />
   ),
 };
 
-export const ScrollTo = {
+export const ScrollTo: Story = {
   render: () => {
     // NOTE: Selection won't appear if text is reformatted.
     const word = 'Scroll to here...';
@@ -174,7 +179,7 @@ export const ScrollTo = {
 // Typescript
 //
 
-export const Typescript = {
+export const Typescript: Story = {
   render: () => (
     <EditorStory
       text={content.typescript}
@@ -188,15 +193,17 @@ export const Typescript = {
 // Autocomplete
 //
 
-export const Autocomplete = {
+export const Autocomplete: Story = {
   render: () => (
     <EditorStory
       text={str('# Autocomplete', '', 'Press Ctrl-Space...', content.footer)}
       extensions={[
         decorateMarkdown({ renderLinkButton }),
         autocomplete({
-          onSearch: (text) => {
-            return links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase()));
+          onSuggest: (text) => {
+            return links
+              .filter(({ label }) => label.toLowerCase().includes(text.toLowerCase()))
+              .map(({ label }) => label);
           },
         }),
       ]}
@@ -210,7 +217,7 @@ export const Autocomplete = {
 
 const completions = ['type', 'AND', 'OR', 'NOT', 'dxos.org'];
 
-export const Typeahead = {
+export const Typeahead: Story = {
   render: () => (
     <EditorStory
       text={str('# Typeahead', '')}
@@ -228,7 +235,7 @@ export const Typeahead = {
 // Mention
 //
 
-export const Mention = {
+export const Mention: Story = {
   render: () => (
     <EditorStory
       text={str('# Mention', '', 'Type @...', content.footer)}
@@ -245,7 +252,7 @@ export const Mention = {
 // Search
 //
 
-export const Search = {
+export const Search: Story = {
   render: () => (
     <EditorStory
       text={str('# Search', text)}