@dxos/plugin-markdown 0.8.4-main.3eb6e50203 → 0.8.4-main.4a85c3132b

package/src/blueprints/functions/update.test.ts

@@ -12,17 +12,17 @@ import { AssistantTestLayer } from '@dxos/assistant/testing';
 import { Blueprint } from '@dxos/blueprints';
 import { SpaceProperties } from '@dxos/client-protocol';
 import { Database, Obj, Query, Ref } from '@dxos/echo';
+import { Collection } from '@dxos/echo';
 import { TestHelpers } from '@dxos/effect/testing';
 import { FunctionInvocationService } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
 import { ObjectId } from '@dxos/keys';
 import { Markdown } from '@dxos/plugin-markdown/types';
-import { Collection } from '@dxos/schema';
 import { HasSubject } from '@dxos/types';
 import { trim } from '@dxos/util';
 
 import { WithProperties } from '../../testing';
-import * as MarkdownBlueprint from '../markdown-blueprint';
+import MarkdownBlueprint from '../markdown-blueprint';
 
 import update from './update';
 

package/src/blueprints/functions/update.ts

@@ -6,7 +6,7 @@ import { next as A, type Doc } from '@automerge/automerge';
 import * as Effect from 'effect/Effect';
 import * as Schema from 'effect/Schema';
 
-import { Database, Type } from '@dxos/echo';
+import { Database, Ref } from '@dxos/echo';
 import { DocAccessor, createDocAccessor } from '@dxos/echo-db';
 import { defineFunction } from '@dxos/functions';
 import { trim } from '@dxos/util';
@@ -34,7 +34,7 @@ export default defineFunction({
     Applies a set of edits to the markdown document.
   `,
   inputSchema: Schema.Struct({
-    doc: Type.Ref(Markdown.Document).annotations({
+    doc: Ref.Ref(Markdown.Document).annotations({
       description: 'The ID of the markdown document.',
     }),
     edits: Schema.Array(Edit).annotations({

package/src/blueprints/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * as MarkdownBlueprint from './markdown-blueprint';
+export { default as MarkdownBlueprint } from './markdown-blueprint';

package/src/blueprints/markdown-blueprint.ts

@@ -2,19 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type AppCapabilities } from '@dxos/app-toolkit';
 import { Blueprint, Template } from '@dxos/blueprints';
-import { type FunctionDefinition } from '@dxos/functions';
 import { trim } from '@dxos/util';
 
-import { create, open, update } from './functions';
+import { MarkdownFunctions } from './functions';
 
-export const functions: FunctionDefinition[] = [create, open, update];
+const BLUEPRINT_KEY = 'dxos.org/blueprint/markdown';
 
-export const Key = 'dxos.org/blueprint/markdown';
+const functions = Object.values(MarkdownFunctions);
 
-export const make = () =>
+const make = () =>
   Blueprint.make({
-    key: Key,
+    key: BLUEPRINT_KEY,
     name: 'Markdown',
     tools: Blueprint.toolDefinitions({ functions }),
     instructions: Template.make({
@@ -36,3 +36,11 @@ export const make = () =>
       `,
     }),
   });
+
+const blueprint: AppCapabilities.BlueprintDefinition = {
+  key: BLUEPRINT_KEY,
+  functions,
+  make,
+};
+
+export default blueprint;

package/src/capabilities/app-graph-serializer/app-graph-serializer.ts

@@ -7,9 +7,9 @@ import * as Effect from 'effect/Effect';
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { Obj } from '@dxos/echo';
+import { Collection } from '@dxos/echo';
 import { SpaceOperation } from '@dxos/plugin-space/types';
 import { isSpace } from '@dxos/react-client/echo';
-import { Collection } from '@dxos/schema';
 
 import { translations } from '../../translations';
 import { Markdown, MarkdownOperation } from '../../types';

package/src/capabilities/blueprint-definition/blueprint-definition.ts

@@ -9,18 +9,9 @@ import { AppCapabilities } from '@dxos/app-toolkit';
 
 import { MarkdownBlueprint } from '../../blueprints';
 
