@dxos/react-ui-editor 0.8.3-staging.0fa589b → 0.8.4-main.1da679c

package/src/stories/Preview.stories.tsx

@@ -6,7 +6,8 @@ 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';
@@ -14,12 +15,13 @@ 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 { withLayout, withTheme } 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,15 +45,15 @@ 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()}>
         <Popover.Viewport>
-          <Card.Container role='popover'>
+          <Card.SurfaceRoot role='card--popover'>
             <Card.Heading>{target?.label}</Card.Heading>
             {target && <Card.Text classNames='line-clamp-3'>{target.text}</Card.Text>}
-          </Card.Container>
+          </Card.SurfaceRoot>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -126,13 +128,13 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
   }, [handleAction, link, target]);
 
   return createPortal(
-    <Card.Content classNames={hoverableControls}>
+    <Card.StaticRoot classNames={hoverableControls}>
       <div className='flex items-start'>
         {!view?.state.readOnly && (
           <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'
@@ -159,25 +161,26 @@ const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElemen
         </Card.Heading>
       </div>
       {target && <Card.Text classNames='line-clamp-3 mbs-0'>{target.text}</Card.Text>}
-    </Card.Content>,
+    </Card.StaticRoot>,
     el,
   );
 };
 
-const meta: Meta<typeof EditorStory> = {
+const meta = {
   title: 'ui/react-ui-editor/Preview',
   component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   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 '@dxos-theme';
+
+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 { withLayout, withTheme } from '@dxos/storybook-utils';
+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, withLayout({ fullscreen: true })],
+  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

@@ -6,24 +6,12 @@ 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/storybook-utils';
 
-import {
-  EditorStory,
-  allExtensions,
-  content,
-  defaultExtensions,
-  global,
-  largeWithImages,
-  links,
-  longText,
-  names,
-  renderLinkButton,
-  text,
-} from './components';
 import { editorMonospace } from '../defaults';
 import {
   InputModeExtensions,
@@ -39,12 +27,26 @@ 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 } },
-};
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
@@ -52,7 +54,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 +64,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 +72,7 @@ export const Everything = {
 // Empty
 //
 
-export const Empty = {
+export const Empty: Story = {
   render: () => <EditorStory extensions={defaultExtensions} />,
 };
 
@@ -76,7 +80,7 @@ export const Empty = {
 // Readonly
 //
 
-export const Readonly = {
+export const Readonly: Story = {
   render: () => <EditorStory text={text} extensions={defaultExtensions} readOnly />,
 };
 
@@ -84,7 +88,7 @@ export const Readonly = {
 // No Extensions
 //
 
-export const NoExtensions = {
+export const NoExtensions: Story = {
   render: () => <EditorStory text={text} />,
 };
 
@@ -92,7 +96,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 +109,7 @@ export const Vim = {
 // Listener
 //
 
-export const Listener = {
+export const Listener: Story = {
   render: () => (
     <EditorStory
       text={str('# Listener', '', content.footer)}
@@ -127,7 +131,7 @@ export const Listener = {
 // Folding
 //
 
-export const Folding = {
+export const Folding: Story = {
   render: () => <EditorStory text={text} extensions={[folding()]} />,
 };
 
@@ -135,7 +139,7 @@ export const Folding = {
 // Scrolling
 //
 
-export const Scrolling = {
+export const Scrolling: Story = {
   render: () => (
     <EditorStory
       text={str('# Large Document', '', longText)}
@@ -147,13 +151,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 +178,7 @@ export const ScrollTo = {
 // Typescript
 //
 
-export const Typescript = {
+export const Typescript: Story = {
   render: () => (
     <EditorStory
       text={content.typescript}
@@ -188,15 +192,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,14 +216,14 @@ export const Autocomplete = {
 
 const completions = ['type', 'AND', 'OR', 'NOT', 'dxos.org'];
 
-export const Typeahead = {
+export const Typeahead: Story = {
   render: () => (
     <EditorStory
       text={str('# Typeahead', '')}
       extensions={[
         decorateMarkdown({ renderLinkButton }),
         typeahead({
-          onComplete: staticCompletion(completions, completions[0]),
+          onComplete: staticCompletion(completions, { minLength: 2 }),
         }),
       ]}
     />
@@ -228,7 +234,7 @@ export const Typeahead = {
 // Mention
 //
 
-export const Mention = {
+export const Mention: Story = {
   render: () => (
     <EditorStory
       text={str('# Mention', '', 'Type @...', content.footer)}
@@ -245,7 +251,7 @@ export const Mention = {
 // Search
 //
 
-export const Search = {
+export const Search: Story = {
   render: () => (
     <EditorStory
       text={str('# Search', text)}

package/src/stories/components/EditorStory.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { type ReactNode, forwardRef, useEffect, useState, useImperativeHandle, useMemo } from 'react';
+import React, { type ReactNode, forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 
 import { Expando } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
@@ -16,26 +16,25 @@ import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { editorSlots, editorGutter } from '../../defaults';
+import { editorGutter, editorSlots } from '../../defaults';
 import {
   type DebugNode,
   type ThemeExtensionsOptions,
-  createDataExtensions,
   createBasicExtensions,
+  createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   debugTree,
 } from '../../extensions';
-import { useTextEditor, type UseTextEditorProps } from '../../hooks';
+import { type UseTextEditorProps, useTextEditor } from '../../hooks';
 
 // Type definitions.
 export type DebugMode = 'raw' | 'tree' | 'raw+tree';
 
 const defaultId = 'editor-' + PublicKey.random().toHex().slice(0, 8);
 
-export type StoryProps = Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'> &
+export type StoryProps = Pick<UseTextEditorProps, 'id' | 'scrollTo' | 'selection' | 'extensions'> &
   Pick<ThemeExtensionsOptions, 'slots'> & {
-    id?: string;
     debug?: DebugMode;
     debugCustom?: (view: EditorView) => ReactNode;
     text?: string;
@@ -48,16 +47,16 @@ export type StoryProps = Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'ex
 
 export const EditorStory = forwardRef<EditorView | undefined, StoryProps>(
   ({ debug, debugCustom, text, extensions: _extensions, ...props }, forwardedRef) => {
-    const attentionAttrs = useAttentionAttributes('testing');
+    const attentionAttrs = useAttentionAttributes('test-panel');
     const [tree, setTree] = useState<DebugNode>();
     const [object] = useState(createObject(live(Expando, { content: text ?? '' })));
     const viewRef = useForwardedRef(forwardedRef);
-    const view = viewRef.current;
     const extensions = useMemo(
       () => (debug ? [_extensions, debugTree(setTree)].filter(isNonNullable) : _extensions),
       [debug, _extensions],
     );
 
+    const view = viewRef.current;
     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} />
@@ -112,8 +111,8 @@ export const EditorComponent = forwardRef<EditorView | undefined, StoryProps>(
         initialValue: text,
         extensions: [
           createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
-          createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true }),
-          createMarkdownExtensions({ themeMode }),
+          createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true, search: true }),
+          createMarkdownExtensions(),
           createThemeExtensions({ themeMode, syntaxHighlighting: true, slots }),
           editorGutter,
           extensions || [],

package/src/styles/theme.ts

@@ -64,7 +64,7 @@ export const defaultTheme: ThemeStyles = {
     fontFamily: fontBody,
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: '16px',
-    lineHeight: 1.5,
+    lineHeight: '24px',
     color: 'unset',
   },
 
@@ -74,22 +74,21 @@ export const defaultTheme: ThemeStyles = {
    */
   '.cm-gutters': {
     borderRight: 'none',
-    background: 'transparent',
+    // background: 'transparent',
   },
   '.cm-gutter': {},
   '.cm-gutter.cm-lineNumbers': {
     paddingRight: '4px',
-    borderRight: '1px solid var(--dx-separator)',
+    borderRight: '1px solid var(--dx-subduedSeparator)',
   },
   '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
     minWidth: '40px',
-    alignContent: 'center',
   },
   /**
-   * Height is set to match the corresponding line.
+   * Height is set to match the corresponding line (which may have wrapped).
    */
   '.cm-gutterElement': {
-    alignItems: 'center',
+    lineHeight: '24px',
     fontSize: '12px',
   },
 
@@ -97,6 +96,7 @@ export const defaultTheme: ThemeStyles = {
    * Line.
    */
   '.cm-line': {
+    lineHeight: '24px',
     paddingInline: 0,
   },
   '.cm-activeLine': {
@@ -110,7 +110,7 @@ export const defaultTheme: ThemeStyles = {
     borderLeft: '2px solid var(--dx-cmCursor)',
   },
   '.cm-placeholder': {
-    color: 'var(--dx-subdued)',
+    color: 'var(--dx-placeholder)',
   },
 
   /**
@@ -156,7 +156,7 @@ export const defaultTheme: ThemeStyles = {
    * Tooltip.
    */
   '.cm-tooltip': {
-    background: 'var(--dx-baseSurface)',
+    background: 'var(--dx-modalSurface)',
   },
   '.cm-tooltip-below': {},
 
@@ -177,7 +177,8 @@ export const defaultTheme: ThemeStyles = {
     padding: '4px',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
-    background: 'var(--dx-hoverSurface)',
+    background: 'var(--dx-accentSurface)',
+    color: 'var(--dx-accentSurfaceText)',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
     paddingLeft: '4px !important',
@@ -233,7 +234,7 @@ export const defaultTheme: ThemeStyles = {
     outline: '1px solid transparent',
   },
   '.cm-panel input, .cm-panel button': {
-    backgroundColor: 'var(--dx-input)',
+    backgroundColor: 'var(--dx-inputSurface)',
   },
   '.cm-panel input:focus, .cm-panel button:focus': {
     outline: '1px solid var(--dx-neutralFocusIndicator)',

package/src/testing/PreviewPopover.tsx

@@ -0,0 +1,78 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, type RefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+import { addEventListener } from '@dxos/async';
+import { type DxAnchorActivate, Popover } from '@dxos/react-ui';
+
+import { type PreviewLinkRef, type PreviewLinkTarget } from '../extensions';
+
+type PreviewLookup = (link: PreviewLinkRef) => Promise<PreviewLinkTarget | null | undefined>;
+
+type PreviewPopoverValue = Partial<{
+  link: PreviewLinkRef;
+  target: PreviewLinkTarget;
+  pending: boolean;
+}>;
+
+const [PreviewPopoverContextProvider, usePreviewPopover] = createContext<PreviewPopoverValue>('PreviewPopover', {});
+
+type PopoverLookupProviderProps = PropsWithChildren<{
+  onLookup?: PreviewLookup;
+}>;
+
+const PreviewPopoverProvider = ({ children, onLookup }: PopoverLookupProviderProps) => {
+  const trigger = useRef<HTMLElement | null>(null);
+  const [value, setValue] = useState<PreviewPopoverValue>({});
+  const [open, setOpen] = useState(false);
+
+  const handleDxAnchorActivate = useCallback(
+    (event: DxAnchorActivate) => {
+      const { refId, label, trigger: dxTrigger } = event;
+      setValue((value) => ({
+        ...value,
+        link: { label, ref: refId },
+        pending: true,
+      }));
+      trigger.current = dxTrigger;
+      queueMicrotask(() => setOpen(true));
+      void onLookup?.({ label, ref: refId }).then((target) =>
+        setValue((value) => ({
+          ...value,
+          target: target ?? undefined,
+          pending: false,
+        })),
+      );
+    },
+    [onLookup],
+  );
+
+  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (!rootRef || !handleDxAnchorActivate) {
+      return;
+    }
+
+    return addEventListener(rootRef, 'dx-anchor-activate' as any, handleDxAnchorActivate, {
+      capture: true,
+      passive: false,
+    });
+  }, [rootRef, handleDxAnchorActivate]);
+
+  return (
+    <PreviewPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
+        <div role='none' className='contents' ref={setRootRef}>
+          {children}
+        </div>
+      </Popover.Root>
+    </PreviewPopoverContextProvider>
+  );
+};
+export { PreviewPopoverProvider, usePreviewPopover };
+
+export type { PopoverLookupProviderProps, PreviewPopoverValue };

package/src/testing/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './util';
+export * from './PreviewPopover';

package/src/testing/util.ts

@@ -2,4 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
+/** deprecated Replace with @dxos/util trim */
+// TODO(burdon): Remove
 export const str = (...lines: string[]) => lines.join('\n');