@dxos/plugin-markdown 0.8.4-main.2c6827d → 0.8.4-main.3c1ae3b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-markdown",
-  "version": "0.8.4-main.2c6827d",
+  "version": "0.8.4-main.3c1ae3b",
   "description": "DXOS Surface plugin for interacting with Markdown",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -54,40 +54,40 @@
     "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-context": "1.1.1",
     "react-dropzone": "^14.2.3",
-    "@dxos/ai": "0.8.4-main.2c6827d",
-    "@dxos/assistant": "0.8.4-main.2c6827d",
-    "@dxos/blueprints": "0.8.4-main.2c6827d",
-    "@dxos/client-protocol": "0.8.4-main.2c6827d",
-    "@dxos/echo-db": "0.8.4-main.2c6827d",
-    "@dxos/app-framework": "0.8.4-main.2c6827d",
-    "@dxos/async": "0.8.4-main.2c6827d",
-    "@dxos/effect": "0.8.4-main.2c6827d",
-    "@dxos/echo": "0.8.4-main.2c6827d",
-    "@dxos/functions": "0.8.4-main.2c6827d",
-    "@dxos/invariant": "0.8.4-main.2c6827d",
-    "@dxos/keys": "0.8.4-main.2c6827d",
-    "@dxos/functions-runtime": "0.8.4-main.2c6827d",
-    "@dxos/lit-ui": "0.8.4-main.2c6827d",
-    "@dxos/live-object": "0.8.4-main.2c6827d",
-    "@dxos/local-storage": "0.8.4-main.2c6827d",
-    "@dxos/log": "0.8.4-main.2c6827d",
-    "@dxos/plugin-client": "0.8.4-main.2c6827d",
-    "@dxos/plugin-attention": "0.8.4-main.2c6827d",
-    "@dxos/plugin-deck": "0.8.4-main.2c6827d",
-    "@dxos/plugin-graph": "0.8.4-main.2c6827d",
-    "@dxos/plugin-preview": "0.8.4-main.2c6827d",
-    "@dxos/plugin-space": "0.8.4-main.2c6827d",
-    "@dxos/react-client": "0.8.4-main.2c6827d",
-    "@dxos/plugin-theme": "0.8.4-main.2c6827d",
-    "@dxos/react-hooks": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-attention": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-form": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-editor": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-menu": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-stack": "0.8.4-main.2c6827d",
-    "@dxos/schema": "0.8.4-main.2c6827d",
-    "@dxos/types": "0.8.4-main.2c6827d",
-    "@dxos/util": "0.8.4-main.2c6827d"
+    "@dxos/app-framework": "0.8.4-main.3c1ae3b",
+    "@dxos/ai": "0.8.4-main.3c1ae3b",
+    "@dxos/assistant": "0.8.4-main.3c1ae3b",
+    "@dxos/async": "0.8.4-main.3c1ae3b",
+    "@dxos/client-protocol": "0.8.4-main.3c1ae3b",
+    "@dxos/blueprints": "0.8.4-main.3c1ae3b",
+    "@dxos/echo": "0.8.4-main.3c1ae3b",
+    "@dxos/echo-db": "0.8.4-main.3c1ae3b",
+    "@dxos/functions": "0.8.4-main.3c1ae3b",
+    "@dxos/effect": "0.8.4-main.3c1ae3b",
+    "@dxos/functions-runtime": "0.8.4-main.3c1ae3b",
+    "@dxos/invariant": "0.8.4-main.3c1ae3b",
+    "@dxos/keys": "0.8.4-main.3c1ae3b",
+    "@dxos/lit-ui": "0.8.4-main.3c1ae3b",
+    "@dxos/live-object": "0.8.4-main.3c1ae3b",
+    "@dxos/local-storage": "0.8.4-main.3c1ae3b",
+    "@dxos/log": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-attention": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-client": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-deck": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-graph": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-preview": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-space": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-theme": "0.8.4-main.3c1ae3b",
+    "@dxos/react-client": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-attention": "0.8.4-main.3c1ae3b",
+    "@dxos/react-hooks": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-editor": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-menu": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-form": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-stack": "0.8.4-main.3c1ae3b",
+    "@dxos/schema": "0.8.4-main.3c1ae3b",
+    "@dxos/util": "0.8.4-main.3c1ae3b",
+    "@dxos/types": "0.8.4-main.3c1ae3b"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.3.4",
@@ -98,13 +98,13 @@
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/plugin-storybook-layout": "0.8.4-main.2c6827d",
-    "@dxos/debug": "0.8.4-main.2c6827d",
-    "@dxos/react-ui": "0.8.4-main.2c6827d",
-    "@dxos/plugin-theme": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-theme": "0.8.4-main.2c6827d",
-    "@dxos/storybook-utils": "0.8.4-main.2c6827d",
-    "@dxos/random": "0.8.4-main.2c6827d"
+    "@dxos/debug": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-storybook-layout": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-theme": "0.8.4-main.3c1ae3b",
+    "@dxos/random": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b",
+    "@dxos/storybook-utils": "0.8.4-main.3c1ae3b"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.3.4",
@@ -112,8 +112,8 @@
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-theme": "0.8.4-main.2c6827d"
+    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b"
   },
   "publishConfig": {
     "access": "public"

package/src/MarkdownPlugin.tsx

@@ -4,10 +4,9 @@
 
 import { Capabilities, Events, contributes, createIntent, defineModule, definePlugin } from '@dxos/app-framework';
 import { type Obj, Ref } from '@dxos/echo';
+import { createDocAccessor, getTextInRange } from '@dxos/echo-db';
 import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
-import { SpaceCapabilities } from '@dxos/plugin-space';
-import { defineObjectForm } from '@dxos/plugin-space/types';
-import { createDocAccessor, getTextInRange } from '@dxos/react-client/echo';
+import { type CreateObjectIntent } from '@dxos/plugin-space/types';
 import { translations as editorTranslations } from '@dxos/react-ui-editor';
 import { Text } from '@dxos/schema';
 
@@ -72,30 +71,15 @@ export const MarkdownPlugin = definePlugin(meta, () => [
               return getTextInRange(createDocAccessor(doc.content.target!, ['content']), start, end);
             }
           },
+          createObjectIntent: (() => createIntent(MarkdownAction.Create)) satisfies CreateObjectIntent,
+          addToCollectionOnCreate: true,
         },
       }),
   }),
