@dxos/ui-editor 0.0.0 → 0.8.4-main.03d5cd7b56

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/ui-editor",
-  "version": "0.0.0",
+  "version": "0.8.4-main.03d5cd7b56",
   "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": false,
@@ -23,15 +27,12 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.2.1",
+    "@automerge/automerge": "3.2.6",
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/commands": "^6.8.1",
     "@codemirror/lang-html": "^6.4.11",
@@ -46,7 +47,7 @@
     "@codemirror/search": "^6.5.11",
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.38.4",
+    "@codemirror/view": "^6.38.5",
     "@lezer/common": "^1.2.2",
     "@lezer/generator": "^1.7.1",
     "@lezer/highlight": "^1.2.1",
@@ -54,36 +55,35 @@
     "@replit/codemirror-vim": "^6.2.1",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@uiw/codemirror-theme-vscode": "^4.25.2",
-    "ajv": "^8.17.1",
+    "ajv": "^8.18.0",
     "codemirror": "^6.0.1",
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.3",
-    "@dxos/context": "0.8.3",
-    "@dxos/async": "0.8.3",
-    "@dxos/client": "0.8.3",
-    "@dxos/debug": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/echo-db": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/protocols": "0.8.3",
-    "@dxos/display-name": "0.8.3",
-    "@dxos/ui-types": "0.0.0",
-    "@dxos/ui": "0.0.0",
-    "@dxos/ui-theme": "0.0.0",
-    "@dxos/lit-ui": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/app-graph": "0.8.4-main.03d5cd7b56",
+    "@dxos/async": "0.8.4-main.03d5cd7b56",
+    "@dxos/client": "0.8.4-main.03d5cd7b56",
+    "@dxos/context": "0.8.4-main.03d5cd7b56",
+    "@dxos/debug": "0.8.4-main.03d5cd7b56",
+    "@dxos/display-name": "0.8.4-main.03d5cd7b56",
+    "@dxos/echo-db": "0.8.4-main.03d5cd7b56",
+    "@dxos/echo": "0.8.4-main.03d5cd7b56",
+    "@dxos/lit-ui": "0.8.4-main.03d5cd7b56",
+    "@dxos/protocols": "0.8.4-main.03d5cd7b56",
+    "@dxos/log": "0.8.4-main.03d5cd7b56",
+    "@dxos/invariant": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-theme": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-types": "0.8.4-main.03d5cd7b56",
+    "@dxos/util": "0.8.4-main.03d5cd7b56"
   },
   "devDependencies": {
-    "@automerge/automerge": "3.2.1",
-    "@automerge/automerge-repo": "2.5.1",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.5.1",
-    "@effect/platform": "0.93.6",
+    "@automerge/automerge": "3.2.6",
+    "@automerge/automerge-repo": "2.6.0-subduction.17",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.6.0-subduction.17",
+    "@effect/platform": "0.94.4",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -91,26 +91,25 @@
     "@types/lodash.sortby": "^4.7.7",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.19.11",
-    "happy-dom": "^13.3.1",
+    "effect": "3.20.0",
+    "happy-dom": "^20.0.0",
     "jsdom": "^27.0.0",
     "mocha": "^10.6.0",
-    "vite": "7.1.9",
+    "vite": "^8.0.10",
     "vite-plugin-top-level-await": "^1.6.0",
-    "vite-plugin-wasm": "^3.5.0",
-    "@dxos/echo": "0.8.3",
-    "@dxos/keyboard": "0.8.3",
-    "@dxos/echo-signals": "0.8.3",
-    "@dxos/config": "0.8.3",
-    "@dxos/random": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3",
-    "@dxos/ui-theme": "0.0.0",
-    "@dxos/schema": "0.8.3"
+    "vite-plugin-wasm": "^3.6.0",
+    "@dxos/config": "0.8.4-main.03d5cd7b56",
+    "@dxos/keyboard": "0.8.4-main.03d5cd7b56",
+    "@dxos/echo": "0.8.4-main.03d5cd7b56",
+    "@dxos/random": "0.8.4-main.03d5cd7b56",
+    "@dxos/schema": "0.8.4-main.03d5cd7b56",
+    "@dxos/storybook-utils": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-theme": "0.8.4-main.03d5cd7b56"
   },
   "peerDependencies": {
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
-    "@dxos/ui-theme": "0.0.0"
+    "@effect/platform": "0.94.4",
+    "effect": "3.20.0",
+    "@dxos/ui-theme": "0.8.4-main.03d5cd7b56"
   },
   "publishConfig": {
     "access": "public"

package/src/defaults.ts

@@ -6,29 +6,42 @@ import { mx } from '@dxos/ui-theme';
 
 import { type ThemeExtensionsOptions } from './extensions';
 
-/**
- * CodeMirror content width.
- * 40rem = 640px. Corresponds to initial plank width (Google docs, Stashpad, etc.)
- * 50rem = 800px. Maximum content width for solo mode.
- * NOTE: Max width - 4rem = 2rem left/right margin (or 2rem gutter plus 1rem left/right margin).
- */
-export const editorWidth = '!mli-auto is-full max-is-[min(50rem,100%-4rem)]';
+// NOTE: Padding is added to the editor to account for the focus ring (since otherwise the CM gutter will clip it)
+export const editorClassNames = (role?: string) =>
+  mx(
+    'dx-attention-surface p-0.5 data-[toolbar=disabled]:pt-2 dx-focus-ring-inset',
+    role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-h-24' : 'dx-container overflow-hidden',
+  );
 
-export const editorSlots: ThemeExtensionsOptions['slots'] = {
-  scroll: {
-    className: 'pbs-2',
-  },
+export const documentSlots: ThemeExtensionsOptions['slots'] = {
   content: {
-    className: editorWidth,
+    /**
+     * CodeMirror content width.
+     * 40rem = 640px. Corresponds to initial plank width (Google docs, Stashpad, etc.)
+     * 50rem = 800px. Maximum content width for solo mode.
+     * NOTE: Max width - 4rem = 2rem left/right margin (or 2rem gutter plus 1rem left/right margin).
+     */
+    className: mx(
+      // Inline-size container for widget sizing (children use `max-w-[100cqi]`).
+      // NOTE: Use inline-size, not full size containment — `container-type: size` on the
+      // editor content breaks CodeMirror's viewport measurement, leaving blank gaps during
+      // scroll until a click forces a re-measure.
+      'dx-inline-size-container',
+      // Wider margin for web (vs. mobile).
+      'pointer-fine:max-w-[min(50rem,100%-4rem)] pointer-coarse:max-w-[min(50rem,100%-2rem)]',
+      'mx-auto! w-full',
+    ),
   },
 };
 
-export const editorWithToolbarLayout =
-  'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
+export const compactSlots: ThemeExtensionsOptions['slots'] = {
+  content: {
+    className: 'mx-2!',
+  },
+};
 
-// NOTE: Padding is added to the editor to account for the focus ring (since otherwise the CM gutter will clip it)
-export const stackItemContentEditorClassNames = (role?: string) =>
-  mx(
-    'p-0.5 dx-focus-ring-inset attention-surface data-[toolbar=disabled]:pbs-2',
-    role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
-  );
+export const mobileSlots: ThemeExtensionsOptions['slots'] = {
+  content: {
+    className: 'mx-2!',
+  },
+};

package/src/extensions/annotations.ts

@@ -48,7 +48,7 @@ export const annotations = ({ match }: AnnotationOptions = {}): Extension => {
       '.cm-annotation': {
         textDecoration: 'underline',
         textDecorationStyle: 'wavy',
-        textDecorationColor: 'var(--dx-errorText)',
+        textDecorationColor: 'var(--color-error-text)',
       },
     }),
   ];

