@dxos/react-ui-editor 0.8.3 → 0.8.4-main.1c7ec43d41

package/src/stories/Preview.stories.tsx

@@ -2,29 +2,35 @@
 // 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 { 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 { 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 EditorController, EditorPreviewProvider, useEditorPreview } from '../components';
 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> => {
+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 } = useRefPopover('PreviewCard');
+  const { target } = useEditorPreview('PreviewCard');
+  if (!target) {
+    return null;
+  }
+
   return (
     <Popover.Portal>
       <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
-        <Popover.Viewport>
-          <Card.Container role='popover'>
-            <Card.Heading>{target?.label}</Card.Heading>
-            {target && <Card.Text classNames='line-clamp-3'>{target.text}</Card.Text>}
-          </Card.Container>
+        <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,104 +143,105 @@ 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.Content 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.Content>,
+        {target && (
+          <Card.Row>
+            <Card.Text className='text-description'>{target.text}</Card.Text>
+          </Card.Row>
+        )}
+      </Card.Root>
+    </Menu.Root>,
     el,
   );
 };
 
-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(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
-export const Default = {
-  render: () => {
-    const [view, setView] = useState<EditorView>();
-    const [previewBlocks, setPreviewBlocks] = useState<{ link: PreviewLinkRef; el: HTMLElement }[]>([]);
+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 [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 (
-      <PreviewProvider 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]',
-            '',
-            '',
-            '',
-          )}
-          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} />
-        ))}
-      </PreviewProvider>
+        {controller?.view &&
+          previewBlocks.map(({ link, el }) => (
+            <PreviewBlockComponent key={link.dxn} link={link} el={el} view={controller.view!} />
+          ))}
+      </EditorPreviewProvider>
     );
   },
 };

package/src/stories/Tags.stories.tsx

