@dxos/react-ui-editor 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/src/stories/Comments.stories.tsx

@@ -2,17 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
-import { effect, useSignal } from '@preact/signals-react';
+import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type FC } from 'react';
+import React, { type FC, useContext, useMemo } from 'react';
 
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
+import { type Comment, annotations, comments, createExternalCommentSync } from '@dxos/ui-editor';
 
-import { annotations, comments, createExternalCommentSync } from '../extensions';
-import { type Comment } from '../types';
 import { createRenderer, str } from '../util';
 
 import { EditorStory, content, longText } from './components';
@@ -20,7 +20,7 @@ import { EditorStory, content, longText } from './components';
 const meta = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withRegistry, withTheme()],
   parameters: {
     layout: 'fullscreen',
   },
@@ -34,41 +34,46 @@ type Story = StoryObj<typeof meta>;
 // Comments
 //
 
+const CommentsStory = () => {
+  const registry = useContext(RegistryContext);
+  const commentsAtom = useMemo(() => Atom.make<Comment[]>([]), []);
+
+  return (
+    <EditorStory
+      text={str('# Comments', '', content.paragraphs, content.footer)}
+      extensions={[
+        createExternalCommentSync(
+          'test',
+          (sink) => registry.subscribe(commentsAtom, () => sink()),
+          () => registry.get(commentsAtom),
+        ),
+        comments({
+          id: 'test',
+          renderTooltip: createRenderer(CommentTooltip),
+          onCreate: ({ cursor }) => {
+            const id = PublicKey.random().toHex();
+            const current = registry.get(commentsAtom);
+            registry.set(commentsAtom, [...current, { id, cursor }]);
+            return id;
+          },
+          onSelect: (state) => {
+            const debug = false;
+            if (debug) {
+              log.info('update', {
+                comments: state.comments.length,
+                active: state.selection.current?.slice(0, 8),
+                closest: state.selection.closest?.slice(0, 8),
+              });
+            }
+          },
+        }),
+      ]}
+    />
+  );
+};
+
 export const Comments: Story = {
-  render: () => {
-    const _comments = useSignal<Comment[]>([]);
-    return (
-      <EditorStory
-        text={str('# Comments', '', content.paragraphs, content.footer)}
-        extensions={[
-          createExternalCommentSync(
-            'test',
-            (sink) => effect(() => sink()),
-            () => _comments.value,
-          ),
-          comments({
-            id: 'test',
-            renderTooltip: createRenderer(CommentTooltip),
-            onCreate: ({ cursor }) => {
-              const id = PublicKey.random().toHex();
-              _comments.value = [..._comments.value, { id, cursor }];
-              return id;
-            },
-            onSelect: (state) => {
-              const debug = false;
-              if (debug) {
-                log.info('update', {
-                  comments: state.comments.length,
-                  active: state.selection.current?.slice(0, 8),
-                  closest: state.selection.closest?.slice(0, 8),
-                });
-              }
-            },
-          }),
-        ]}
-      />
-    );
-  },
+  render: () => <CommentsStory />,
 };
 
 const Key: FC<{ char: string }> = ({ char }) => (

package/src/stories/EditorToolbar.stories.tsx

@@ -2,36 +2,48 @@
 // Copyright 2024 DXOS.org
 //
 
+import { RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
-import { attentionSurface, mx } from '@dxos/react-ui-theme';
-
-import { EditorToolbar, useEditorToolbar } from '../components';
-import { editorWidth } from '../defaults';
+import { withRegistry } from '@dxos/storybook-utils';
 import {
+  type EditorInputMode,
+  type EditorViewMode,
   InputModeExtensions,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
+  editorWidth,
   formattingKeymap,
   formattingListener,
-} from '../extensions';
+} from '@dxos/ui-editor';
+import { attentionSurface, mx } from '@dxos/ui-theme';
+
+import { EditorToolbar, type EditorToolbarState, useEditorToolbar } from '../components';
 import { type UseTextEditorProps, useTextEditor } from '../hooks';
 import { translations } from '../translations';
-import { type EditorInputMode, type EditorViewMode } from '../types';
 
 type StoryProps = { placeholder?: string } & UseTextEditorProps;
 
 const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   const { themeMode } = useThemeContext();
+  const registry = useContext(RegistryContext);
 
   const toolbarState = useEditorToolbar({ viewMode: 'source' });
-  const viewMode = toolbarState.viewMode;
+  const { viewMode } = useAtomValue(toolbarState);
+
+  const updateToolbarState = useCallback(
+    (formatting: EditorToolbarState) => {
+      registry.update(toolbarState, (state) => ({ ...state, ...formatting }));
+    },
+    [registry, toolbarState],
+  );
+
   // TODO(wittjosiah): Provide way to change the input mode.
   const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
   const { parentRef, view } = useTextEditor(
@@ -46,7 +58,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         viewMode === 'source' ? [] : decorateMarkdown(),
         formattingKeymap(),
-        formattingListener(() => toolbarState),
+        formattingListener(updateToolbarState),
       ],
     }),
     [editorInputMode, viewMode, themeMode, placeholder],