-  defineModule({
-    id: `${meta.id}/module/object-form`,
-    activatesOn: ClientEvents.SetupSchema,
-    activate: () =>
-      contributes(
-        SpaceCapabilities.ObjectForm,
-        defineObjectForm({
-          objectSchema: Markdown.Document,
-          getIntent: () => createIntent(MarkdownAction.Create, {}),
-        }),
-      ),
-  }),
   defineModule({
     id: `${meta.id}/module/schema`,
     activatesOn: ClientEvents.SetupSchema,
-    activate: () => contributes(ClientCapabilities.Schema, [Text.Text]),
-  }),
-  defineModule({
-    id: `${meta.id}/module/whitelist-schema`,
-    activatesOn: ClientEvents.SetupSchema,
-    activate: () => contributes(ClientCapabilities.SchemaWhiteList, [Markdown.Document]),
+    activate: () => contributes(ClientCapabilities.Schema, [Markdown.Document, Text.Text]),
   }),
   defineModule({
     id: `${meta.id}/module/react-surface`,

package/src/capabilities/anchor-sort.ts

@@ -3,7 +3,8 @@
 //
 
 import { Capabilities, contributes } from '@dxos/app-framework';
-import { createDocAccessor, getRangeFromCursor, getTarget } from '@dxos/react-client/echo';
+import { Relation } from '@dxos/echo';
+import { createDocAccessor, getRangeFromCursor } from '@dxos/echo-db';
 import { type AnchoredTo } from '@dxos/types';
 
 import { Markdown } from '../types';
@@ -12,9 +13,9 @@ export default () =>
   contributes(Capabilities.AnchorSort, {
     key: Markdown.Document.typename,
     sort: (anchorA: AnchoredTo.AnchoredTo, anchorB: AnchoredTo.AnchoredTo) => {
-      const doc = getTarget(anchorA) as Markdown.Document;
+      const doc = Relation.getTarget(anchorA) as Markdown.Document;
       const accessor = doc.content.target ? createDocAccessor(doc.content.target, ['content']) : undefined;
-      if (doc !== getTarget(anchorB) || !accessor) {
+      if (doc !== Relation.getTarget(anchorB) || !accessor) {
         return 0;
       }
 

package/src/capabilities/artifact-definition.ts

@@ -94,7 +94,7 @@ export default () => {
         }),
         execute: async ({ id }, { extensions }) => {
           invariant(extensions?.space, 'No space');
-          const document = await extensions.space.db.query(Filter.ids(ArtifactId.toDXN(id).toString())).first();
+          const document = await extensions.space.db.query(Filter.id(ArtifactId.toDXN(id).toString())).first();
           assertArgument(Obj.instanceOf(Markdown.Document, document), 'document', 'Invalid type');
 
           const { content } = await document.content?.load();

package/src/capabilities/intent-resolver.ts

@@ -14,7 +14,7 @@ import {
   createResolver,
 } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
-import { createDocAccessor, getRangeFromCursor } from '@dxos/react-client/echo';
+import { createDocAccessor, getRangeFromCursor } from '@dxos/echo-db';
 
 import { Markdown, MarkdownAction } from '../types';
 

package/src/capabilities/react-surface.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
 import { SurfaceCardRole, useCapability } from '@dxos/app-framework/react';
@@ -25,8 +25,8 @@ export default () =>
       role: ['article', 'section', 'tabpanel'],
       filter: (data): data is { subject: Markdown.Document; variant: undefined } =>
         Obj.instanceOf(Markdown.Document, data.subject) && !data.variant,
-      component: ({ data, role }) => {
-        return <Container id={Obj.getDXN(data.subject).toString()} subject={data.subject} role={role} />;
+      component: ({ data, role, ref }) => {
+        return <Container id={Obj.getDXN(data.subject).toString()} subject={data.subject} role={role} ref={ref} />;
       },
     }),
     createSurface({
@@ -59,35 +59,39 @@ export default () =>
       role: SurfaceCardRole.literals as any,
       filter: (data): data is { subject: Markdown.Document | Text.Text } =>
         Obj.instanceOf(Markdown.Document, data.subject) || Obj.instanceOf(Text.Text, data.subject),
-      component: ({ data, role }) => <MarkdownCard {...data} role={role as SurfaceCardRole} />,
+      component: ({ data, role, ref }) => <MarkdownCard {...data} role={role as SurfaceCardRole} ref={ref} />,
     }),
   ]);
 
 /**
  * Common wrapper.
  */
-const Container = ({ id, subject, role }: { id: string; subject: MarkdownContainerProps['object']; role: string }) => {
-  const selectionManager = useCapability(AttentionCapabilities.Selection);
-  const settingsStore = useCapability(Capabilities.SettingsStore);
-  const settings = settingsStore.getStore<Markdown.Settings>(meta.id)!.value;
-  const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
-  const viewMode = getViewMode(id);
-  const handleViewModeChange = useCallback<NonNullable<MarkdownContainerProps['onViewModeChange']>>(
-    (mode) => setViewMode(id, mode),
-    [id, setViewMode],
-  );
+// TOOD(burdon): Use common type def.
+const Container = forwardRef<HTMLDivElement, { id: string; subject: MarkdownContainerProps['object']; role: string }>(
+  ({ id, subject, role }, forwardedRef) => {
+    const selectionManager = useCapability(AttentionCapabilities.Selection);
+    const settingsStore = useCapability(Capabilities.SettingsStore);
+    const settings = settingsStore.getStore<Markdown.Settings>(meta.id)!.value;
+    const { state, editorState, getViewMode, setViewMode } = useCapability(MarkdownCapabilities.State);
+    const viewMode = getViewMode(id);
+    const handleViewModeChange = useCallback<NonNullable<MarkdownContainerProps['onViewModeChange']>>(
+      (mode) => setViewMode(id, mode),
+      [id, setViewMode],
+    );
 
-  return (
-    <MarkdownContainer
-      id={id}
-      object={subject}
-      role={role}
-      settings={settings}
-      selectionManager={selectionManager}
-      extensionProviders={state.extensionProviders}
-      editorStateStore={editorState}
-      viewMode={viewMode}
-      onViewModeChange={handleViewModeChange}
-    />
-  );
-};
+    return (
+      <MarkdownContainer
+        id={id}
+        object={subject}
+        role={role}
+        settings={settings}
+        selectionManager={selectionManager}
+        extensionProviders={state.extensionProviders}
+        editorStateStore={editorState}
+        viewMode={viewMode}
+        onViewModeChange={handleViewModeChange}
+        ref={forwardedRef}
+      />
+    );
+  },
+);

package/src/components/MarkdownCard/MarkdownCard.tsx

@@ -3,7 +3,7 @@
 //
 
 import * as Function from 'effect/Function';
-import React, { useCallback } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 
 import { LayoutAction, chain, createIntent } from '@dxos/app-framework';
 import { useIntentDispatcher } from '@dxos/app-framework/react';
@@ -16,19 +16,20 @@ import { Text } from '@dxos/schema';
 import { meta } from '../../meta';
 import { Markdown } from '../../types';
 import { getContentSnippet, getFallbackName } from '../../util';
+import { MarkdownEditor } from '../MarkdownEditor';
 
 export type MarkdownCardProps = CardPreviewProps<Markdown.Document | Text.Text>;
 
-export const MarkdownCard = ({ subject, role }: MarkdownCardProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { t } = useTranslation(meta.id);
-  const snippet = getSnippet(subject, t('fallback abstract'));
-  const info = getInfo(subject);
+export const MarkdownCard = forwardRef<HTMLDivElement, MarkdownCardProps>(
+  ({ subject, role }: MarkdownCardProps, forwardedRef) => {
+    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    const { t } = useTranslation(meta.id);
+    const snippet = useMemo(() => getSnippet(subject, t('fallback abstract')), [subject]);
+    const info = getInfo(subject);
 
-  // TODO(wittjosiah): Factor out so this component isn't dependent on the app framework.
-  const handleNavigate = useCallback(
-    () =>
-      dispatch(
+    // TODO(wittjosiah): Factor out so this component isn't dependent on the app framework.
+    const handleNavigate = useCallback(() => {
+      void dispatch(
         Function.pipe(
           createIntent(LayoutAction.UpdatePopover, {
             part: 'popover',
@@ -40,29 +41,35 @@ export const MarkdownCard = ({ subject, role }: MarkdownCardProps) => {
             subject: [Obj.getDXN(subject).toString()],
           }),
         ),
-      ),
-    [dispatch, subject],
-  );
+      );
+    }, [dispatch, subject]);
 
-  return (
-    <Card.SurfaceRoot role={role}>
-      <Card.Heading classNames='flex items-center'>
-        {getTitle(subject, t('fallback title'))}
-        <span className='grow' />
-        <IconButton
-          iconOnly
-          icon='ph--arrow-right--regular'
-          label={t('navigate to document label')}
-          onClick={handleNavigate}
-        />
-      </Card.Heading>
-      {snippet && <Card.Text classNames='line-clamp-3 text-sm text-description'>{snippet}</Card.Text>}
-      <Card.Text classNames='text-xs text-description'>
-        {info.words} {t('words label', { count: info.words })}
-      </Card.Text>
-    </Card.SurfaceRoot>
-  );
-};
+    return (
+      <Card.SurfaceRoot role={role} ref={forwardedRef}>
+        <Card.Heading classNames='flex items-center'>
+          {getTitle(subject, t('fallback title'))}
+          <span className='grow' />
+          <IconButton
+            iconOnly
+            icon='ph--arrow-right--regular'
+            label={t('navigate to document label')}
+            onClick={handleNavigate}
+          />
+        </Card.Heading>
+        {snippet && (
+          <Card.Text classNames='flex max-h-[300px] overflow-hidden'>
+            <MarkdownEditor.Root id={subject.id} viewMode='readonly'>
+              <MarkdownEditor.Content initialValue={snippet} slots={{}} classNames='!bg-transparent' />
+            </MarkdownEditor.Root>
+          </Card.Text>
+        )}
+        <Card.Text classNames='text-xs text-description'>
+          {info.words} {t('words label', { count: info.words })}
+        </Card.Text>
+      </Card.SurfaceRoot>
+    );
+  },
+);
 
 const getInfo = (subject: Markdown.Document | Text.Text) => {
   const text = (Obj.instanceOf(Markdown.Document, subject) ? subject.content?.target?.content : subject.content) ?? '';

package/src/components/MarkdownContainer.tsx

@@ -4,7 +4,7 @@
 
 import { type Extension } from '@codemirror/state';
 import { Atom } from '@effect-atom/atom-react';
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 
 import { Capabilities } from '@dxos/app-framework';
 import { useAppGraph, useCapabilities } from '@dxos/app-framework/react';
@@ -29,85 +29,80 @@ export type MarkdownContainerProps = {
   Pick<MarkdownEditorContentProps, 'editorStateStore'> &
   Pick<MarkdownPluginState, 'extensionProviders'>);
 
-export const MarkdownContainer = ({
-  id,
-  role,
-  object,
-  settings,
-  extensionProviders,
-  ...props
-}: MarkdownContainerProps) => {
-  const space = getSpace(object);
-  const isDocument = Obj.instanceOf(Markdown.Document, object);
-  const isText = Obj.instanceOf(Text.Text, object);
-  const attendableId = isDocument ? Obj.getDXN(object).toString() : undefined;
+export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerProps>(
+  ({ id, role, object, settings, extensionProviders, ...props }, forwardedRef) => {
+    const space = getSpace(object);
+    const isDocument = Obj.instanceOf(Markdown.Document, object);
+    const isText = Obj.instanceOf(Text.Text, object);
+    const attendableId = isDocument ? Obj.getDXN(object).toString() : undefined;
 
-  // Extensions from other plugins.
-  // TODO(burdon): Document MarkdownPluginState.extensionProviders
-  const otherExtensionProviders = useCapabilities(MarkdownCapabilities.Extensions);
-  const extensions = useMemo<Extension[]>(() => {
-    if (!Obj.instanceOf(Markdown.Document, object)) {
-      return [];
-    }
+    // Extensions from other plugins.
+    // TODO(burdon): Document MarkdownPluginState.extensionProviders
+    const otherExtensionProviders = useCapabilities(MarkdownCapabilities.Extensions);
+    const extensions = useMemo<Extension[]>(() => {
+      if (!Obj.instanceOf(Markdown.Document, object)) {
+        return [];
+      }
 
-    return [...(otherExtensionProviders ?? []), ...(extensionProviders ?? [])]
-      .flat()
-      .reduce((acc: Extension[], provider) => {
-        const extension =
-          typeof provider === 'function' ? provider({ document: object as Markdown.Document }) : provider;
-        if (extension) {
-          acc.push(extension);
-        }
+      return [...(otherExtensionProviders ?? []), ...(extensionProviders ?? [])]
+        .flat()
+        .reduce((acc: Extension[], provider) => {
+          const extension =
+            typeof provider === 'function' ? provider({ document: object as Markdown.Document }) : provider;
+          if (extension) {
+            acc.push(extension);
+          }
 
-        return acc;
-      }, []);
-  }, [extensionProviders, otherExtensionProviders, object]);
+          return acc;
+        }, []);
+    }, [extensionProviders, otherExtensionProviders, object]);
 
-  // Toolbar actions from app graph.
-  const { graph } = useAppGraph();
-  const customActions = useMemo(() => {
-    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 }));
-      return { nodes, edges };
-    });
-  }, [graph]);
+    // Toolbar actions from app graph.
+    const { graph } = useAppGraph();
+    const customActions = useMemo(() => {
+      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 }));
+        return { nodes, edges };
+      });
+    }, [graph]);
 
