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

package/src/components/MarkdownContainer.tsx

@@ -6,41 +6,46 @@ import { type Extension } from '@codemirror/state';
 import { Atom } from '@effect-atom/atom-react';
 import React, { forwardRef, useMemo } from 'react';
 
-import { Capabilities } from '@dxos/app-framework';
-import { useAppGraph, useCapabilities } from '@dxos/app-framework/react';
+import { useCapabilities } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
-import { getSpace } from '@dxos/react-client/echo';
+import { useActionRunner } from '@dxos/plugin-graph';
+import { useObject } from '@dxos/react-client/echo';
+import { Layout } from '@dxos/react-ui';
 import { type SelectionManager } from '@dxos/react-ui-attention';
-import { StackItem } from '@dxos/react-ui-stack';
 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'>);
+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>(
-  ({ 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;
+  ({ 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)) {
+      if (!Obj.instanceOf(Markdown.Document, object) && !Obj.instanceOf(Text.Text, object)) {
         return [];
       }
 
@@ -59,6 +64,7 @@ export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerPro
 
     // Toolbar actions from app graph.
     const { graph } = useAppGraph();
+    const runAction = useActionRunner();
     const customActions = useMemo(() => {
       return Atom.make((get) => {
         const actions = get(graph.actions(id));
@@ -69,24 +75,26 @@ export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerPro
     }, [graph]);
 
     // File upload.
-    const [upload] = useCapabilities(Capabilities.FileUploader);
+    const [upload] = useCapabilities(AppCapabilities.FileUploader);
     const handleFileUpload = useMemo(() => {
-      if (!space || !upload) {
+      if (!db || !upload) {
         return undefined;
       }
 
-      return async (file: File) => upload(space, file);
-    }, [space, upload]);
+      return async (file: File) => upload(db, file);
+    }, [db, upload]);
 
     // Query for @ refs.
-    const handleLinkQuery = useLinkQuery(space);
+    const handleLinkQuery = useLinkQuery(db);
 
     return (
-      <StackItem.Content toolbar={settings.toolbar} ref={forwardedRef}>
+      <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}
@@ -94,13 +102,10 @@ export const MarkdownContainer = forwardRef<HTMLDivElement, MarkdownContainerPro
           {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.Content initialValue={initialValue} scrollPastEnd={role === 'article'} />
           <MarkdownEditor.Blocks />
         </MarkdownEditor.Root>
-      </StackItem.Content>
+      </Layout.Main>
     );
   },
 );

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 FileInfo } from '@dxos/app-toolkit';
+import { addLink } from '@dxos/ui-editor';
 
 export const IMAGE_FILES = ['.jpg', '.jpeg', '.png', '.gif'];
 

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, Obj } from '@dxos/echo';
-import { AttentionPlugin } from '@dxos/plugin-attention';
 import { ClientPlugin } from '@dxos/plugin-client';
+import { corePlugins } from '@dxos/plugin-testing';
 import { useQuery, useSpace } from '@dxos/react-client/echo';
+import { Layout } from '@dxos/react-ui';
 import { 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 { translations } from '../../translations';
 import { Markdown } from '../../types';
@@ -30,19 +30,18 @@ const DefaultStory = (props: StoryProps) => {
   const [doc] = useQuery(space?.db, Filter.type(Markdown.Document));
   const id = doc && Obj.getDXN(doc).toString();
   const attentionAttrs = useAttentionAttributes(id);
-
   if (!id) {
     return null;
   }
 
   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>
   );
 };
@@ -52,23 +51,23 @@ const meta: Meta<typeof DefaultStory> = {
   component: DefaultStory,
   render: DefaultStory as any,
   decorators: [
-    withTheme,
-    withLayout({ container: 'column' }),
-    // TODO(burdon): Create story without client.
+    withTheme(),
+    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.make({ 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,23 +4,22 @@
 
 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/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { DXN } from '@dxos/keys';
-import { type Live } from '@dxos/live-object';
 import { useClient } from '@dxos/react-client';
 import {
   EditorMenuProvider,
   type EditorToolbarState,
-  type PreviewBlock,
-  type PreviewOptions,
   type UseEditorMenu,
   useEditorMenu,
   useEditorToolbar,
 } from '@dxos/react-ui-editor';
+import { type PreviewBlock, type PreviewOptions } from '@dxos/ui-editor';
 import { isNonNullable } from '@dxos/util';
 
 import {
@@ -49,10 +48,10 @@ type MarkdownEditorContextValue = {
   setEditorView: (view: EditorView) => void;
   extensions: Extension[];
   previewBlocks: PreviewBlock[];
-  toolbarState: Live<EditorToolbarState>;
+  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,7 +64,7 @@ type MarkdownEditorRootProps = PropsWithChildren<
   {
     object?: DocumentType;
     extensions?: Extension[];
-  } & Pick<MarkdownEditorContextValue, 'id' | 'onFileUpload' | 'onViewModeChange' | 'viewMode'> &
+  } & 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
@@ -93,7 +92,7 @@ const MarkdownEditorRoot = ({
         setPreviewBlocks((prev) => [...prev, block]);
       },
       removeBlockContainer: ({ link }) => {
-        setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
+        setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.dxn !== link.dxn));
       },
     }),
     [],
@@ -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 (
@@ -149,6 +148,8 @@ MarkdownEditorRoot.displayName = 'MarkdownEditor.Root';
 // MarkdownEditor.Main
 //
 
+const MARKDOWN_EDITOR_CONTENT_NAME = 'MarkdownEditor.Content';
+
 type MarkdownEditorContentProps = Omit<NaturalMarkdownEditorContentProps, 'id' | 'extensions' | 'toolbarState'>;
 
 const MarkdownEditorContent = (props: MarkdownEditorContentProps) => {
@@ -160,7 +161,7 @@ const MarkdownEditorContent = (props: MarkdownEditorContentProps) => {
     toolbarState,
     extensions,
     popoverMenu: { groupsRef, ...menuProps },
-  } = useMarkdownEditorContext(MarkdownEditorContent.displayName);
+  } = useMarkdownEditorContext(MARKDOWN_EDITOR_CONTENT_NAME);
 
   return (
     <EditorMenuProvider view={editorView} groups={groupsRef.current} {...menuProps}>
@@ -176,52 +177,56 @@ const MarkdownEditorContent = (props: MarkdownEditorContentProps) => {
   );
 };
 
-MarkdownEditorContent.displayName = 'MarkdownEditor.Content';
+MarkdownEditorContent.displayName = MARKDOWN_EDITOR_CONTENT_NAME;
 
 //
 // MarkdownEditor.Toolbar
 //
 
+const MARKDOWN_EDITOR_TOOLBAR_NAME = 'MarkdownEditor.Toolbar';
+
 type MarkdownEditorToolbarProps = Omit<
   NaturalMarkdownToolbarProps,
-  'state' | 'editorView' | 'onFileUpload' | 'onViewModeChange'
+  'state' | 'editorView' | 'onAction' | 'onFileUpload' | 'onViewModeChange'
 >;
 
 const MarkdownEditorToolbar = (props: MarkdownEditorToolbarProps) => {
-  const { toolbarState, ...rootProps } = useMarkdownEditorContext(MarkdownEditorToolbar.displayName);
+  const { toolbarState, ...rootProps } = useMarkdownEditorContext(MARKDOWN_EDITOR_TOOLBAR_NAME);
 
   return <NaturalMarkdownToolbar {...props} {...rootProps} state={toolbarState} />;
 };
 
-MarkdownEditorToolbar.displayName = 'MarkdownEditor.Toolbar';
+MarkdownEditorToolbar.displayName = MARKDOWN_EDITOR_TOOLBAR_NAME;
 
 //
 // MarkdownEditor.Blocks (embedded objects)
 //
 
+const MARKDOWN_EDITOR_BLOCKS_NAME = 'MarkdownEditor.Blocks';
+
 type MarkdownEditorBlocksProps = {};
 
 const MarkdownEditorBlocks = (_props: MarkdownEditorBlocksProps) => {
-  const { previewBlocks } = useMarkdownEditorContext(MarkdownEditorBlocks.displayName);
+  const { previewBlocks } = useMarkdownEditorContext(MARKDOWN_EDITOR_BLOCKS_NAME);
 
   return (
     <>
       {previewBlocks.map(({ link, el }) => (
-        <PreviewBlock key={link.ref} link={link} el={el} />
+        <PreviewBlock key={link.dxn} link={link} el={el} />
       ))}
     </>
   );
 };
 
-MarkdownEditorBlocks.displayName = 'MarkdownEditor.Blocks';
+MarkdownEditorBlocks.displayName = MARKDOWN_EDITOR_BLOCKS_NAME;
 
 const PreviewBlock = ({ el, link }: PreviewBlock) => {
   const client = useClient();
-  const dxn = DXN.parse(link.ref);
+  const dxn = DXN.parse(link.dxn);
   const subject = client.graph.makeRef(dxn).target;
   const data = useMemo(() => ({ subject }), [subject]);
 
-  return createPortal(<Surface role='card--transclusion' data={data} limit={1} />, el);
+  return createPortal(<Surface.Surface role='card--transclusion' data={data} limit={1} />, el);
 };
 
 //

package/src/components/MarkdownEditor/MarkdownEditorContent.tsx

@@ -3,18 +3,21 @@
 //
 
 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 { type ThemedClassName, 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 ThemeExtensionsOptions,
-  type UseTextEditorProps,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
@@ -23,9 +26,8 @@ import {
   formattingListener,
   processEditorPayload,
   stackItemContentEditorClassNames,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 import { isTruthy } from '@dxos/util';
 
 import { useSelectCurrentThread } from '../../hooks';
@@ -40,7 +42,7 @@ export type MarkdownEditorContentProps = ThemedClassName<{
   scrollPastEnd?: boolean;
   slashCommandGroups?: EditorMenuGroup[];
   editorStateStore?: EditorStateStore;
-  toolbarState?: Live<EditorToolbarState>;
+  toolbarState?: Atom.Writable<EditorToolbarState>;
   onLinkQuery?: (query?: string) => Promise<EditorMenuGroup[]>;
 }> &
   // prettier-ignore
@@ -67,9 +69,17 @@ export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEdito
   ) => {
     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]);
@@ -102,7 +112,7 @@ export const MarkdownEditorContent = forwardRef<EditorView | null, MarkdownEdito
             syntaxHighlighting: true,
           }),
           createMarkdownExtensions(),
-          formattingListener(() => toolbarStateRef.current),
+          toolbarState && formattingListener(updateToolbarState),
           role !== 'section' &&
             onFileUpload &&
             dropFile({

package/src/components/MarkdownEditor/MarkdownEditorToolbar.tsx

@@ -5,10 +5,11 @@
 import { type EditorView } from '@codemirror/view';
 import React, { useCallback, useState } from 'react';
 
-import { type FileInfo } from '@dxos/app-framework';
+import { type FileInfo } from '@dxos/app-toolkit';
 import { invariant } from '@dxos/invariant';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { EditorToolbar, type EditorToolbarProps, type EditorViewMode } from '@dxos/react-ui-editor';
+import { EditorToolbar, type EditorToolbarProps } from '@dxos/react-ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor';
 
 import { FileUpload, type FileUploadAction } from './FileUpload';
 
@@ -17,7 +18,7 @@ export type MarkdownEditorToolbarProps = ThemedClassName<
     id: string;
     editorView?: EditorView;
     onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
-  } & Pick<EditorToolbarProps, 'role' | 'state' | 'customActions' | 'onViewModeChange'>
+  } & Pick<EditorToolbarProps, 'role' | 'state' | 'customActions' | 'onAction' | 'onViewModeChange'>
 >;
 
 export const MarkdownEditorToolbar = ({
@@ -27,6 +28,7 @@ export const MarkdownEditorToolbar = ({
   state,
   editorView,
   customActions,
+  onAction,
   onFileUpload,
   onViewModeChange,
 }: MarkdownEditorToolbarProps) => {
@@ -53,6 +55,7 @@ export const MarkdownEditorToolbar = ({
         state={state}
         customActions={customActions}
         getView={getView}
+        onAction={onAction}
         onImageUpload={upload ?? undefined}
         onViewModeChange={handleViewModeChange}
       />

package/src/components/MarkdownSettings/MarkdownSettings.tsx

@@ -5,25 +5,30 @@
 import React from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/react-ui-editor';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { Settings } from '@dxos/react-ui-form';
+import { type EditorInputMode, EditorInputModes, type EditorViewMode, EditorViewModes } from '@dxos/ui-editor';
 
 import { meta } from '../../meta';
 import { type Markdown } from '../../types';
 
-export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings }) => {
+export type MarkdownSettingsComponentProps = {
+  settings: Markdown.Settings;
+  onSettingsChange: (fn: (current: Markdown.Settings) => Markdown.Settings) => void;
+};
+
+export const MarkdownSettings = ({ settings, onSettingsChange }: MarkdownSettingsComponentProps) => {
   const { t } = useTranslation(meta.id);
 
   // TODO(wittjosiah): Add skill test confirmation for entering vim mode.
   return (
-    <ControlPage>
-      <ControlSection title={t('settings title', { ns: meta.id })}>
-        <ControlGroup>
-          <ControlItemInput title={t('default view mode label')}>
+    <Settings.Root>
+      <Settings.Section title={t('settings title', { ns: meta.id })}>
+        <Settings.Group>
+          <Settings.ItemInput title={t('default view mode label')}>
             <Select.Root
               value={settings.defaultViewMode}
               onValueChange={(value) => {
-                settings.defaultViewMode = value as EditorViewMode;
+                onSettingsChange((s) => ({ ...s, defaultViewMode: value as EditorViewMode }));
               }}
             >
               <Select.TriggerButton />
@@ -32,7 +37,7 @@ export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings })
                   <Select.Viewport>
                     {EditorViewModes.map((mode) => (
                       <Select.Option key={mode} value={mode}>
-                        {t(`${mode} mode label`, { ns: 'react-ui-editor' })}
+                        {t(`${mode} mode label`, { ns: '@dxos/react-ui-editor' })}
                       </Select.Option>
                     ))}
                   </Select.Viewport>
@@ -40,13 +45,13 @@ export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings })
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('editor input mode label')}>
+          <Settings.ItemInput title={t('editor input mode label')}>
             <Select.Root
               value={settings.editorInputMode ?? 'default'}
               onValueChange={(value) => {
-                settings.editorInputMode = value as EditorInputMode;
+                onSettingsChange((s) => ({ ...s, editorInputMode: value as EditorInputMode }));
               }}
             >
               <Select.TriggerButton placeholder={t('select editor input mode placeholder')} />
@@ -63,46 +68,55 @@ export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings })
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings toolbar label')}>
-            <Input.Switch checked={settings.toolbar} onCheckedChange={(checked) => (settings.toolbar = !!checked)} />
-          </ControlItemInput>
+          <Settings.ItemInput title={t('settings toolbar label')}>
+            <Input.Switch
+              checked={settings.toolbar}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, toolbar: !!checked }))}
+            />
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings numbered headings label')}>
+          <Settings.ItemInput title={t('settings numbered headings label')}>
             <Input.Switch
               checked={settings.numberedHeadings}
