@dxos/plugin-markdown 0.8.4-main.2e9d522 → 0.8.4-main.406dc2a

package/src/components/MarkdownContainer.tsx

@@ -10,35 +10,37 @@ import { Capabilities, Surface, useAppGraph, useCapabilities, usePluginManager }
 import { DXN, Filter, Obj, Query, Type } from '@dxos/echo';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { SpaceCapabilities } from '@dxos/plugin-space';
-import { fullyQualifiedId, getSpace, useQuery, useSpace } from '@dxos/react-client/echo';
+import { useClient } from '@dxos/react-client';
+import { fullyQualifiedId, getSpace } 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,
+  type PopoverMenuGroup,
+  type PopoverMenuItem,
   type PreviewLinkRef,
   type PreviewOptions,
+  insertAtCursor,
+  insertAtLineStart,
 } from '@dxos/react-ui-editor';
 import { DataType } from '@dxos/schema';
 
-import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
 import { useExtensions } from '../extensions';
-import { DocumentType, type MarkdownSettingsProps } from '../types';
+import { Markdown } from '../types';
 import { getFallbackName } from '../util';
 
+import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
+
 export type MarkdownContainerProps = Pick<
   MarkdownEditorProps,
   'role' | 'extensionProviders' | 'viewMode' | 'editorStateStore' | 'onViewModeChange'
 > & {
   id: string;
-  object: DocumentType | DataType.Text | any;
-  settings: MarkdownSettingsProps;
+  object: Markdown.Document | DataType.Text | any;
+  settings: Markdown.Settings;
   selectionManager?: SelectionManager;
 };
 
