@dxos/plugin-markdown 0.8.4-main.7ace549 → 0.8.4-main.937b3ca

package/src/components/MarkdownEditor/FileUpload.tsx

@@ -7,8 +7,8 @@ import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
 import { useDropzone } from 'react-dropzone';
 
-import { type FileInfo } from '@dxos/app-framework';
-import { addLink } from '@dxos/react-ui-editor';
+import { type Common } from '@dxos/app-framework';
+import { addLink } from '@dxos/ui-editor';
 
 export const IMAGE_FILES = ['.jpg', '.jpeg', '.png', '.gif'];
 
@@ -16,7 +16,7 @@ export type FileUploadAction = () => void;
 
 export type FileUploadProps = {
   editorView?: EditorView;
-  onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
+  onFileUpload?: (file: File) => Promise<Common.FileInfo | undefined>;
 };
 
 // TODO(burdon): Factor out.

package/src/components/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -3,18 +3,18 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Filter, Obj } from '@dxos/echo';
-import { AttentionPlugin } from '@dxos/plugin-attention';
 import { ClientPlugin } from '@dxos/plugin-client';
+import { corePlugins } from '@dxos/plugin-testing';
 import { useQuery, useSpace } from '@dxos/react-client/echo';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { translations as editorTranslations } from '@dxos/react-ui-editor';
-import { StackItem } from '@dxos/react-ui-stack';
+import { Layout } from '@dxos/react-ui-mosaic';
 
 import { translations } from '../../translations';
 import { Markdown } from '../../types';
@@ -30,19 +30,18 @@ const DefaultStory = (props: StoryProps) => {
   const [doc] = useQuery(space?.db, Filter.type(Markdown.Document));
   const id = doc && Obj.getDXN(doc).toString();
   const attentionAttrs = useAttentionAttributes(id);
-
   if (!id) {
     return null;
   }
 
   return (
     <div className='contents' {...attentionAttrs}>
-      <StackItem.Content toolbar>
+      <Layout.Main toolbar>
         <MarkdownEditor.Root id={id} object={doc} {...props}>
           <MarkdownEditor.Toolbar id={id} />
           <MarkdownEditor.Content />
         </MarkdownEditor.Root>
-      </StackItem.Content>
+      </Layout.Main>
     </div>
   );
 };
@@ -53,22 +52,22 @@ const meta: Meta<typeof DefaultStory> = {
   render: DefaultStory as any,
   decorators: [
     withTheme,
-    withLayout({ container: 'column' }),
-    // TODO(burdon): Create story without client.
+    withLayout({ layout: 'column' }),
     withPluginManager({
       plugins: [
+        ...corePlugins(),
         ClientPlugin({
           types: [Markdown.Document],
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-            await client.spaces.waitUntilReady();
-            const space = client.spaces.default;
-            await space.waitUntilReady();
-            space.db.add(Markdown.make({ content }));
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* Effect.promise(() => client.spaces.waitUntilReady());
+              const space = client.spaces.default;
+              yield* Effect.promise(() => space.waitUntilReady());
+
+              space.db.add(Markdown.make({ content }));
+            }),
         }),
-        IntentPlugin(),
-        AttentionPlugin(),
       ],
     }),
   ],

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -4,23 +4,22 @@
 
 import { type Extension } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
+import { type Atom } from '@effect-atom/atom-react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { Surface } from '@dxos/app-framework/react';
 import { DXN } from '@dxos/keys';
-import { type Live } from '@dxos/live-object';
 import { useClient } from '@dxos/react-client';
 import {
   EditorMenuProvider,
   type EditorToolbarState,
-  type PreviewBlock,
-  type PreviewOptions,
   type UseEditorMenu,
   useEditorMenu,
   useEditorToolbar,
 } from '@dxos/react-ui-editor';