@@ -57,9 +69,12 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
     return view;
   }, [view]);
 
-  const handleViewModeChange = useCallback((mode: EditorViewMode) => {
-    toolbarState.viewMode = mode;
-  }, []);
+  const handleViewModeChange = useCallback(
+    (mode: EditorViewMode) => {
+      registry.update(toolbarState, (state) => ({ ...state, viewMode: mode }));
+    },
+    [registry, toolbarState],
+  );
 
   // TODO(marijn): This doesn't update the state on view changes.
   //  Also not sure if view is even guaranteed to exist at this point.
@@ -76,7 +91,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-editor/EditorToolbar',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withRegistry, withTheme()],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/stories/Experimental.stories.tsx

@@ -9,16 +9,14 @@ import React from 'react';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/react-ui/testing';
-
-import { blast, defaultOptions, dropFile, typewriter } from '../extensions';
-import { str } from '../util';
+import { blast, defaultOptions, dropFile, join, typewriter } from '@dxos/ui-editor';
 
 import { EditorStory, content } from './components';
 
 const meta = {
   title: 'ui/react-ui-editor/Experimental',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'fullscreen',
   },
@@ -37,7 +35,7 @@ const typewriterItems = localStorage.getItem('dxos.org/testing/typewriter')?.spl
 export const Typewriter: Story = {
   render: () => (
     <EditorStory
-      text={str('# Typewriter', '', content.paragraphs, content.footer)}
+      text={join('# Typewriter', '', content.paragraphs, content.footer)}
       extensions={[typewriter({ items: typewriterItems })]}
     />
   ),
@@ -50,7 +48,7 @@ export const Typewriter: Story = {
 export const Blast: Story = {
   render: () => (
     <EditorStory
-      text={str('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
+      text={join('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
       extensions={[
         typewriter({ items: typewriterItems }),
         blast(
@@ -77,7 +75,7 @@ export const Blast: Story = {
 export const DND: Story = {
   render: () => (
     <EditorStory
-      text={str('# DND', '')}
+      text={join('# DND', '')}
       extensions={[
         dropFile({
           onDrop: (view, event) => {

package/src/stories/Markdown.stories.tsx

@@ -7,16 +7,14 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '@dxos/react-ui/testing';
-
-import { decorateMarkdown, image, linkTooltip, table } from '../extensions';
-import { str } from '../util';
+import { decorateMarkdown, image, join, linkTooltip, table } from '@dxos/ui-editor';
 
 import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
 
 const meta = {
   title: 'ui/react-ui-editor/Markdown',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'fullscreen',
   },
@@ -37,7 +35,7 @@ export const Default: Story = {
 export const Blockquote: Story = {
   render: () => (
     <EditorStory
-      text={str('> Blockquote', 'continuation', content.footer)}
+      text={join('> Blockquote', 'continuation', content.footer)}
       extensions={decorateMarkdown()}
       debug='raw'
     />
@@ -49,21 +47,23 @@ export const Headings: Story = {
 };
 
 export const Links: Story = {
-  render: () => <EditorStory text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
+  render: () => (
+    <EditorStory text={join(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />
+  ),
 };
 
 export const Image: Story = {
-  render: () => <EditorStory text={str(content.image, content.footer)} extensions={[image()]} />,
+  render: () => <EditorStory text={join(content.image, content.footer)} extensions={[image()]} />,
 };
 
 export const Code: Story = {
-  render: () => <EditorStory text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <EditorStory text={join(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 export const Lists: Story = {
   render: () => (
     <EditorStory
-      text={str(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
+      text={join(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
       extensions={[decorateMarkdown()]}
     />
   ),
@@ -74,7 +74,7 @@ export const Lists: Story = {
 //
 
 export const BulletList: Story = {
-  render: () => <EditorStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <EditorStory text={join(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 //
@@ -82,7 +82,7 @@ export const BulletList: Story = {
 //
 
 export const OrderedList: Story = {
-  render: () => <EditorStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <EditorStory text={join(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 //
@@ -91,12 +91,12 @@ export const OrderedList: Story = {
 
 export const TaskList: Story = {
   render: () => (
-    <EditorStory text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
+    <EditorStory text={join(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
   ),
 };
 
 export const TaskListEmpty: Story = {
-  render: () => <EditorStory text={str('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
+  render: () => <EditorStory text={join('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
 };
 
 //
@@ -104,7 +104,7 @@ export const TaskListEmpty: Story = {
 //
 
 export const Table: Story = {
-  render: () => <EditorStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
+  render: () => <EditorStory text={join(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
 };
 
 //
@@ -114,7 +114,7 @@ export const Table: Story = {
 export const CommentedOut: Story = {
   render: () => (
     <EditorStory
-      text={str('# Commented out', '', content.comment, content.footer)}
+      text={join('# Commented out', '', content.comment, content.footer)}
       extensions={[
         decorateMarkdown(),
         markdown(),

package/src/stories/Outliner.stories.tsx

@@ -7,10 +7,9 @@ import React, { useMemo, useState } from 'react';
 
 import { withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
+import { deleteItem, hashtag, join, listItemToString, outliner, treeFacet } from '@dxos/ui-editor';
 
 import { type EditorController, type EditorMenuGroup, EditorMenuProvider } from '../components';
-import { deleteItem, hashtag, listItemToString, outliner, treeFacet } from '../extensions';
-import { str } from '../util';
 
 import { EditorStory } from './components';
 
@@ -69,7 +68,7 @@ const DefaultStory = ({ text }: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-editor/Outliner',
   render: DefaultStory,
-  decorators: [withTheme, withAttention],
+  decorators: [withTheme(), withAttention()],
   parameters: {
     layout: 'fullscreen',
   },
@@ -85,7 +84,7 @@ export const Empty: Story = {
 
 export const Basic: Story = {
   args: {
-    text: str(
+    text: join(
       //
       '- [ ] A',
       '- [ ] B',
@@ -100,7 +99,7 @@ export const Basic: Story = {
 
 export const Nested: Story = {
   args: {
-    text: str(
+    text: join(
       //
       '- [ ] A',
       '  - [ ] B',
@@ -115,7 +114,7 @@ export const Nested: Story = {
 
 export const Continuation: Story = {
   args: {
-    text: str(
+    text: join(
       //
       '- [ ] A',
       '- [ ] B',

package/src/stories/Popover.stories.tsx

@@ -7,10 +7,11 @@ 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 { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { 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,12 +22,9 @@ import {
   createMenuGroup,
   filterMenuGroups,
   formattingCommands,
-  insertAtCursor,
-  insertAtLineStart,
   linkSlashCommands,
   useEditorMenu,
 } from '../components';
-import { str } from '../util';
 
 import { EditorStory } from './components';
 
@@ -37,16 +35,14 @@ const customCompletions: EditorMenuGroup = createMenuGroup({
   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-sm mx-1 pli-1 pbs-[2px] pbe-[3px]')).text(trigger),
+  );
+  const forCommandsEl = Domino.of('span').text('for commands');
+  return Domino.of('div').children(pressEl, ...triggerEls, forCommandsEl).root;
+};
 
 type StoryProps = Omit<UseEditorMenuProps, 'viewRef'> & { text: string };
 
@@ -62,7 +58,7 @@ const DefaultStory = ({ text, ...props }: StoryProps) => {
 };
 
 const LinkStory = (args: StoryProps) => {
-  const { space } = useClientProvider();
+  const { space } = useClientStory();
 
   const getMenu = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
     async ({ text, trigger }): Promise<EditorMenuGroup[]> => {
@@ -107,7 +103,7 @@ const LinkStory = (args: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-editor/Popover',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   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(['/']),
@@ -153,7 +149,7 @@ export const Link: Story = {
     }),
   ],
   args: {
-    text: str('# Links', '', ''),
+    text: join('# Links', '', ''),
     trigger: ['/', '@'],
     placeholder: {
       content: () => placeholder(['/', '@']),

package/src/stories/Preview.stories.tsx

@@ -12,11 +12,7 @@ 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 { Card } from '@dxos/react-ui-mosaic';
 import {
   type PreviewBlock,
   type PreviewLinkRef,
@@ -24,13 +20,17 @@ import {
   getLinkRef,
   image,
   preview,
-} from '../extensions';
+} from '@dxos/ui-editor';
+import { hoverableControls } from '@dxos/ui-theme';
+import { isTruthy, 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));
+  faker.seed(dxn.split('').reduce((acc: number, char: string) => acc + char.charCodeAt(0), 1));
   const text = Array.from({ length: 2 }, () => faker.lorem.paragraphs()).join('\n\n');
   return {
     label,
@@ -51,14 +51,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='popover-card-width'>
+          <Card.Root border={false}>
+            <Card.Toolbar>
+              <Card.Icon toolbar icon='ph--file-text--regular' />
+              <Card.Title>{target.label}</Card.Title>
+              <Popover.Close asChild>
+                <Card.Close />
+              </Popover.Close>
+            </Card.Toolbar>
+            <Card.Row>
+              <Card.Text variant='description'>{target.text}</Card.Text>
+            </Card.Row>
+          </Card.Root>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -90,7 +102,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;
       }
 
@@ -133,40 +145,35 @@ const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: H
   }, [handleAction, link, target]);
 
   return createPortal(
-    <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} />
-                {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.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 classNames={hoverableControls}>
+      {!view?.state.readOnly && (
+        <Card.Toolbar>
+          <Card.Icon toolbar icon='ph--bookmark--regular' />
+          <Card.Title>{link.label}</Card.Title>
+          <Card.Menu
+            items={[
+              {
+                id: 'delete',
+                label: link.suggest ? 'Discard' : 'Delete',
+                icon: 'ph--x--regular',
+                onClick: handleDelete,
+              },
+              target && {
+                id: 'apply',
+                label: 'Apply',
+                icon: 'ph--check--regular',
+                onClick: handleInsert,
+              },
+            ].filter(isTruthy)}
+          />
+        </Card.Toolbar>
+      )}
+      {target && (
+        <Card.Row>
+          <Card.Text className='text-description'>{target.text}</Card.Text>
+        </Card.Row>
+      )}
+    </Card.Root>,
     el,
   );
 };
@@ -174,7 +181,7 @@ const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: H
 const meta = {
   title: 'ui/react-ui-editor/Preview',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'fullscreen',
   },
@@ -211,21 +218,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>
     );