@dxos/plugin-markdown 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-markdown",
-  "version": "0.8.4-main.9be5663bfe",
+  "version": "0.8.4-main.abd8ff62ef",
   "description": "DXOS Surface plugin for interacting with Markdown",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -15,17 +15,22 @@
   "imports": {
     "#blueprints": "./src/blueprints/index.ts",
     "#capabilities": {
-      "source": "./src/capabilities/index.ts",
-      "types": "./src/capabilities/index.ts",
       "browser": "./src/capabilities/index.ts",
-      "node": "./src/capabilities/node.ts"
+      "node": "./src/capabilities/node.ts",
+      "default": "./src/capabilities/index.ts"
     },
     "#components": "./src/components/index.ts",
     "#containers": "./src/containers/index.ts",
     "#hooks": "./src/hooks/index.ts",
     "#meta": "./src/meta.ts",
     "#operations": "./src/operations/index.ts",
+    "#plugin": {
+      "browser": "./src/MarkdownPlugin.tsx",
+      "node": "./src/MarkdownPlugin.node.ts",
+      "default": "./src/MarkdownPlugin.tsx"
+    },
     "#testing": "./src/testing.ts",
+    "#translations": "./src/translations.ts",
     "#types": "./src/types/index.ts"
   },
   "exports": {
@@ -41,12 +46,6 @@
       "browser": "./dist/lib/browser/blueprints/index.mjs",
       "node": "./dist/lib/node-esm/blueprints/index.mjs"
     },
-    "./cli": {
-      "source": "./src/cli/index.ts",
-      "types": "./dist/types/src/cli/index.d.ts",
-      "browser": "./dist/lib/browser/cli/index.mjs",
-      "node": "./dist/lib/node-esm/cli/index.mjs"
-    },
     "./operations": {
       "source": "./src/operations/index.ts",
       "types": "./dist/types/src/operations/index.d.ts",
@@ -59,6 +58,12 @@
       "browser": "./dist/lib/browser/testing.mjs",
       "node": "./dist/lib/node-esm/testing.mjs"
     },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
+    },
     "./types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
@@ -67,22 +72,6 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "blueprints": [
-        "dist/types/src/blueprints/index.d.ts"
-      ],
-      "operations": [
-        "dist/types/src/operations/index.d.ts"
-      ],
-      "toolkit": [
-        "dist/types/src/toolkit.d.ts"
-      ],
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -98,43 +87,41 @@
     "@effect/experimental": "0.58.0",
     "@radix-ui/react-context": "1.1.1",
     "react-dropzone": "^14.2.3",