+import { type PreviewBlock, type PreviewOptions } from '@dxos/ui-editor';
 import { isNonNullable } from '@dxos/util';
 
 import {
@@ -49,10 +48,10 @@ type MarkdownEditorContextValue = {
   setEditorView: (view: EditorView) => void;
   extensions: Extension[];
   previewBlocks: PreviewBlock[];
-  toolbarState: Live<EditorToolbarState>;
+  toolbarState: Atom.Writable<EditorToolbarState>;
   popoverMenu: Omit<UseEditorMenu, 'extension'>;
 } & (Pick<ExtensionsOptions, 'viewMode'> &
-  Pick<NaturalMarkdownToolbarProps, 'editorView' | 'onFileUpload' | 'onViewModeChange'>);
+  Pick<NaturalMarkdownToolbarProps, 'editorView' | 'onAction' | 'onFileUpload' | 'onViewModeChange'>);
 
 const [MarkdownEditorContextProvider, useMarkdownEditorContext] =
   createContext<MarkdownEditorContextValue>('MarkdownEditor.Context');
@@ -65,7 +64,7 @@ type MarkdownEditorRootProps = PropsWithChildren<
   {
     object?: DocumentType;
     extensions?: Extension[];
-  } & Pick<MarkdownEditorContextValue, 'id' | 'onFileUpload' | 'onViewModeChange' | 'viewMode'> &
+  } & Pick<MarkdownEditorContextValue, 'id' | 'onAction' | 'onFileUpload' | 'onViewModeChange' | 'viewMode'> &
     Pick<UseEditorMenuOptionsProps, 'slashCommandGroups' | 'onLinkQuery'> &
     Pick<ExtensionsOptions, 'editorStateStore' | 'selectionManager' | 'settings'>
 >;
