@dxos/react-ui-editor 0.4.2 → 0.4.3-main.085f4d3

package/dist/types/src/extensions/automerge/sync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sync.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/automerge/sync.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAInD,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,KAAK,EAIX,MAAM,QAAQ,CAAC;AAIhB;;GAEG;AACH,qBAAa,MAAM;IAKf,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,MAAM;IALzB,OAAO,CAAC,QAAQ,CAAS;gBAIN,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC;IAG5C,SAAS,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO;IAe3C,cAAc,CAAC,IAAI,EAAE,UAAU;IAa/B,iBAAiB,CAAC,IAAI,EAAE,UAAU;CAenC"}

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

@@ -9,6 +9,7 @@ export * from './cursor';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
+export * from './modes';
 export * from './outliner';
 export * from './typewriter';
 //# sourceMappingURL=index.d.ts.map

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,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"}
+{"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,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}

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

@@ -0,0 +1,11 @@
+import { type Extension, Facet } from '@codemirror/state';
+export type EditorMode = 'default' | 'vim' | undefined;
+export type EditorConfig = {
+    type: string;
+    noTabster?: boolean;
+};
+export declare const editorMode: Facet<EditorConfig, EditorConfig>;
+export declare const EditorModes: {
+    [mode: string]: Extension;
+};
+//# sourceMappingURL=modes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modes.d.ts","sourceRoot":"","sources":["../../../../src/extensions/modes.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1D,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAErB,CAAC;AAEH,eAAO,MAAM,WAAW,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;CAgBpD,CAAC"}

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

@@ -1,11 +1,11 @@
+export { type Extension, type EditorState } from '@codemirror/state';
+export { type EditorView, keymap } from '@codemirror/view';
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';
-export { type Extension } from '@codemirror/state';
-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,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE5D,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",
+  "version": "0.4.3-main.085f4d3",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,23 +36,23 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.4.2",
-    "@dxos/context": "0.4.2",
-    "@dxos/display-name": "0.4.2",
-    "@dxos/debug": "0.4.2",
-    "@dxos/echo-schema": "0.4.2",
-    "@dxos/log": "0.4.2",
-    "@dxos/invariant": "0.4.2",
-    "@dxos/protocols": "0.4.2",
-    "@dxos/react-ui": "0.4.2",
-    "@dxos/react-async": "0.4.2",
-    "@dxos/automerge": "0.4.2",
-    "@dxos/react-ui-theme": "0.4.2",
-    "@dxos/text-model": "0.4.2",
-    "@dxos/util": "0.4.2"
+    "@dxos/async": "0.4.3-main.085f4d3",
+    "@dxos/context": "0.4.3-main.085f4d3",
+    "@dxos/automerge": "0.4.3-main.085f4d3",
+    "@dxos/debug": "0.4.3-main.085f4d3",
+    "@dxos/display-name": "0.4.3-main.085f4d3",
+    "@dxos/echo-schema": "0.4.3-main.085f4d3",
+    "@dxos/invariant": "0.4.3-main.085f4d3",
+    "@dxos/log": "0.4.3-main.085f4d3",
+    "@dxos/protocols": "0.4.3-main.085f4d3",
+    "@dxos/react-ui": "0.4.3-main.085f4d3",
+    "@dxos/react-async": "0.4.3-main.085f4d3",
+    "@dxos/react-ui-theme": "0.4.3-main.085f4d3",
+    "@dxos/text-model": "0.4.3-main.085f4d3",
+    "@dxos/util": "0.4.3-main.085f4d3"
   },
   "devDependencies": {
-    "@automerge/automerge-repo-network-broadcastchannel": "^1.1.0",
+    "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
     "@phosphor-icons/react": "^2.0.5",
     "@preact/signals-react": "^1.3.6",
     "@testing-library/dom": "^8.17.1",
@@ -76,20 +76,20 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.2.1",
-    "@dxos/config": "0.4.2",
-    "@dxos/echo-typegen": "0.4.2",
-    "@dxos/echo-signals": "0.4.2",
-    "@dxos/random": "0.4.2",
-    "@dxos/keyboard": "0.4.2",
-    "@dxos/react-client": "0.4.2",
-    "@dxos/react-ui": "0.4.2",
-    "@dxos/storybook-utils": "0.4.2"
+    "@dxos/config": "0.4.3-main.085f4d3",
+    "@dxos/echo-signals": "0.4.3-main.085f4d3",
+    "@dxos/echo-typegen": "0.4.3-main.085f4d3",
+    "@dxos/keyboard": "0.4.3-main.085f4d3",
+    "@dxos/random": "0.4.3-main.085f4d3",
+    "@dxos/react-ui": "0.4.3-main.085f4d3",
+    "@dxos/react-client": "0.4.3-main.085f4d3",
+    "@dxos/storybook-utils": "0.4.3-main.085f4d3"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.2"
+    "@dxos/react-client": "0.4.3-main.085f4d3"
   },
   "publishConfig": {
     "access": "public"

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

@@ -3,7 +3,6 @@
 //
 
 import '@dxosTheme';
-
 import { type EditorView } from '@codemirror/view';
 import { ArrowSquareOut } from '@phosphor-icons/react';
 import defaultsDeep from 'lodash.defaultsdeep';
@@ -14,7 +13,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';
@@ -37,8 +36,10 @@ import {
   useComments,
   formatting,
   annotations,
+  EditorModes,
 } from '../../extensions';
 import { type Comment, useTextModel } from '../../hooks';
+import translations from '../../translations';
 
 faker.seed(101);
 
@@ -224,21 +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] overflow-y-auto'>
-          <MarkdownEditor
-            ref={view}
-            model={model}
-            placeholder={placeholder}
-            slots={{
-              editor: { className: 'bs-full p-2 bg-white dark:bg-black' },
-            }}
-            {...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}
+    />
   );
 };
 
