@dxos/plugin-markdown 0.8.1 → 0.8.2-main.2f9c567

package/src/capabilities/react-surface.tsx

@@ -8,10 +8,10 @@ import { createSurface, contributes, Capabilities, useCapability } from '@dxos/a
 import { isInstanceOf } from '@dxos/echo-schema';
 import { SettingsStore } from '@dxos/local-storage';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { TextType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 
 import { MarkdownCapabilities } from './capabilities';
-import { MarkdownContainer, MarkdownSettings } from '../components';
+import { MarkdownContainer, MarkdownSettings, MarkdownPreview } from '../components';
 import { MARKDOWN_PLUGIN } from '../meta';
 import { DocumentType, isEditorModel, type MarkdownSettingsProps } from '../types';
 
@@ -44,8 +44,8 @@ export default () =>
     createSurface({
       id: `${MARKDOWN_PLUGIN}/text`,
       role: ['article', 'section', 'tabpanel'],
-      filter: (data): data is { id: string; subject: TextType } =>
-        typeof data.id === 'string' && isInstanceOf(TextType, data.subject),
+      filter: (data): data is { id: string; subject: DataType.Text } =>
+        typeof data.id === 'string' && isInstanceOf(DataType.Text, data.subject),
       component: ({ data, role }) => {
         const settingsStore = useCapability(Capabilities.SettingsStore);
         const settings = settingsStore.getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
@@ -95,4 +95,11 @@ export default () =>
         data.subject instanceof SettingsStore && data.subject.prefix === MARKDOWN_PLUGIN,
       component: ({ data: { subject } }) => <MarkdownSettings settings={subject.value} />,
     }),
+    createSurface({
+      id: `${MARKDOWN_PLUGIN}/preview`,
+      role: 'popover',
+      filter: (data): data is { subject: DocumentType | DataType.Text } =>
+        isInstanceOf(DocumentType, data.subject) || isInstanceOf(DataType.Text, data.subject),
+      component: ({ data, role }) => <MarkdownPreview {...data} role={role} />,
+    }),
   ]);

package/src/capabilities/settings.ts

