@dxos/react-ui-editor 0.8.4-main.5ea62a8 → 0.8.4-main.72ec0f3

package/src/stories/Popover.stories.tsx

@@ -0,0 +1,162 @@
+//
+// 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 { 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 EditorController,
+  type EditorMenuGroup,
+  type EditorMenuItem,
+  EditorMenuProvider,
+  type UseEditorMenuProps,
+  createMenuGroup,
+  filterMenuGroups,
+  formattingCommands,
+  insertAtCursor,
+  insertAtLineStart,
+  linkSlashCommands,
+  useEditorMenu,
+} from '../components';
+import { str } from '../util';
+
+import { EditorStory } from './components';
+
+const generator: ValueGenerator = faker 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();
+
+type StoryProps = Omit<UseEditorMenuProps, 'viewRef'> & { text: string };
+
+const DefaultStory = ({ text, ...props }: StoryProps) => {
+  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: StoryProps) => {
+  const { space } = useClientProvider();
+
+  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(Testing.Person)).run();
+      const items = result.objects
+        .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],
+  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.Person]);
+      },
+      onCreateSpace: async ({ space }) => {
+        const createObjects = createObjectFactory(space.db, generator);
+        await createObjects([{ type: Testing.Person, count: 10 }]);
+        await space.db.flush({ indexes: true });
+      },
+    }),
+  ],
+  args: {
+    text: str('# Links', '', ''),
+    trigger: ['/', '@'],
+    placeholder: {
+      content: () => placeholder(['/', '@']),
+    },
+  },
+};

package/src/stories/Preview.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { syntaxTree } from '@codemirror/language';
 import { type EditorView } from '@codemirror/view';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
@@ -13,13 +11,20 @@ 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 } from '@dxos/storybook-utils';
 import { trim } from '@dxos/util';
 
-import { PreviewProvider, useRefPopover } from '../components';
-import { type PreviewLinkRef, type PreviewLinkTarget, getLinkRef, image, preview } from '../extensions';
+import { type EditorController, EditorPreviewProvider, useEditorPreview } from '../components';
+import {
+  type PreviewBlock,
+  type PreviewLinkRef,
+  type PreviewLinkTarget,
+  getLinkRef,
+  image,
+  preview,
+} from '../extensions';
 
 import { EditorStory } from './components';
 
@@ -45,7 +50,7 @@ const useRefTarget = (link: PreviewLinkRef): PreviewLinkTarget | undefined => {
 };
 
 const PreviewCard = () => {
-  const { target } = useRefPopover('PreviewCard');
+  const { target } = useEditorPreview('PreviewCard');
   return (
     <Popover.Portal>
       <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
@@ -72,7 +77,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(
@@ -169,62 +174,60 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
 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;
 
 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.ref !== block.link.ref));
           },
         }),
       ];
     }, []);
 
-    const handleViewRef = useCallback((instance?: EditorView | null) => {
-      setView(instance ?? undefined);
-    }, []);
-
+    // TODO(burdon): Migrate to Editor.Root.
+    // TODO(burdon): Ranges must be sorted error (decorate.enter).
     return (
-      <PreviewProvider 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} />
-        ))}
-      </PreviewProvider>
+        {controller?.view &&
+          previewBlocks.map(({ link, el }) => (
+            <PreviewBlockComponent key={link.ref} link={link} el={el} view={controller.view!} />
+          ))}
+      </EditorPreviewProvider>
     );
   },
 };

package/src/stories/Tags.stories.tsx

