@dxos/react-ui-editor 0.4.2-main.da7c8c5 → 0.4.2-main.ec5936e

package/dist/types/src/extensions/index.d.ts

@@ -1,3 +1,4 @@
+export * from './annotations';
 export * from './autocomplete';
 export * from './automerge';
 export * from './awareness';

package/dist/types/src/extensions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/extensions/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/extensions/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}

package/dist/types/src/index.d.ts

@@ -5,7 +5,7 @@ export { type EditorView, keymap } from '@codemirror/view';
 export * from './components';
 export * from './extensions';
 export * from './hooks';
-export { getToken } from './styles';
+export { getToken, editorWithToolbarLayout } from './styles';
 export * from './themes';
 export * from './util';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE3D,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE3D,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAC7D,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}

package/dist/types/src/styles/index.d.ts

@@ -1,4 +1,5 @@
 export * from './cursors';
 export * from './markdown';
 export * from './tokens';
+export * from './layout';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}

package/dist/types/src/styles/layout.d.ts

@@ -0,0 +1,2 @@
+export declare const editorWithToolbarLayout = "fixed inset-0 grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden";
+//# sourceMappingURL=layout.d.ts.map

package/dist/types/src/styles/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/styles/layout.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,uBAAuB,4GACuE,CAAC"}

package/dist/types/src/translations.d.ts

@@ -0,0 +1,20 @@
+export declare const translationKey = "react-ui-editor";
+declare const _default: {
+    'en-US': {
+        "react-ui-editor": {
+            'strong label': string;
+            'emphasis label': string;
+            'strikethrough label': string;
+            'code label': string;
+            'bullet label': string;
+            'ordered label': string;
+            'task label': string;
+            'blockquote label': string;
+            'codeblock label': string;
+            'comment label': string;
+            'heading label': string;
+        };
+    };
+}[];
+export default _default;
+//# sourceMappingURL=translations.d.ts.map