-  // File upload.
-  const [upload] = useCapabilities(Capabilities.FileUploader);
-  const handleFileUpload = useMemo(() => {
-    if (!space || !upload) {
-      return undefined;
-    }
+    // File upload.
+    const [upload] = useCapabilities(Capabilities.FileUploader);
+    const handleFileUpload = useMemo(() => {
+      if (!space || !upload) {
+        return undefined;
+      }
 
-    return async (file: File) => upload(space, file);
-  }, [space, upload]);
+      return async (file: File) => upload(space, file);
+    }, [space, upload]);
 
-  // Query for @ refs.
-  const handleLinkQuery = useLinkQuery(space);
+    // Query for @ refs.
+    const handleLinkQuery = useLinkQuery(space);
 
-  return (
-    <StackItem.Content toolbar={settings.toolbar}>
-      <MarkdownEditor.Root
-        id={attendableId ?? id}
-        object={object}
-        extensions={extensions}
-        onFileUpload={handleFileUpload}
-        onLinkQuery={handleLinkQuery}
-        {...props}
-      >
-        {settings.toolbar && (
-          <MarkdownEditor.Toolbar id={attendableId ?? id} role={role} customActions={customActions} />
-        )}
-        <MarkdownEditor.Content
-          initialValue={isDocument ? object.content?.target?.content : isText ? object.content : object.text}
-          scrollPastEnd={role === 'article'}
-        />
-        <MarkdownEditor.Blocks />
-      </MarkdownEditor.Root>
-    </StackItem.Content>
-  );
-};
+    return (
+      <StackItem.Content toolbar={settings.toolbar} ref={forwardedRef}>
+        <MarkdownEditor.Root
+          id={attendableId ?? id}
+          object={object}
+          extensions={extensions}
+          onFileUpload={handleFileUpload}
+          onLinkQuery={handleLinkQuery}
+          {...props}
+        >
+          {settings.toolbar && (
+            <MarkdownEditor.Toolbar id={attendableId ?? id} role={role} customActions={customActions} />
+          )}
+          <MarkdownEditor.Content
+            initialValue={isDocument ? object.content?.target?.content : isText ? object.content : object.text}
+            scrollPastEnd={role === 'article'}
+          />
+          <MarkdownEditor.Blocks />
+        </MarkdownEditor.Root>
+      </StackItem.Content>
+    );
+  },
+);
 
 export default MarkdownContainer;

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -154,11 +154,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 +167,9 @@ const MarkdownEditorContent = (props: MarkdownEditorContentProps) => {
       <NaturalMarkdownEditorContent
         {...props}
         id={id}
-        extensions={extensions}
-        toolbarState={toolbarState}
         viewMode={viewMode}
+        toolbarState={toolbarState}
+        extensions={extensions}
         ref={setEditorView}
       />
     </EditorMenuProvider>
@@ -218,7 +218,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);