@dxos/plugin-markdown 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/components/MarkdownContainer.tsx

@@ -3,119 +3,109 @@
 //
 
 import { type Extension } from '@codemirror/state';
-import { Rx } from '@effect-rx/rx-react';
-import React, { useMemo } from 'react';
+import { Atom } from '@effect-atom/atom-react';
+import React, { forwardRef, useMemo } from 'react';
 
-import { Capabilities, useAppGraph, useCapabilities } from '@dxos/app-framework';
+import { Common } from '@dxos/app-framework';
+import { type SurfaceComponentProps, useAppGraph, useCapabilities } from '@dxos/app-framework/react';
 import { Obj } from '@dxos/echo';
-import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { useActionRunner } from '@dxos/plugin-graph';
+import { useObject } from '@dxos/react-client/echo';
 import { type SelectionManager } from '@dxos/react-ui-attention';
-import { StackItem } from '@dxos/react-ui-stack';
-import { DataType } from '@dxos/schema';
+import { Layout } from '@dxos/react-ui-mosaic';
+import { Text } from '@dxos/schema';
 
-import { MarkdownCapabilities } from '../capabilities';
-import { type DocumentType, useLinkQuery } from '../hooks';
-import { Markdown, type MarkdownPluginState } from '../types';
+import { useLinkQuery } from '../hooks';
+import { Markdown, MarkdownCapabilities, type MarkdownPluginState } from '../types';
 
 import { MarkdownEditor, type MarkdownEditorContentProps, type MarkdownEditorRootProps } from './MarkdownEditor';
 
-export type MarkdownContainerProps = {
-  role?: string;
-  object: DocumentType;
-  settings: Markdown.Settings;
-  selectionManager?: SelectionManager;
-} & (Pick<MarkdownEditorRootProps, 'id' | 'viewMode' | 'onViewModeChange'> &
-  Pick<MarkdownEditorContentProps, 'editorStateStore'> &
-  Pick<MarkdownPluginState, 'extensionProviders'>);
-
-// TODO(burdon): Attention doesn't update in storybook.
-// TODO(burdon): Toolbar state (currently not working in labs: e.g., heading, list, table).
-//  Heading state is correct (see react-ui-editor headings.ts, but the toolbar isn't updated).
-// TODO(burdon): View mode (currently not working in labs).
-// TODO(burdon): Test update document name.
-// TODO(burdon): Test comment threads.
-// TODO(burdon): Test preview blocks.
-// TODO(burdon): Test file upload.
-
-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(DataType.Text, object);
-  const attendableId = isDocument ? fullyQualifiedId(object) : 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 [];
-    }
-
-    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]);
-
-  // Toolbar actions from app graph.
-  const { graph } = useAppGraph();
-  const customActions = useMemo(() => {
-    return Rx.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;
-    }
-
-    return async (file: File) => upload(space, file);
-  }, [space, upload]);
-
-  // 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>
-  );
-};
+export type MarkdownContainerProps = SurfaceComponentProps<
+  Markdown.Document | Text.Text,
+  {
+    id: string;
+    settings: Markdown.Settings;
+    selectionManager?: SelectionManager;
+  } & Pick<MarkdownEditorRootProps, 'viewMode' | 'onViewModeChange'> &
+    Pick<MarkdownEditorContentProps, 'editorStateStore'> &
+    Pick<MarkdownPluginState, 'extensionProviders'>
+>;
+
+export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerProps>(
+  ({ role, subject: object, id, settings, extensionProviders, ...props }, forwardedRef) => {
+    const db = Obj.isObject(object) ? Obj.getDatabase(object) : undefined;
+    const attendableId = Obj.instanceOf(Markdown.Document, object) ? Obj.getDXN(object).toString() : undefined;
+    const [docContent] = useObject(Obj.instanceOf(Markdown.Document, object) ? object.content : undefined, 'content');
+    const [textContent] = useObject(Obj.instanceOf(Text.Text, object) ? object : undefined, 'content');
+    const initialValue = docContent ?? textContent;
+
+    // Extensions from other plugins.
+    // TODO(burdon): Document MarkdownPluginState.extensionProviders
+    const otherExtensionProviders = useCapabilities(MarkdownCapabilities.Extensions);
+    const extensions = useMemo<Extension[]>(() => {
+      if (!Obj.instanceOf(Markdown.Document, object) && !Obj.instanceOf(Text.Text, 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 acc;
+        }, []);
+    }, [extensionProviders, otherExtensionProviders, object]);
+
+    // Toolbar actions from app graph.
+    const { graph } = useAppGraph();
+    const runAction = useActionRunner();
+    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(Common.Capability.FileUploader);
+    const handleFileUpload = useMemo(() => {
+      if (!db || !upload) {
+        return undefined;
+      }
+
+      return async (file: File) => upload(db, file);
+    }, [db, upload]);
+
+    // Query for @ refs.
+    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}
+        >
+          {settings.toolbar && (
+            <MarkdownEditor.Toolbar id={attendableId ?? id} role={role} customActions={customActions} />
+          )}
+          <MarkdownEditor.Content initialValue={initialValue} scrollPastEnd={role === 'article'} />
+          <MarkdownEditor.Blocks />
+        </MarkdownEditor.Root>
+      </Layout.Main>
+    );
+  },
+);
 
 export default MarkdownContainer;

package/src/components/MarkdownEditor/FileUpload.tsx

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

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

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

package/src/components/MarkdownEditor/MarkdownEditor.tsx

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

package/src/components/MarkdownEditor/MarkdownEditorContent.tsx

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