@dxos/react-ui-editor 0.8.4-main.dedc0f3 → 0.8.4-main.ead640a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.dedc0f3",
+  "version": "0.8.4-main.ead640a",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -37,9 +37,10 @@
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.1.1",
-    "@codemirror/autocomplete": "^6.18.7",
+    "@automerge/automerge": "3.1.2",
+    "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-html": "^6.4.11",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-markdown": "^6.3.4",
@@ -50,17 +51,19 @@
     "@codemirror/search": "^6.5.11",
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.38.2",
+    "@codemirror/view": "^6.38.4",
     "@fluentui/react-tabster": "^9.24.2",
     "@lezer/common": "^1.2.2",
     "@lezer/generator": "^1.7.1",
     "@lezer/highlight": "^1.2.1",
     "@lezer/markdown": "^1.3.1",
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-react": "^3.2.0",
+    "@preact/signals-react": "^3.3.0",
     "@radix-ui/react-context": "1.1.1",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
     "@replit/codemirror-vim": "^6.2.1",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
+    "@uiw/codemirror-theme-vscode": "^4.25.2",
     "ajv": "^8.17.1",
     "codemirror": "^6.0.1",
     "lib0": "^0.2.65",
@@ -68,72 +71,72 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.4-main.dedc0f3",
-    "@dxos/async": "0.8.4-main.dedc0f3",
-    "@dxos/context": "0.8.4-main.dedc0f3",
-    "@dxos/display-name": "0.8.4-main.dedc0f3",
-    "@dxos/echo-schema": "0.8.4-main.dedc0f3",
-    "@dxos/invariant": "0.8.4-main.dedc0f3",
-    "@dxos/debug": "0.8.4-main.dedc0f3",
-    "@dxos/lit-ui": "0.8.4-main.dedc0f3",
-    "@dxos/live-object": "0.8.4-main.dedc0f3",
-    "@dxos/log": "0.8.4-main.dedc0f3",
-    "@dxos/protocols": "0.8.4-main.dedc0f3",
-    "@dxos/react-hooks": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-stack": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-menu": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-types": "0.8.4-main.dedc0f3",
-    "@dxos/util": "0.8.4-main.dedc0f3"
+    "@dxos/app-graph": "0.8.4-main.ead640a",
+    "@dxos/async": "0.8.4-main.ead640a",
+    "@dxos/debug": "0.8.4-main.ead640a",
+    "@dxos/display-name": "0.8.4-main.ead640a",
+    "@dxos/echo": "0.8.4-main.ead640a",
+    "@dxos/invariant": "0.8.4-main.ead640a",
+    "@dxos/lit-ui": "0.8.4-main.ead640a",
+    "@dxos/log": "0.8.4-main.ead640a",
+    "@dxos/protocols": "0.8.4-main.ead640a",
+    "@dxos/react-hooks": "0.8.4-main.ead640a",
+    "@dxos/react-ui-menu": "0.8.4-main.ead640a",
+    "@dxos/live-object": "0.8.4-main.ead640a",
+    "@dxos/react-ui-types": "0.8.4-main.ead640a",
+    "@dxos/util": "0.8.4-main.ead640a",
+    "@dxos/context": "0.8.4-main.ead640a",
+    "@dxos/react-ui-stack": "0.8.4-main.ead640a"
   },
   "devDependencies": {
-    "@automerge/automerge": "3.1.1",
-    "@automerge/automerge-repo": "2.3.0-alpha.0",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.3.0-alpha.0",
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.90.2",
+    "@automerge/automerge": "3.1.2",
+    "@automerge/automerge-repo": "2.3.1",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.3.1",
+    "@effect-rx/rx-react": "0.42.4",
+    "@effect/platform": "0.92.1",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/lodash.merge": "^4.6.6",
     "@types/lodash.sortby": "^4.7.7",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.1",
     "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.17.7",
+    "effect": "3.18.3",
     "happy-dom": "^13.3.1",
-    "jsdom": "^24.0.0",
+    "jsdom": "^27.0.0",
     "mocha": "^10.6.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "react-test-renderer": "~18.2.0",
-    "vite": "7.1.1",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "react-test-renderer": "~19.2.0",
+    "vite": "7.1.9",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.5.0",
-    "@dxos/config": "0.8.4-main.dedc0f3",
-    "@dxos/echo": "0.8.4-main.dedc0f3",
-    "@dxos/echo-signals": "0.8.4-main.dedc0f3",
-    "@dxos/keyboard": "0.8.4-main.dedc0f3",
-    "@dxos/random": "0.8.4-main.dedc0f3",
-    "@dxos/react-client": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-stack": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-attention": "0.8.4-main.dedc0f3",
-    "@dxos/schema": "0.8.4-main.dedc0f3",
-    "@dxos/storybook-utils": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.dedc0f3"
+    "@dxos/config": "0.8.4-main.ead640a",
+    "@dxos/echo": "0.8.4-main.ead640a",
+    "@dxos/echo-signals": "0.8.4-main.ead640a",
+    "@dxos/keyboard": "0.8.4-main.ead640a",
+    "@dxos/random": "0.8.4-main.ead640a",
+    "@dxos/react-client": "0.8.4-main.ead640a",
+    "@dxos/react-ui": "0.8.4-main.ead640a",
+    "@dxos/react-ui-attention": "0.8.4-main.ead640a",
+    "@dxos/react-ui-stack": "0.8.4-main.ead640a",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.ead640a",
+    "@dxos/react-ui-theme": "0.8.4-main.ead640a",
+    "@dxos/schema": "0.8.4-main.ead640a",
+    "@dxos/storybook-utils": "0.8.4-main.ead640a"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-client": "0.8.4-main.ead640a",
+    "@dxos/react-ui-theme": "0.8.4-main.ead640a",
+    "@dxos/react-ui": "0.8.4-main.ead640a"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Editor/Editor.stories.tsx

@@ -0,0 +1,69 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { useMemo } from 'react';
+
+import { createDocAccessor, createObject } from '@dxos/client/echo';
+import { useThemeContext } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { DataType } from '@dxos/schema';
+
+import { automerge, createBasicExtensions, createThemeExtensions } from '../../extensions';
+import { Editor } from '../Editor';
+
+const meta = {
+  title: 'ui/react-ui-editor/Editor',
+  component: Editor,
+  decorators: [withTheme, withLayout({ container: 'column' })],
+} satisfies Meta<typeof Editor>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => {
+    const { themeMode } = useThemeContext();
+    const extensions = useMemo(
+      () => [
+        // Basic extensions.
+        createBasicExtensions(),
+        createThemeExtensions({ themeMode }),
+      ],
+      [],
+    );
+
+    return <Editor classNames='p-2' {...args} extensions={extensions} />;
+  },
+  args: {
+    moveToEnd: true,
+    value: 'Hello world!',
+    onChange: (value) => console.log(value),
+  },
+};
+
+export const Automerge: Story = {
+  render: ({ value, ...props }) => {
+    const { themeMode } = useThemeContext();
+    const extensions = useMemo(
+      () => [
+        // Basic extensions.
+        createBasicExtensions(),
+        createThemeExtensions({ themeMode }),
+        automerge(createDocAccessor(createObject(DataType.makeText(value)), ['content'])),
+      ],
+      [],
+    );
+
+    // TODO(burdon): Remove the need for initialValue.
+    return <Editor classNames='p-2' {...props} initialValue={value} extensions={extensions} />;
+  },
+  args: {
+    moveToEnd: true,
+    value: 'Hello world!',
+    onChange: (value) => console.log(value),
+  },
+};