@@ -0,0 +1,95 @@
+//
+// 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 { 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 = {
+  /**
+   * Custom tag: <test/>
+   */
+  ['test' as const]: {
+    block: true,
+    Component: () => {
+      const [count, setCount] = useState(0);
+      useEffect(() => {
+        const interval = setInterval(() => {
+          setCount((prev) => prev + 1);
+        }, 1_000);
+        return () => clearInterval(interval);
+      }, []);
+
+      return <div className='p-2 border border-separator rounded'>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='is-full p-4' />
+      {widgets.map(({ Component, root, id, ...props }) => (
+        <div key={id}>{createPortal(<Component {...props} />, root)}</div>
+      ))}
+    </>
+  );
+};
+
+const text = trim`
+  # Tags
+
+  React widget below.
+
+  <test id="123" />
+
+  React widget above.
+`;
+
+const meta = {
+  title: 'ui/react-ui-editor/XmlTags',
+  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,20 +2,17 @@
 // 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 } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { editorMonospace } from '../defaults';
 import {
   InputModeExtensions,
-  autocomplete,
   decorateMarkdown,
   folding,
   image,
@@ -25,7 +22,7 @@ import {
   staticCompletion,
   typeahead,
 } from '../extensions';
-import { str } from '../testing';
+import { str } from '../util';
 
 import {
   EditorStory,
@@ -34,18 +31,19 @@ import {
   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;
@@ -115,10 +113,10 @@ export const Listener: Story = {
       text={str('# Listener', '', content.footer)}
       extensions={[
         listener({
-          onFocus: (focusing) => {
+          onFocus: ({ focusing }) => {
             log.info('listener', { focusing });
           },
-          onChange: (text) => {
+          onChange: ({ text }) => {
             log.info('listener', { text });
           },
         }),
@@ -188,38 +186,17 @@ export const Typescript: Story = {
   ),
 };
 
-//
-// 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()));
-          },
-        }),
-      ]}
-    />
-  ),
-};
-
 //
 // Typeahead
 //
 
-const completions = ['type', 'AND', 'OR', 'NOT', 'dxos.org'];
+const completions = ['hello world!', 'dxos.org'];
 
 export const Typeahead: Story = {
   render: () => (
     <EditorStory
       text={str('# Typeahead', '')}
       extensions={[
-        decorateMarkdown({ renderLinkButton }),
         typeahead({
           onComplete: staticCompletion(completions, { minLength: 2 }),
         }),

package/src/stories/components/EditorStory.tsx

@@ -3,19 +3,21 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { type ReactNode, forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import React, { type ReactNode, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 
-import { Expando } from '@dxos/echo-schema';
+import { createDocAccessor, createObject } from '@dxos/client/echo';
+import { Expando } from '@dxos/echo/internal';
+import { live } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
-import { live } from '@dxos/live-object';
-import { createDocAccessor, createObject } from '@dxos/react-client/echo';
-import { useForwardedRef, useThemeContext } from '@dxos/react-ui';
+import { log } from '@dxos/log';
+import { useMergeRefs, useThemeContext } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 import { isNonNullable } from '@dxos/util';
 
+import { type EditorController, createEditorController } from '../../components';
 import { editorGutter, editorSlots } from '../../defaults';
 import {
   type DebugNode,
@@ -25,6 +27,7 @@ import {
   createMarkdownExtensions,
   createThemeExtensions,
   debugTree,
+  decorateMarkdown,
 } from '../../extensions';
 import { type UseTextEditorProps, useTextEditor } from '../../hooks';
 
@@ -45,25 +48,28 @@ export type StoryProps = Pick<UseTextEditorProps, 'id' | 'scrollTo' | 'selection
     onReady?: (view: EditorView) => void;
   };
 
-export const EditorStory = forwardRef<EditorView | undefined, StoryProps>(
-  ({ debug, debugCustom, text, extensions: _extensions, ...props }, forwardedRef) => {
+export const EditorStory = forwardRef<EditorController, StoryProps>(
+  ({ debug, debugCustom, text, extensions: extensionsParam, ...props }, forwardedRef) => {
+    const controllerRef = useRef<EditorController>(null);
+    const mergedRef = useMergeRefs([controllerRef, forwardedRef]);
+
     const attentionAttrs = useAttentionAttributes('test-panel');
     const [tree, setTree] = useState<DebugNode>();
     const [object] = useState(createObject(live(Expando, { content: text ?? '' })));
-    const viewRef = useForwardedRef(forwardedRef);
+
     const extensions = useMemo(
-      () => (debug ? [_extensions, debugTree(setTree)].filter(isNonNullable) : _extensions),
-      [debug, _extensions],
+      () => (debug ? [extensionsParam, debugTree(setTree)].filter(isNonNullable) : extensionsParam),
+      [debug, extensionsParam],
     );
 
-    const view = viewRef.current;
+    const view = controllerRef.current?.view;
     return (
-      <div className={mx('w-full h-full grid overflow-hidden', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
-        <EditorComponent ref={viewRef} object={object} text={text} extensions={extensions} {...props} />
+      <div className={mx('is-full bs-full grid overflow-hidden', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
+        <EditorComponent ref={mergedRef} object={object} text={text} extensions={extensions} {...props} />
 
         {debug && (
           <div
-            className='grid h-full auto-rows-fr border-l border-separator divide-y divide-separator overflow-hidden'
+            className='grid bs-full auto-rows-fr border-l border-separator divide-y divide-separator overflow-hidden'
             {...attentionAttrs}
           >
             {view && debugCustom?.(view)}
@@ -82,8 +88,10 @@ export const EditorStory = forwardRef<EditorView | undefined, StoryProps>(
 
 /**
  * Default story component.
+ * @deprecated
  */
-export const EditorComponent = forwardRef<EditorView | undefined, StoryProps>(
+// TODO(burdon): Replace with <Editor.Root>
+export const EditorComponent = forwardRef<EditorController, StoryProps>(
   (
     {
       id = defaultId,
@@ -112,8 +120,9 @@ export const EditorComponent = forwardRef<EditorView | undefined, StoryProps>(
         extensions: [
           createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
           createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true, search: true }),
-          createMarkdownExtensions({ themeMode }),
+          createMarkdownExtensions(),
           createThemeExtensions({ themeMode, syntaxHighlighting: true, slots }),
+          decorateMarkdown(),
           editorGutter,
           extensions || [],
         ],
@@ -121,7 +130,11 @@ export const EditorComponent = forwardRef<EditorView | undefined, StoryProps>(
       [id, object, extensions, themeMode],
     );
 
-    useImperativeHandle(forwardedRef, () => view, [view]);
+    // External controller.
+    useImperativeHandle(forwardedRef, () => {
+      log.info('view updated', { id });
+      return createEditorController(view);
+    }, [id, view]);
 
     useEffect(() => {
       if (view) {