@@ -247,6 +243,7 @@ export default {
   component: MarkdownEditor,
   decorators: [withTheme],
   render: Story,
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 const defaults = [
@@ -393,6 +390,15 @@ export const HorizontalRule = {
   ),
 };
 
+export const Vim = {
+  render: () => (
+    <Story
+      text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', text.paragraphs)}
+      extensions={[defaults, EditorModes.vim]}
+    />
+  ),
+};
+
 export const Annotations = {
   render: () => <Story text={str('# Annotations', '', large)} extensions={[annotations({ match: /volup/gi })]} />,
 };

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,19 +37,14 @@ const Story = ({
   }
 
   return (
-    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center'>
-        <div className='flex flex-col w-[800px] overflow-y-auto'>
-          <TextEditor
-            model={model}
-            slots={{
-              editor: { className: 'bs-full p-2 bg-white dark:bg-black' },
-            }}
-            {...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}
+    />
   );
 };
 
@@ -57,6 +53,7 @@ export default {
   component: TextEditor,
   decorators: [withTheme],
   render: Story,
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 export const Default = {

package/src/components/TextEditor/TextEditor.tsx

@@ -4,13 +4,12 @@
 
 import { EditorState, type Extension, type StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-// import { useFocusableGroup } from '@fluentui/react-tabster';
-import { vim } from '@replit/codemirror-vim';
+import { useFocusableGroup } from '@fluentui/react-tabster';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
   type ComponentProps,
-  type KeyboardEvent,
   forwardRef,
+  type KeyboardEventHandler,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -20,19 +19,15 @@ 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';
+import { createBasicBundle, createMarkdownExtensions, editorMode } from '../../extensions';
 import { type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
 import { defaultTheme, markdownTheme, textTheme } from '../../themes';
 import { logChanges } from '../../util';
 
-// TODO(burdon): Change to enum?
-export const EditorModes = ['default', 'vim'] as const;
-export type EditorMode = (typeof EditorModes)[number];
-
 export type CursorInfo = {
   from: number;
   to: number;
@@ -52,7 +47,6 @@ export type TextEditorSlots = {
   };
 };
 
-// TODO(burdon): Spellcheck?
 export type TextEditorProps = {
   model: EditorModel; // TODO(burdon): Optional (e.g., just provide content if readonly).
   readonly?: boolean; // TODO(burdon): Move into model.
@@ -60,7 +54,6 @@ export type TextEditorProps = {
   lineWrapping?: boolean;
   scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
   selection?: { anchor: number; head?: number };
-  editorMode?: EditorMode; // TODO(burdon): Factor out.
   placeholder?: string;
   theme?: ThemeStyles;
   slots?: TextEditorSlots;
@@ -74,26 +67,10 @@ export type TextEditorProps = {
 // TODO(burdon): Replace with useTextEditor.
 export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
   (
-    {
-      model,
-      readonly,
-      autoFocus,
-      scrollTo,
-      selection,
-      editorMode,
-      theme,
-      slots = defaultSlots,
-      extensions = [],
-      debug,
-    },
+    { model, readonly, autoFocus, scrollTo, selection, theme, slots = defaultSlots, extensions = [], debug },
     forwardedRef,
   ) => {
-    // TODO(burdon): Hook causes error even if properties are not spread into div.
-    //  Uncaught TypeError: Cannot read properties of undefined (reading 'relatedTarget')
-    //  Uses event.detail, which is deprecated (not event.details). At runtime the event has a property `details`.
-    //  https://github.com/microsoft/tabster/blob/master/src/State/FocusedElement.ts#L348 (e.detail.relatedTarget)
-    //  https://github.com/microsoft/keyborg/blob/49e49b2c3ba0a5f6cc518ac46825d7551def8109/src/FocusEvent.ts#L58
-    // const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
     const { themeMode } = useThemeContext();
 
     const rootRef = useRef<HTMLDivElement>(null);
@@ -143,6 +120,15 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
           EditorView.editorAttributes.of({ class: slots.editor?.className ?? '' }),
           EditorView.contentAttributes.of({ class: slots.content?.className ?? '' }),
 
+          // Focus.
+          EditorView.updateListener.of((update) => {
+            update.transactions.forEach((transaction) => {
+              if (transaction.isUserEvent('focus.container')) {
+                rootRef.current?.focus();
+              }
+            });
+          }),
+
           // State.
           EditorView.editable.of(!readonly),
           EditorState.readOnly.of(!!readonly),
@@ -151,9 +137,6 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
           // NOTE: This must come before user extensions.
           model.extension,
 
-          // TODO(burdon): Factor out? (Requires special handling for Escape/Enter below).
-          editorMode === 'vim' && vim(),
-
           // Custom.
           ...extensions,
         ].filter(isNotFalsy),
@@ -180,44 +163,40 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
       view?.destroy();
       setView(newView);
 
+      // Remove tabster attribute (rely on custom keymap).
+      if (state.facet(editorMode).noTabster) {
+        rootRef.current.removeAttribute('data-tabster');
+      }
+
       return () => {
         newView?.destroy();
         setView(null);
       };
-    }, [rootRef, model, readonly, editorMode, themeMode]);
+    }, [rootRef, model, readonly, themeMode]);
 
-    // Handles tab/focus.
-    // Pressing Escape focuses the outer div (to support tab navigation); pressing Enter refocuses the editor.
-    // TODO(burdon): Convert to keymap?
-    const handleKeyUp = useCallback(
-      (event: KeyboardEvent) => {
-        const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
+    // Focus editor on Enter (e.g., when tabbing to this component).
+    const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(
+      (event) => {
+        const { key } = event;
         switch (key) {
           case 'Enter': {
             view?.focus();
             break;
           }
-
-          case 'Escape': {
-            if (editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey)) {
-              view?.focus();
-            }
-            break;
-          }
         }
       },
-      [view, editorMode],
+      [view],
     );
 
     return (
       <div
-        key={model.id}
         role='none'
+        ref={rootRef}
+        key={model.id}
         tabIndex={0}
-        {...slots.root}
-        // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
         onKeyUp={handleKeyUp}
-        ref={rootRef}
+        {...slots.root}
+        {...tabsterDOMAttribute}
       />
     );
   },
@@ -259,10 +238,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,6 +95,7 @@ export default {
   title: 'react-ui-editor/Automerge',
   component: Editor,
   render: () => <Story />,
+  parameters: { translations, layout: 'fullscreen' },
 };
 
 export const Default = {};
@@ -115,16 +115,11 @@ const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
     return null;
   }
 
-  return (
-    <div className='flex overflow-hidden'>
-      <div className='flex flex-col w-[800px] overflow-y-scroll'>
-        <MarkdownEditor model={model} />
-      </div>
-    </div>
-  );
+  return <MarkdownEditor model={model} />;
 };
 
 export const WithEcho = {
+  decorators: [withTheme],
   render: () => {
     return (
       <ClientRepeater
@@ -134,7 +129,7 @@ export const WithEcho = {
           space.db.add(
             new Expando({
               type: 'test',
-              content: new TextObject('Hello world!'),
+              content: new TextObject(initialContent),
             }),
           );
         }}
@@ -142,5 +137,4 @@ export const WithEcho = {
       />
     );
   },
-  decorators: [withTheme],
 };