@dxos/react-ui-editor 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/src/stories/Popover.stories.tsx

@@ -6,11 +6,12 @@ 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 { 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,
@@ -21,48 +22,43 @@ import {
   createMenuGroup,
   filterMenuGroups,
   formattingCommands,
-  insertAtCursor,
-  insertAtLineStart,
   linkSlashCommands,
   useEditorMenu,
 } from '../components';
-import { str } from '../util';
-
 import { EditorStory } from './components';
 
-const generator: ValueGenerator = faker as any;
+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[]) =>
-  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 pli-1 pbs-[2px] pbe-[3px]'),
-      ),
-      Domino.of('span').text('for commands'),
-    )
-    .build();
+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 StoryProps = Omit<UseEditorMenuProps, 'viewRef'> & { text: string };
+type DefaultStoryProps = Omit<UseEditorMenuProps, 'viewRef'> & { text: string };
 
-const DefaultStory = ({ text, ...props }: StoryProps) => {
+const DefaultStory = ({ text, ...props }: DefaultStoryProps) => {
   const [controller, setController] = useState<EditorController | null>(null);
   const { groupsRef, extension, ...menuProps } = useEditorMenu(props);
+  const getView = useCallback(() => controller?.view ?? null, [controller]);
 
   return (
-    <EditorMenuProvider view={controller?.view} groups={groupsRef.current} {...menuProps}>
+    <EditorMenuProvider getView={getView} groups={groupsRef.current} {...menuProps}>
       <EditorStory ref={setController} text={text} extensions={extension} />
     </EditorMenuProvider>
   );
 };
 
-const LinkStory = (args: StoryProps) => {
-  const { space } = useClientProvider();
+const LinkStory = (args: DefaultStoryProps) => {
+  const { space } = useClientStory();
 
   const getMenu = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
     async ({ text, trigger }): Promise<EditorMenuGroup[]> => {
@@ -77,8 +73,8 @@ const LinkStory = (args: StoryProps) => {
       }
 
       const name = text?.startsWith('@') ? text.slice(1).toLowerCase() : (text?.toLowerCase() ?? '');
-      const result = await space?.db.query(Query.type(Testing.Person)).run();
-      const items = result.objects
+      const result = await space?.db.query(Query.type(TestSchema.Person)).run();
+      const items = result
         .filter((object) => object.name.toLowerCase().includes(name))
         .map(
           (object): EditorMenuItem => ({
@@ -86,7 +82,7 @@ const LinkStory = (args: StoryProps) => {
             label: object.name,
             icon: 'ph--user--regular',
             onSelect: ({ view, head }) => {
-              const link = `[${object.name}](${Obj.getDXN(object)})`;
+              const link = `[${object.name}](${Obj.getURI(object)})`;
               if (text?.startsWith('@')) {
                 insertAtLineStart(view, head, `!${link}\n`);
               } else {
@@ -107,7 +103,7 @@ const LinkStory = (args: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-editor/Popover',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -119,7 +115,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    text: str('# Autocomplete', '', ''),
+    text: join('# Autocomplete', '', ''),
     triggerKey: 'Ctrl-Space',
     filter: true,
     getMenu: () => [customCompletions],
@@ -128,7 +124,7 @@ export const Default: Story = {
 
 export const Formatting: Story = {
   args: {
-    text: str('# Slash command', '', ''),
+    text: join('# Slash command', '', ''),
     trigger: '/',
     placeholder: {
       content: () => placeholder(['/']),
@@ -143,17 +139,17 @@ export const Link: Story = {
     withClientProvider({
       createSpace: true,
       onInitialized: async (client) => {
-        client.addTypes([Testing.Person]);
+        await client.addTypes([TestSchema.Person]);
       },
       onCreateSpace: async ({ space }) => {
         const createObjects = createObjectFactory(space.db, generator);
-        await createObjects([{ type: Testing.Person, count: 10 }]);
+        await createObjects([{ type: TestSchema.Person, count: 10 }]);
         await space.db.flush({ indexes: true });
       },
     }),
   ],
   args: {
-    text: str('# Links', '', ''),
+    text: join('# Links', '', ''),
     trigger: ['/', '@'],
     placeholder: {
       content: () => placeholder(['/', '@']),

package/src/stories/Preview.stories.tsx

@@ -9,14 +9,10 @@ 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 { trim } from '@dxos/util';
-
-import { type EditorController, EditorPreviewProvider, useEditorPreview } from '../components';
+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,
@@ -24,14 +20,17 @@ import {
   getLinkRef,
   image,
   preview,
-} from '../extensions';
+} from '@dxos/ui-editor';
+import { hoverableControls } from '@dxos/ui-theme';
+import { trim } from '@dxos/util';
 
+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,
@@ -51,14 +50,26 @@ const useRefTarget = (link: PreviewLinkRef): PreviewLinkTarget | undefined => {
 
 const 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.Header>
+              <Card.Icon icon='ph--file-text--regular' />
+              <Card.Title>{target.label}</Card.Title>
+              <Popover.Close asChild>
+                <Card.ActionIconButton action='close' />
+              </Popover.Close>
+            </Card.Header>
+            <Card.Row>
+              <Card.Text variant='description'>{target.text}</Card.Text>
+            </Card.Row>
+          </Card.Root>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -90,7 +101,7 @@ const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: H
       }
 
       const link = getLinkRef(view.state, node);
-      if (link?.ref !== action.link.ref) {
+      if (link?.dxn !== action.link.dxn) {
         return;
       }
 
@@ -132,41 +143,45 @@ const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: H
     }
   }, [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.Header>
+            <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.Header>
+        )}
+        {target && (
+          <Card.Row>
+            <Card.Text className='text-description'>{target.text}</Card.Text>
+          </Card.Row>
         )}
-        <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>,
+      </Card.Root>
+    </Menu.Root>,
     el,
   );
 };
@@ -174,7 +189,7 @@ const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: H
 const meta = {
   title: 'ui/react-ui-editor/Preview',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -187,15 +202,15 @@ type Story = StoryObj<typeof meta>;
 const text = trim`
   # Preview
 
-  This project is part of the [DXOS](dxn:queue:data:123) SDK.
+  This project is part of the [DXOS](echo:/123) SDK.
 
-  ![DXOS](dxn:queue:data:123)
+  ![DXOS](echo:/123)
 
-  It consists of [ECHO](dxn:queue:data:echo), [HALO](dxn:queue:data:halo), and [MESH](dxn:queue:data:mesh).
+  It consists of [ECHO](echo:/echo), [HALO](echo:/halo), and [MESH](echo:/mesh).
 
   ## Deep dive
 
-  ![ECHO](dxn:queue:data:echo)
+  ![ECHO](echo:/echo)
 
 `;
 
@@ -211,21 +226,20 @@ export const Default: Story = {
             setPreviewBlocks((prev) => [...prev, block]);
           },
           removeBlockContainer: (block) => {
-            setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== block.link.ref));
+            setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.dxn !== block.link.dxn));
           },
         }),
       ];
     }, []);
 
     // TODO(burdon): Migrate to Editor.Root.
-    // TODO(burdon): Ranges must be sorted error (decorate.enter).
     return (
       <EditorPreviewProvider onLookup={handlePreviewLookup}>
         <EditorStory ref={setController} text={text} extensions={extensions} />
         <PreviewCard />
         {controller?.view &&
           previewBlocks.map(({ link, el }) => (
-            <PreviewBlockComponent key={link.ref} link={link} el={el} view={controller.view!} />
+            <PreviewBlockComponent key={link.dxn} link={link} el={el} view={controller.view!} />
           ))}
       </EditorPreviewProvider>
     );

package/src/stories/Tags.stories.tsx

@@ -7,9 +7,7 @@ import React, { useEffect, 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   type XmlWidgetRegistry,
   type XmlWidgetState,
@@ -18,25 +16,34 @@ import {
   decorateMarkdown,
   extendedMarkdown,
   xmlTags,
-} from '../extensions';
+} from '@dxos/ui-editor';
+import { safeParseInt, trim } from '@dxos/util';
+
 import { useTextEditor } from '../hooks';
 
 const registry = {
   /**
    * Custom tag: <test/>
    */
-  ['test' as const]: {
+  test: {
     block: true,
-    Component: () => {
-      const [count, setCount] = useState(0);
+    Component: ({ start = '0' }) => {
+      const [count, setCount] = useState<number>(safeParseInt(start, 0));
       useEffect(() => {
         const interval = setInterval(() => {
-          setCount((prev) => prev + 1);
-        }, 1_000);
+          setCount((prev) => {
+            if (prev >= 200) {
+              clearInterval(interval);
+              return prev;
+            }
+
+            return prev + 1;
+          });
+        }, 100);
         return () => clearInterval(interval);
       }, []);
 
-      return <div className='p-2 border border-separator rounded'>Test {count}</div>;
+      return <div className='p-2 border border-separator rounded-sm'>Test {count}</div>;
     },
   },
 } satisfies XmlWidgetRegistry;
@@ -57,8 +64,8 @@ const DefaultStory = ({ text }: { text?: string }) => {
 
   return (
     <>
-      <div ref={parentRef} className='is-full p-4' />
-      {widgets.map(({ Component, root, id, ...props }) => (
+      <div ref={parentRef} className='w-full p-4' />
+      {widgets.map(({ id, root, Component, props }) => (
         <div key={id}>{createPortal(<Component {...props} />, root)}</div>
       ))}
     </>
@@ -70,15 +77,17 @@ const text = trim`
 
   React widget below.
 
-  <test id="123" />
+  <test id="t-1" />
+
+  <test id="t-2" start="100" />
 
   React widget above.
 `;
 
 const meta = {
-  title: 'ui/react-ui-editor/XmlTags',
+  title: 'ui/react-ui-editor/Tags',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/TextEditor.stories.tsx

@@ -8,21 +8,19 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { log } from '@dxos/log';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { editorMonospace } from '../defaults';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   InputModeExtensions,
   decorateMarkdown,
   folding,
   image,
+  join,
   listener,
   mention,
   selectionState,
   staticCompletion,
   typeahead,
-} from '../extensions';
-import { str } from '../util';
+} from '@dxos/ui-editor';
 
 import {
   EditorStory,
@@ -39,7 +37,7 @@ import {
 const meta = {
   title: 'ui/react-ui-editor/TextEditor',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     controls: { disable: true },
@@ -97,7 +95,7 @@ export const NoExtensions: Story = {
 export const Vim: Story = {
   render: () => (
     <EditorStory
-      text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
+      text={join('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
       extensions={[defaultExtensions, InputModeExtensions.vim]}
     />
   ),
@@ -110,7 +108,7 @@ export const Vim: Story = {
 export const Listener: Story = {
   render: () => (
     <EditorStory
-      text={str('# Listener', '', content.footer)}
+      text={join('# Listener', '', content.footer)}
       extensions={[
         listener({
           onFocus: ({ focusing }) => {
@@ -140,7 +138,7 @@ export const Folding: Story = {
 export const Scrolling: Story = {
   render: () => (
     <EditorStory
-      text={str('# Large Document', '', longText)}
+      text={join('# Large Document', '', longText)}
       extensions={selectionState({
         setState: (id, state) => global.set(id, state),
         getState: (id) => global.get(id),
@@ -151,7 +149,7 @@ export const Scrolling: Story = {
 
 export const ScrollingWithImages: Story = {
   render: () => (
-    <EditorStory text={str('# Large Document', '', largeWithImages)} extensions={[decorateMarkdown(), image()]} />
+    <EditorStory text={join('# Large Document', '', largeWithImages)} extensions={[decorateMarkdown(), image()]} />
   ),
 };
 
@@ -159,7 +157,7 @@ export const ScrollTo: Story = {
   render: () => {
     // NOTE: Selection won't appear if text is reformatted.
     const word = 'Scroll to here...';
-    const text = str('# Scroll To', longText, '', word, '', longText);
+    const text = join('# Scroll To', longText, '', word, '', longText);
     const idx = text.indexOf(word);
     return (
       <EditorStory
@@ -178,11 +176,7 @@ export const ScrollTo: Story = {
 
 export const Typescript: Story = {
   render: () => (
-    <EditorStory
-      text={content.typescript}
-      lineNumbers
-      extensions={[editorMonospace, javascript({ typescript: true })]}
-    />
+    <EditorStory text={content.typescript} lineNumbers monospace extensions={javascript({ typescript: true })} />
   ),
 };
 
@@ -195,7 +189,7 @@ const completions = ['hello world!', 'dxos.org'];
 export const Typeahead: Story = {
   render: () => (
     <EditorStory
-      text={str('# Typeahead', '')}
+      text={join('# Typeahead', '')}
       extensions={[
         typeahead({
           onComplete: staticCompletion(completions, { minLength: 2 }),
@@ -212,7 +206,7 @@ export const Typeahead: Story = {
 export const Mention: Story = {
   render: () => (
     <EditorStory
-      text={str('# Mention', '', 'Type @...', content.footer)}
+      text={join('# Mention', '', 'Type @...', content.footer)}
       extensions={[
         mention({
           onSearch: (text) => names.filter((name) => name.toLowerCase().startsWith(text.toLowerCase())),
@@ -229,7 +223,7 @@ export const Mention: Story = {
 export const Search: Story = {
   render: () => (
     <EditorStory
-      text={str('# Search', text)}
+      text={join('# Search', text)}
       extensions={defaultExtensions}
       onReady={(view) => openSearchPanel(view)}
     />

package/src/stories/Theme.stories.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+
+import { useThemeContext } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { createBasicExtensions, createThemeExtensions } from '@dxos/ui-editor';
+
+import { Editor } from '../components';
+
+const createText = (monospace?: boolean) =>
+  [`${monospace ? 'monospace' : 'body'}`, 'Hello world', '0123456789'].join('\n');
+
+const DefaultStory = () => {
+  const { themeMode } = useThemeContext();
+  const [ext1, ext2] = useMemo(
+    () => [
+      //
+      [
+        createBasicExtensions({ placeholder: 'Enter text', search: true }),
+        createThemeExtensions({ themeMode, monospace: false }),
+      ],
+      [
+        createBasicExtensions({ placeholder: 'Enter text', search: true }),
+        createThemeExtensions({ themeMode, monospace: true }),
+      ],
+    ],
+    [],
+  );
+
+  return (
+    <div className='w-full grid grid-cols-2 gap-2'>
+      <Editor.Root>
+        <Editor.View classNames='p-2' extensions={ext1} initialValue={createText(false)} />
+      </Editor.Root>
+      <Editor.Root>
+        <Editor.View classNames='p-2' extensions={ext2} initialValue={createText(true)} />
+      </Editor.Root>
+    </div>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-editor/Theme',
+  component: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};