@@ -3,13 +3,13 @@
 //
 
 import { Capabilities, contributes } from '@dxos/app-framework';
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 
 import { MARKDOWN_PLUGIN } from '../meta';
 import { type MarkdownSettingsProps, MarkdownSettingsSchema } from '../types';
 
 export default () => {
-  const settings = create<MarkdownSettingsProps>({
+  const settings = live<MarkdownSettingsProps>({
     defaultViewMode: 'preview',
     toolbar: true,
     numberedHeadings: true,

package/src/capabilities/state.ts

@@ -12,7 +12,6 @@ import { type MarkdownPluginState, type MarkdownSettingsProps } from '../types';
 
 export default (context: PluginsContext) => {
   const state = new LocalStorageStore<MarkdownPluginState>(MARKDOWN_PLUGIN, { extensionProviders: [], viewMode: {} });
-
   state.prop({ key: 'viewMode', type: LocalStorageStore.json<{ [key: string]: EditorViewMode }>() });
 
   // TODO(wittjosiah): Fold into state.
@@ -27,5 +26,6 @@ export default (context: PluginsContext) => {
 
   const setViewMode = (id: string, viewMode: EditorViewMode) => (state.values.viewMode[id] = viewMode);
 
+  // Return object with methods.
   return contributes(MarkdownCapabilities.State, { state: state.values, editorState, getViewMode, setViewMode });
 };

package/src/components/MarkdownContainer.tsx

@@ -7,7 +7,7 @@ import React, { useEffect, useMemo } from 'react';
 import { Capabilities, useCapabilities } from '@dxos/app-framework';
 import { isInstanceOf } from '@dxos/echo-schema';
 import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
-import { TextType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
 import { useExtensions } from '../extensions';
@@ -19,7 +19,7 @@ export type MarkdownContainerProps = Pick<
   'role' | 'extensionProviders' | 'viewMode' | 'editorStateStore' | 'onViewModeChange'
 > & {
   id: string;
-  object: DocumentType | TextType | any;
+  object: DocumentType | DataType.Text | any;
   settings: MarkdownSettingsProps;
 };
 
@@ -36,7 +36,7 @@ const MarkdownContainer = ({
 }: MarkdownContainerProps) => {
   const scrollPastEnd = role === 'article';
   const doc = isInstanceOf(DocumentType, object) ? object : undefined;
-  const text = isInstanceOf(TextType, object) ? object : undefined;
+  const text = isInstanceOf(DataType.Text, object) ? object : undefined;
   const extensions = useExtensions({ document: doc, text, id, settings, viewMode, editorStateStore });
 
   if (doc) {
@@ -68,6 +68,7 @@ const MarkdownContainer = ({
       />
     );
   } else {
+    // TODO(burdon): Normalize with above.
     return (
       <MarkdownEditor
         id={id}

package/src/components/{MarkdownEditor.stories.tsx → MarkdownEditor/MarkdownEditor.stories.tsx}

@@ -10,19 +10,14 @@ 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 { Main } from '@dxos/react-ui';
-import { AttendableContainer } from '@dxos/react-ui-attention';
 import { withAttention } from '@dxos/react-ui-attention/testing';
-import { editorWithToolbarLayout, automerge, translations as editorTranslations } from '@dxos/react-ui-editor';
-import { topbarBlockPaddingStart } from '@dxos/react-ui-theme';
+import { automerge, translations as editorTranslations } from '@dxos/react-ui-editor';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';
-import translations from '../translations';
+import translations from '../../translations';
 
-const content = Array.from({ length: 100 })
-  .map((_, i) => `Line ${i + 1}`)
-  .join('\n');
+const content = Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join('\n');
 
 type StoryProps = MarkdownEditorProps & {
   content?: string;
@@ -32,43 +27,35 @@ type StoryProps = MarkdownEditorProps & {
 const DefaultStory = ({ content = '# Test', toolbar }: StoryProps) => {
   const doc = useMemo(() => createObject({ content }), [content]);
   const extensions = useMemo(() => [automerge(createDocAccessor(doc, ['content']))], [doc]);
-  return (
-    <Main.Content
-      bounce
-      data-toolbar={toolbar ? 'enabled' : 'disabled'}
-      classNames={[topbarBlockPaddingStart, editorWithToolbarLayout]}
-    >
-      <AttendableContainer id='test'>
-        <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />
-      </AttendableContainer>
-    </Main.Content>
-  );
-};
-
-export const Default = {
-  args: {
-    content,
-  },
-};
-
-export const WithToolbar = {
-  args: {
-    content,
-    toolbar: true,
-  },
+  return <MarkdownEditor id='test' initialValue={doc.content} extensions={extensions} toolbar={toolbar} />;
 };
 
 const meta: Meta<typeof MarkdownEditor> = {
-  title: 'plugins/plugin-markdown/EditorMain',
+  title: 'plugins/plugin-markdown/MarkdownEditor',
   component: MarkdownEditor,
   render: DefaultStory,
   decorators: [
     withTheme,
-    withLayout({ tooltips: true }),
+    withLayout({ tooltips: true, fullscreen: true }),
     withAttention,
     withPluginManager({ plugins: [IntentPlugin()] }),
   ],
-  parameters: { layout: 'fullscreen', translations: [...translations, ...editorTranslations] },
+  parameters: {
+    translations: [...translations, ...editorTranslations],
+  },
 };
 
 export default meta;
+
+export const Default = {
+  args: {
+    content,
+  },
+};
+
+export const WithToolbar = {
+  args: {
+    toolbar: true,
+    content,
+  },
+};

package/src/components/{MarkdownEditor.tsx → MarkdownEditor/MarkdownEditor.tsx}

@@ -38,9 +38,9 @@ import {
 import { StackItem } from '@dxos/react-ui-stack';
 import { isNotFalsy, isNonNullable } from '@dxos/util';
 
-import { useSelectCurrentThread } from '../hooks';
-import { MARKDOWN_PLUGIN } from '../meta';
-import { type MarkdownPluginState } from '../types';
+import { useSelectCurrentThread } from '../../hooks';
+import { MARKDOWN_PLUGIN } from '../../meta';
+import { type MarkdownPluginState } from '../../types';
 
 export type MarkdownEditorProps = {
   id: string;
@@ -211,7 +211,7 @@ export const MarkdownEditor = ({
   );
 
   return (
-    <StackItem.Content toolbar={!!toolbar}>
+    <StackItem.Content toolbar={!!toolbar} classNames='is-full min-bs-0'>
       {toolbar && (
         <>
           <EditorToolbar
@@ -231,6 +231,7 @@ export const MarkdownEditor = ({
         data-testid='composer.markdownRoot'
         data-toolbar={toolbar ? 'enabled' : 'disabled'}
         className={stackItemContentEditorClassNames(role)}
+        data-popover-collision-boundary={true}
         {...focusAttributes}
       />
     </StackItem.Content>

package/src/components/MarkdownEditor/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './MarkdownEditor';

package/src/components/MarkdownPreview/MarkdownPreview.stories.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { create } from '@dxos/echo-schema';
+import { DocumentType } from '@dxos/plugin-markdown/types';
+import { faker } from '@dxos/random';
+import { makeRef } from '@dxos/react-client/echo';
+import { Icon, Popover } from '@dxos/react-ui';
+import { DataType } from '@dxos/schema';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { MarkdownPreview } from './MarkdownPreview';
+import translations from '../../translations';
+
+faker.seed(1234);
+
+const meta: Meta<typeof MarkdownPreview> = {
+  title: 'plugins/plugin-markdown/MarkdownPreview',
+  component: MarkdownPreview,
+  render: ({ subject }) => {
+    return (
+      <Popover.Root open>
+        <Popover.Content>
+          <MarkdownPreview subject={subject} role='popover' />
+          <Popover.Arrow />
+        </Popover.Content>
+        <Popover.Trigger>
+          <Icon icon='ph--text-aa--regular' size={5} />
+        </Popover.Trigger>
+      </Popover.Root>
+    );
+  },
+  decorators: [withPluginManager({ plugins: [IntentPlugin()] }), withTheme, withLayout({ tooltips: true })],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+};
+
+export default meta;
+
+const data = (() => {
+  const document = create(DocumentType, {
+    name: faker.lorem.words(3),
+    content: makeRef(
+      create(DataType.Text, {
+        content: faker.lorem.paragraphs(3),
+      }),
+    ),
+    threads: [],
+  });
+
+  return { document };
+})();
+
+export const Default = {
+  args: {
+    subject: create(DocumentType, data.document),
+  },
+};

package/src/components/MarkdownPreview/MarkdownPreview.tsx

@@ -0,0 +1,85 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { pipe } from 'effect';
+import React, { useCallback } from 'react';
+
+import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { isInstanceOf } from '@dxos/echo-schema';
+import {
+  type PreviewProps,
+  defaultCard,
+  kanbanCardWithoutPoster,
+  popoverCard,
+  previewTitle,
+  previewProse,
+  previewChrome,
+} from '@dxos/plugin-preview';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { Button, Icon, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { DataType } from '@dxos/schema';
+
+import { MARKDOWN_PLUGIN } from '../../meta';
+import { DocumentType } from '../../types';
+import { getAbstract, getFallbackName } from '../../util';
+
+// TODO(burdon): Factor out.
+const getTitle = (subject: DocumentType | DataType.Text, fallback: string) => {
+  if (isInstanceOf(DocumentType, subject)) {
+    return subject.name ?? subject.fallbackName ?? getFallbackName(subject.content?.target?.content ?? fallback);
+  } else if (isInstanceOf(DataType.Text, subject)) {
+    return getFallbackName(subject.content);
+  }
+};
+
+// TODO(burdon): Factor out.
+const getSnippet = (subject: DocumentType | DataType.Text, fallback: string) => {
+  if (isInstanceOf(DocumentType, subject)) {
+    return getAbstract(subject.content?.target?.content ?? fallback);
+  } else if (isInstanceOf(DataType.Text, subject)) {
+    return getAbstract(subject.content);
+  }
+};
+
+export const MarkdownPreview = ({ classNames, subject, role }: PreviewProps<DocumentType | DataType.Text>) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { t } = useTranslation(MARKDOWN_PLUGIN);
+  const snippet = getSnippet(subject, t('fallback abstract'));
+
+  // TODO(wittjosiah): Factor out so this component isn't dependent on the app framework.
+  const handleNavigate = useCallback(
+    () =>
+      dispatch(
+        pipe(
+          createIntent(LayoutAction.UpdatePopover, {
+            part: 'popover',
+            subject: null,
+            options: { state: false, anchorId: '' },
+          }),
+          chain(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(subject)] }),
+        ),
+      ),
+    [dispatch, subject],
+  );
+
+  return (
+    <div
+      role='none'
+      className={mx(
+        role === 'popover' ? popoverCard : role === 'card--kanban' ? kanbanCardWithoutPoster : defaultCard,
+        classNames,
+      )}
+    >
+      <h2 className={mx(previewTitle, previewProse)}>{getTitle(subject, t('fallback title'))}</h2>
+      {snippet && <p className={mx(previewProse, 'line-clamp-3 break-words col-span-2')}>{snippet}</p>}
+      <div role='none' className={previewChrome}>
+        <Button onClick={handleNavigate}>
+          <span className='grow'>{t('navigate to document label')}</span>
+          <Icon icon='ph--arrow-right--regular' />
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/MarkdownPreview/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { MarkdownPreview } from './MarkdownPreview';
+
+export * from './MarkdownPreview';
+
+export default MarkdownPreview;

package/src/components/{MarkdownSettings.tsx → MarkdownSettings/MarkdownSettings.tsx}

@@ -8,8 +8,8 @@ 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 { MARKDOWN_PLUGIN } from '../meta';
-import { type MarkdownSettingsProps } from '../types';
+import { MARKDOWN_PLUGIN } from '../../meta';
+import { type MarkdownSettingsProps } from '../../types';
 
 export const MarkdownSettings = ({ settings }: { settings: MarkdownSettingsProps }) => {
   const { t } = useTranslation(MARKDOWN_PLUGIN);

package/src/components/MarkdownSettings/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './MarkdownSettings';

package/src/components/Suggestions.stories.tsx

@@ -0,0 +1,191 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import { Schema, SchemaAST } from 'effect';
+import React, { type FC, useEffect, useMemo, useState } from 'react';
+
+import {
+  Capabilities,
+  CollaborationActions,
+  IntentPlugin,
+  SettingsPlugin,
+  contributes,
+  createIntent,
+  useCapability,
+  useIntentDispatcher,
+} from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Message } from '@dxos/artifact';
+import { Type } from '@dxos/echo';
+import { create, type Expando } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { DXN } from '@dxos/keys';
+import { live, makeRef, refFromDXN } from '@dxos/live-object';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { PreviewPlugin } from '@dxos/plugin-preview';
+import { SpacePlugin } from '@dxos/plugin-space';
+import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
+import { ThemePlugin } from '@dxos/plugin-theme';
+import { faker } from '@dxos/random';
+import { createQueueDxn, useQueue, useSpace } from '@dxos/react-client/echo';
+import { IconButton, Toolbar } from '@dxos/react-ui';
+import { command, useTextEditor } from '@dxos/react-ui-editor';
+import { StackItem } from '@dxos/react-ui-stack';
+import { defaultTx } from '@dxos/react-ui-theme';
+import { withLayout } from '@dxos/storybook-utils';
+
+import MarkdownContainer from './MarkdownContainer';
+import { MarkdownPlugin } from '../MarkdownPlugin';
+import { MarkdownCapabilities } from '../capabilities';
+import { MARKDOWN_PLUGIN } from '../meta';
+import translations from '../translations';
+import { createDocument, DocumentType, type MarkdownSettingsProps } from '../types';
+
+faker.seed(1);
+
+const TestItem = Schema.Struct({
+  title: Schema.String.annotations({
+    [SchemaAST.TitleAnnotationId]: 'Title',
+    [SchemaAST.DescriptionAnnotationId]: 'Product title',
+  }),
+  description: Schema.String.annotations({
+    [SchemaAST.TitleAnnotationId]: 'Description',
+    [SchemaAST.DescriptionAnnotationId]: 'Product description',
+  }),
+}).pipe(
+  Type.def({
+    typename: 'dxos.org/type/Test',
+    version: '0.1.0',
+  }),
+);
+
+const TestChat: FC<{ doc: DocumentType; content: string }> = ({ doc, content }) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { parentRef } = useTextEditor({ initialValue: content });
+
+  const space = useSpace();
+  const queueDxn = useMemo(() => space && createQueueDxn(space.id), [space]);
+  const queue = useQueue<Message>(queueDxn);
+
+  const handleInsert = () => {
+    invariant(space);
+    invariant(queue);
+    queue.append([create(Message, { role: 'assistant', content: [{ type: 'text', text: 'Hello' }] })]);
+    const message = queue.items[queue.items.length - 1];
+
+    // {
+    //   const ref = refFromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id]));
+
+    //   const message = deref(ref);
+    // }
+
+    void dispatch(
+      createIntent(CollaborationActions.InsertContent, {
+        spaceId: space.id,
+        target: makeRef(doc as any as Expando), // TODO(burdon): Comomon base type.
+        object: refFromDXN(new DXN(DXN.kind.QUEUE, [...queue.dxn.parts, message.id])),
+        label: 'Proposal',
+      }),
+    );
+  };
+
+  return (
+    <StackItem.Content toolbar classNames='w-full'>
+      <Toolbar.Root classNames='border-be border-separator'>
+        <IconButton icon='ph--plus--regular' disabled={!queue} label='Insert' onClick={handleInsert} />
+      </Toolbar.Root>
+      <div ref={parentRef} className='p-4' />
+    </StackItem.Content>
+  );
+};
+
+const DefaultStory = ({ document, chat }: { document: string; chat: string }) => {
+  const space = useSpace();
+  const [doc, setDoc] = useState<DocumentType>();
+  const settings = useCapability(Capabilities.SettingsStore).getStore<MarkdownSettingsProps>(MARKDOWN_PLUGIN)!.value;
+
+  useEffect(() => {
+    if (!space) {
+      return undefined;
+    }
+
+    const doc = space.db.add(
+      createDocument({
+        name: 'Test',
+
+        // Create links.
+        content: document.replaceAll(/\[(\w+)\]/g, (_, label) => {
+          const obj = space.db.add(live(TestItem, { title: label, description: faker.lorem.paragraph() }));
+          const dxn = makeRef(obj).dxn.toString();
+          return `[${label}][${dxn}]`;
+        }),
+      }),
+    );
+
+    setDoc(doc);
+  }, [space]);
+
+  if (!space || !doc) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <MarkdownContainer id={doc.id} object={doc} settings={settings} />
+      <TestChat doc={doc} content={chat} />
+    </>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'plugins/plugin-markdown/Suggestions',
+  render: DefaultStory,
+  decorators: [
+    withPluginManager({
+      plugins: [
+        ThemePlugin({ tx: defaultTx }),
+        StorybookLayoutPlugin(),
+        ClientPlugin({
+          types: [DocumentType, TestItem],
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+          },
+        }),
+        SpacePlugin(),
+        SettingsPlugin(),
+        IntentPlugin(),
+        MarkdownPlugin(),
+        PreviewPlugin(),
+      ],
+      capabilities: [contributes(MarkdownCapabilities.Extensions, [() => command()])],
+    }),
+    withLayout({ tooltips: true, fullscreen: true, classNames: 'grid grid-cols-2' }),
+  ],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = Meta<typeof DefaultStory>;
+
+export const Default: Story = {
+  args: {
+    chat: 'Hello\n',
+    document: [
+      '# Test',
+      '',
+      faker.lorem.paragraph(1),
+      '',
+      'This is a [DXOS] story that tests [ECHO] references inside the Markdown plugin.',
+      '',
+      faker.lorem.paragraph(3),
+      '',
+    ].join('\n'),
+  },
+};

package/src/components/Toolbar.stories.tsx

@@ -8,11 +8,12 @@ import { type Meta } from '@storybook/react';
 import React, { type FC, useState } from 'react';
 
 import { PublicKey } from '@dxos/keys';
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { createDocAccessor, createObject } from '@dxos/react-client/echo';
 import { useThemeContext } from '@dxos/react-ui';
 import {
+  EditorToolbar,
   type EditorAction,
   type Comment,
   comments,
@@ -23,7 +24,6 @@ import {
   decorateMarkdown,
   editorContent,
   formattingKeymap,
-  EditorToolbar,
   translations,
   useActionHandler,
   useComments,
@@ -31,16 +31,14 @@ import {
   useTextEditor,
   useEditorToolbarState,
 } from '@dxos/react-ui-editor';
-import { TextType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 faker.seed(101);
 
-const _onUpload = async (file: File) => ({ url: file.name });
-
 const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(createObject(create(TextType, { content })));
+  const [text] = useState(createObject(live(DataType.Text, { content })));
   const toolbarState = useEditorToolbarState({ viewMode: 'preview' });
   const formattingObserver = useFormattingState(toolbarState);
   const { parentRef, view } = useTextEditor(() => {
@@ -79,9 +77,9 @@ const DefaultStory: FC<{ content?: string }> = ({ content = '' }) => {
   useComments(view, text.id, _comments);
 
   return (
-    <div role='none' className='fixed inset-0 flex flex-col'>
+    <div role='none' className='flex flex-col'>
       <EditorToolbar onAction={handleAction} state={toolbarState ?? {}} />
-      <div ref={parentRef} />
+      <div className='flex grow overflow-hidden' ref={parentRef} />
     </div>
   );
 };
@@ -96,18 +94,20 @@ const content = [
   '',
 ].join('\n');
 
-export const Default = {
-  args: {
-    content,
-  },
-};
-
 const meta: Meta<typeof EditorToolbar> = {
   title: 'plugins/plugin-markdown/Toolbar',
   component: EditorToolbar,
   render: DefaultStory as any,
-  decorators: [withTheme, withLayout({ tooltips: true })],
-  parameters: { translations, layout: 'fullscreen' },
+  decorators: [withTheme, withLayout({ tooltips: true, fullscreen: true })],
+  parameters: {
+    translations,
+  },
 };
 
 export default meta;
+
+export const Default = {
+  args: {
+    content,
+  },
+};