@dxos/plugin-markdown 0.8.3-main.7f5a14c → 0.8.3-staging.0fa589b

package/dist/types/src/types/schema.d.ts

@@ -1,30 +1,27 @@
 import { Schema } from 'effect';
+import { Type } from '@dxos/echo';
 export declare const DocumentSchema: Schema.Struct<{
     name: Schema.optional<typeof Schema.String>;
     fallbackName: Schema.optional<typeof Schema.String>;
-    content: import("@dxos/echo-schema").Ref$<{
-        readonly id: string;
-        content: string;
-    }>;
+    content: Type.ref<Type.obj<Schema.Struct<{
+        content: typeof import("effect/Schema").String;
+    }>>>;
 }>;
-export declare const DocumentType: import("@dxos/echo-schema").EchoTypeSchema<Schema.Struct<{
+export declare const DocumentType: Type.obj<Schema.Struct<{
     name: Schema.optional<typeof Schema.String>;
     fallbackName: Schema.optional<typeof Schema.String>;
-    content: import("@dxos/echo-schema").Ref$<{
-        readonly id: string;
-        content: string;
-    }>;
-}>, {}>;
+    content: Type.ref<Type.obj<Schema.Struct<{
+        content: typeof import("effect/Schema").String;
+    }>>>;
+}>>;
 export type DocumentType = Schema.Schema.Type<typeof DocumentType>;
 export declare const createDocument: ({ name, content }: {
     name: string;
     content: string;
-}) => import("@dxos/live-object").Live<{
-    readonly id: string;
+}) => import("@dxos/live-object").Live<Type.OfKind<Type.Kind.Object> & {
     name?: string | undefined;
     fallbackName?: string | undefined;
-    content: import("@dxos/echo-schema").Ref<{
-        readonly id: string;
+    content: import("@dxos/echo-schema").Ref<Type.OfKind<Type.Kind.Object> & {
         content: string;
     }>;
 }>;

package/dist/types/src/types/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/types/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAMhC,eAAO,MAAM,cAAc;;;;;;;EAI2B,CAAC;AAEvD,eAAO,MAAM,YAAY;;;;;;;OAKxB,CAAC;AACF,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,YAAY,CAAC,CAAC;AAGnE,eAAO,MAAM,cAAc,GAAI,mBAAmB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;;;;;;;;EACQ,CAAC;AAE5F;;GAEG;AAEH,eAAO,MAAM,aAAa,GAAI,MAAM,GAAG,KAAG,IAAI,IAAI;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAM7C,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/types/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,EAAY,IAAI,EAAE,MAAM,YAAY,CAAC;AAI5C,eAAO,MAAM,cAAc;;;;;;EAI2B,CAAC;AAEvD,eAAO,MAAM,YAAY;;;;;;GAKxB,CAAC;AACF,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,YAAY,CAAC,CAAC;AAGnE,eAAO,MAAM,cAAc,GAAI,mBAAmB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;;;;;;EACQ,CAAC;AAE5F;;GAEG;AAEH,eAAO,MAAM,aAAa,GAAI,MAAM,GAAG,KAAG,IAAI,IAAI;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAM7C,CAAC"}

package/dist/types/src/types/types.d.ts

@@ -19,14 +19,13 @@ export declare namespace MarkdownAction {
             content: Schema.optional<typeof Schema.String>;
         }>;
         output: Schema.Struct<{
-            object: import("@dxos/echo-schema").EchoTypeSchema<Schema.Struct<{
+            object: Type.obj<Schema.Struct<{
                 name: Schema.optional<typeof Schema.String>;
                 fallbackName: Schema.optional<typeof Schema.String>;
-                content: import("@dxos/echo-schema").Ref$<{
-                    readonly id: string;
-                    content: string;
-                }>;
-            }>, {}>;
+                content: Type.ref<Type.obj<Schema.Struct<{
+                    content: typeof import("effect/Schema").String;
+                }>>>;
+            }>>;
         }>;
     }>;
     export class Create extends Create_base {

package/dist/types/src/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,KAAK,SAAS,EAAmB,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAExF,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAKxC,yBAAiB,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;IAC9B,MAAM,OAAO,MAAO,SAAQ,WAS1B;KAAG;;;;;;;;;;IAEL,MAAM,OAAO,WAAY,SAAQ,gBAM/B;KAAG;;CACN;AAED,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAGrD,MAAM,MAAM,yBAAyB,GAAG,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,YAAY,CAAA;CAAE,KAAK,SAAS,GAAG,SAAS,CAAC;AAEtG,MAAM,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG;IAEhC,kBAAkB,CAAC,EAAE,yBAAyB,EAAE,CAAC;IAIjD,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;GAYlC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,KAAK,SAAS,EAAmB,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAExF,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAKxC,yBAAiB,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;IAC9B,MAAM,OAAO,MAAO,SAAQ,WAS1B;KAAG;;;;;;;;;;IAEL,MAAM,OAAO,WAAY,SAAQ,gBAM/B;KAAG;;CACN;AAED,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAGrD,MAAM,MAAM,yBAAyB,GAAG,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,YAAY,CAAA;CAAE,KAAK,SAAS,GAAG,SAAS,CAAC;AAEtG,MAAM,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG;IAEhC,kBAAkB,CAAC,EAAE,yBAAyB,EAAE,CAAC;IAIjD,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;GAYlC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-markdown",
-  "version": "0.8.3-main.7f5a14c",
+  "version": "0.8.3-staging.0fa589b",
   "description": "DXOS Surface plugin for interacting with Markdown",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -39,34 +39,34 @@
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.9.0",
     "react-dropzone": "^14.2.3",
-    "@dxos/ai": "0.8.3-main.7f5a14c",
-    "@dxos/artifact": "0.8.3-main.7f5a14c",
-    "@dxos/app-framework": "0.8.3-main.7f5a14c",
-    "@dxos/assistant": "0.8.3-main.7f5a14c",
-    "@dxos/async": "0.8.3-main.7f5a14c",
-    "@dxos/echo": "0.8.3-main.7f5a14c",
-    "@dxos/echo-schema": "0.8.3-main.7f5a14c",
-    "@dxos/invariant": "0.8.3-main.7f5a14c",
-    "@dxos/keys": "0.8.3-main.7f5a14c",
-    "@dxos/lit-ui": "0.8.3-main.7f5a14c",
-    "@dxos/local-storage": "0.8.3-main.7f5a14c",
-    "@dxos/live-object": "0.8.3-main.7f5a14c",
-    "@dxos/log": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-attention": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-client": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-deck": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-preview": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-graph": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-space": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-theme": "0.8.3-main.7f5a14c",
-    "@dxos/react-hooks": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-attention": "0.8.3-main.7f5a14c",
-    "@dxos/react-client": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-form": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-editor": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-stack": "0.8.3-main.7f5a14c",
-    "@dxos/util": "0.8.3-main.7f5a14c",
-    "@dxos/schema": "0.8.3-main.7f5a14c"
+    "@dxos/ai": "0.8.3-staging.0fa589b",
+    "@dxos/app-framework": "0.8.3-staging.0fa589b",
+    "@dxos/assistant": "0.8.3-staging.0fa589b",
+    "@dxos/artifact": "0.8.3-staging.0fa589b",
+    "@dxos/async": "0.8.3-staging.0fa589b",
+    "@dxos/invariant": "0.8.3-staging.0fa589b",
+    "@dxos/echo": "0.8.3-staging.0fa589b",
+    "@dxos/keys": "0.8.3-staging.0fa589b",
+    "@dxos/echo-schema": "0.8.3-staging.0fa589b",
+    "@dxos/lit-ui": "0.8.3-staging.0fa589b",
+    "@dxos/local-storage": "0.8.3-staging.0fa589b",
+    "@dxos/log": "0.8.3-staging.0fa589b",
+    "@dxos/live-object": "0.8.3-staging.0fa589b",
+    "@dxos/plugin-attention": "0.8.3-staging.0fa589b",
+    "@dxos/plugin-client": "0.8.3-staging.0fa589b",
+    "@dxos/plugin-deck": "0.8.3-staging.0fa589b",
+    "@dxos/plugin-preview": "0.8.3-staging.0fa589b",
+    "@dxos/plugin-graph": "0.8.3-staging.0fa589b",
+    "@dxos/plugin-space": "0.8.3-staging.0fa589b",
+    "@dxos/plugin-theme": "0.8.3-staging.0fa589b",
+    "@dxos/react-client": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-attention": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-editor": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-form": "0.8.3-staging.0fa589b",
+    "@dxos/react-hooks": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-stack": "0.8.3-staging.0fa589b",
+    "@dxos/schema": "0.8.3-staging.0fa589b",
+    "@dxos/util": "0.8.3-staging.0fa589b"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -78,13 +78,13 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/debug": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-storybook-layout": "0.8.3-main.7f5a14c",
-    "@dxos/random": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-theme": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-theme": "0.8.3-main.7f5a14c",
-    "@dxos/storybook-utils": "0.8.3-main.7f5a14c"
+    "@dxos/debug": "0.8.3-staging.0fa589b",
+    "@dxos/plugin-theme": "0.8.3-staging.0fa589b",
+    "@dxos/plugin-storybook-layout": "0.8.3-staging.0fa589b",
+    "@dxos/random": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b",
+    "@dxos/storybook-utils": "0.8.3-staging.0fa589b"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -93,8 +93,8 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-theme": "0.8.3-main.7f5a14c"
+    "@dxos/react-ui": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b"
   },
   "publishConfig": {
     "access": "public"

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

@@ -5,8 +5,10 @@
 import { pipe } from 'effect';
 
 import { contributes, Capabilities, type PluginContext, chain, createIntent } from '@dxos/app-framework';
-import { SpaceAction, CollectionType } from '@dxos/plugin-space/types';
+import { Obj, Type } from '@dxos/echo';
+import { SpaceAction } from '@dxos/plugin-space/types';
 import { isSpace } from '@dxos/react-client/echo';
+import { DataType } from '@dxos/schema';
 
 import translations from '../translations';
 import { MarkdownAction, DocumentType } from '../types';
@@ -30,8 +32,8 @@ export default (context: PluginContext) =>
       deserialize: async (data, ancestors) => {
         const space = ancestors.find(isSpace);
         const target =
-          ancestors.findLast((ancestor) => ancestor instanceof CollectionType) ??
-          space?.properties[CollectionType.typename]?.target;
+          ancestors.findLast((ancestor) => Obj.instanceOf(DataType.Collection, ancestor)) ??
+          space?.properties[Type.getTypename(DataType.Collection)]?.target;
         if (!space || !target) {
           return;
         }

package/src/capabilities/react-surface.tsx

@@ -105,7 +105,7 @@ export default () =>
     }),
     createSurface({
       id: `${MARKDOWN_PLUGIN}/preview`,
-      role: 'popover',
+      role: ['popover', 'card--kanban', 'card--document', 'card'],
       filter: (data): data is { subject: DocumentType | DataType.Text } =>
         Obj.instanceOf(DocumentType, data.subject) || Obj.instanceOf(DataType.Text, data.subject),
       component: ({ data, role }) => <MarkdownPreview {...data} role={role} />,

package/src/components/MarkdownContainer.stories.tsx

@@ -0,0 +1,103 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React, { useMemo } from 'react';
+
+import { Capabilities, contributes, IntentPlugin, SettingsPlugin, Surface } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { todo } from '@dxos/debug';
+import { Obj, Query, Ref, Type } from '@dxos/echo';
+import { AttentionPlugin } from '@dxos/plugin-attention';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { GraphPlugin } from '@dxos/plugin-graph';
+import { PreviewPlugin } from '@dxos/plugin-preview';
+import { SpaceCapabilities, SpacePlugin } from '@dxos/plugin-space';
+import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
+import { ThemePlugin } from '@dxos/plugin-theme';
+import { faker } from '@dxos/random';
+import { useQuery, useSpace } from '@dxos/react-client/echo';
+import { defaultTx } from '@dxos/react-ui-theme';
+import { DataType } from '@dxos/schema';
+import { createObjectFactory, Testing, type ValueGenerator } from '@dxos/schema/testing';
+import { withLayout } from '@dxos/storybook-utils';
+
+import { MarkdownPlugin } from '../MarkdownPlugin';
+import translations from '../translations';
+import { DocumentType } from '../types';
+
+faker.seed(1);
+
+const generator: ValueGenerator = faker as any;
+
+const DefaultStory = () => {
+  const space = useSpace();
+  const [doc] = useQuery(space, Query.type(DocumentType));
+  const data = useMemo(() => ({ subject: doc }), [doc]);
+
+  return <Surface role='article' data={data} />;
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'plugins/plugin-markdown/MarkdownContainer',
+  render: DefaultStory,
+  decorators: [
+    withPluginManager({
+      plugins: [
+        AttentionPlugin(),
+        ThemePlugin({ tx: defaultTx }),
+        StorybookLayoutPlugin(),
+        ClientPlugin({
+          types: [DocumentType, DataType.Text, Testing.Contact],
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+            await client.spaces.waitUntilReady();
+            await client.spaces.default.waitUntilReady();
+            const space = client.spaces.default;
+            const doc = Obj.make(DocumentType, {
+              name: 'Test',
+              content: Ref.make(Obj.make(DataType.Text, { content: '# Test\n\n' })),
+            });
+            space.db.add(doc);
+            const createObjects = createObjectFactory(space.db, generator);
+            await createObjects([{ type: Testing.Contact, count: 10 }]);
+            await space.db.flush({ indexes: true });
+          },
+        }),
+        SpacePlugin(),
+        SettingsPlugin(),
+        IntentPlugin(),
+        MarkdownPlugin(),
+        PreviewPlugin(),
+        GraphPlugin(),
+      ],
+      capabilities: [
+        // NOTE: Editor only queries for object form schemas when linking.
+        contributes(SpaceCapabilities.ObjectForm, {
+          objectSchema: Testing.Contact,
+          getIntent: () => todo(),
+        }),
+        contributes(Capabilities.Metadata, {
+          id: Type.getTypename(Testing.Contact),
+          metadata: {
+            icon: 'ph--user--regular',
+          },
+        }),
+      ],
+    }),
+    withLayout({ fullscreen: true }),
+  ],
+  parameters: {
+    translations,
+    controls: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = Meta<typeof DefaultStory>;
+
+export const Default: Story = {};

package/src/components/MarkdownContainer.tsx

@@ -3,15 +3,23 @@
 //
 
 import { Rx } from '@effect-rx/rx-react';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
 
-import { Capabilities, useAppGraph, useCapabilities, usePluginManager } from '@dxos/app-framework';
-import { Filter, Obj, Query } from '@dxos/echo';
+import { Capabilities, Surface, useAppGraph, useCapabilities, usePluginManager } from '@dxos/app-framework';
+import { DXN, Filter, Obj, Query } from '@dxos/echo';
 import { SpaceCapabilities } from '@dxos/plugin-space';
-import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { fullyQualifiedId, getSpace, useQuery, useSpace } from '@dxos/react-client/echo';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { type SelectionManager } from '@dxos/react-ui-attention';
-import { type CommandMenuGroup, type CommandMenuItem, insertAtCursor, insertAtLineStart } from '@dxos/react-ui-editor';
+import {
+  type CommandMenuGroup,
+  type CommandMenuItem,
+  insertAtCursor,
+  insertAtLineStart,
+  type PreviewLinkRef,
+  type PreviewOptions,
+} from '@dxos/react-ui-editor';
 import { DataType } from '@dxos/schema';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
@@ -43,7 +51,28 @@ const MarkdownContainer = ({
   const scrollPastEnd = role === 'article';
   const doc = Obj.instanceOf(DocumentType, object) ? object : undefined;
   const text = Obj.instanceOf(DataType.Text, object) ? object : undefined;
-  const extensions = useExtensions({ document: doc, text, id, settings, selectionManager, viewMode, editorStateStore });
+  const [previewBlocks, setPreviewBlocks] = useState<{ link: PreviewLinkRef; el: HTMLElement }[]>([]);
+  const previewOptions = useMemo(
+    (): PreviewOptions => ({
+      addBlockContainer: (link, el) => {
+        setPreviewBlocks((prev) => [...prev, { link, el }]);
+      },
+      removeBlockContainer: (link) => {
+        setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
+      },
+    }),
+    [],
+  );
+  const extensions = useExtensions({
+    document: doc,
+    text,
+    id,
+    settings,
+    selectionManager,
+    viewMode,
+    editorStateStore,
+    previewOptions,
+  });
 
   // TODO(wittjosiah): Factor out.
   const manager = usePluginManager();
@@ -93,52 +122,66 @@ const MarkdownContainer = ({
     [filter, resolve, space],
   );
 
-  if (doc) {
-    return (
-      <DocumentEditor
-        id={fullyQualifiedId(object)}
-        role={role}
-        document={doc}
-        extensions={extensions}
-        viewMode={viewMode}
-        settings={settings}
-        scrollPastEnd={scrollPastEnd}
-        onViewModeChange={onViewModeChange}
-        onLinkQuery={space ? onLinkQuery : undefined}
-      />
-    );
-  } else if (text) {
-    return (
-      <MarkdownEditor
-        id={id}
-        role={role}
-        initialValue={text.content}
-        extensions={extensions}
-        viewMode={viewMode}
-        toolbar={settings.toolbar}
-        inputMode={settings.editorInputMode}
-        scrollPastEnd={scrollPastEnd}
-        onViewModeChange={onViewModeChange}
-        onLinkQuery={space ? onLinkQuery : undefined}
-      />
-    );
-  } else {
+  const editor = doc ? (
+    <DocumentEditor
+      id={fullyQualifiedId(object)}
+      role={role}
+      document={doc}
+      extensions={extensions}
+      viewMode={viewMode}
+      settings={settings}
+      scrollPastEnd={scrollPastEnd}
+      onViewModeChange={onViewModeChange}
+      onLinkQuery={space ? onLinkQuery : undefined}
+    />
+  ) : text ? (
+    <MarkdownEditor
+      id={id}
+      role={role}
+      initialValue={text.content}
+      extensions={extensions}
+      viewMode={viewMode}
+      toolbar={settings.toolbar}
+      inputMode={settings.editorInputMode}
+      scrollPastEnd={scrollPastEnd}
+      onViewModeChange={onViewModeChange}
+      onLinkQuery={space ? onLinkQuery : undefined}
+    />
+  ) : (
     // TODO(burdon): Normalize with above.
-    return (
-      <MarkdownEditor
-        id={id}
-        role={role}
-        initialValue={object.text}
-        extensions={extensions}
-        viewMode={viewMode}
-        toolbar={settings.toolbar}
-        inputMode={settings.editorInputMode}
-        scrollPastEnd={scrollPastEnd}
-        onViewModeChange={onViewModeChange}
-        onLinkQuery={space ? onLinkQuery : undefined}
-      />
-    );
-  }
+    <MarkdownEditor
+      id={id}
+      role={role}
+      initialValue={object.text}
+      extensions={extensions}
+      viewMode={viewMode}
+      toolbar={settings.toolbar}
+      inputMode={settings.editorInputMode}
+      scrollPastEnd={scrollPastEnd}
+      onViewModeChange={onViewModeChange}
+      onLinkQuery={space ? onLinkQuery : undefined}
+    />
+  );
+
+  return (
+    <>
+      {editor}
+      {previewBlocks.map(({ link, el }) => (
+        <PreviewBlock key={link.ref} link={link} el={el} />
+      ))}
+    </>
+  );
+};
+
+// TODO(wittjosiah): This shouldn't be "card" but "block".
+//   It's not a preview card but an interactive embedded object.
+const PreviewBlock = ({ link, el }: { link: PreviewLinkRef; el: HTMLElement }) => {
+  const echoDXN = useMemo(() => DXN.parse(link.ref).asEchoDXN(), [link.ref]);
+  const space = useSpace(echoDXN?.spaceId);
+  const [subject] = useQuery(space, Query.select(Filter.ids(echoDXN?.echoId ?? '')));
+  const data = useMemo(() => ({ subject }), [subject]);
+
+  return createPortal(<Surface role='card--document' data={data} limit={1} />, el);
 };
 
 type DocumentEditorProps = Omit<MarkdownContainerProps, 'object' | 'extensionProviders' | 'editorStateStore'> &

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -3,40 +3,42 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { useMemo, useEffect, useCallback, forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useMemo, useEffect, useCallback, useImperativeHandle, useRef } from 'react';
 import { useDropzone } from 'react-dropzone';
 
 import { type FileInfo } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { toLocalizedString, useThemeContext, useTranslation } from '@dxos/react-ui';
 import {
+  CommandMenu,
+  type CommandMenuGroup,
+  type DNDOptions,
+  type EditorInputMode,
+  type EditorSelectionState,
+  type EditorStateStore,
+  EditorToolbar,
+  type EditorToolbarActionGraphProps,
+  type EditorViewMode,
+  RefPopover,
+  type UseTextEditorProps,
   addLink,
+  createElement,
+  coreSlashCommands,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   dropFile,
   editorGutter,
   editorSlots,
-  EditorToolbar,
+  filterItems,
+  linkSlashCommands,
   processEditorPayload,
-  RefPopover,
   stackItemContentEditorClassNames,
-  type DNDOptions,
-  type EditorInputMode,
-  type EditorSelectionState,
-  type EditorStateStore,
-  type EditorToolbarActionGraphProps,
-  type EditorViewMode,
-  type CommandMenuGroup,
-  type UseTextEditorProps,
   useEditorToolbarState,
   useFormattingState,
-  useCommandMenu,
   useTextEditor,
-  filterItems,
-  coreSlashCommands,
-  CommandMenu,
-  linkSlashCommands,
+  useCommandMenu,
+  type UseCommandMenuOptions,
 } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
 import { isNotFalsy, isNonNullable } from '@dxos/util';
@@ -64,7 +66,6 @@ export type MarkdownEditorProps = {
 
 /**
  * Base markdown editor component.
- *
  * This component provides all the features of the markdown editor that do no depend on ECHO.
  * This allows it to be used as a common editor for markdown content on arbitrary backends (e.g. files).
  */
@@ -76,7 +77,8 @@ export const MarkdownEditor = ({
 }: MarkdownEditorProps) => {
   const { t } = useTranslation();
   const viewRef = useRef<EditorView>();
-  const getGroups = useCallback(
+
+  const getMenu = useCallback(
     (trigger: string, query?: string) => {
       switch (trigger) {
         case '@':
@@ -90,11 +92,33 @@ export const MarkdownEditor = ({
     },
     [onLinkQuery, slashCommandGroups],
   );
-  const { commandMenu, groupsRef, currentItem, onSelect, ...refPopoverProps } = useCommandMenu({
-    viewRef,
-    getGroups,
-    trigger: onLinkQuery ? ['/', '@'] : '/',
-  });
+
+  const options = useMemo<UseCommandMenuOptions>(() => {
+    const trigger = onLinkQuery ? ['/', '@'] : ['/'];
+    return {
+      viewRef,
+      trigger,
+      placeholder: {
+        delay: 3_000,
+        content: () => {
+          return createElement('div', undefined, [
+            createElement('span', { text: 'Press' }),
+            ...trigger.map((text) =>
+              createElement('span', {
+                className: 'border border-separator rounded-sm mx-1 px-1.5 pt-[1px] pb-[2px]',
+                text,
+              }),
+            ),
+            createElement('span', { text: 'for commands.' }),
+          ]);
+        },
+      },
+      getMenu,
+    };
+  }, [getMenu]);
+
+  const { commandMenu, groupsRef, currentItem, onSelect, ...refPopoverProps } = useCommandMenu(options);
+
   const extensions = useMemo(() => [_extensions, commandMenu].filter(isNotFalsy), [_extensions, commandMenu]);
 
   return (
@@ -111,13 +135,13 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
       id,
       role = 'article',
       initialValue,
+      customActions,
+      editorStateStore,
       extensions,
       extensionProviders,
       scrollPastEnd,
       toolbar,
-      customActions,
       viewMode,
-      editorStateStore,
       onFileUpload,
       onViewModeChange,
     },

package/src/components/Suggestions.stories.tsx

@@ -73,7 +73,7 @@ const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content })
   const handleInsert = async () => {
     invariant(space);
     invariant(queue);
-    queue.append([Obj.make(Message, { role: 'assistant', content: [{ type: 'text', text: 'Hello' }] })]);
+    await queue.append([Obj.make(Message, { role: 'assistant', content: [{ type: 'text', text: 'Hello' }] })]);
     const message = queue.objects.at(-1);
     invariant(message);