@dxos/react-ui-editor 0.8.4-main.5ad4a44 → 0.8.4-main.66e292d

package/src/hooks/useTextEditor.ts

@@ -4,8 +4,8 @@
 
 import { EditorState, type EditorStateConfig, type Text } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { type TabsterTypes, useFocusableGroup } from '@fluentui/react-tabster';
 import {
+  type ComponentPropsWithoutRef,
   type DependencyList,
   type KeyboardEventHandler,
   type RefObject,
@@ -19,7 +19,7 @@ import {
 import { log } from '@dxos/log';
 import { type MaybeProvider, getProviderValue, isTruthy } from '@dxos/util';
 
-import { type EditorSelection, createEditorStateTransaction, documentId, editorInputMode } from '../extensions';
+import { type EditorSelection, createEditorStateTransaction, documentId, modalStateField } from '../extensions';
 import { debugDispatcher } from '../util';
 
 let instanceCount = 0;
@@ -34,13 +34,9 @@ export type CursorInfo = {
 };
 
 export type UseTextEditor = {
-  // TODO(burdon): Rename.
   parentRef: RefObject<HTMLDivElement | null>;
   view: EditorView | null;
-  focusAttributes?: TabsterTypes.TabsterDOMAttribute & {
-    tabIndex: 0;
-    onKeyUp: KeyboardEventHandler<HTMLDivElement>;
-  };
+  focusAttributes?: ComponentPropsWithoutRef<'div'>;
 };
 
 export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
@@ -50,7 +46,7 @@ export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
   autoFocus?: boolean;
   scrollTo?: number;
   selection?: EditorSelection;
-  moveToEndOfLine?: boolean;
+  selectionEnd?: boolean;
   debug?: boolean;
 };
 
@@ -61,7 +57,7 @@ export const useTextEditor = (
   props: MaybeProvider<UseTextEditorProps> = {},
   deps: DependencyList = [],
 ): UseTextEditor => {
-  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } =
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, selectionEnd, debug } =
     useMemo<UseTextEditorProps>(() => getProviderValue(props), deps ?? []);
 
   // NOTE: Increments by 2 in strict mode.
@@ -79,7 +75,7 @@ export const useTextEditor = (
         if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) {
           initialSelection = selection;
         }
-      } else if (moveToEndOfLine && selection === undefined) {
+      } else if (selectionEnd && selection === undefined) {
         const index = initialValue?.indexOf('\n');
         const anchor = !index || index === -1 ? 0 : index;
         initialSelection = { anchor };
@@ -108,7 +104,7 @@ export const useTextEditor = (
       });
 
       // Move to end of line after document loaded (unless selection is specified).