package/src/extensions/auto-scroll.ts

@@ -0,0 +1,234 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+import { addEventListener, combine, throttle } from '@dxos/async';
+import { Domino } from '@dxos/ui';
+import { getSize } from '@dxos/ui-theme';
+
+import { scrollerCrawlEffect, scrollerLineEffect } from './scroller';
+
+/** Enable or disable autoscroll. */
+export const autoScrollEffect = StateEffect.define<boolean>();
+
+export type AutoScrollProps = {
+  /**
+   * If true, immediately jump to the bottom and re-pin whenever the size of the
+   * document view (the scroll container) changes — e.g. when a sidebar toggles
+   * or the window is resized. This avoids the visible "stuck near bottom" gap
+   * that otherwise appears because the previous `scrollTop` no longer reaches
+   * the new content height.
+   * @default true
+   */
+  scrollOnResize?: boolean;
+};
+
+/**
+ * Extension that supports pinning the scroll position and automatically scrolls to the bottom when content is added.
+ */
+export const autoScroll = ({ scrollOnResize = true }: AutoScrollProps = {}) => {
+  let buttonContainer: HTMLDivElement | undefined;
+  let isPinned = true;
+  let jumpPending = false;
+  let enabled = true;
+  let firstUpdate = true;
+
+  const setPinned = (pinned: boolean) => {
+    buttonContainer?.classList.toggle('opacity-0', pinned);
+    isPinned = pinned;
+  };
+
+  return [
+    // Update listener for scrolling when content changes.
+    EditorView.updateListener.of((update) => {
+      const { view, heightChanged, state, startState } = update;
+
+      // Handle enable/disable effect.
+      for (const tr of update.transactions) {
+        for (const effect of tr.effects) {
+          if (effect.is(autoScrollEffect)) {
+            enabled = effect.value;
+            if (enabled) {
+              setPinned(true);
+              view.dispatch({
+                effects: scrollerCrawlEffect.of(true),
+              });
+            } else {
+              view.dispatch({
+                effects: scrollerCrawlEffect.of(false),
+              });
+            }
+          }
+        }
+      }
+
+      if (!enabled) {
+        return;
+      }
+
+      // Jump to bottom instantly when content first appears (either inserted into
+      // an empty doc, or present as initialValue when the editor is created).
+      if (isPinned && (firstUpdate || startState.doc.length === 0) && state.doc.length > 0) {
+        firstUpdate = false;
+        jumpPending = true;
+        requestAnimationFrame(() => {
+          view.scrollDOM.scrollTop = view.scrollDOM.scrollHeight;
+          jumpPending = false;
+        });
+        return;
+      }
+      firstUpdate = false;
+
+      // Suppress crawl while the initial jump is pending.
+      if (jumpPending) {
+        return;
+      }
+
+      // Maybe scroll if doc changed and pinned.
+      // NOTE: Geometry changed is triggered when widgets change height (e.g., toggle tool block).
+      if (heightChanged) {
+        if (isPinned) {
+          // NOTE: Use scroll geometry instead of coordsAtPos to avoid forced layout/scroll side-effects.
+          const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+          const delta = scrollHeight - scrollTop - clientHeight;
+          if (delta > 0) {
+            setPinned(true);
+            view.dispatch({ effects: scrollerCrawlEffect.of(true) });
+          } else if (delta < -1) {
+            setPinned(false);
+          }
+        } else {
+          // TODO(burdon): Should re-pin if content shrinks.
+          if (state.doc.length === 0) {
+            setPinned(true);
+          }
+        }
+      }
+    }),
+
+    // Re-pin and jump to bottom when the scroll container itself resizes (e.g. sidebar toggle,
+    // window resize). Doc-driven height changes are handled by the updateListener above; this
+    // observer covers the case where the viewport changes while the doc length is unchanged.
+    scrollOnResize
+      ? ViewPlugin.fromClass(
+          class {
+            private readonly observer: ResizeObserver;
+            private firstObservation = true;
+            private destroyed = false;
+            constructor(view: EditorView) {
+              // Throttle so a continuous drag-resize (or a flurry of layout changes) coalesces
+              // into a single re-pin per ~50ms instead of dispatching every frame.
+              const onResize = throttle(() => {
+                if (this.destroyed || !enabled) {
+                  return;
+                }
+
+                setPinned(true);
+                requestAnimationFrame(() => {
+                  if (this.destroyed) {
+                    return;
+                  }
+
+                  view.scrollDOM.scrollTo({ top: view.scrollDOM.scrollHeight, behavior: 'instant' });
+                  view.dispatch({ effects: scrollerCrawlEffect.of(false) });
+                });
+              }, 50);
+
+              this.observer = new ResizeObserver(() => {
+                // Skip the initial fire that ResizeObserver emits on `observe()`.
+                if (this.firstObservation) {
+                  this.firstObservation = false;
+                  return;
+                }
+                onResize();
+              });
+
+              this.observer.observe(view.scrollDOM);
+            }
+            destroy() {
+              this.destroyed = true;
+              this.observer.disconnect();
+            }
+          },
+        )
+      : [],
+
+    // Detect user scroll and unpin (or re-pin if scrolled to the bottom).
+    ViewPlugin.fromClass(
+      class {
+        private readonly cleanup: () => void;
+        constructor(view: EditorView) {
+          this.cleanup = createUserScrollDetector(
+            view.scrollDOM,
+            throttle(() => {
+              requestAnimationFrame(() => {
+                const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+                const delta = scrollHeight - scrollTop - clientHeight;
+                const pinned = delta === 0;
+                setPinned(pinned);
+                if (!pinned) {
+                  view.dispatch({ effects: scrollerCrawlEffect.of(false) });
+                }
+              });
+            }, 500),
+          );
+        }
+        destroy() {
+          this.cleanup();
+        }
+      },
+    ),
+
+    // Scroll button.
+    ViewPlugin.fromClass(
+      class {
+        constructor(view: EditorView) {
+          const icon = Domino.of('dx-icon' as any)
+            .classNames(getSize(4))
+            .attributes({ icon: 'ph--arrow-down--regular' });
+          const button = Domino.of('button')
+            .classNames('dx-button bg-accent-surface')
+            .attributes({ 'data-density': 'fine' })
+            .append(icon)
+            .on('click', () => {
+              setPinned(true);
+              view.dispatch({
+                effects: scrollerLineEffect.of({ line: -1, position: 'end', behavior: 'smooth' }),
+              });
+            });
+
+          buttonContainer = Domino.of('div')
+            .classNames('cm-scroll-button transition-opacity duration-300 opacity-0')
+            .append(button).root as HTMLDivElement;
+
+          view.scrollDOM.parentElement!.appendChild(buttonContainer);
+        }
+      },
+    ),
+  ];
+};
+
+/**
+ * Attaches listeners to detect genuine user-initiated scrolling on an element.
+ * Two sources are covered:
+ *   - `wheel`: fires only from physical mouse wheel / trackpad gestures.
+ *   - `pointerdown` on the scrollbar gutter: detected by comparing clientX to
+ *     the element's clientWidth (the content area, excluding the scrollbar).
+ * Returns a cleanup function that removes the listeners.
+ */
+// TODO(burdon): Still jumps when widgets are rendered.
+// - Track position of specific element/line in document and scroll relative to that.
+function createUserScrollDetector(element: HTMLElement, onUserScroll: () => void): () => void {
+  return combine(
+    addEventListener(element, 'wheel', () => onUserScroll(), { passive: true }),
+    addEventListener(element, 'pointerdown', (event) => {
+      // If the pointer lands beyond the content width it hit the scrollbar gutter.
+      if (event.clientX > element.getBoundingClientRect().right - (element.offsetWidth - element.clientWidth)) {
+        onUserScroll();
+      }
+    }),
+  );
+}