-const MarkdownContainer = ({
+export const MarkdownContainer = ({
   id,
   role,
   object,
@@ -50,7 +52,7 @@ const MarkdownContainer = ({
 }: MarkdownContainerProps) => {
   const { t } = useTranslation();
   const scrollPastEnd = role === 'article';
-  const doc = Obj.instanceOf(DocumentType, object) ? object : undefined;
+  const doc = Obj.instanceOf(Markdown.Document, object) ? object : undefined;
   const text = Obj.instanceOf(DataType.Text, object) ? object : undefined;
   const [previewBlocks, setPreviewBlocks] = useState<{ link: PreviewLinkRef; el: HTMLElement }[]>([]);
   const previewOptions = useMemo(
@@ -93,8 +95,9 @@ const MarkdownContainer = ({
       ),
     [objectForms, schemaWhiteList],
   );
-  const onLinkQuery = useCallback(
-    async (query?: string): Promise<CommandMenuGroup[]> => {
+
+  const handleLinkQuery = useCallback(
+    async (query?: string): Promise<PopoverMenuGroup[]> => {
       const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
       const results = await space?.db.query(Query.select(filter)).run();
       // TODO(wittjosiah): Use `Obj.Any` type.
@@ -113,7 +116,7 @@ const MarkdownContainer = ({
         results?.objects
           .filter((object) => toLocalizedString(getLabel(object), t).toLowerCase().includes(name))
           // TODO(wittjosiah): Remove `any` type.
-          .map((object: any): CommandMenuItem => {
+          .map((object: any): PopoverMenuItem => {
             const metadata = resolve(Obj.getTypename(object)!);
             const label = toLocalizedString(getLabel(object), t);
             return {
@@ -121,7 +124,7 @@ const MarkdownContainer = ({
               label,
               icon: metadata.icon,
               onSelect: (view, head) => {
-                const link = `[${label}][${Obj.getDXN(object)}]`;
+                const link = `[${label}](${Obj.getDXN(object)})`;
                 if (query?.startsWith('@')) {
                   insertAtLineStart(view, head, `!${link}\n`);
                 } else {
@@ -135,6 +138,7 @@ const MarkdownContainer = ({
     [filter, resolve, space],
   );
 
+  // TODO(burdon): Reconcile variants.
   const editor = doc ? (
     <DocumentEditor
       id={fullyQualifiedId(object)}
@@ -145,7 +149,7 @@ const MarkdownContainer = ({
       settings={settings}
       scrollPastEnd={scrollPastEnd}
       onViewModeChange={onViewModeChange}
-      onLinkQuery={space ? onLinkQuery : undefined}
+      onLinkQuery={space ? handleLinkQuery : undefined}
     />
   ) : text ? (
     <MarkdownEditor
@@ -158,10 +162,9 @@ const MarkdownContainer = ({
       inputMode={settings.editorInputMode}
       scrollPastEnd={scrollPastEnd}
       onViewModeChange={onViewModeChange}
-      onLinkQuery={space ? onLinkQuery : undefined}
+      onLinkQuery={space ? handleLinkQuery : undefined}
     />
   ) : (
-    // TODO(burdon): Normalize with above.
     <MarkdownEditor
       id={id}
       role={role}
@@ -172,7 +175,7 @@ const MarkdownContainer = ({
       inputMode={settings.editorInputMode}
       scrollPastEnd={scrollPastEnd}
       onViewModeChange={onViewModeChange}
-      onLinkQuery={space ? onLinkQuery : undefined}
+      onLinkQuery={space ? handleLinkQuery : undefined}
     />
   );
 
@@ -189,9 +192,9 @@ const MarkdownContainer = ({
 // 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 client = useClient();
+  const dxn = DXN.parse(link.ref);
+  const subject = client.graph.ref(dxn).target;
   const data = useMemo(() => ({ subject }), [subject]);
 
   return createPortal(<Surface role='card--transclusion' data={data} limit={1} />, el);
@@ -199,7 +202,7 @@ const PreviewBlock = ({ link, el }: { link: PreviewLinkRef; el: HTMLElement }) =
 
 type DocumentEditorProps = Omit<MarkdownContainerProps, 'object' | 'extensionProviders' | 'editorStateStore'> &
   Pick<MarkdownEditorProps, 'id' | 'scrollPastEnd' | 'extensions' | 'onLinkQuery'> & {
-    document: DocumentType;
+    document: Markdown.Document;
   };
 
 export const DocumentEditor = ({ id, document: doc, settings, viewMode, ...props }: DocumentEditorProps) => {

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

@@ -2,21 +2,21 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { createDocAccessor, createObject } from '@dxos/react-client/echo';
+import { withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
 import { automerge, translations as editorTranslations } from '@dxos/react-ui-editor';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { Stack, StackItem } from '@dxos/react-ui-stack';
 
-import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
 import { translations } from '../../translations';
 
+import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
+
 const content = Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n');
 
 type StoryProps = MarkdownEditorProps & {
@@ -27,33 +27,37 @@ type StoryProps = MarkdownEditorProps & {
 const DefaultStory = ({ content = '# Test', toolbar }: StoryProps) => {
   const doc = useMemo(() => createObject({ content }), [content]); // TODO(burdon): Remove dependency on createObject.
   const extensions = useMemo(() => [automerge(createDocAccessor(doc, ['content']))], [doc]);
-  return <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />;
+  return (
+    <Stack orientation='horizontal' rail={false}>
+      <StackItem.Root item={{ id: 'story' }}>
+        <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />
+      </StackItem.Root>
+    </Stack>
+  );
 };
 
-const meta: Meta<typeof MarkdownEditor> = {
+const meta = {
   title: 'plugins/plugin-markdown/MarkdownEditor',
-  component: MarkdownEditor,
+  component: MarkdownEditor as any,
   render: DefaultStory,
-  decorators: [
-    withPluginManager({ plugins: [IntentPlugin()] }),
-    withAttention,
-    withTheme,
-    withLayout({ fullscreen: true }),
-  ],
+  decorators: [withTheme, withPluginManager({ plugins: [IntentPlugin()] }), withAttention],
   parameters: {
+    layout: 'fullscreen',
     translations: [...translations, ...editorTranslations],
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {
     content,
   },
 };
 
-export const WithToolbar = {
+export const WithToolbar: Story = {
   args: {
     toolbar: true,
     content,

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -3,15 +3,13 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { forwardRef, useMemo, useEffect, useCallback, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, 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 { Domino, toLocalizedString, useThemeContext, useTranslation } from '@dxos/react-ui';
 import {
-  CommandMenu,
-  type CommandMenuGroup,
   type DNDOptions,
   type EditorInputMode,
   type EditorSelectionState,
@@ -19,50 +17,50 @@ import {
   EditorToolbar,
   type EditorToolbarActionGraphProps,
   type EditorViewMode,
-  RefPopover,
+  type PopoverMenuGroup,
+  PopoverMenuProvider,
+  type UsePopoverMenuProps,
   type UseTextEditorProps,
   addLink,
-  createElement,
-  coreSlashCommands,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   dropFile,
   editorGutter,
   editorSlots,
-  filterItems,
+  filterMenuGroups,
+  formattingCommands,
   linkSlashCommands,
   processEditorPayload,
   stackItemContentEditorClassNames,
   useEditorToolbarState,
   useFormattingState,
+  usePopoverMenu,
   useTextEditor,
-  useCommandMenu,
-  type UseCommandMenuOptions,
 } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
-import { isNotFalsy, isNonNullable } from '@dxos/util';
+import { isNonNullable, isTruthy } from '@dxos/util';
 
 import { useSelectCurrentThread } from '../../hooks';
-import { MARKDOWN_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { type MarkdownPluginState } from '../../types';
 
 export type MarkdownEditorProps = {
   id: string;
   role?: string;
+  toolbar?: boolean;
   inputMode?: EditorInputMode;
   scrollPastEnd?: boolean;
-  slashCommandGroups?: CommandMenuGroup[];
-  toolbar?: boolean;
+  slashCommandGroups?: PopoverMenuGroup[];
   customActions?: EditorToolbarActionGraphProps['customActions'];
   // TODO(wittjosiah): Generalize custom toolbar actions (e.g. comment, upload, etc.)
   viewMode?: EditorViewMode;
   editorStateStore?: EditorStateStore;
   onViewModeChange?: (id: string, mode: EditorViewMode) => void;
-  onLinkQuery?: (query?: string) => Promise<CommandMenuGroup[]>;
+  onLinkQuery?: (query?: string) => Promise<PopoverMenuGroup[]>;
   onFileUpload?: (file: File) => Promise<FileInfo | undefined>;
-} & Pick<UseTextEditorProps, 'initialValue' | 'extensions'> &
-  Partial<Pick<MarkdownPluginState, 'extensionProviders'>>;
+} & (Pick<UseTextEditorProps, 'initialValue' | 'extensions'> &
+  Partial<Pick<MarkdownPluginState, 'extensionProviders'>>);
 
 /**
  * Base markdown editor component.
@@ -70,66 +68,67 @@ export type MarkdownEditorProps = {
  * This allows it to be used as a common editor for markdown content on arbitrary backends (e.g. files).
  */
 export const MarkdownEditor = ({
-  extensions: _extensions,
+  extensions: extensionsParam,
   slashCommandGroups,
   onLinkQuery,
   ...props
 }: MarkdownEditorProps) => {
   const { t } = useTranslation();
-  const viewRef = useRef<EditorView>();
+  const viewRef = useRef<EditorView>(null);
 
-  const getMenu = useCallback(
-    (trigger: string, query?: string) => {
+  const getMenu = useCallback<NonNullable<UsePopoverMenuProps['getMenu']>>(
+    ({ text, trigger }) => {
       switch (trigger) {
-        case '@':
-          return onLinkQuery?.(query) ?? [];
+        case '@': {
+          return onLinkQuery?.(text) ?? [];
+        }
+
         case '/':
-        default:
-          return filterItems([coreSlashCommands, linkSlashCommands, ...(slashCommandGroups ?? [])], (item) =>
-            query ? toLocalizedString(item.label, t).toLowerCase().includes(query.toLowerCase()) : true,
+        default: {
+          return filterMenuGroups([formattingCommands, linkSlashCommands, ...(slashCommandGroups ?? [])], (item) =>
+            text ? toLocalizedString(item.label, t).toLowerCase().includes(text.toLowerCase()) : true,
           );
+        }
       }
     },
     [onLinkQuery, slashCommandGroups],
   );
 
-  const options = useMemo<UseCommandMenuOptions>(() => {
+  const options = useMemo<UsePopoverMenuProps>(() => {
     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.' }),
-          ]);
-        },
+        content: () =>
+          Domino.of('div')
+            .children(
+              Domino.of('span').text('Press'),
+              ...trigger.map((text) =>
+                Domino.of('span')
+                  .classNames('mx-1 px-1.5 pt-[1px] pb-[2px] border border-separator rounded-sm')
+                  .text(text),
+              ),
+              Domino.of('span').text('for commands.'),
+            )
+            .build(),
       },
       getMenu,
     };
-  }, [getMenu]);
-
-  const { commandMenu, groupsRef, currentItem, onSelect, ...refPopoverProps } = useCommandMenu(options);
+  }, [onLinkQuery, getMenu]);
 
-  const extensions = useMemo(() => [_extensions, commandMenu].filter(isNotFalsy), [_extensions, commandMenu]);
+  const { groupsRef, extension, ...commandMenuProps } = usePopoverMenu(options);
+  const extensions = useMemo(() => [extensionsParam, extension].filter(isTruthy), [extensionsParam, extension]);
 
   return (
-    <RefPopover modal={false} {...refPopoverProps}>
+    <PopoverMenuProvider view={viewRef.current} groups={groupsRef.current} {...commandMenuProps}>
       <MarkdownEditorImpl ref={viewRef} {...props} extensions={extensions} />
-      <CommandMenu groups={groupsRef.current} currentItem={currentItem} onSelect={onSelect} />
-    </RefPopover>
+    </PopoverMenuProvider>
   );
 };
 
-const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProps>(
+const MarkdownEditorImpl = forwardRef<EditorView | null, MarkdownEditorProps>(
   (
     {
       id,
@@ -147,7 +146,7 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
     },
     forwardedRef,
   ) => {
-    const { t } = useTranslation(MARKDOWN_PLUGIN);
+    const { t } = useTranslation(meta.id);
     const { themeMode } = useThemeContext();
     const toolbarState = useEditorToolbarState({ viewMode });
     const formattingObserver = useFormattingState(toolbarState);
@@ -185,14 +184,15 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
             readOnly: viewMode === 'readonly',
             placeholder: t('editor placeholder'),
             scrollPastEnd: role === 'section' ? false : scrollPastEnd,
+            search: true,
           }),
-          createMarkdownExtensions({ themeMode }),
+          createMarkdownExtensions(),
           createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: editorSlots }),
           editorGutter,
           role !== 'section' && onFileUpload && dropFile({ onDrop: handleDrop }),
           providerExtensions,
           extensions,
-        ].filter(isNotFalsy),
+        ].filter(isTruthy),
         ...(role !== 'section' && {
           id,
           scrollTo,
@@ -205,7 +205,7 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
       [id, formattingObserver, viewMode, themeMode, extensions, providerExtensions],
     );
 
-    useImperativeHandle(forwardedRef, () => editorView, [editorView]);
+    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => editorView, [editorView]);
     useTest(editorView);
     useSelectCurrentThread(editorView, id);
 
@@ -284,7 +284,7 @@ const MarkdownEditorImpl = forwardRef<EditorView | undefined, MarkdownEditorProp
 
 // Expose editor view for playwright tests.
 // TODO(wittjosiah): Find a better way to expose this or find a way to limit it to test runs.
-const useTest = (view?: EditorView) => {
+const useTest = (view: EditorView | null) => {
   useEffect(() => {
     const composer = (window as any).composer;
     if (composer) {

package/src/components/MarkdownSettings/MarkdownSettings.tsx

@@ -6,100 +6,103 @@ 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 { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
-import { MARKDOWN_PLUGIN } from '../../meta';
-import { type MarkdownSettingsProps } from '../../types';
+import { meta } from '../../meta';
+import { type Markdown } from '../../types';
 
-export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps }) => {
-  const { t } = useTranslation(MARKDOWN_PLUGIN);
+export const MarkdownSettings = ({ settings }: { settings: Markdown.Settings }) => {
+  const { t } = useTranslation(meta.id);
 
   // TODO(wittjosiah): Add skill test confirmation for entering vim mode.
   return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('default view mode label')}>
-        <Select.Root
-          value={settings.defaultViewMode}
-          onValueChange={(value) => {
-            settings.defaultViewMode = value as EditorViewMode;
-          }}
-        >
-          <Select.TriggerButton />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {EditorViewModes.map((mode) => (
-                  <Select.Option key={mode} value={mode}>
-                    {t(`${mode} mode label`, { ns: 'react-ui-editor' })}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
+    <ControlPage>
+      <ControlSection title={t('settings title', { ns: meta.id })}>
+        <ControlGroup>
+          <ControlItemInput title={t('default view mode label')}>
+            <Select.Root
+              value={settings.defaultViewMode}
+              onValueChange={(value) => {
+                settings.defaultViewMode = value as EditorViewMode;
+              }}
+            >
+              <Select.TriggerButton />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {EditorViewModes.map((mode) => (
+                      <Select.Option key={mode} value={mode}>
+                        {t(`${mode} mode label`, { ns: 'react-ui-editor' })}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('editor input mode label')}>
-        <Select.Root
-          value={settings.editorInputMode ?? 'default'}
-          onValueChange={(value) => {
-            settings.editorInputMode = value as EditorInputMode;
-          }}
-        >
-          <Select.TriggerButton placeholder={t('select editor input mode placeholder')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {EditorInputModes.map((mode) => (
-                  <Select.Option key={mode} value={mode}>
-                    {t(`settings editor input mode ${mode} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('editor input mode label')}>
+            <Select.Root
+              value={settings.editorInputMode ?? 'default'}
+              onValueChange={(value) => {
+                settings.editorInputMode = value as EditorInputMode;
+              }}
+            >
+              <Select.TriggerButton placeholder={t('select editor input mode placeholder')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {EditorInputModes.map((mode) => (
+                      <Select.Option key={mode} value={mode}>
+                        {t(`settings editor input mode ${mode} label`)}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings toolbar label')}>
-        <Input.Switch checked={settings.toolbar} onCheckedChange={(checked) => (settings.toolbar = !!checked)} />
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings toolbar label')}>
+            <Input.Switch checked={settings.toolbar} onCheckedChange={(checked) => (settings.toolbar = !!checked)} />
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings numbered headings label')}>
-        <Input.Switch
-          checked={settings.numberedHeadings}
-          onCheckedChange={(checked) => (settings.numberedHeadings = !!checked)}
-        />
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings numbered headings label')}>
+            <Input.Switch
+              checked={settings.numberedHeadings}
+              onCheckedChange={(checked) => (settings.numberedHeadings = !!checked)}
+            />
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings folding label')}>
-        <Input.Switch checked={settings.folding} onCheckedChange={(checked) => (settings.folding = !!checked)} />
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings folding label')}>
+            <Input.Switch checked={settings.folding} onCheckedChange={(checked) => (settings.folding = !!checked)} />
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings experimental label')}>
-        <Input.Switch
-          checked={settings.experimental}
-          onCheckedChange={(checked) => (settings.experimental = !!checked)}
-        />
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings experimental label')}>
+            <Input.Switch
+              checked={settings.experimental}
+              onCheckedChange={(checked) => (settings.experimental = !!checked)}
+            />
+          </ControlItemInput>
 
-      <DeprecatedFormInput
-        label={t('settings debug label')}
-        secondary={
-          settings.debug ? (
-            <Input.Root>
+          <ControlItemInput title={t('settings debug label')}>
+            <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
+          </ControlItemInput>
+
+          {settings.debug && (
+            <ControlItemInput title={t('settings debug textarea label', { ns: meta.id })}>
               <Input.TextArea
                 rows={5}
                 value={settings.typewriter}
                 onChange={({ target: { value } }) => (settings.typewriter = value)}
                 placeholder={t('settings debug placeholder')}
               />
-            </Input.Root>
-          ) : undefined
-        }
-      >
-        <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
-      </DeprecatedFormInput>
-    </DeprecatedFormContainer>
+            </ControlItemInput>
+          )}
+        </ControlGroup>
+      </ControlSection>
+    </ControlPage>
   );
 };