@@ -78,7 +77,7 @@ const MarkdownEditorRoot = ({
   selectionManager,
   settings,
   viewMode,
-  extensions: extensionsParam,
+  extensions: extensionsProp,
   slashCommandGroups,
   onLinkQuery,
   ...props
@@ -122,8 +121,8 @@ const MarkdownEditorRoot = ({
   });
 
   const extensions = useMemo(
-    () => [coreExtensions, menuExtension, extensionsParam].filter(isNonNullable),
-    [coreExtensions, menuExtension, extensionsParam],
+    () => [coreExtensions, menuExtension, extensionsProp].filter(isNonNullable),
+    [coreExtensions, menuExtension, extensionsProp],
   );
 
   return (
@@ -154,11 +153,11 @@ type MarkdownEditorContentProps = Omit<NaturalMarkdownEditorContentProps, 'id' |
 const MarkdownEditorContent = (props: MarkdownEditorContentProps) => {
   const {
     id,
-    extensions,
     editorView,
     setEditorView,
-    toolbarState,
     viewMode,
+    toolbarState,
+    extensions,
     popoverMenu: { groupsRef, ...menuProps },
   } = useMarkdownEditorContext(MarkdownEditorContent.displayName);
 
@@ -167,9 +166,9 @@ const MarkdownEditorContent = (props: MarkdownEditorContentProps) => {
       <NaturalMarkdownEditorContent
         {...props}
         id={id}
-        extensions={extensions}
-        toolbarState={toolbarState}
         viewMode={viewMode}
+        toolbarState={toolbarState}
+        extensions={extensions}
         ref={setEditorView}
       />
     </EditorMenuProvider>
@@ -184,7 +183,7 @@ MarkdownEditorContent.displayName = 'MarkdownEditor.Content';
 
 type MarkdownEditorToolbarProps = Omit<
   NaturalMarkdownToolbarProps,
-  'state' | 'editorView' | 'onFileUpload' | 'onViewModeChange'
+  'state' | 'editorView' | 'onAction' | 'onFileUpload' | 'onViewModeChange'
 >;
 
 const MarkdownEditorToolbar = (props: MarkdownEditorToolbarProps) => {
@@ -218,7 +217,7 @@ MarkdownEditorBlocks.displayName = 'MarkdownEditor.Blocks';
 const PreviewBlock = ({ el, link }: PreviewBlock) => {
   const client = useClient();
   const dxn = DXN.parse(link.ref);
-  const subject = client.graph.ref(dxn).target;
+  const subject = client.graph.makeRef(dxn).target;
   const data = useMemo(() => ({ subject }), [subject]);
 
   return createPortal(<Surface role='card--transclusion' data={data} limit={1} />, el);

package/src/components/MarkdownEditor/MarkdownEditorContent.tsx

@@ -3,28 +3,31 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo } from 'react';
+import { type Atom, RegistryContext } from '@effect-atom/atom-react';
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo } from 'react';
 
-import { type Live } from '@dxos/live-object';
-import { useDynamicRef, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { type ThemedClassName, useThemeContext, useTranslation } from '@dxos/react-ui';
 import {
   type EditorMenuGroup,
+  type EditorToolbarState,
+  type UseTextEditorProps,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import {
   type EditorSelectionState,
   type EditorStateStore,
-  type EditorToolbarState,
   type EditorViewMode,
-  type UseTextEditorProps,
+  type ThemeExtensionsOptions,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   dropFile,
-  editorGutter,
   editorSlots,
   formattingListener,
   processEditorPayload,
   stackItemContentEditorClassNames,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 import { isTruthy } from '@dxos/util';
 
 import { useSelectCurrentThread } from '../../hooks';
@@ -32,27 +35,51 @@ import { meta } from '../../meta';
 
 import { type MarkdownEditorToolbarProps } from './MarkdownEditorToolbar';
 
-export type MarkdownEditorContentProps = {
+export type MarkdownEditorContentProps = ThemedClassName<{
   id: string;
   role?: string;
   viewMode?: EditorViewMode;
   scrollPastEnd?: boolean;
   slashCommandGroups?: EditorMenuGroup[];
   editorStateStore?: EditorStateStore;
-  toolbarState?: Live<EditorToolbarState>;
+  toolbarState?: Atom.Writable<EditorToolbarState>;
   onLinkQuery?: (query?: string) => Promise<EditorMenuGroup[]>;
-} & (Pick<UseTextEditorProps, 'initialValue' | 'extensions'> & Pick<MarkdownEditorToolbarProps, 'onFileUpload'>);
+}> &
+  // prettier-ignore
+  Pick<UseTextEditorProps, 'initialValue' | 'extensions'> &
+  Pick<MarkdownEditorToolbarProps, 'onFileUpload'> &
+  Pick<ThemeExtensionsOptions, 'slots'>;
 
 export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEditorContentProps>(
   (
-    { id, role, initialValue, editorStateStore, toolbarState, extensions, viewMode, scrollPastEnd, onFileUpload },
+    {
+      classNames,
+      id,
+      role,
+      viewMode,
+      initialValue,
+      editorStateStore,
+      toolbarState,
+      extensions,
+      scrollPastEnd,
+      slots = editorSlots,
+      onFileUpload,
+    },
     forwardedRef,
   ) => {
     const { t } = useTranslation(meta.id);
     const { themeMode } = useThemeContext();
+    const registry = useContext(RegistryContext);
 
-    // TODO(burdon): Toolbar state is not reactive.
-    const toolbarStateRef = useDynamicRef(toolbarState);
+    // Callback to update toolbar state atom.
+    const updateToolbarState = useCallback(
+      (formatting: EditorToolbarState) => {
+        if (toolbarState) {
+          registry.set(toolbarState, { ...registry.get(toolbarState), ...formatting });
+        }
+      },
+      [registry, toolbarState],
+    );
 
     // Restore last selection and scroll point.
     const { scrollTo, selection } = useMemo<EditorSelectionState>(() => editorStateStore?.getState(id) ?? {}, [id]);
@@ -81,12 +108,11 @@ export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEdito
           }),
           createThemeExtensions({
             themeMode,
-            slots: editorSlots,
+            slots,
             syntaxHighlighting: true,
           }),
           createMarkdownExtensions(),
-          formattingListener(() => toolbarStateRef.current),
-          editorGutter,
+          toolbarState && formattingListener(updateToolbarState),
           role !== 'section' &&
             onFileUpload &&
             dropFile({
@@ -116,7 +142,7 @@ export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEdito
         role='none'
         ref={parentRef}
         data-testid='composer.markdownRoot'
-        className={stackItemContentEditorClassNames(role)}
+        className={mx(stackItemContentEditorClassNames(role), classNames)}
         data-popover-collision-boundary={true}
         {...focusAttributes}
       />

package/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx

@@ -5,10 +5,11 @@
 import { type EditorView } from '@codemirror/view';
 import React, { useCallback, useState } from 'react';
 
-import { type FileInfo } from '@dxos/app-framework';
+import { type Common } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { EditorToolbar, type EditorToolbarProps, type EditorViewMode } from '@dxos/react-ui-editor';
+import { EditorToolbar, type EditorToolbarProps } from '@dxos/react-ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor';
 
 import { FileUpload, type FileUploadAction } from './FileUpload';
 
@@ -16,8 +17,8 @@ export type MarkdownEditorToolbarProps = ThemedClassName<
   {
     id: string;
     editorView?: EditorView;
-    onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
-  } & Pick<EditorToolbarProps, 'role' | 'state' | 'customActions' | 'onViewModeChange'>
+    onFileUpload?: (file: File) => Promise<Common.FileInfo | undefined>;
+  } & Pick<EditorToolbarProps, 'role' | 'state' | 'customActions' | 'onAction' | 'onViewModeChange'>
 >;
 
 export const MarkdownEditorToolbar = ({
@@ -27,6 +28,7 @@ export const MarkdownEditorToolbar = ({
   state,
   editorView,
   customActions,
+  onAction,
   onFileUpload,
   onViewModeChange,
 }: MarkdownEditorToolbarProps) => {
@@ -53,6 +55,7 @@ export const MarkdownEditorToolbar = ({
         state={state}
         customActions={customActions}
         getView={getView}
+        onAction={onAction}
         onImageUpload={upload ?? undefined}
         onViewModeChange={handleViewModeChange}
       />

package/src/components/MarkdownSettings/MarkdownSettings.tsx

@@ -5,13 +5,18 @@
 import React from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/react-ui-editor';
 import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/ui-editor';
 
 import { meta } from '../../meta';
 import { type Markdown } from '../../types';
 
-export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings }) => {
+export type MarkdownSettingsComponentProps = {
+  settings: Markdown.Settings;
+  onSettingsChange: (fn: (current: Markdown.Settings) => Markdown.Settings) => void;
+};
+
+export const MarkdownSettings = ({ settings, onSettingsChange }: MarkdownSettingsComponentProps) => {
   const { t } = useTranslation(meta.id);
 
   // TODO(wittjosiah): Add skill test confirmation for entering vim mode.
@@ -23,7 +28,7 @@ export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings })
             <Select.Root
               value={settings.defaultViewMode}
               onValueChange={(value) => {
-                settings.defaultViewMode = value as EditorViewMode;
+                onSettingsChange((s) => ({ ...s, defaultViewMode: value as EditorViewMode }));
               }}
             >
               <Select.TriggerButton />
@@ -46,7 +51,7 @@ export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings })
             <Select.Root
               value={settings.editorInputMode ?? 'default'}
               onValueChange={(value) => {
-                settings.editorInputMode = value as EditorInputMode;
+                onSettingsChange((s) => ({ ...s, editorInputMode: value as EditorInputMode }));
               }}
             >
               <Select.TriggerButton placeholder={t('select editor input mode placeholder')} />
@@ -66,29 +71,38 @@ export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings })
           </ControlItemInput>
 
           <ControlItemInput title={t('settings toolbar label')}>
-            <Input.Switch checked={settings.toolbar} onCheckedChange={(checked) => (settings.toolbar = !!checked)} />
+            <Input.Switch
+              checked={settings.toolbar}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, toolbar: !!checked }))}
+            />
           </ControlItemInput>
 
           <ControlItemInput title={t('settings numbered headings label')}>
             <Input.Switch
               checked={settings.numberedHeadings}
-              onCheckedChange={(checked) => (settings.numberedHeadings = !!checked)}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, numberedHeadings: !!checked }))}
             />
           </ControlItemInput>
 
           <ControlItemInput title={t('settings folding label')}>