-              onCheckedChange={(checked) => (settings.numberedHeadings = !!checked)}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, numberedHeadings: !!checked }))}
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings folding label')}>
-            <Input.Switch checked={settings.folding} onCheckedChange={(checked) => (settings.folding = !!checked)} />
-          </ControlItemInput>
+          <Settings.ItemInput title={t('settings folding label')}>
+            <Input.Switch
+              checked={settings.folding}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, folding: !!checked }))}
+            />
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings experimental label')}>
+          <Settings.ItemInput title={t('settings experimental label')}>
             <Input.Switch
               checked={settings.experimental}
-              onCheckedChange={(checked) => (settings.experimental = !!checked)}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, experimental: !!checked }))}
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings debug label')}>
-            <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
-          </ControlItemInput>
+          <Settings.ItemInput title={t('settings debug label')}>
+            <Input.Switch
+              checked={settings.debug}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, debug: !!checked }))}
+            />
+          </Settings.ItemInput>
 
           {settings.debug && (
-            <ControlItemInput title={t('settings debug textarea label', { ns: meta.id })}>
+            <Settings.ItemInput title={t('settings debug textarea label', { ns: meta.id })}>
               <Input.TextArea
                 rows={5}
                 value={settings.typewriter}
-                onChange={({ target: { value } }) => (settings.typewriter = value)}
+                onChange={({ target: { value } }) => onSettingsChange((s) => ({ ...s, typewriter: value }))}
                 placeholder={t('settings debug placeholder')}
               />
-            </ControlItemInput>
+            </Settings.ItemInput>
           )}
-        </ControlGroup>
-      </ControlSection>
-    </ControlPage>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
   );
 };