package/src/extensions/autocomplete/placeholder.ts

@@ -13,42 +13,61 @@ type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
 export type PlaceholderOptions = {
   content: Content;
   delay?: number;
+  focusOnly?: boolean;
 };
 
 /**
- * Shows a transient placeholder at the current cursor position.
+ * Shows a transient placeholder at the current cursor position. When
+ * `focusOnly` is set the placeholder is suppressed unless the editor has DOM
+ * focus, and is hidden again when focus is lost.
  */
-export const placeholder = ({ content, delay = 3_000 }: PlaceholderOptions): Extension => {
+export const placeholder = ({ content, delay = 3_000, focusOnly = false }: PlaceholderOptions): Extension => {
   const plugin = ViewPlugin.fromClass(
     class {
       _timeout: ReturnType<typeof setTimeout> | undefined;
       _decorations = Decoration.none;
 
       update(update: ViewUpdate) {
+        // React to actual user activity only. The empty `view.update([])`
+        // dispatched from the timeout below carries no doc/selection/focus
+        // change, so it falls through here as a no-op — that's how the
+        // freshly-set widget survives long enough for the decoration
+        // provider to read it. Without this gate, the unconditional reset
+        // would clobber the decoration in the same tick and the placeholder
+        // would never visibly render.
+        if (!update.docChanged && !update.selectionSet && !update.focusChanged) {
+          return;
+        }
+
         if (this._timeout) {
           window.clearTimeout(this._timeout);
           this._timeout = undefined;
         }
+        this._decorations = Decoration.none;
+
+        // Honour `focusOnly`: when the option is set and the editor isn't
+        // focused, leave the placeholder hidden and skip rescheduling. The
+        // next `focusChanged` update reschedules once focus returns.
+        if (focusOnly && !update.view.hasFocus) {
+          return;
+        }
 
-        // Check if the active line (where cursor is) is empty.
         const activeLine = update.view.state.doc.lineAt(update.view.state.selection.main.head);
-        const isEmpty = activeLine.text.trim() === '';
-        if (isEmpty) {
-          // Create widget decoration at the start of the current line.
-          const lineStart = activeLine.from;
-          this._timeout = setTimeout(() => {
-            this._decorations = Decoration.set([
-              Decoration.widget({
-                widget: new PlaceholderWidget(content),
-                side: 1,
-              }).range(lineStart),
-            ]);
-
-            update.view.update([]);
-          }, delay);
+        if (activeLine.text.trim() !== '') {
+          return;
         }
 
-        this._decorations = Decoration.none;
+        const lineStart = activeLine.from;
+        const view = update.view;
+        this._timeout = setTimeout(() => {
+          this._decorations = Decoration.set([
+            Decoration.widget({
+              widget: new PlaceholderWidget(content),
+              side: 1,
+            }).range(lineStart),
+          ]);
+          view.update([]);
+        }, delay);
       }
 
       destroy() {

package/src/extensions/automerge/automerge.test.tsx

@@ -2,23 +2,43 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type DocHandle, Repo } from '@automerge/automerge-repo';
+import { type ChangeFn, type ChangeOptions, type Doc, type Heads } from '@automerge/automerge';
+import { type DocHandle, Repo, decodeHeads, encodeHeads, initSubduction } from '@automerge/automerge-repo';
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { render, screen } from '@testing-library/react';
 import React, { type FC, useEffect, useRef, useState } from 'react';
-import { describe, test } from 'vitest';
+import { beforeAll, describe, test } from 'vitest';
 
-import { get } from '@dxos/util';
+import { type IDocHandle } from '@dxos/echo-db';
+import { getDeep } from '@dxos/util';
 
 import { automerge } from './automerge';
 
+// Adapter: `IDocHandle` (used by `DocHandleProxy` in production) takes raw `Heads` (hex)
+// at `changeAt`, but automerge-repo's `DocHandle.changeAt` expects bs58check-encoded
+// `UrlHeads`. Encode on the way in, decode on the way out so the test's repo-backed
+// handle satisfies the extension's `IDocHandle` contract.
+const adaptRepoHandle = <T,>(handle: DocHandle<T>): IDocHandle<T> => ({
+  doc: () => handle.doc() as Doc<T> | undefined,
+  change: (callback: ChangeFn<T>, options?: ChangeOptions<T>) =>
+    options ? handle.change(callback, options) : handle.change(callback),
+  changeAt: (heads: Heads, callback: ChangeFn<T>, options?: ChangeOptions<T>): Heads | undefined => {
+    const encoded = options
+      ? handle.changeAt(encodeHeads(heads), callback, options)
+      : handle.changeAt(encodeHeads(heads), callback);
+    return encoded ? decodeHeads(encoded) : undefined;
+  },
+  addListener: (event, listener) => handle.on(event, listener),
+  removeListener: (event, listener) => handle.off(event, listener),
+});
+
+const path = ['text'];
+
 type TestObject = {
   text: string;
 };
 
-const path = ['text'];
-
 class Generator {
   constructor(private readonly _handle: DocHandle<TestObject>) {}
   update(text: string): void {
@@ -33,8 +53,7 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
   const [view, setView] = useState<EditorView>();
   useEffect(() => {
     const extensions = [
-      // TODO(mykola): Fix types.
-      automerge({ handle: handle as any, path }),
+      automerge({ handle: adaptRepoHandle(handle), path }),
       EditorView.updateListener.of((update) => {
         if (view.state.doc.toString() === 'hello!') {
           // Update editor.
@@ -46,7 +65,7 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
     ];
 
     const view = new EditorView({
-      state: EditorState.create({ doc: get(handle.doc()!, path), extensions }),
+      state: EditorState.create({ doc: getDeep(handle.doc()!, path), extensions }),
       parent: ref.current!,
     });
 
@@ -58,19 +77,26 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
   return <div ref={ref} data-testid='editor' />;
 };
 
+// TODO(burdon): Test history/undo.
+// TODO(burdon): https://testing-library.com/docs/react-testing-library/example-intro/
+
 describe('Automerge', () => {
+  // Subduction-fork `Repo` constructs a `MemorySigner` internally; WASM must be
+  // initialized first or the constructor throws `'set_subduction_logger' of undefined`.
+  beforeAll(async () => {
+    await initSubduction();
+  });
+
   test('basic sync', ({ expect }) => {
     const repo = new Repo({ network: [] });
     const handle = repo.create<TestObject>();
     const generator = new Generator(handle);
     render(<Test handle={handle} generator={generator} />);
+
     const editor = screen.getByTestId('editor');
     expect(editor.textContent).toBe('');
 
     generator.update('hello!');
     expect(editor.textContent).toBe('hello world!');
   });
-
-  // TODO(burdon): Test history/undo.
-  // TODO(burdon): https://testing-library.com/docs/react-testing-library/example-intro/
 });

package/src/extensions/automerge/automerge.ts

@@ -12,9 +12,8 @@ import { DocAccessor } from '@dxos/echo-db';
 
 import { Cursor } from '../../util';
 import { initialSync } from '../state';
-
 import { cursorConverter } from './cursor';
-import { type State, isReconcile, updateHeadsEffect } from './defs';
+import { type State, isReconcile, reconcileAnnotation, updateHeadsEffect } from './defs';
 import { Syncer } from './sync';
 
 export const automerge = (accessor: DocAccessor): Extension => {
@@ -72,11 +71,10 @@ export const automerge = (accessor: DocAccessor): Extension => {
             const value = DocAccessor.getValue<string>(accessor);
             const current = this._view.state.doc.toString();
             if (value !== current) {
-              // TODO(burdon): This attempts to set the initial state, but creates problems.
-              // this._view.dispatch({
-              //   changes: { from: 0, to: this._view.state.doc.length, insert: value },
-              //   annotations: initialSync,
-              // });
+              this._view.dispatch({
+                changes: { from: 0, to: this._view.state.doc.length, insert: value },
+                annotations: [initialSync, reconcileAnnotation.of(true)],
+              });
             }
           });
         }