-      if (moveToEndOfLine && !initialSelection) {
+      if (selectionEnd && !initialSelection) {
         const { to } = view.state.doc.lineAt(0);
         if (to) {
           view.dispatch({ selection: { anchor: to } });
@@ -143,23 +139,28 @@ export const useTextEditor = (
     }
   }, [autoFocus, view]);
 
-  const focusableGroupAttrs = useFocusableGroup({
-    tabBehavior: 'limited',
-    ignoreDefaultKeydown: {
-      Escape: view?.state.facet(editorInputMode).noTabster,
-    },
-  });
-
   // Focus editor on Enter (e.g., when tabbing to this component).
-  const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
     (event) => {
       const { key, target, currentTarget } = event;
-      if (target === currentTarget) {
-        switch (key) {
-          case 'Enter': {
+      switch (key) {
+        case 'Escape': {
+          // Check if popover is open.
+          const modal = view?.state.field(modalStateField, false);
+          if (modal) {
+            return;
+          }
+
+          // Focus the closest focusable parent.
+          const element = view?.contentDOM.closest('[tabindex="0"]') as HTMLDivElement | null;
+          element?.focus();
+          break;
+        }
+        case 'Enter': {
+          if (target === currentTarget) {
             view?.focus();
-            break;
           }
+          break;
         }
       }
     },
@@ -171,8 +172,7 @@ export const useTextEditor = (
     view,
     focusAttributes: {
       tabIndex: 0 as const,
-      ...focusableGroupAttrs,
-      onKeyUp: handleKeyUp,
+      onKeyDown: handleKeyDown,
     },
   };
 };

package/src/stories/CommandDialog.stories.tsx

@@ -5,18 +5,17 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type KeyboardEvent, useState } from 'react';
 
-import { Button, Icon, Input } from '@dxos/react-ui';
+import { type Button, IconButton, Input } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { mx } from '@dxos/react-ui-theme';
 
 import { editorWidth } from '../defaults';
-import { type Action, commandDialog } from '../extensions';
-import { str } from '../testing';
-import { createRenderer } from '../util';
+import { str } from '../util';
 
 import { EditorStory } from './components';
 
-const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) => {
+// TODO(burdon): Reimplement with Popover.
+const CommandDialog = ({ onAction }: { onAction: (action?: any) => void }) => {
   const [text, setText] = useState('');
 
   const handleInsert = () => {
@@ -55,9 +54,14 @@ const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) =>
             onKeyDown={handleKeyDown}
           />
         </Input.Root>
-        <Button variant='ghost' classNames='pli-0' onClick={() => onAction({ type: 'cancel' })}>
-          <Icon icon='ph--x--regular' size={5} />
-        </Button>
+        <IconButton
+          icon='ph--x--regular'
+          label='Cancel'
+          iconOnly
+          variant='ghost'
+          classNames='pli-0'
+          onClick={() => onAction({ type: 'cancel' })}
+        />
       </div>
     </div>
   );
@@ -65,17 +69,7 @@ const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) =>
 
 const meta = {
   title: 'ui/react-ui-editor/CommandDialog',
-  render: () => (
-    <EditorStory
-      text={str('# Command', '', '', '')}
-      extensions={[
-        commandDialog({
-          renderDialog: createRenderer(CommandDialog),
-          onHint: () => "Press '?' to ask a question",
-        }),
-      ]}
-    />
-  ),
+  render: () => <EditorStory text={str('# Command', '', '')} extensions={[]} />,
   decorators: [withTheme],
   parameters: {
     layout: 'fullscreen',

package/src/stories/Comments.stories.tsx

@@ -12,9 +12,8 @@ import { log } from '@dxos/log';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { annotations, comments, createExternalCommentSync } from '../extensions';
-import { str } from '../testing';
 import { type Comment } from '../types';
-import { createRenderer } from '../util';
+import { createRenderer, str } from '../util';
 
 import { EditorStory, content, longText } from './components';
 
@@ -73,14 +72,14 @@ export const Comments: Story = {
 };
 
 const Key: FC<{ char: string }> = ({ char }) => (
-  <span className='flex justify-center items-center w-[24px] h-[24px] rounded text-xs bg-neutral-200 text-black'>
+  <span className='flex justify-center items-center is-[24px] bs-[24px] rounded text-xs bg-neutral-200 text-black'>
     {char}
   </span>
 );
 
 const CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
   return (
-    <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded'>
+    <div className='flex items-center gap-2 pli-2 plb-2 bg-neutral-700 text-white text-xs rounded'>
       <div>Create comment</div>
       <div className='flex gap-1'>
         {keySymbols(parseShortcut(shortcut)).map((char) => (

package/src/stories/EditorToolbar.stories.tsx

@@ -10,7 +10,7 @@ import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { attentionSurface, mx } from '@dxos/react-ui-theme';
 
-import { EditorToolbar, useEditorToolbarState } from '../components';
+import { EditorToolbar, useEditorToolbar } from '../components';
 import { editorWidth } from '../defaults';
 import {
   InputModeExtensions,
@@ -19,7 +19,7 @@ import {
   createThemeExtensions,
   decorateMarkdown,
   formattingKeymap,
-  useFormattingState,
+  formattingListener,
 } from '../extensions';
 import { type UseTextEditorProps, useTextEditor } from '../hooks';
 import { translations } from '../translations';
@@ -29,16 +29,16 @@ type StoryProps = { placeholder?: string } & UseTextEditorProps;
 
 const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   const { themeMode } = useThemeContext();
-  const toolbarState = useEditorToolbarState({ viewMode: 'source' });
+
+  const toolbarState = useEditorToolbar({ viewMode: 'source' });
   const viewMode = toolbarState.viewMode;
-  const trackFormatting = useFormattingState(toolbarState);
   // TODO(wittjosiah): Provide way to change the input mode.
   const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
   const { parentRef, view } = useTextEditor(
     () => ({
       autoFocus,
       initialValue,
-      moveToEndOfLine: true,
+      selectionEnd: true,
       extensions: [
         editorInputMode ? InputModeExtensions[editorInputMode] : [],
         createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly', search: true }),
@@ -46,7 +46,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         viewMode === 'source' ? [] : decorateMarkdown(),
         formattingKeymap(),
-        trackFormatting,
+        formattingListener(() => toolbarState),
       ],
     }),
     [editorInputMode, viewMode, themeMode, placeholder],
@@ -65,7 +65,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   //  Also not sure if view is even guaranteed to exist at this point.
   return (
     <div role='none' className={mx('fixed inset-0 flex flex-col')}>
-      {toolbarState && <EditorToolbar state={toolbarState} getView={getView} viewMode={handleViewModeChange} />}
+      {toolbarState && <EditorToolbar state={toolbarState} getView={getView} onViewModeChange={handleViewModeChange} />}
       <div role='none' className={mx('grow overflow-hidden', attentionSurface)}>
         <div className={mx(editorWidth)} ref={parentRef} />
       </div>
@@ -91,6 +91,6 @@ export const Default: Story = {
   args: {
     autoFocus: true,
     placeholder: 'Text...',
-    initialValue: '# Demo\n\nThis is a document.\n\n',
+    initialValue: '# Demo\n\nThis is a **document**.\n\n',
   },
 };

package/src/stories/Experimental.stories.tsx

@@ -11,7 +11,7 @@ import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { blast, defaultOptions, dropFile, typewriter } from '../extensions';
-import { str } from '../testing';
+import { str } from '../util';
 
 import { EditorStory, content } from './components';
 

package/src/stories/Markdown.stories.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { decorateMarkdown, image, linkTooltip, table } from '../extensions';
-import { str } from '../testing';
+import { str } from '../util';
 
 import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
 

package/src/stories/Outliner.stories.tsx

@@ -2,16 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
 
-import { type CommandMenuGroup, type CommandMenuItem, CommandMenuProvider } from '../components';
+import { type EditorController, type EditorMenuGroup, EditorMenuProvider } from '../components';
 import { deleteItem, hashtag, listItemToString, outliner, treeFacet } from '../extensions';
-import { str } from '../testing';
+import { str } from '../util';
 
 import { EditorStory } from './components';
 
@@ -20,9 +19,10 @@ type StoryProps = {
 };
 
 const DefaultStory = ({ text }: StoryProps) => {
-  const viewRef = useRef<EditorView>(null);
+  const [controller, setController] = useState<EditorController | null>(null);
 
-  const commandGroups: CommandMenuGroup[] = useMemo(
+  const extensions = useMemo(() => [outliner(), hashtag()], []);
+  const commandGroups: EditorMenuGroup[] = useMemo(
     () => [
       {
         id: 'outliner-actions',
@@ -30,7 +30,7 @@ const DefaultStory = ({ text }: StoryProps) => {
           {
             id: 'delete-row',
             label: 'Delete',
-            onSelect: (view: EditorView) => {
+            onSelect: ({ view }) => {
               deleteItem(view);
             },
           },
@@ -41,19 +41,19 @@ const DefaultStory = ({ text }: StoryProps) => {
   );
 
   return (
-    <CommandMenuProvider
+    <EditorMenuProvider
+      view={controller?.view}
       groups={commandGroups}
-      onSelect={(item: CommandMenuItem) => {
-        if (viewRef.current && item.onSelect) {
-          return item.onSelect(viewRef.current, viewRef.current.state.selection.main.head);
+      onSelect={({ view, item }) => {
+        if (item.onSelect) {
+          return item.onSelect({ view, head: view.state.selection.main.head });
         }
       }}
     >
       <EditorStory
-        ref={viewRef}
+        ref={setController}
         text={text}
-        extensions={[outliner(), hashtag()]}
-        placeholder=''
+        extensions={extensions}
         debug='raw+tree'
         debugCustom={(view) => {
           const tree = view.state.facet(treeFacet);
@@ -62,7 +62,7 @@ const DefaultStory = ({ text }: StoryProps) => {
           return <pre className='p-1 overflow-auto text-xs text-green-800 dark:text-green-200'>{lines.join('\n')}</pre>;
         }}
       />
-    </CommandMenuProvider>
+    </EditorMenuProvider>
   );
 };
 

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 { TestSchema, 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(TestSchema.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([TestSchema.Person]);
+      },
+      onCreateSpace: async ({ space }) => {
+        const createObjects = createObjectFactory(space.db, generator);
+        await createObjects([{ type: TestSchema.Person, count: 10 }]);
+        await space.db.flush({ indexes: true });
+      },
+    }),
+  ],
+  args: {
+    text: str('# Links', '', ''),
+    trigger: ['/', '@'],
+    placeholder: {
+      content: () => placeholder(['/', '@']),
+    },
+  },
+};

package/src/stories/Preview.stories.tsx

@@ -16,8 +16,15 @@ import { Card } from '@dxos/react-ui-stack';
 import { hoverableControlItem, hoverableControlItemTransition, hoverableControls } from '@dxos/react-ui-theme';
 import { trim } from '@dxos/util';
 
-import { type PreviewLinkRef, type PreviewLinkTarget, getLinkRef, image, preview } from '../extensions';
-import { PreviewPopoverProvider, usePreviewPopover } from '../testing';
+import { type EditorController, EditorPreviewProvider, useEditorPreview } from '../components';
+import {
+  type PreviewBlock,
+  type PreviewLinkRef,
+  type PreviewLinkTarget,
+  getLinkRef,
+  image,
+  preview,
+} from '../extensions';
 
 import { EditorStory } from './components';
 
@@ -43,7 +50,7 @@ const useRefTarget = (link: PreviewLinkRef): PreviewLinkTarget | undefined => {
 };
 
 const PreviewCard = () => {
-  const { target } = usePreviewPopover('PreviewCard');
+  const { target } = useEditorPreview('PreviewCard');
   return (
     <Popover.Portal>
       <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
@@ -70,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(
@@ -177,53 +184,50 @@ 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 (
-      <PreviewPopoverProvider 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} />
-        ))}
-      </PreviewPopoverProvider>
+        {controller?.view &&
+          previewBlocks.map(({ link, el }) => (
+            <PreviewBlockComponent key={link.ref} link={link} el={el} view={controller.view!} />
+          ))}
+      </EditorPreviewProvider>
     );
   },
 };