package/dist/types/src/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;AAEhD,wBAkBE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.2-main.da7c8c5",
+  "version": "0.4.2-main.ec5936e",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,20 +36,20 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/context": "0.4.2-main.da7c8c5",
-    "@dxos/async": "0.4.2-main.da7c8c5",
-    "@dxos/automerge": "0.4.2-main.da7c8c5",
-    "@dxos/debug": "0.4.2-main.da7c8c5",
-    "@dxos/display-name": "0.4.2-main.da7c8c5",
-    "@dxos/echo-schema": "0.4.2-main.da7c8c5",
-    "@dxos/invariant": "0.4.2-main.da7c8c5",
-    "@dxos/log": "0.4.2-main.da7c8c5",
-    "@dxos/react-async": "0.4.2-main.da7c8c5",
-    "@dxos/protocols": "0.4.2-main.da7c8c5",
-    "@dxos/react-ui": "0.4.2-main.da7c8c5",
-    "@dxos/react-ui-theme": "0.4.2-main.da7c8c5",
-    "@dxos/text-model": "0.4.2-main.da7c8c5",
-    "@dxos/util": "0.4.2-main.da7c8c5"
+    "@dxos/async": "0.4.2-main.ec5936e",
+    "@dxos/display-name": "0.4.2-main.ec5936e",
+    "@dxos/context": "0.4.2-main.ec5936e",
+    "@dxos/debug": "0.4.2-main.ec5936e",
+    "@dxos/automerge": "0.4.2-main.ec5936e",
+    "@dxos/echo-schema": "0.4.2-main.ec5936e",
+    "@dxos/invariant": "0.4.2-main.ec5936e",
+    "@dxos/protocols": "0.4.2-main.ec5936e",
+    "@dxos/log": "0.4.2-main.ec5936e",
+    "@dxos/react-async": "0.4.2-main.ec5936e",
+    "@dxos/react-ui-theme": "0.4.2-main.ec5936e",
+    "@dxos/text-model": "0.4.2-main.ec5936e",
+    "@dxos/util": "0.4.2-main.ec5936e",
+    "@dxos/react-ui": "0.4.2-main.ec5936e"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.0",
@@ -76,20 +76,20 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.2.1",
-    "@dxos/echo-signals": "0.4.2-main.da7c8c5",
-    "@dxos/config": "0.4.2-main.da7c8c5",
-    "@dxos/echo-typegen": "0.4.2-main.da7c8c5",
-    "@dxos/keyboard": "0.4.2-main.da7c8c5",
-    "@dxos/react-client": "0.4.2-main.da7c8c5",
-    "@dxos/storybook-utils": "0.4.2-main.da7c8c5",
-    "@dxos/react-ui": "0.4.2-main.da7c8c5",
-    "@dxos/random": "0.4.2-main.da7c8c5"
+    "@dxos/config": "0.4.2-main.ec5936e",
+    "@dxos/echo-signals": "0.4.2-main.ec5936e",
+    "@dxos/echo-typegen": "0.4.2-main.ec5936e",
+    "@dxos/keyboard": "0.4.2-main.ec5936e",
+    "@dxos/random": "0.4.2-main.ec5936e",
+    "@dxos/react-client": "0.4.2-main.ec5936e",
+    "@dxos/react-ui": "0.4.2-main.ec5936e",
+    "@dxos/storybook-utils": "0.4.2-main.ec5936e"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.2-main.da7c8c5"
+    "@dxos/react-client": "0.4.2-main.ec5936e"
   },
   "publishConfig": {
     "access": "public"

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

@@ -14,7 +14,7 @@ import { TextObject } from '@dxos/echo-schema';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { fixedInsetFlexLayout, getSize, groupSurface, mx } from '@dxos/react-ui-theme';
+import { getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type TextEditorProps } from './TextEditor';
@@ -36,8 +36,10 @@ import {
   typewriter,
   useComments,
   formatting,
+  annotations,
 } from '../../extensions';
 import { type Comment, useTextModel } from '../../hooks';
+import translations from '../../translations';
 
 faker.seed(101);
 
@@ -110,7 +112,7 @@ const text = {
     `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
     `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
     `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
-    '', // TODO(burdon): Possible GFM parsing bug if no newline?
+    '',
   ),
 
   image: str('# Image', '', '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)'),
@@ -211,7 +213,7 @@ const onRenderLink: LinkOptions['onRender'] = (el, url) => {
 type StoryProps = {
   text?: string;
   comments?: Comment[];
-} & Pick<TextEditorProps, 'readonly' | 'placeholder' | 'slots' | 'extensions'>;
+} & Pick<TextEditorProps, 'readonly' | 'placeholder' | 'extensions'>;
 
 const Story = ({ text, comments, placeholder = 'New document.', ...props }: StoryProps) => {
   const [item] = useState({ text: new TextObject(text) });
@@ -223,13 +225,16 @@ const Story = ({ text, comments, placeholder = 'New document.', ...props }: Stor
   }
 
   return (
-    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex h-full justify-center'>
-        <div className='flex flex-col h-full w-[800px]'>
-          <MarkdownEditor ref={view} model={model} placeholder={placeholder} {...props} />
-        </div>
-      </div>
-    </div>
+    <MarkdownEditor
+      ref={view}
+      model={model}
+      placeholder={placeholder}
+      slots={{
+        root: { className: mx(textBlockWidth, 'min-bs-dvh') },
+        editor: { className: 'min-bs-dvh p-2 bg-white dark:bg-black' },
+      }}
+      {...props}
+    />
   );
 };
 
@@ -238,6 +243,7 @@ export default {
   component: MarkdownEditor,
   decorators: [withTheme],
   render: Story,
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 const defaults = [
@@ -384,6 +390,10 @@ export const HorizontalRule = {
   ),
 };
 
+export const Annotations = {
+  render: () => <Story text={str('# Annotations', '', large)} extensions={[annotations({ match: /volup/gi })]} />,
+};
+
 const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
 
 export const Typewriter = {

package/src/components/TextEditor/TextEditor.stories.tsx

@@ -7,12 +7,13 @@ import '@dxosTheme';
 import React, { useState } from 'react';
 
 import { TextObject } from '@dxos/echo-schema';
-import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
+import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor, type TextEditorProps } from './TextEditor';
 import { listener } from '../../extensions';
 import { useTextModel } from '../../hooks';
+import translations from '../../translations';
 
 const initialText = [
   '# TextEditor',
@@ -36,13 +37,14 @@ const Story = ({
   }
 
   return (
-    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center'>
-        <div className='flex flex-col w-[800px] py-16'>
-          <TextEditor model={model} {...props} />
-        </div>
-      </div>
-    </div>
+    <TextEditor
+      model={model}
+      slots={{
+        root: { className: mx(textBlockWidth, 'min-bs-dvh') },
+        editor: { className: 'min-bs-dvh p-2 bg-white dark:bg-black' },
+      }}
+      {...props}
+    />
   );
 };
 
@@ -51,6 +53,7 @@ export default {
   component: TextEditor,
   decorators: [withTheme],
   render: Story,
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 export const Default = {

package/src/components/TextEditor/TextEditor.tsx

@@ -20,7 +20,7 @@ import React, {
 
 import { log } from '@dxos/log';
 import { useThemeContext } from '@dxos/react-ui';
-import { focusRing, mx } from '@dxos/react-ui-theme';
+import { focusRing } from '@dxos/react-ui-theme';
 import { isNotFalsy } from '@dxos/util';
 
 import { createBasicBundle, createMarkdownExtensions } from '../../extensions';
@@ -71,6 +71,7 @@ export type TextEditorProps = {
 /**
  * Base text editor.
  */
+// TODO(burdon): Replace with useTextEditor.
 export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
   (
     {
@@ -258,10 +259,10 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
 
 export const defaultSlots: TextEditorSlots = {
   root: {
-    className: mx('grow', focusRing),
+    className: focusRing,
   },
   editor: {
-    className: 'bs-full',
+    className: 'min-bs-full',
   },
 };
 

package/src/components/TextEditor/automerge.stories.tsx

@@ -5,11 +5,10 @@
 import '@dxosTheme';
 
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
-import { EditorView } from '@codemirror/view';
-import '@preact/signals-react'; // Register react integration
-import { basicSetup } from 'codemirror';
+import '@preact/signals-react';
+import { EditorView } from '@codemirror/view'; // Register react integration.
 import get from 'lodash.get';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { type Prop } from '@dxos/automerge/automerge';
 import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
@@ -21,38 +20,42 @@ import { ClientRepeater } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor } from './TextEditor';
-import { type IDocHandle, automerge, awareness } from '../../extensions';
-import { useTextModel } from '../../hooks';
+import { type IDocHandle, automerge, awareness, createBasicBundle } from '../../extensions';
+import { useTextEditor, useTextModel } from '../../hooks';
+import { defaultTheme } from '../../themes';
+import translations from '../../translations';
 
-// TODO(burdon): Move to components.
+const initialContent = 'Hello world!';
+
+type TestObject = {
+  text: string;
+};
 
 type EditorProps = {
   handle: IDocHandle;
-  path: Prop[];
+  path?: Prop[];
 };
 
-const Editor = ({ handle, path }: EditorProps) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const editorRoot = useRef<EditorView>();
-
-  useEffect(() => {
-    const view = (editorRoot.current = new EditorView({
-      doc: get(handle.docSync()!, path),
-      extensions: [basicSetup, automerge({ handle, path }), awareness()],
-      parent: containerRef.current as any,
-    }));
-
-    return () => {
-      view.destroy();
-    };
-  }, []);
+const Editor = ({ handle, path = ['text'] }: EditorProps) => {
+  const { parentRef } = useTextEditor({
+    autoFocus: true,
+    doc: get(handle.docSync()!, path),
+    extensions: [
+      //
+      EditorView.baseTheme(defaultTheme),
+      EditorView.editorAttributes.of({ class: 'p-2 bg-white' }),
+      createBasicBundle({ placeholder: 'Type here...' }),
+      automerge({ handle, path }),
+      awareness(),
+    ],
+  });
 
-  return <div className='codemirror-editor' ref={containerRef} onKeyDown={(evt) => evt.stopPropagation()} />;
+  return <div ref={parentRef} />;
 };
 
 const Story = () => {
-  const [object1, setObject1] = useState<DocHandle<any> | null>(null);
-  const [object2, setObject2] = useState<DocHandle<any> | null>(null);
+  const [object1, setObject1] = useState<DocHandle<TestObject>>();
+  const [object2, setObject2] = useState<DocHandle<TestObject>>();
 
   useEffect(() => {
     queueMicrotask(async () => {
@@ -64,8 +67,8 @@ const Story = () => {
       });
 
       const object1 = repo1.create();
-      object1.change((doc: any) => {
-        doc.text = 'Hello world!';
+      object1.change((doc: TestObject) => {
+        doc.text = initialContent;
       });
 
       const object2 = repo2.find(object1.url);
@@ -81,13 +84,9 @@ const Story = () => {
   }
 
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', width: '100vw' }}>
-      <div>
-        <Editor handle={object1} path={['text']} />
-      </div>
-      <div>
-        <Editor handle={object2} path={['text']} />
-      </div>
+    <div role='none' className='grid grid-cols-2 bs-full is-full gap-2'>
+      <Editor handle={object1} path={['text']} />
+      <Editor handle={object2} path={['text']} />
     </div>
   );
 };
@@ -96,39 +95,31 @@ export default {
   title: 'react-ui-editor/Automerge',
   component: Editor,
   render: () => <Story />,
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 export const Default = {};
 
-const EchoStory = ({ id, spaceKey }: { id: number; spaceKey: PublicKey }) => {
+const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
   // TODO(dmaretskyi): useQuery doesn't work.
   const [obj] = space?.db.query(Filter.from({ type: 'test' })).objects ?? [];
-
   const model = useTextModel({
-    text: obj?.content,
     identity,
     space,
+    text: obj?.content,
   });
 
   if (!model) {
     return null;
   }
 
-  return (
-    // <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-    <div className='flex justify-center overflow-y-scroll'>
-      <div className='flex flex-col w-[800px] py-16'>
-        <MarkdownEditor model={model} />
-        <div className='flex shrink-0 h-[300px]'></div>
-      </div>
-    </div>
-    // </div>
-  );
+  return <MarkdownEditor model={model} />;
 };
 
 export const WithEcho = {
+  decorators: [withTheme],
   render: () => {
     return (
       <ClientRepeater
@@ -138,7 +129,7 @@ export const WithEcho = {
           space.db.add(
             new Expando({
               type: 'test',
-              content: new TextObject('Hello world!'),
+              content: new TextObject(initialContent),
             }),
           );
         }}
@@ -146,5 +137,4 @@ export const WithEcho = {
       />
     );
   },
-  decorators: [withTheme],
 };

package/src/components/TextEditor/hooks.stories.tsx

@@ -7,7 +7,7 @@ import '@dxosTheme';
 import React from 'react';
 
 import { useThemeContext } from '@dxos/react-ui';
-import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
+import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor } from './TextEditor';
@@ -24,7 +24,9 @@ import {
   useFormattingState,
 } from '../../extensions';
 import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
+import { editorWithToolbarLayout } from '../../styles/layout';
 import { markdownTheme } from '../../themes';
+import translations from '../../translations';
 import { Toolbar } from '../Toolbar';
 
 // TODO(burdon): Demo toolbar with hooks.
@@ -53,11 +55,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         themeMode,
         theme: markdownTheme,
         slots: {
-          // TODO(burdon): Document classes re base theme.
-          //  Semantic tokens (e.g., replacement of input surface).
-          editor: {
-            className: 'h-full p-4 bg-white text-black dark:bg-black dark:text-white',
-          },
+          editor: { className: 'min-bs-full' },
         },
       }),
       // TODO(burdon): Move lineWrapping.
@@ -80,16 +78,16 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   // FIXME This doesn't update the state on view changes. Also not
   // sure if view is even guaranteed to exist at this point.
   return (
-    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex h-full justify-center'>
-        <div className='flex flex-col h-full w-[800px]'>
-          <Toolbar.Root onAction={handleAction} state={formattingState}>
-            <Toolbar.Markdown />
-          </Toolbar.Root>
-
-          {/* TODO(burdon): Handle scrolling in component wrapper (like this). */}
-          <div role='none' className='h-full overflow-y-auto' ref={parentRef} />
-        </div>
+    <div role='none' className={mx('fixed inset-0', editorWithToolbarLayout)}>
+      <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
+        <Toolbar.Markdown />
+      </Toolbar.Root>
+      <div role='none' className='overflow-y-auto'>
+        <div
+          role='textbox'
+          className={mx(textBlockWidth, 'min-bs-full p-4 surface-attention fg-base')}
+          ref={parentRef}
+        />
       </div>
     </div>
   );
@@ -100,6 +98,7 @@ export default {
   component: TextEditor,
   decorators: [withTheme],
   render: (args: StoryProps) => <Story {...args} />,
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 export const Default = {

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -9,7 +9,7 @@ import React, { type FC, useMemo, useState } from 'react';
 import { TextObject } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
+import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
@@ -25,6 +25,8 @@ import {
   useFormattingState,
 } from '../../extensions';
 import { type Comment, useActionHandler, useEditorView, useTextModel } from '../../hooks';
+import { editorWithToolbarLayout } from '../../styles';
+import translations from '../../translations';
 import { MarkdownEditor } from '../TextEditor';
 
 faker.seed(101);
@@ -63,17 +65,18 @@ const Story: FC<{ content: string }> = ({ content }) => {
   }
 
   return (
-    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex h-full justify-center'>
-        <div className='flex flex-col h-full w-[800px]'>
-          <Toolbar.Root onAction={handleAction} state={formattingState}>
-            <Toolbar.Markdown />
-            <Toolbar.Separator />
-            <Toolbar.Extended />
-          </Toolbar.Root>
-          <MarkdownEditor ref={editorRef} model={model} extensions={extensions} />
-        </div>
-      </div>
+    <div role='none' className={mx('fixed inset-0', editorWithToolbarLayout)}>
+      <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
+        <Toolbar.Markdown />
+        <Toolbar.Separator />
+        <Toolbar.Extended />
+      </Toolbar.Root>
+      <MarkdownEditor
+        ref={editorRef}
+        model={model}
+        extensions={extensions}
+        slots={{ root: { className: mx(textBlockWidth, 'pli-2') } }}
+      />
     </div>
   );
 };
@@ -83,10 +86,11 @@ export default {
   component: Toolbar,
   render: (args: any) => <Story {...args} />,
   decorators: [withTheme],
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 const content = [
-  'Demo',
+  '# Demo',
   '',
   'The editor supports **Markdown** styles.',
   '',