-    "@dxos/ai": "0.8.4-main.9be5663bfe",
-    "@dxos/async": "0.8.4-main.9be5663bfe",
-    "@dxos/app-framework": "0.8.4-main.9be5663bfe",
-    "@dxos/app-toolkit": "0.8.4-main.9be5663bfe",
-    "@dxos/blueprints": "0.8.4-main.9be5663bfe",
-    "@dxos/client-protocol": "0.8.4-main.9be5663bfe",
-    "@dxos/assistant": "0.8.4-main.9be5663bfe",
-    "@dxos/echo": "0.8.4-main.9be5663bfe",
-    "@dxos/effect": "0.8.4-main.9be5663bfe",
-    "@dxos/functions": "0.8.4-main.9be5663bfe",
-    "@dxos/functions-runtime": "0.8.4-main.9be5663bfe",
-    "@dxos/echo-db": "0.8.4-main.9be5663bfe",
-    "@dxos/invariant": "0.8.4-main.9be5663bfe",
-    "@dxos/keys": "0.8.4-main.9be5663bfe",
-    "@dxos/lit-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/log": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-client": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-attention": "0.8.4-main.9be5663bfe",
-    "@dxos/operation": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-graph": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-preview": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-space": "0.8.4-main.9be5663bfe",
-    "@dxos/react-hooks": "0.8.4-main.9be5663bfe",
-    "@dxos/react-client": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-editor": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-deck": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-form": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-menu": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-mosaic": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-stack": "0.8.4-main.9be5663bfe",
-    "@dxos/ui": "0.8.4-main.9be5663bfe",
-    "@dxos/schema": "0.8.4-main.9be5663bfe",
-    "@dxos/types": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-editor": "0.8.4-main.9be5663bfe",
-    "@dxos/util": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-attention": "0.8.4-main.9be5663bfe"
+    "@dxos/ai": "0.8.4-main.abd8ff62ef",
+    "@dxos/app-framework": "0.8.4-main.abd8ff62ef",
+    "@dxos/assistant": "0.8.4-main.abd8ff62ef",
+    "@dxos/app-toolkit": "0.8.4-main.abd8ff62ef",
+    "@dxos/async": "0.8.4-main.abd8ff62ef",
+    "@dxos/client-protocol": "0.8.4-main.abd8ff62ef",
+    "@dxos/compute": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo": "0.8.4-main.abd8ff62ef",
+    "@dxos/effect": "0.8.4-main.abd8ff62ef",
+    "@dxos/functions-runtime": "0.8.4-main.abd8ff62ef",
+    "@dxos/invariant": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo-db": "0.8.4-main.abd8ff62ef",
+    "@dxos/keys": "0.8.4-main.abd8ff62ef",
+    "@dxos/lit-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/log": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-attention": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-deck": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-space": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-graph": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-preview": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-attention": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-editor": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-form": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-hooks": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-mosaic": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-stack": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-menu": "0.8.4-main.abd8ff62ef",
+    "@dxos/schema": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-editor": "0.8.4-main.abd8ff62ef",
+    "@dxos/util": "0.8.4-main.abd8ff62ef",
+    "@dxos/types": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui": "0.8.4-main.abd8ff62ef"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -144,14 +131,14 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/debug": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/random": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-testing": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe"
+    "vite": "^8.0.10",
+    "@dxos/debug": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/random": "0.8.4-main.abd8ff62ef",
+    "@dxos/storybook-utils": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-testing": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -159,8 +146,8 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "publishConfig": {
     "access": "public"

package/src/{cli/plugin.ts → MarkdownPlugin.node.ts}

@@ -1,12 +1,12 @@
 //
-// Copyright 2025 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
 import * as Effect from 'effect/Effect';
 
 import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { type CreateObject } from '@dxos/plugin-space/types';
 import { Text } from '@dxos/schema';
@@ -37,3 +37,5 @@ export const MarkdownPlugin = Plugin.define(meta).pipe(
   AppPlugin.addSchemaModule({ schema: [Markdown.Document, Text.Text] }),
   Plugin.make,
 );
+
+export default MarkdownPlugin;

package/src/MarkdownPlugin.test.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { ClientPlugin } from '@dxos/plugin-client';
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { MarkdownPlugin } from '#plugin';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('MarkdownPlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [ClientPlugin({}), MarkdownPlugin()],
+    });
+
+    expect(harness.manager.getActive()).toEqual(
+      expect.arrayContaining([moduleId('metadata'), moduleId('schema'), moduleId('OperationHandler')]),
+    );
+  });
+});

package/src/MarkdownPlugin.tsx