-export const functions = MarkdownBlueprint.functions;
-
-export type BlueprintCapabilities = [
-  Capability.Capability<typeof AppCapabilities.Functions>,
-  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>,
-];
-
-const blueprintDefinition = Capability.makeModule<[], BlueprintCapabilities>(() =>
-  Effect.succeed([
-    Capability.contributes(AppCapabilities.Functions, functions),
-    Capability.contributes(AppCapabilities.BlueprintDefinition, MarkdownBlueprint.make()),
-  ]),
-);
+const blueprintDefinition = Capability.makeModule<
+  [],
+  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>[]
+>(() => Effect.succeed([Capability.contributes(AppCapabilities.BlueprintDefinition, MarkdownBlueprint)]));
 
 export default blueprintDefinition;

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -7,7 +7,7 @@ import * as Effect from 'effect/Effect';
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Obj, Ref, Type } from '@dxos/echo';
 import { OperationResolver } from '@dxos/operation';
-import { Collection } from '@dxos/schema';
+import { ManagedCollection } from '@dxos/schema';
 
 import { Markdown, MarkdownCapabilities, MarkdownOperation } from '../../types';
 
@@ -17,7 +17,7 @@ export default Capability.makeModule(
       OperationResolver.make({
         operation: MarkdownOperation.OnCreateSpace,
         handler: Effect.fnUntraced(function* ({ rootCollection }) {
-          const collection = Collection.makeManaged({ key: Type.getTypename(Markdown.Document) });
+          const collection = ManagedCollection.makeManagedCollection({ key: Type.getTypename(Markdown.Document) });
           Obj.change(rootCollection, (c) => {
             c.objects.push(Ref.make(collection));
           });

package/src/capabilities/react-surface/react-surface.tsx

@@ -20,7 +20,7 @@ import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { Text } from '@dxos/schema';
 import { type EditorViewMode } from '@dxos/ui-editor';
 
-import { MarkdownCard, MarkdownContainer, type MarkdownContainerProps, MarkdownSettings } from '../../components';
+import { MarkdownCard, MarkdownContainer, type MarkdownContainerProps, MarkdownSettings } from '../../containers';
 import { meta } from '../../meta';
 import { Markdown, MarkdownCapabilities } from '../../types';
 

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

@@ -11,7 +11,7 @@ import { Filter, Obj } from '@dxos/echo';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { corePlugins } from '@dxos/plugin-testing';
 import { useQuery, useSpace } from '@dxos/react-client/echo';
-import { Layout } from '@dxos/react-ui';
+import { Panel } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { translations as editorTranslations } from '@dxos/react-ui-editor';
@@ -35,19 +35,21 @@ const DefaultStory = (props: StoryProps) => {
   }
 
   return (
-    <div className='contents' {...attentionAttrs}>
-      <Layout.Main toolbar>
-        <MarkdownEditor.Root id={id} object={doc} {...props}>
+    <MarkdownEditor.Root id={id} object={doc} {...props}>
+      <Panel.Root {...attentionAttrs}>
+        <Panel.Toolbar asChild>
           <MarkdownEditor.Toolbar id={id} />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
           <MarkdownEditor.Content />
-        </MarkdownEditor.Root>
-      </Layout.Main>
-    </div>
+        </Panel.Content>
+      </Panel.Root>
+    </MarkdownEditor.Root>
   );
 };
 
 const meta: Meta<typeof DefaultStory> = {
-  title: 'plugins/plugin-markdown/MarkdownEditor',
+  title: 'plugins/plugin-markdown/components/MarkdownEditor',
   component: DefaultStory,
   render: DefaultStory as any,
   decorators: [

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -191,9 +191,19 @@ type MarkdownEditorToolbarProps = Omit<
 >;
 
 const MarkdownEditorToolbar = (props: MarkdownEditorToolbarProps) => {
-  const { toolbarState, ...rootProps } = useMarkdownEditorContext(MARKDOWN_EDITOR_TOOLBAR_NAME);
+  const { editorView, toolbarState, onAction, onFileUpload, onViewModeChange } =
+    useMarkdownEditorContext(MARKDOWN_EDITOR_TOOLBAR_NAME);
 
-  return <NaturalMarkdownToolbar {...props} {...rootProps} state={toolbarState} />;
+  return (
+    <NaturalMarkdownToolbar
+      {...props}
+      editorView={editorView}
+      state={toolbarState}
+      onAction={onAction}
+      onFileUpload={onFileUpload}
+      onViewModeChange={onViewModeChange}
+    />
+  );
 };
 
 MarkdownEditorToolbar.displayName = MARKDOWN_EDITOR_TOOLBAR_NAME;
@@ -226,7 +236,7 @@ const PreviewBlock = ({ el, link }: PreviewBlock) => {
   const subject = client.graph.makeRef(dxn).target;
   const data = useMemo(() => ({ subject }), [subject]);
 
-  return createPortal(<Surface.Surface role='card--transclusion' data={data} limit={1} />, el);
+  return createPortal(<Surface.Surface role='card--content' data={data} limit={1} />, el);
 };
 
 //

package/src/components/MarkdownEditor/MarkdownEditorContent.tsx

@@ -45,7 +45,6 @@ export type MarkdownEditorContentProps = ThemedClassName<{
   toolbarState?: Atom.Writable<EditorToolbarState>;
   onLinkQuery?: (query?: string) => Promise<EditorMenuGroup[]>;
 }> &
-  // prettier-ignore
   Pick<UseTextEditorProps, 'initialValue' | 'extensions'> &
   Pick<MarkdownEditorToolbarProps, 'onFileUpload'> &
   Pick<ThemeExtensionsOptions, 'slots'>;
@@ -139,12 +138,12 @@ export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEdito
 
     return (
       <div
+        {...focusAttributes}
         role='none'
-        ref={parentRef}
         data-testid='composer.markdownRoot'
-        className={mx(stackItemContentEditorClassNames(role), classNames)}
         data-popover-collision-boundary={true}
-        {...focusAttributes}
+        className={mx(stackItemContentEditorClassNames(role), classNames)}
+        ref={parentRef}
       />
     );
   },

package/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { useCallback, useState } from 'react';
+import React, { type ComponentPropsWithoutRef, useCallback, useState } from 'react';
 
 import { type FileInfo } from '@dxos/app-toolkit';
 import { invariant } from '@dxos/invariant';
@@ -14,7 +14,7 @@ import { type EditorViewMode } from '@dxos/ui-editor';
 import { FileUpload, type FileUploadAction } from './FileUpload';
 
 export type MarkdownEditorToolbarProps = ThemedClassName<
-  {
+  ComponentPropsWithoutRef<'div'> & {
     id: string;
     editorView?: EditorView;
     onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
@@ -31,6 +31,7 @@ export const MarkdownEditorToolbar = ({
   onAction,
   onFileUpload,
   onViewModeChange,
+  ...props
 }: MarkdownEditorToolbarProps) => {
   const [upload, setUpload] = useState<FileUploadAction | null>(null);
   const uploadRef = useCallback((next: FileUploadAction) => setUpload(() => next), []);
@@ -43,11 +44,11 @@ export const MarkdownEditorToolbar = ({
   }, [editorView]);
 
   if (!editorView) {
-    return <div />;
+    return <div {...props} />;
   }
 
   return (
-    <>
+    <div role='none' {...props}>
       <EditorToolbar
         classNames={classNames}
         attendableId={id}
@@ -61,6 +62,6 @@ export const MarkdownEditorToolbar = ({
       />
 
       {onFileUpload && <FileUpload ref={uploadRef} editorView={editorView} onFileUpload={onFileUpload} />}
-    </>
+    </div>
   );
 };

package/src/components/index.ts

@@ -1,17 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-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: LazyExoticComponent<typeof MarkdownCardType> = lazy(() => import('./MarkdownCard'));
-export const MarkdownContainer: LazyExoticComponent<typeof MarkdownContainerType> = lazy(
-  () => import('./MarkdownContainer'),
-);
+export * from './MarkdownEditor';

package/src/{components → containers}/MarkdownCard/MarkdownCard.stories.tsx

@@ -5,10 +5,13 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client';
 import { Markdown } from '@dxos/plugin-markdown/types';
 import { faker } from '@dxos/random';
+import { Card } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { CardContainer } from '@dxos/react-ui-mosaic/testing';
 
@@ -18,30 +21,37 @@ import { MarkdownCard, type MarkdownCardProps } from './MarkdownCard';
 
 faker.seed(1234);
 
-// TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
 const MarkdownCardStory = ({ ...args }: Omit<MarkdownCardProps, 'subject'>) => {
   const subject = useMemo(
     () =>
       Markdown.make({
         name: faker.lorem.words(3),
-        content: faker.lorem.paragraphs(3),
+        content: faker.lorem.paragraphs(5),
       }),
     [],
   );
+
   return (
     <CardContainer icon='ph--text-aa--regular'>
-      <MarkdownCard subject={subject} {...args} />
+      <Card.Root border={false}>
+        <Card.Toolbar>
+          <Card.DragHandle />
+          <Card.Title>{Obj.getLabel(subject)}</Card.Title>
+          <Card.Menu />
+        </Card.Toolbar>
+        <MarkdownCard subject={subject} {...args} />
+      </Card.Root>
     </CardContainer>
   );
 };
 
 const meta: Meta<typeof MarkdownCardStory> = {
-  title: 'plugins/plugin-markdown/Card',
+  title: 'plugins/plugin-markdown/containers/MarkdownCard',
   component: MarkdownCardStory,
   decorators: [
     withTheme(),
     withPluginManager({
-      plugins: [OperationPlugin()],
+      plugins: [OperationPlugin(), RuntimePlugin(), ClientPlugin({})],
     }),
   ],
   parameters: {

package/src/{components → containers}/MarkdownCard/MarkdownCard.tsx

@@ -6,13 +6,13 @@ import React, { useMemo } from 'react';
 
 import { Obj } from '@dxos/echo';
 import { useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-mosaic';
+import { Card } from '@dxos/react-ui';
 import { Text } from '@dxos/schema';
 
+import { MarkdownEditor } from '../../components';
 import { meta } from '../../meta';
 import { Markdown } from '../../types';
-import { getContentSnippet, getFallbackName } from '../../util';
-import { MarkdownEditor } from '../MarkdownEditor';
+import { getContentSnippet } from '../../util';
 
 export type MarkdownCardProps = { subject: Markdown.Document | Text.Text };
 
@@ -24,41 +24,38 @@ export const MarkdownCard = ({ subject }: MarkdownCardProps) => {
   return (
     <Card.Content>
       {snippet && (
-        <Card.Row className='max-h-[300px] overflow-hidden'>
+        <Card.Section>
           <MarkdownEditor.Root id={subject.id} viewMode='readonly'>
-            <MarkdownEditor.Content initialValue={snippet} slots={{}} classNames='!bg-transparent' />
+            <MarkdownEditor.Content
+              initialValue={snippet}
+              classNames='bg-transparent'
+              slots={{
+                editor: { className: 'max-h-[240px]' },
+              }}
+            />
           </MarkdownEditor.Root>
-        </Card.Row>
+        </Card.Section>
       )}
-      <Card.Row>
+      <Card.Section>
         <Card.Text classNames='text-xs text-description'>
           {info.words} {t('words label', { count: info.words })}
         </Card.Text>
-      </Card.Row>
+      </Card.Section>
     </Card.Content>
   );
 };
 
-const getInfo = (subject: Markdown.Document | Text.Text) => {
-  const text = (Obj.instanceOf(Markdown.Document, subject) ? subject.content?.target?.content : subject.content) ?? '';
-  return { words: text.split(' ').length };
-};
+const MAX_LINES = 5;
 
-// TODO(burdon): Factor out.
-const getTitle = (subject: Markdown.Document | Text.Text, fallback: string) => {
+const getSnippet = (subject: Markdown.Document | Text.Text, fallback?: string) => {
   if (Obj.instanceOf(Markdown.Document, subject)) {
-    const title = Obj.getLabel(subject);
-    return title ?? getFallbackName(subject.content?.target?.content ?? fallback);
+    return Obj.getDescription(subject) || getContentSnippet(subject.content?.target?.content ?? fallback, MAX_LINES);
   } else if (Obj.instanceOf(Text.Text, subject)) {
-    return getFallbackName(subject.content);
+    return getContentSnippet(subject.content ?? fallback, MAX_LINES);
   }
 };
 
-// TODO(burdon): Factor out.
-const getSnippet = (subject: Markdown.Document | Text.Text, fallback?: string) => {
-  if (Obj.instanceOf(Markdown.Document, subject)) {
-    return Obj.getDescription(subject) || getContentSnippet(subject.content?.target?.content ?? fallback);
-  } else if (Obj.instanceOf(Text.Text, subject)) {
-    return getContentSnippet(subject.content ?? fallback);
-  }
+const getInfo = (subject: Markdown.Document | Text.Text) => {
+  const text = (Obj.instanceOf(Markdown.Document, subject) ? subject.content?.target?.content : subject.content) ?? '';
+  return { words: text.split(' ').length };
 };

package/src/{components → containers}/MarkdownCard/index.ts

@@ -4,6 +4,4 @@
 
 import { MarkdownCard } from './MarkdownCard';
 
-export * from './MarkdownCard';
-
 export default MarkdownCard;

package/src/{components → containers/MarkdownContainer}/MarkdownContainer.stories.tsx

@@ -6,9 +6,10 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import React, { useMemo } from 'react';
 
+import { Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
+import { AppActivationEvents, LayoutOperation } from '@dxos/app-toolkit';
 import { Obj, Query } from '@dxos/echo';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { PreviewPlugin } from '@dxos/plugin-preview';
@@ -22,14 +23,24 @@ import { Text } from '@dxos/schema';
 import { type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
 import { Organization, Person } from '@dxos/types';
 
-import { MarkdownPlugin } from '../MarkdownPlugin';
-import { translations } from '../translations';
-import { Markdown } from '../types';
+import { MarkdownPlugin } from '../../MarkdownPlugin';
+import { translations } from '../../translations';
+import { Markdown, MarkdownCapabilities, MarkdownEvents } from '../../types';
 
 faker.seed(1);
 
 const generator: ValueGenerator = faker as any;
 
+/** Minimal plugin that contributes an empty Extensions capability for stories. */
+const MarkdownExtensionsPlugin = Plugin.define({ id: 'story-markdown-extensions', name: 'Story Extensions' }).pipe(
+  Plugin.addModule({
+    id: 'extensions',
+    activatesOn: MarkdownEvents.SetupExtensions,
+    activate: () => Effect.succeed(Capability.contributes(MarkdownCapabilities.Extensions, [])),
+  }),
+  Plugin.make,
+);
+
 const DefaultStory = () => {
   const { invokePromise } = useOperationInvoker();
   const space = useSpace();
@@ -52,15 +63,17 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-markdown/MarkdownContainer',
+  title: 'plugins/plugin-markdown/containers/MarkdownContainer',
   render: DefaultStory,
   decorators: [
     withTheme(),
     withLayout({ layout: 'column' }),
     withPluginManager<{ title?: string; content?: string }>((context) => ({
+      setupEvents: [AppActivationEvents.SetupSettings, MarkdownEvents.SetupExtensions],
       plugins: [
         ...corePlugins(),
         StorybookPlugin({}),
+        MarkdownExtensionsPlugin(),
         ClientPlugin({
           types: [Markdown.Document, Text.Text, Person.Person, Organization.Organization],
           onClientInitialized: ({ client }) =>

package/src/{components → containers/MarkdownContainer}/MarkdownContainer.tsx

@@ -13,14 +13,13 @@ import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { useActionRunner } from '@dxos/plugin-graph';
 import { useObject } from '@dxos/react-client/echo';
-import { Layout } from '@dxos/react-ui';
+import { Panel } from '@dxos/react-ui';
 import { type SelectionManager } from '@dxos/react-ui-attention';
 import { Text } from '@dxos/schema';
 
-import { useLinkQuery } from '../hooks';
-import { Markdown, MarkdownCapabilities, type MarkdownPluginState } from '../types';
-
-import { MarkdownEditor, type MarkdownEditorContentProps, type MarkdownEditorRootProps } from './MarkdownEditor';
+import { MarkdownEditor, type MarkdownEditorContentProps, type MarkdownEditorRootProps } from '../../components';
+import { useLinkQuery } from '../../hooks';
+import { Markdown, MarkdownCapabilities, type MarkdownPluginState } from '../../types';
 
 export type MarkdownContainerProps = SurfaceComponentProps<
   Markdown.Document | Text.Text,
@@ -69,7 +68,7 @@ export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerPro
       return Atom.make((get) => {
         const actions = get(graph.actions(id));
         const nodes = actions.filter((action) => action.properties.disposition === 'toolbar');
-        const edges = nodes.map((node) => ({ source: 'root', target: node.id }));
+        const edges = nodes.map((node) => ({ source: 'root', target: node.id, relation: 'child' }));
         return { nodes, edges };
       });
     }, [graph]);
@@ -88,26 +87,28 @@ export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerPro
     const handleLinkQuery = useLinkQuery(db);
 
     return (
-      <Layout.Main toolbar={settings.toolbar} ref={forwardedRef}>
-        <MarkdownEditor.Root
-          id={attendableId ?? id}
-          object={object}
-          extensions={extensions}
-          settings={settings}
-          onAction={runAction}
-          onFileUpload={handleFileUpload}
-          onLinkQuery={handleLinkQuery}
-          {...props}
-        >
+      <MarkdownEditor.Root
+        id={attendableId ?? id}
+        object={object}
+        extensions={extensions}
+        settings={settings}
+        onAction={runAction}
+        onFileUpload={handleFileUpload}
+        onLinkQuery={handleLinkQuery}
+        {...props}
+      >
+        <Panel.Root ref={forwardedRef}>
           {settings.toolbar && (
-            <MarkdownEditor.Toolbar id={attendableId ?? id} role={role} customActions={customActions} />
+            <Panel.Toolbar asChild>
+              <MarkdownEditor.Toolbar id={attendableId ?? id} role={role} customActions={customActions} />
+            </Panel.Toolbar>
           )}
-          <MarkdownEditor.Content initialValue={initialValue} scrollPastEnd={role === 'article'} />
-          <MarkdownEditor.Blocks />
-        </MarkdownEditor.Root>
-      </Layout.Main>
+          <Panel.Content>
+            <MarkdownEditor.Content initialValue={initialValue} scrollPastEnd={role === 'article'} />
+            <MarkdownEditor.Blocks />
+          </Panel.Content>
+        </Panel.Root>
+      </MarkdownEditor.Root>
     );
   },
 );
-
-export default MarkdownContainer;

package/src/containers/MarkdownContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { MarkdownContainer } from './MarkdownContainer';
+
+export default MarkdownContainer;

package/src/containers/MarkdownSettings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { MarkdownSettings } from './MarkdownSettings';
+
+export default MarkdownSettings;

package/src/containers/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export type { MarkdownContainerProps } from './MarkdownContainer/MarkdownContainer';
+
+export const MarkdownCard: ComponentType<any> = lazy(() => import('./MarkdownCard'));
+export const MarkdownContainer: ComponentType<any> = lazy(() => import('./MarkdownContainer'));
+export const MarkdownSettings: ComponentType<any> = lazy(() => import('./MarkdownSettings'));

package/src/hooks/useEditorMenuOptions.ts

@@ -56,7 +56,7 @@ export const useEditorMenuOptions = ({
       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),
+          Domino.of('span').classNames('mx-1 px-1.5 pt-[1px] pb-[2px] border border-separator rounded-xs').text(text),
         );
         const forCommandsEl = Domino.of('span').text('for commands.');
         return Domino.of('div').children(pressEl, ...triggerEls, forCommandsEl).root;