-            <Input.Switch checked={settings.folding} onCheckedChange={(checked) => (settings.folding = !!checked)} />
+            <Input.Switch
+              checked={settings.folding}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, folding: !!checked }))}
+            />
           </ControlItemInput>
 
           <ControlItemInput title={t('settings experimental label')}>
             <Input.Switch
               checked={settings.experimental}
-              onCheckedChange={(checked) => (settings.experimental = !!checked)}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, experimental: !!checked }))}
             />
           </ControlItemInput>
 
           <ControlItemInput title={t('settings debug label')}>
-            <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
+            <Input.Switch
+              checked={settings.debug}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, debug: !!checked }))}
+            />
           </ControlItemInput>
 
           {settings.debug && (
@@ -96,7 +110,7 @@ export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings })
               <Input.TextArea
                 rows={5}
                 value={settings.typewriter}
-                onChange={({ target: { value } }) => (settings.typewriter = value)}
+                onChange={({ target: { value } }) => onSettingsChange((s) => ({ ...s, typewriter: value }))}
                 placeholder={t('settings debug placeholder')}
               />
             </ControlItemInput>

package/src/components/Suggestions.stories.tsx

@@ -3,39 +3,34 @@
 //
 
 import { type Meta } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import * as Function from 'effect/Function';
 import * as Match from 'effect/Match';
 import * as Option from 'effect/Option';
 import * as Schema from 'effect/Schema';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
 