@@ -0,0 +1,104 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { useThemeContext } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import {
+  type XmlWidgetRegistry,
+  type XmlWidgetState,
+  createBasicExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+  extendedMarkdown,
+  xmlTags,
+} from '@dxos/ui-editor';
+import { safeParseInt, trim } from '@dxos/util';
+
+import { useTextEditor } from '../hooks';
+
+const registry = {
+  /**
+   * Custom tag: <test/>
+   */
+  test: {
+    block: true,
+    Component: ({ start = '0' }) => {
+      const [count, setCount] = useState<number>(safeParseInt(start, 0));
+      useEffect(() => {
+        const interval = setInterval(() => {
+          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-sm'>Test {count}</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 }),
+      decorateMarkdown(),
+      extendedMarkdown({ registry }),
+      xmlTags({ registry, setWidgets }),
+    ],
+  });
+
+  return (
+    <>
+      <div ref={parentRef} className='w-full p-4' />
+      {widgets.map(({ id, root, Component, props }) => (
+        <div key={id}>{createPortal(<Component {...props} />, root)}</div>
+      ))}
+    </>
+  );
+};
+
+const text = trim`
+  # Tags
+
+  React widget below.
+
+  <test id="t-1" />
+
+  <test id="t-2" start="100" />
+
+  React widget above.
+`;
+
+const meta = {
+  title: 'ui/react-ui-editor/Tags',
+  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,
+  },
+};

package/src/stories/TextEditor.stories.tsx

@@ -2,14 +2,25 @@
 // 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
+import {
+  InputModeExtensions,
+  decorateMarkdown,
+  folding,
+  image,
+  join,
+  listener,
+  mention,
+  selectionState,
+  staticCompletion,
+  typeahead,
+} from '@dxos/ui-editor';
 
 import {
   EditorStory,
@@ -18,33 +29,20 @@ import {
   defaultExtensions,
   global,
   largeWithImages,
-  links,
   longText,
   names,
-  renderLinkButton,
   text,
 } from './components';
-import { editorMonospace } from '../defaults';
-import {
-  InputModeExtensions,
-  autocomplete,
-  decorateMarkdown,
-  folding,
-  image,
-  listener,
-  mention,
-  selectionState,
-  staticCompletion,
-  typeahead,
-} from '../extensions';
-import { str } from '../testing';
 
-const meta: Meta<typeof EditorStory> = {
+const meta = {
   title: 'ui/react-ui-editor/TextEditor',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen', controls: { disable: true } },
-};
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    controls: { disable: true },
+  },
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
@@ -52,7 +50,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 +60,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 +68,7 @@ export const Everything = {
 // Empty
 //
 
-export const Empty = {
+export const Empty: Story = {
   render: () => <EditorStory extensions={defaultExtensions} />,
 };
 
@@ -76,7 +76,7 @@ export const Empty = {
 // Readonly
 //
 
-export const Readonly = {
+export const Readonly: Story = {
   render: () => <EditorStory text={text} extensions={defaultExtensions} readOnly />,
 };
 
@@ -84,7 +84,7 @@ export const Readonly = {
 // No Extensions
 //
 
-export const NoExtensions = {
+export const NoExtensions: Story = {
   render: () => <EditorStory text={text} />,
 };
 
@@ -92,10 +92,10 @@ 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)}
+      text={join('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
       extensions={[defaultExtensions, InputModeExtensions.vim]}
     />
   ),
@@ -105,16 +105,16 @@ export const Vim = {
 // Listener
 //
 
-export const Listener = {
+export const Listener: Story = {
   render: () => (
     <EditorStory
-      text={str('# Listener', '', content.footer)}
+      text={join('# Listener', '', content.footer)}
       extensions={[
         listener({
-          onFocus: (focusing) => {
+          onFocus: ({ focusing }) => {
             log.info('listener', { focusing });
           },
-          onChange: (text) => {
+          onChange: ({ text }) => {
             log.info('listener', { text });
           },
         }),
@@ -127,7 +127,7 @@ export const Listener = {
 // Folding
 //
 
-export const Folding = {
+export const Folding: Story = {
   render: () => <EditorStory text={text} extensions={[folding()]} />,
 };
 
@@ -135,10 +135,10 @@ export const Folding = {
 // Scrolling
 //
 
-export const Scrolling = {
+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),
@@ -147,17 +147,17 @@ export const Scrolling = {
   ),
 };
 
-export const ScrollingWithImages = {
+export const ScrollingWithImages: Story = {
   render: () => (
-    <EditorStory text={str('# Large Document', '', largeWithImages)} extensions={[decorateMarkdown(), image()]} />
+    <EditorStory text={join('# 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...';
-    const text = str('# Scroll To', longText, '', word, '', longText);
+    const text = join('# Scroll To', longText, '', word, '', longText);
     const idx = text.indexOf(word);
     return (
       <EditorStory
@@ -174,33 +174,9 @@ export const ScrollTo = {
 // Typescript
 //
 
-export const Typescript = {
+export const Typescript: Story = {
   render: () => (
-    <EditorStory
-      text={content.typescript}
-      lineNumbers
-      extensions={[editorMonospace, javascript({ typescript: true })]}
-    />
-  ),
-};
-
-//
-// Autocomplete
-//
-
-export const Autocomplete = {
-  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()));
-          },
-        }),
-      ]}
-    />
+    <EditorStory text={content.typescript} lineNumbers monospace extensions={javascript({ typescript: true })} />
   ),
 };
 
@@ -208,16 +184,15 @@ export const Autocomplete = {
 // Typeahead
 //
 
-const completions = ['type', 'AND', 'OR', 'NOT', 'dxos.org'];
+const completions = ['hello world!', 'dxos.org'];
 
-export const Typeahead = {
+export const Typeahead: Story = {
   render: () => (
     <EditorStory
-      text={str('# Typeahead', '')}
+      text={join('# Typeahead', '')}
       extensions={[
-        decorateMarkdown({ renderLinkButton }),
         typeahead({
-          onComplete: staticCompletion(completions, completions[0]),
+          onComplete: staticCompletion(completions, { minLength: 2 }),
         }),
       ]}
     />
@@ -228,10 +203,10 @@ export const Typeahead = {
 // Mention
 //
 
-export const Mention = {
+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())),
@@ -245,10 +220,10 @@ export const Mention = {
 // Search
 //
 
-export const Search = {
+export const Search: Story = {
   render: () => (
     <EditorStory
-      text={str('# Search', text)}
+      text={join('# Search', text)}
       extensions={defaultExtensions}
       onReady={(view) => openSearchPanel(view)}
     />