@@ -7,12 +7,12 @@ import * as Option from 'effect/Option';
 
 import { Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
 import { Annotation, type Obj, Ref } from '@dxos/echo';
 import { createDocAccessor, getTextInRange } from '@dxos/echo-db';
-import { Operation } from '@dxos/operation';
 import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { type CreateObject } from '@dxos/plugin-space/types';
-import { translations as editorTranslations } from '@dxos/react-ui-editor';
+import { translations as editorTranslations } from '@dxos/react-ui-editor/translations';
 import { Text } from '@dxos/schema';
 
 import { MarkdownBlueprint } from '#blueprints';
@@ -27,9 +27,9 @@ import {
 } from '#capabilities';
 import { meta } from '#meta';
 import { MarkdownOperation } from '#operations';
+import { translations } from '#translations';
 import { Markdown, MarkdownEvents } from '#types';
 
-import { translations } from './translations';
 import { serializer } from './util';
 
 export const MarkdownPlugin = Plugin.define(meta).pipe(
@@ -76,7 +76,7 @@ export const MarkdownPlugin = Plugin.define(meta).pipe(
   AppPlugin.addSchemaModule({ schema: [Markdown.Document, Text.Text] }),
   AppPlugin.addSurfaceModule({
     activate: ReactSurface,
-    activatesBefore: [MarkdownEvents.SetupExtensions],
+    firesBeforeActivation: [MarkdownEvents.SetupExtensions],
   }),
   AppPlugin.addTranslationsModule({ translations: [...translations, ...editorTranslations] }),
   Plugin.addModule({
@@ -102,3 +102,5 @@ export const MarkdownPlugin = Plugin.define(meta).pipe(
   }),
   Plugin.make,
 );
+
+export default MarkdownPlugin;

package/src/blueprints/markdown-blueprint.ts

@@ -2,8 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type AppCapabilities } from '@dxos/app-toolkit';
-import { Blueprint, Template } from '@dxos/blueprints';
+import { Blueprint, Template } from '@dxos/compute';
 import { trim } from '@dxos/util';
 
 import { Create, Open, Update } from '../operations/definitions';
@@ -36,7 +35,7 @@ const make = () =>
     }),
   });
 
-const blueprint: AppCapabilities.BlueprintDefinition = {
+const blueprint: Blueprint.Definition = {
   key: BLUEPRINT_KEY,
   make,
 };

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

@@ -12,10 +12,9 @@ import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { isSpace } from '@dxos/react-client/echo';
 
 import { MarkdownOperation } from '#operations';
+import { translations } from '#translations';
 import { Markdown } from '#types';
 
-import { translations } from '../translations';
-
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     // Get context for lazy capability access in callbacks.

package/src/capabilities/artifact-definition.ts

@@ -11,7 +11,7 @@ import * as Schema from 'effect/Schema';
 import { ToolResult, createTool } from '@dxos/ai';
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { ArtifactId, createArtifactElement } from '@dxos/assistant';
-import { defineArtifact } from '@dxos/blueprints';
+import { defineArtifact } from '@dxos/compute';
 import { Obj } from '@dxos/echo';
 import { assertArgument, invariant } from '@dxos/invariant';
 import { SpaceOperation } from '@dxos/plugin-space/operations';

package/src/capabilities/blueprint-definition.ts

@@ -6,6 +6,8 @@ import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint } from '@dxos/compute';
 
 import { MarkdownBlueprint } from '#blueprints';
 

package/src/capabilities/index.ts

@@ -3,7 +3,8 @@
 //
 
 import { Capability } from '@dxos/app-framework';
-import { OperationHandlerSet } from '@dxos/operation';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint, OperationHandlerSet } from '@dxos/compute';
 
 export const AnchorSort = Capability.lazy('AnchorSort', () => import('./anchor-sort'));
 export const AppGraphSerializer = Capability.lazy('AppGraphSerializer', () => import('./app-graph-serializer'));

package/src/capabilities/node.ts

@@ -3,7 +3,7 @@
 //
 
 import { Capability } from '@dxos/app-framework';
-import { OperationHandlerSet } from '@dxos/operation';
+import { OperationHandlerSet } from '@dxos/compute';
 
 export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
   'OperationHandler',

package/src/capabilities/operation-handler.ts

@@ -5,7 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import type { OperationHandlerSet } from '@dxos/operation';
+import type { OperationHandlerSet } from '@dxos/compute';
 
 import { MarkdownOperationHandlerSet } from '#operations';
 

package/src/capabilities/react-surface.tsx

@@ -17,10 +17,10 @@ import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { AttentionCapabilities } from '@dxos/plugin-attention/types';
 import { Text } from '@dxos/schema';
-import { type EditorViewMode } from '@dxos/ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 
 import { MarkdownSettings } from '#components';
-import { MarkdownCard, MarkdownContainer, type MarkdownContainerProps } from '#containers';
+import { MarkdownCard, MarkdownEditableCard, MarkdownContainer, type MarkdownContainerProps } from '#containers';
 import { meta } from '#meta';
 import { Markdown, MarkdownCapabilities } from '#types';
 