-import { Capabilities, IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
-import { useCapability, useIntentDispatcher } from '@dxos/app-framework/react';
+import { useAtomCapability, useCapability } from '@dxos/app-framework/react';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, Ref, Type } from '@dxos/echo';
 import { createDocAccessor, toCursorRange } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
 import { ClientPlugin } from '@dxos/plugin-client';
-import { GraphPlugin } from '@dxos/plugin-graph';
 import { PreviewPlugin } from '@dxos/plugin-preview';
-import { SpacePlugin } from '@dxos/plugin-space';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
 import { useQueue, useSpace } from '@dxos/react-client/echo';
 import { IconButton, Toolbar } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
-import { type EditorSelection, type Range, useTextEditor } from '@dxos/react-ui-editor';
-import { StackItem } from '@dxos/react-ui-stack';
-import { defaultTx } from '@dxos/react-ui-theme';
+import { useTextEditor } from '@dxos/react-ui-editor';
+import { Layout } from '@dxos/react-ui-mosaic';
 import { render } from '@dxos/storybook-utils';
 import { Message } from '@dxos/types';
+import { type EditorSelection, type Range } from '@dxos/ui-editor';
 
-import { MarkdownCapabilities } from '../capabilities';
 import { MarkdownPlugin } from '../MarkdownPlugin';
-import { meta } from '../meta';
 import { translations } from '../translations';
-import { Markdown } from '../types';
+import { Markdown, MarkdownCapabilities } from '../types';
 
 import { MarkdownContainer } from './MarkdownContainer';
 
@@ -51,16 +46,15 @@ const TestItem = Schema.Struct({
     description: 'Product description',
   }),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/Test',
     version: '0.1.0',
   }),
 );
 
 const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, content }) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { parentRef } = useTextEditor({ initialValue: content });
-  const { editorState } = useCapability(MarkdownCapabilities.State);
+  const editorState = useCapability(MarkdownCapabilities.EditorState);
 
   const space = useSpace();
   const queueDxn = useMemo(() => space && space.queues.create().dxn, [space]);
@@ -96,7 +90,7 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
 
     // void dispatch(
     //   createIntent(CollaborationActions.InsertContent, {
-    //     target: doc as any as Type.Expando,
+    //     target: doc as any as TestSchema.Expando,
     //     object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
     //     at: cursor,
     //     label: 'Proposal',