package/src/components/Editor/Editor.tsx

@@ -2,38 +2,81 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-import React, { forwardRef, useImperativeHandle } from 'react';
+import { Transaction } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 
-import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { type DataType } from '@dxos/schema';
 
+import { initialSync } from '../../extensions';
 import { type UseTextEditorProps, useTextEditor } from '../../hooks';
 
+// TODO(burdon): Convert to radix-style (support hooks inside).
+// <Editor.Root>
+//   <Editor.Toolbar />
+//   <Editor.TextEditor />
+// </Editor.Root>
+
+export type EditorController = {
+  view: EditorView | null;
+  focus: () => void;
+};
+
 export type EditorProps = ThemedClassName<
   {
-    id: string;
-    text: DataType.Text;
-  } & Omit<UseTextEditorProps, 'id'>
+    moveToEnd?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+  } & UseTextEditorProps
 >;
 
 /**
  * Minimal text editor.
+ * NOTE: This shouold not be used with the automerge extension.
  */
-export const Editor = forwardRef<EditorView | undefined, EditorProps>(
-  ({ classNames, id, text, ...props }, forwardedRef) => {
-    const { themeMode } = useThemeContext();
+export const Editor = forwardRef<EditorController, EditorProps>(
+  ({ classNames, id, extensions, moveToEnd, value, onChange, ...props }, forwardedRef) => {
     const { parentRef, focusAttributes, view } = useTextEditor(
       () => ({
         id,
-        initialValue: text.content,
+        initialValue: value,
+        extensions: [
+          extensions ?? [],
+          EditorView.updateListener.of(({ view, docChanged, transactions }) => {
+            const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
+            if (!isInitialSync && docChanged) {
+              onChange?.(view.state.doc.toString());
+            }
+          }),
+        ],
         ...props,
       }),
-      [id, text, themeMode],
+      [id, extensions, onChange],
     );
 
-    useImperativeHandle(forwardedRef, () => view, [view]);
-    return <div ref={parentRef} className={mx(classNames)} {...focusAttributes} />;
+    // External controller.
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        view,
+        focus: () => view?.focus(),
+      }),
+      [view],
+    );
+
+    // Set initial value and cursor position.
+    useEffect(() => {
+      requestAnimationFrame(() => {
+        view?.dispatch({
+          annotations: initialSync,
+          changes: value ? [{ from: 0, to: view?.state.doc.length ?? 0, insert: value ?? '' }] : [],
+          selection: moveToEnd ? { anchor: view?.state.doc.length ?? 0 } : undefined,
+        });
+        view?.focus();
+      });
+    }, [view, value, moveToEnd]);
+
+    return <div role='none' className={mx('is-full', classNames)} {...focusAttributes} ref={parentRef} />;
   },
 );

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -124,6 +124,7 @@ const useEditorToolbarActionGraph = (props: EditorToolbarProps) => {
 
 export const EditorToolbar = memo(({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
   const menuProps = useEditorToolbarActionGraph(props);
+
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
       <MenuProvider {...menuProps} attendableId={attendableId}>

package/src/components/index.ts

@@ -4,4 +4,3 @@
 
 export * from './Editor';
 export * from './EditorToolbar';
-export * from './Popover';

package/src/extensions/{autocomplete.ts → autocomplete/autocomplete.ts}

@@ -40,7 +40,8 @@ export type AutocompleteOptions = {
  * Creates an autocomplete extension that shows inline suggestions.
  * Pressing Tab will complete the suggestion.
  */
-export const autocomplete = ({ fireIfEmpty, onSubmit, onSuggest, onCancel }: AutocompleteOptions): Extension => {
+// TODO(burdon): Reconcile with typeahead.
+export const autocomplete = ({ fireIfEmpty, onSubmit, onSuggest, onCancel }: AutocompleteOptions = {}): Extension => {
   const suggest = ViewPlugin.fromClass(
     class {
       _decorations: DecorationSet;

package/src/extensions/autocomplete/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './autocomplete';
+export * from './match';
+export * from './placeholder';
+export * from './typeahead';

package/src/extensions/autocomplete/match.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export type CompoetionContext = { line: string };
+
+export type CompletionOptions = {
+  default?: string;
+  minLength?: number;
+};
+
+/**
+ * Util to match current line to a static list of completions.
+ */
+export const staticCompletion =
+  (completions: string[], options: CompletionOptions = {}) =>
+  ({ line }: CompoetionContext) => {
+    if (line.length === 0 && options.default) {
+      return options.default;
+    }
+
+    const parts = line.split(/\s+/).filter(Boolean);
+    if (parts.length) {
+      const str = parts.at(-1)!;
+      if (str.length >= (options.minLength ?? 0)) {
+        for (const completion of completions) {
+          const match = matchCompletion(completion, str);
+          if (match) {
+            return match;
+          }
+        }
+      }
+    }
+  };
+
+export const matchCompletion = (completion: string, str: string, minLength = 0): string | undefined => {
+  if (
+    str.length >= minLength &&
+    completion.length > str.length &&
+    completion.startsWith(str)
+    // TODO(burdon): If case insensitive, need to replace existing chars.
+    // completion.toLowerCase().startsWith(str.toLowerCase())
+  ) {
+    return completion.slice(str.length);
+  }
+};

package/src/extensions/{command → autocomplete}/placeholder.ts

@@ -11,20 +11,23 @@ import { clientRectsFor, flattenRect } from '../../util';
 type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
 
 export type PlaceholderOptions = {
-  delay?: number;
   content: Content;
+  delay?: number;
 };
 
-export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Extension => {
+/**
+ * Shows a transient placeholder at the current cursor position.
+ */
+export const placeholder = ({ content, delay = 3_000 }: PlaceholderOptions): Extension => {
   const plugin = ViewPlugin.fromClass(
     class {
-      decorations = Decoration.none;
-      timeout: ReturnType<typeof setTimeout> | undefined;
+      _timeout: ReturnType<typeof setTimeout> | undefined;
+      _decorations = Decoration.none;
 
       update(update: ViewUpdate) {
-        if (this.timeout) {
-          window.clearTimeout(this.timeout);
-          this.timeout = undefined;
+        if (this._timeout) {
+          window.clearTimeout(this._timeout);
+          this._timeout = undefined;
         }
 
         // Check if the active line (where cursor is) is empty.
@@ -33,10 +36,10 @@ export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Ext
         if (isEmpty) {
           // Create widget decoration at the start of the current line.
           const lineStart = activeLine.from;
-          this.timeout = setTimeout(() => {
-            this.decorations = Decoration.set([
+          this._timeout = setTimeout(() => {
+            this._decorations = Decoration.set([
               Decoration.widget({
-                widget: new Placeholder(content),
+                widget: new PlaceholderWidget(content),
                 side: 1,
               }).range(lineStart),
             ]);
@@ -45,18 +48,18 @@ export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Ext
           }, delay);
         }
 
-        this.decorations = Decoration.none;
+        this._decorations = Decoration.none;
       }
 
       destroy() {
-        if (this.timeout) {
-          clearTimeout(this.timeout);
+        if (this._timeout) {
+          clearTimeout(this._timeout);
         }
       }
     },
     {
       provide: (plugin) => {
-        return [EditorView.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none)];
+        return [EditorView.decorations.of((view) => view.plugin(plugin)?._decorations ?? Decoration.none)];
       },
     },
   );
@@ -66,7 +69,7 @@ export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Ext
     : plugin;
 };
 
-class Placeholder extends WidgetType {
+export class PlaceholderWidget extends WidgetType {
   constructor(readonly content: Content) {
     super();
   }
@@ -75,6 +78,7 @@ class Placeholder extends WidgetType {
     const wrap = document.createElement('span');
     wrap.className = 'cm-placeholder';
     wrap.style.pointerEvents = 'none';
+    wrap.setAttribute('aria-hidden', 'true');
     wrap.appendChild(
       typeof this.content === 'string'
         ? document.createTextNode(this.content)
@@ -82,7 +86,7 @@ class Placeholder extends WidgetType {
           ? this.content(view)
           : this.content.cloneNode(true),
     );
-    wrap.setAttribute('aria-hidden', 'true');
+
     return wrap;
   }
 
@@ -92,7 +96,7 @@ class Placeholder extends WidgetType {
       return null;
     }
 
-    const style = window.getComputedStyle(dom.parentNode as HTMLElement);
+    const style = getComputedStyle(dom.parentNode as HTMLElement);
     const rect = flattenRect(rects[0], style.direction !== 'rtl');
     const lineHeight = parseInt(style.lineHeight);
     if (rect.bottom - rect.top > lineHeight * 1.5) {

package/src/extensions/{command → autocomplete}/typeahead.ts

@@ -13,17 +13,16 @@ import {
   keymap,
 } from '@codemirror/view';
 
-import { Hint } from './hint';
+import { type CompoetionContext } from './match';
+import { PlaceholderWidget } from './placeholder';
 
-export type TypeaheadContext = { line: string };
-
-// TODO(burdon): Option to complete only at end of line?
+// TODO(burdon): Option to complete only at end of line.
 export type TypeaheadOptions = {
-  onComplete?: (context: TypeaheadContext) => string | undefined;
+  onComplete?: (context: CompoetionContext) => string | undefined;
 };
 
 /**
- * CodeMirror extension for typeahead completion.
+ * Shows a completion placeholder.
  */
 export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
   let hint: string | undefined;
@@ -57,7 +56,7 @@ export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
             const str = update.state.sliceDoc(line.from, selection.from);
             hint = onComplete?.({ line: str });
             if (hint) {
-              builder.add(selection.from, selection.to, Decoration.widget({ widget: new Hint(hint) }));
+              builder.add(selection.from, selection.to, Decoration.widget({ widget: new PlaceholderWidget(hint) }));
             }
           }
 
@@ -86,44 +85,3 @@ export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
     ),
   ];
 };
-
-type CompletionOptions = {
-  default?: string;
-  minLength?: number;
-};
-
-/**
- * Util to match current line to a static list of completions.
- */
-export const staticCompletion =
-  (completions: string[], options: CompletionOptions = {}) =>
-  ({ line }: TypeaheadContext) => {
-    if (line.length === 0 && options.default) {
-      return options.default;
-    }
-
-    const parts = line.split(/\s+/).filter(Boolean);
-    if (parts.length) {
-      const str = parts.at(-1)!;
-      if (str.length >= (options.minLength ?? 0)) {
-        for (const completion of completions) {
-          const match = matchCompletion(completion, str);
-          if (match) {
-            return match;
-          }
-        }
-      }
-    }
-  };
-
-export const matchCompletion = (completion: string, str: string, minLength = 0): string | undefined => {
-  if (
-    str.length >= minLength &&
-    completion.length > str.length &&
-    completion.startsWith(str)
-    // TODO(burdon): If case insensitive, need to replace existing chars.
-    // completion.toLowerCase().startsWith(str.toLowerCase())
-  ) {
-    return completion.slice(str.length);
-  }
-};

package/src/extensions/automerge/automerge.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import '@preact/signals-react';
 
 import { Repo } from '@automerge/automerge-repo';
@@ -16,7 +14,8 @@ import { DocAccessor, Query, type Space, createDocAccessor, useQuery, useSpace }
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
-import { render, withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { render } from '@dxos/storybook-utils';
 
 import { editorSlots } from '../../defaults';
 import { useTextEditor } from '../../hooks';
@@ -96,8 +95,9 @@ const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const objects = useQuery(space, Query.type(Type.Expando, { type: 'test' }));
 
   useEffect(() => {
-    if (!source && objects.length) {
-      const source = createDocAccessor(objects[0].content, ['content']);
+    const content = objects[0]?.content.target;
+    if (!source && content) {
+      const source = createDocAccessor(content, ['content']);
       setSource(source);
     }
   }, [objects, source]);
@@ -113,8 +113,9 @@ const meta = {
   title: 'ui/react-ui-editor/Automerge',
   component: Editor as any,
   render: render(DefaultStory),
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  decorators: [withTheme],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
 } satisfies Meta<typeof DefaultStory>;
@@ -128,14 +129,13 @@ export const Default: Story = {
 };
 
 export const WithEcho: Story = {
-  decorators: [withTheme],
   render: () => {
     return (
       <ClientRepeater
         count={2}
         component={EchoStory}
         createSpace
-        onSpaceCreated={async ({ space }) => {
+        onCreateSpace={async ({ space }) => {
           space.db.add(
             Obj.make(Type.Expando, {
               type: 'test',