@@ -48,9 +48,12 @@ export default Capability.makeModule(() =>
       Surface.create({
         id: 'surface.text',
         // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
-        role: ['article', 'section', 'tabpanel'],
         // TODO(burdon): Why is attendableId required? See EventArticle.tsx
-        filter: AppSurface.objectArticle(Text.Text),
+        filter: AppSurface.oneOf(
+          AppSurface.object(AppSurface.Article, Text.Text),
+          AppSurface.object(AppSurface.Section, Text.Text),
+          AppSurface.object(AppSurface.Tabpanel, Text.Text),
+        ),
         component: ({ data, role, ref }) => {
           return (
             <Container
@@ -65,17 +68,21 @@ export default Capability.makeModule(() =>
       }),
       Surface.create({
         id: 'surface.plugin-settings',
-        role: 'article',
-        filter: AppSurface.settingsArticle(meta.id),
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
         component: ({ data: { subject } }) => {
           const { settings, updateSettings } = useSettingsState<Markdown.Settings>(subject.atom);
           return <MarkdownSettings settings={settings} onSettingsChange={updateSettings} />;
         },
       }),
+      Surface.create({
+        id: 'surface.editable',
+        position: 'hoist',
+        filter: AppSurface.object(AppSurface.Card, [Markdown.Document, Text.Text], (data) => data.editable === true),
+        component: ({ data }) => <MarkdownEditableCard subject={data.subject} />,
+      }),
       Surface.create({
         id: 'surface.preview',
-        role: 'card--content',
-        filter: AppSurface.objectCard([Markdown.Document, Text.Text]),
+        filter: AppSurface.object(AppSurface.Card, [Markdown.Document, Text.Text], (data) => data.editable !== true),
         component: ({ data }) => <MarkdownCard {...data} />,
       }),
     ]),

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

@@ -14,13 +14,14 @@ import { corePlugins } from '@dxos/plugin-testing';
 import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Panel } from '@dxos/react-ui';
 import { AttendableContainer } from '@dxos/react-ui-attention';
-import { Editor, translations as editorTranslations } from '@dxos/react-ui-editor';
+import { Editor } from '@dxos/react-ui-editor';
+import { translations as editorTranslations } from '@dxos/react-ui-editor/translations';
 import { Loading, withLayout } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
 
+import { translations } from '#translations';
 import { Markdown } from '#types';
 
-import { translations } from '../../translations';
 import { MarkdownEditor, MarkdownEditorProvider, type MarkdownEditorProviderProps } from './MarkdownEditor';
 
 type DefaultStoryProps = Omit<MarkdownEditorProviderProps, 'id' | 'extensions' | 'children'>;

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -10,6 +10,7 @@ import React, { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { DXN } from '@dxos/keys';
 import { useClient } from '@dxos/react-client';
@@ -207,21 +208,20 @@ MarkdownEditorContent.displayName = MARKDOWN_EDITOR_CONTENT_NAME;
 const MARKDOWN_EDITOR_TOOLBAR_NAME = 'MarkdownEditor.Toolbar';
 
 type MarkdownEditorToolbarProps = ThemedClassName<
-  Omit<NaturalMarkdownToolbarProps, 'state' | 'editorView' | 'onAction' | 'onFileUpload' | 'onViewModeChange' | 'id'>
+  Omit<NaturalMarkdownToolbarProps, 'editorView' | 'onAction' | 'onFileUpload' | 'onViewModeChange' | 'id'>
 >;
 
 const MarkdownEditorToolbar = (props: MarkdownEditorToolbarProps) => {
   const { id, attendableId, onAction, onFileUpload, onViewModeChange } =
     useMarkdownEditorContext(MARKDOWN_EDITOR_TOOLBAR_NAME);
 
-  const { controller, state } = useEditorContext(MARKDOWN_EDITOR_TOOLBAR_NAME);
+  const { controller } = useEditorContext(MARKDOWN_EDITOR_TOOLBAR_NAME);
 
   return (
     <NaturalMarkdownToolbar
       {...props}
       id={attendableId ?? id}
       editorView={controller?.view ?? undefined}
-      state={state}
       onAction={onAction}
       onFileUpload={onFileUpload}
       onViewModeChange={onViewModeChange}
@@ -259,7 +259,7 @@ const PreviewBlock = ({ el, link }: PreviewBlock) => {
   const subject = client.graph.makeRef(dxn).target;
   const data = useMemo(() => ({ subject }), [subject]);
 
-  return createPortal(<Surface.Surface role='card--content' data={data} limit={1} />, el);
+  return createPortal(<Surface.Surface type={AppSurface.Card} data={data} limit={1} />, el);
 };
 
 //

package/src/components/MarkdownEditor/MarkdownEditorContent.tsx

@@ -17,9 +17,8 @@ import {
 import {
   type EditorSelectionState,
   type EditorStateStore,
-  type EditorViewMode,
   type ThemeExtensionsOptions,
-  compactSlots,
+  mobileSlots,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
@@ -29,6 +28,7 @@ import {
   processEditorPayload,
   editorClassNames,
 } from '@dxos/ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 import { mx } from '@dxos/ui-theme';
 import { isTruthy } from '@dxos/util';
 
@@ -110,7 +110,7 @@ export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEdito
           }),
           createThemeExtensions({
             themeMode,
-            slots: slots ?? (compact ? compactSlots : documentSlots),
+            slots: slots ?? (compact ? mobileSlots : documentSlots),
             syntaxHighlighting: true,
           }),
           createMarkdownExtensions(),

package/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx

@@ -6,8 +6,7 @@ import { type EditorView } from '@codemirror/view';
 import React, { useCallback, useState } from 'react';
 
 import { type FileInfo } from '@dxos/app-toolkit';
-import { invariant } from '@dxos/invariant';
-import { EditorToolbar, type EditorToolbarProps } from '@dxos/react-ui-editor';
+import { Editor, type EditorToolbarProps } from '@dxos/react-ui-editor';
 import { composable, composableProps } from '@dxos/ui-theme';
 
 import { FileUpload, type FileUploadAction } from './FileUpload';
@@ -16,36 +15,26 @@ export type MarkdownEditorToolbarProps = {
   id: string;
   editorView?: EditorView;
   onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
-} & Pick<EditorToolbarProps, 'role' | 'state' | 'customActions' | 'onAction' | 'onViewModeChange'>;
+} & Pick<EditorToolbarProps, 'role' | 'customActions' | 'onAction' | 'onViewModeChange'>;
 
 export const MarkdownEditorToolbar = composable<HTMLDivElement, MarkdownEditorToolbarProps>(
-  (
-    { id, role, state, editorView, customActions, onAction, onFileUpload, onViewModeChange, ...props },
-    forwardedRef,
-  ) => {
+  ({ id, role, editorView, customActions, onAction, onFileUpload, onViewModeChange, ...props }, forwardedRef) => {
     const { className, ...rest } = composableProps(props);
     const [upload, setUpload] = useState<FileUploadAction | null>(null);
     const uploadRef = useCallback((next: FileUploadAction) => setUpload(() => next), []);
 
-    const getView = useCallback(() => {
-      invariant(editorView);
-      return editorView;
-    }, [editorView]);
-
     if (!editorView) {
       return <div className={className} {...rest} ref={forwardedRef} />;
     }
 
     return (
       <div role='none' className='contents' ref={forwardedRef}>
-        <EditorToolbar
+        <Editor.Toolbar
           {...rest}
           classNames={className}
           attendableId={id}
           role={role}
-          state={state}
           customActions={customActions}
-          getView={getView}
           onAction={onAction}
           onImageUpload={upload ?? undefined}
           onViewModeChange={onViewModeChange}

package/src/components/MarkdownSettings/MarkdownSettings.stories.tsx

@@ -6,7 +6,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { MarkdownSettings } from './MarkdownSettings';
 
 const meta = {