@@ -105,20 +99,20 @@ const TestChat: FC<{ doc: Markdown.Document; content: string }> = ({ doc, conten
   };
 
   return (
-    <StackItem.Content toolbar>
+    <Layout.Main toolbar>
       <Toolbar.Root>
         <IconButton icon='ph--plus--regular' disabled={!queue} label='Insert' onClick={handleInsert} />
       </Toolbar.Root>
       <div ref={parentRef} className='p-4' />
-    </StackItem.Content>
+    </Layout.Main>
   );
 };
 
 const DefaultStory = ({ document, chat }: { document: string; chat: string }) => {
   const space = useSpace();
   const [doc, setDoc] = useState<Markdown.Document>();
-  const settings = useCapability(Capabilities.SettingsStore).getStore<Markdown.Settings>(meta.id)!.value;
-  const { editorState } = useCapability(MarkdownCapabilities.State);
+  const settings = useAtomCapability(MarkdownCapabilities.Settings);
+  const editorState = useCapability(MarkdownCapabilities.EditorState);
 
   useEffect(() => {
     if (!space) {
@@ -148,10 +142,9 @@ const DefaultStory = ({ document, chat }: { document: string; chat: string }) =>
     return null;
   }
 
-  // TODO(burdon): Layout issue.
   return (
     <div className='grid grid-cols-2 bs-full overflow-hidden'>
-      <MarkdownContainer id={doc.id} object={doc} settings={settings} editorStateStore={editorState} />
+      <MarkdownContainer id={doc.id} subject={doc} settings={settings} editorStateStore={editorState} />
       <TestChat doc={doc} content={chat} />
     </div>
   );
@@ -164,22 +157,18 @@ const storybook: Meta<typeof DefaultStory> = {
     withTheme,
     withPluginManager({
       plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
         ClientPlugin({
           types: [Markdown.Document, TestItem],
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
         }),
-        SpacePlugin({}),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
 
-        // UI
-        ThemePlugin({ tx: defaultTx }),
         MarkdownPlugin(),
         PreviewPlugin(),
-        StorybookLayoutPlugin({}),
       ],
     }),
   ],

package/src/components/index.ts

@@ -2,11 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
+import { type LazyExoticComponent, lazy } from 'react';
+
+import { type MarkdownCard as MarkdownCardType } from './MarkdownCard';
+import { type MarkdownContainer as MarkdownContainerType } from './MarkdownContainer';
 
 export * from './MarkdownCard';
 export * from './MarkdownContainer';
 export * from './MarkdownSettings';
 
-export const MarkdownCard = lazy(() => import('./MarkdownCard'));
-export const MarkdownContainer = lazy(() => import('./MarkdownContainer'));
+export const MarkdownCard: LazyExoticComponent<typeof MarkdownCardType> = lazy(() => import('./MarkdownCard'));
+export const MarkdownContainer: LazyExoticComponent<typeof MarkdownContainerType> = lazy(
+  () => import('./MarkdownContainer'),
+);

package/src/hooks/useEditorMenuOptions.ts

@@ -5,7 +5,7 @@
 import { type EditorView } from '@codemirror/view';
 import { useCallback, useMemo, useRef } from 'react';
 
-import { Domino, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 import {
   type EditorMenuGroup,
   type UseEditorMenuProps,
@@ -13,6 +13,7 @@ import {
   formattingCommands,
   linkSlashCommands,
 } from '@dxos/react-ui-editor';
+import { Domino } from '@dxos/ui';
 
 import { meta } from '../meta';
 
@@ -52,18 +53,14 @@ export const useEditorMenuOptions = ({
     const trigger = onLinkQuery ? ['/', '@'] : ['/'];
     const placeholder = {
       delay: 3_000,
-      content: () =>
-        Domino.of('div')
-          .children(
-            Domino.of('span').text('Press'),
-            ...trigger.map((text) =>
-              Domino.of('span')
-                .classNames('mx-1 pli-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm')
-                .text(text),
-            ),
-            Domino.of('span').text('for commands.'),
-          )
-          .build(),
+      content: () => {
+        const pressEl = Domino.of('span').text('Press');
+        const triggerEls = trigger.map((text) =>
+          Domino.of('span').classNames('mx-1 pli-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm').text(text),
+        );
+        const forCommandsEl = Domino.of('span').text('for commands.');
+        return Domino.of('div').children(pressEl, ...triggerEls, forCommandsEl).root;
+      },
     };
 
     return { viewRef, getMenu, trigger, placeholder };