@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -2,60 +2,63 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { memo, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { type NodeArg } from '@dxos/app-graph';
 import { ElevationProvider } from '@dxos/react-ui';
-import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from '@dxos/react-ui-menu';
+import {
+  type MenuActionHandler,
+  MenuProvider,
+  ToolbarMenu,
+  createGapSeparator,
+  useMenuActions,
+} from '@dxos/react-ui-menu';
 import { textBlockWidth } from '@dxos/react-ui-theme';
 
 import { createBlocks } from './blocks';
 import { createComment } from './comment';
 import { createFormatting } from './formatting';
 import { createHeadings } from './headings';
-import { createImageUpload } from './image';
 import { createLists } from './lists';
-import { createSearch } from './search';
-import { type EditorToolbarActionGraphProps, type EditorToolbarFeatureFlags, type EditorToolbarProps } from './util';
-import { createViewMode } from './view-mode';
-import { stackItemContentToolbarClassNames } from '../../defaults';
+import {
+  type EditorToolbarActionGraphProps,
+  type EditorToolbarFeatureFlags,
+  type EditorToolbarProps,
+  editorToolbarSearch,
+} from './util';
+import { createViewMode } from './viewMode';
+import { stackItemContentToolbarClassNames } from '../../fragments';
 
 const createToolbar = ({
-  getView,
   state,
   customActions,
   ...features
-}: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'getView' | 'state' | 'customActions'>): {
+}: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'state' | 'customActions'>): {
   nodes: NodeArg<any>[];
   edges: { source: string; target: string }[];
 } => {
   const nodes = [];
   const edges = [];
   if (features.headings ?? true) {
-    const headings = createHeadings(state, getView);
+    const headings = createHeadings(state);
     nodes.push(...headings.nodes);
     edges.push(...headings.edges);
   }
   if (features.formatting ?? true) {
-    const formatting = createFormatting(state, getView);
+    const formatting = createFormatting(state);
     nodes.push(...formatting.nodes);
     edges.push(...formatting.edges);
   }
   if (features.lists ?? true) {
-    const lists = createLists(state, getView);
+    const lists = createLists(state);
     nodes.push(...lists.nodes);
     edges.push(...lists.edges);
   }
   if (features.blocks ?? true) {
-    const blocks = createBlocks(state, getView);
+    const blocks = createBlocks(state);
     nodes.push(...blocks.nodes);
     edges.push(...blocks.edges);
   }
-  if (features.image) {
-    const image = createImageUpload(features.image);
-    nodes.push(...image.nodes);
-    edges.push(...image.edges);
-  }
   if (customActions) {
     const custom = customActions();
     nodes.push(...custom.nodes);
@@ -64,41 +67,39 @@ const createToolbar = ({
   const editorToolbarGap = createGapSeparator();
   nodes.push(...editorToolbarGap.nodes);
   edges.push(...editorToolbarGap.edges);
-  if (features.comment) {
-    const comment = createComment(state, getView);
+  if (features.comment ?? true) {
+    const comment = createComment(state);
     nodes.push(...comment.nodes);
     edges.push(...comment.edges);
   }
   if (features.search ?? true) {
-    const search = createSearch(getView);
-    nodes.push(...search.nodes);
-    edges.push(...search.edges);
+    nodes.push(editorToolbarSearch);
+    edges.push({ source: 'root', target: editorToolbarSearch.id });
   }
-  if (features.viewMode) {
-    const viewMode = createViewMode(state, features.viewMode);
+  if (features.viewMode ?? true) {
+    const viewMode = createViewMode(state);
     nodes.push(...viewMode.nodes);
     edges.push(...viewMode.edges);
   }
   return { nodes, edges };
 };
 
-// TODO(wittjosiah): Toolbar re-rendering is causing this graph to be recreated and breaking reactivity in some cases.
-//   E.g. for toolbar dropdowns which use active icon, the icon is not updated when the active item changes.
-//   This is currently only happening in the markdown plugin usage and should be reproduced in an editor story.
-const useEditorToolbarActionGraph = (props: EditorToolbarProps) => {
+const useEditorToolbarActionGraph = ({ onAction, ...props }: EditorToolbarProps) => {
   const menuCreator = useCallback(() => createToolbar(props), [props]);
-  return useMenuActions(menuCreator);
+  const { resolveGroupItems } = useMenuActions(menuCreator);
+
+  return { resolveGroupItems, onAction: onAction as MenuActionHandler };
 };
 
-export const EditorToolbar = memo(({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
+export const EditorToolbar = ({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
   const menuProps = useEditorToolbarActionGraph(props);
   return (
     <div role='none' className={stackItemContentToolbarClassNames(role)}>
       <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
         <MenuProvider {...menuProps} attendableId={attendableId}>
-          <ToolbarMenu classNames={[textBlockWidth, classNames]} />
+          <ToolbarMenu classNames={[textBlockWidth, '!bg-transparent', classNames]} />
         </MenuProvider>
       </ElevationProvider>
     </div>
   );
-});
+};

package/src/components/EditorToolbar/blocks.ts

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { removeBlockquote, addBlockquote, removeCodeblock, addCodeblock, insertTable } from '../../extensions';
+import { type PayloadType } from '../../extensions';
 
 const createBlockGroupAction = (value: string) =>
   createEditorActionGroup('block', {
@@ -17,41 +15,22 @@ const createBlockGroupAction = (value: string) =>
     value,
   } as ToolbarMenuActionGroupProperties);
 
-const createBlockActions = (value: string, getView: () => EditorView, blankLine?: boolean) =>
+const createBlockActions = (value: string, blankLine?: boolean) =>
   Object.entries({
     blockquote: 'ph--quotes--regular',
     codeblock: 'ph--code-block--regular',
     table: 'ph--table--regular',
   }).map(([type, icon]) => {
-    const checked = type === value;
     return createEditorAction(
-      type,
-      () => {
-        const view = getView();
-        if (!view) {
-          return;
-        }
-
-        switch (type) {
-          case 'blockquote':
-            checked ? removeBlockquote(view) : addBlockquote(view);
-            break;
-          case 'codeblock':
-            checked ? removeCodeblock(view) : addCodeblock(view);
-            break;
-          case 'table':
-            insertTable(view);
-            break;
-        }
-      },
-      { checked, ...(type === 'table' && { disabled: !!blankLine }), icon },
+      { type: type as PayloadType, checked: type === value, ...(type === 'table' && { disabled: !!blankLine }) },
+      icon,
     );
   });
 
-export const createBlocks = (state: EditorToolbarState, getView: () => EditorView) => {
+export const createBlocks = (state: EditorToolbarState) => {
   const value = state?.blockQuote ? 'blockquote' : state.blockType ?? '';
   const blockGroupAction = createBlockGroupAction(value);
-  const blockActions = createBlockActions(value, getView, state.blankLine);
+  const blockActions = createBlockActions(value, state.blankLine);
   return {
     nodes: [blockGroupAction as NodeArg<any>, ...blockActions],
     edges: [

package/src/components/EditorToolbar/comment.ts

@@ -2,12 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-
 import { type Label } from '@dxos/react-ui';
 
 import { createEditorAction, type EditorToolbarState } from './util';
-import { createComment as nativeCreateComment } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const commentLabel = (comment?: boolean, selection?: boolean) =>
@@ -17,14 +14,10 @@ const commentLabel = (comment?: boolean, selection?: boolean) =>
       ? 'select text to comment label'
       : 'comment label';
 
-const createCommentAction = (label: Label, getView: () => EditorView) =>
-  createEditorAction('comment', () => nativeCreateComment(getView()), {
-    testId: 'editor.toolbar.comment',
-    icon: 'ph--chat-text--regular',
-    label,
-  });
+const createCommentAction = (label: Label) =>
+  createEditorAction({ type: 'comment', testId: 'editor.toolbar.comment' }, 'ph--chat-text--regular', label);
 
-export const createComment = (state: EditorToolbarState, getView: () => EditorView) => ({
-  nodes: [createCommentAction([commentLabel(state.comment, state.selection), { ns: translationKey }], getView)],
+export const createComment = (state: EditorToolbarState) => ({
+  nodes: [createCommentAction([commentLabel(state.comment, state.selection), { ns: translationKey }])],
   edges: [{ source: 'root', target: 'comment' }],
 });

package/src/components/EditorToolbar/formatting.ts

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { addLink, Inline, removeLink, setStyle, type Formatting } from '../../extensions';
+import { type Formatting, type PayloadType } from '../../extensions';
 
 const formats = {
   strong: 'ph--text-b--regular',
@@ -25,39 +23,14 @@ const createFormattingGroup = (formatting: Formatting) =>
     value: Object.keys(formats).filter((key) => !!formatting[key as keyof Formatting]),
   } as ToolbarMenuActionGroupProperties);
 
-const createFormattingActions = (formatting: Formatting, getView: () => EditorView) =>
-  Object.entries(formats).map(([type, icon]) => {
-    const checked = !!formatting[type as keyof Formatting];
-    return createEditorAction(
-      type,
-      () => {
-        const view = getView();
-        if (!view) {
-          return;
-        }
-
-        if (type === 'link') {
-          checked ? removeLink(view) : addLink()(view);
-          return;
-        }
-
-        const inlineType =
-          type === 'strong'
-            ? Inline.Strong
-            : type === 'emphasis'
-              ? Inline.Emphasis
-              : type === 'strikethrough'
-                ? Inline.Strikethrough
-                : Inline.Code;
-        setStyle(inlineType, !checked)(view);
-      },
-      { checked, icon },
-    );
-  });
+const createFormattingActions = (formatting: Formatting) =>
+  Object.entries(formats).map(([type, icon]) =>
+    createEditorAction({ type: type as PayloadType, checked: !!formatting[type as keyof Formatting] }, icon),
+  );
 
-export const createFormatting = (state: EditorToolbarState, getView: () => EditorView) => {
+export const createFormatting = (state: EditorToolbarState) => {
   const formattingGroupAction = createFormattingGroup(state);
-  const formattingActions = createFormattingActions(state, getView);
+  const formattingActions = createFormattingActions(state);
   return {
     nodes: [formattingGroupAction as NodeArg<any>, ...formattingActions],
     edges: [

package/src/components/EditorToolbar/headings.ts

@@ -2,13 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { setHeading } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const createHeadingGroupAction = (value: string) =>
@@ -23,7 +20,7 @@ const createHeadingGroupAction = (value: string) =>
     'ph--text-h--regular',
   );
 
-const createHeadingActions = (getView: () => EditorView) =>
+const createHeadingActions = (value: string) =>
   Object.entries({
     '0': 'ph--paragraph--regular',
     '1': 'ph--text-h-one--regular',
@@ -34,10 +31,12 @@ const createHeadingActions = (getView: () => EditorView) =>
     '6': 'ph--text-h-six--regular',
   }).map(([levelStr, icon]) => {
     const level = parseInt(levelStr);
-    return createEditorAction(`heading--${levelStr}`, () => setHeading(level)(getView()), {
-      label: ['heading level label', { count: level, ns: translationKey }],
+    return createEditorAction(
+      { type: 'heading', data: level, checked: value === levelStr },
       icon,
-    });
+      ['heading level label', { count: level, ns: translationKey }],
+      `heading--${levelStr}`,
+    );
   });
 
 const computeHeadingValue = (state: EditorToolbarState) => {
@@ -46,10 +45,10 @@ const computeHeadingValue = (state: EditorToolbarState) => {
   return header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : '';
 };
 
-export const createHeadings = (state: EditorToolbarState, getView: () => EditorView) => {
+export const createHeadings = (state: EditorToolbarState) => {
   const headingValue = computeHeadingValue(state);
   const headingGroupAction = createHeadingGroupAction(headingValue);
-  const headingActions = createHeadingActions(getView);
+  const headingActions = createHeadingActions(headingValue);
   return {
     nodes: [headingGroupAction as NodeArg<any>, ...headingActions],
     edges: [

package/src/components/EditorToolbar/lists.ts

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { addList, List, removeList } from '../../extensions';
+import { type PayloadType } from '../../extensions';
 
 const listStyles = {
   bullet: 'ph--list-bullets--regular',
@@ -23,32 +21,15 @@ const createListGroupAction = (value: string) =>
     value,
   } as ToolbarMenuActionGroupProperties);
 
-const createListActions = (value: string, getView: () => EditorView) =>
-  Object.entries(listStyles).map(([listStyle, icon]) => {
-    const checked = value === listStyle;
-    return createEditorAction(
-      `list-${listStyle}`,
-      () => {
-        const view = getView();
-        if (!view) {
-          return;
-        }
-
-        const listType = listStyle === 'ordered' ? List.Ordered : listStyle === 'bullet' ? List.Bullet : List.Task;
-        if (checked) {
-          removeList(listType)(view);
-        } else {
-          addList(listType)(view);
-        }
-      },
-      { checked, icon },
-    );
-  });
+const createListActions = (value: string) =>
+  Object.entries(listStyles).map(([listStyle, icon]) =>
+    createEditorAction({ type: `list-${listStyle}` as PayloadType, checked: value === listStyle }, icon),
+  );
 
-export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {
+export const createLists = (state: EditorToolbarState) => {
   const value = state.listStyle ?? '';
   const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value, getView);
+  const listActionsMap = createListActions(value);
   return {
     nodes: [listGroupAction as NodeArg<any>, ...listActionsMap],
     edges: [

package/src/components/EditorToolbar/util.ts

@@ -2,30 +2,28 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
 import { useMemo } from 'react';
 
-import { type Action } from '@dxos/app-graph';
-import { live, type Live } from '@dxos/live-object';
-import { type ThemedClassName } from '@dxos/react-ui';
+import { create, type ReactiveObject } from '@dxos/live-object';
+import { type Label, type ThemedClassName } from '@dxos/react-ui';
 import {
   type MenuSeparator,
   type MenuItemGroup,
   type ToolbarMenuActionGroupProperties,
+  type MenuActionProperties,
   createMenuAction,
   createMenuItemGroup,
   type ActionGraphProps,
-  type MenuActionProperties,
 } from '@dxos/react-ui-menu';
 
-import type { EditorAction, EditorViewMode, Formatting } from '../../extensions';
+import type { EditorAction, EditorActionPayload, EditorViewMode, Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
 export type EditorToolbarState = Formatting &
   Partial<{ comment: boolean; viewMode: EditorViewMode; selection: boolean }>;
 
 export const useEditorToolbarState = (initialState: Partial<EditorToolbarState> = {}) => {
-  return useMemo(() => live<EditorToolbarState>(initialState), []);
+  return useMemo(() => create<EditorToolbarState>(initialState), []);
 };
 
 export type EditorToolbarFeatureFlags = Partial<{
@@ -33,18 +31,16 @@ export type EditorToolbarFeatureFlags = Partial<{
   formatting: boolean;
   lists: boolean;
   blocks: boolean;
-  search: boolean;
-  // TODO(wittjosiah): Factor out. Depend on plugin-level capabilities.
   comment: boolean;
-  image: () => void;
-  viewMode: (mode: EditorViewMode) => void;
+  search: boolean;
+  viewMode: boolean;
 }>;
 
 export type EditorToolbarActionGraphProps = {
-  state: Live<EditorToolbarState>;
-  getView: () => EditorView;
+  state: ReactiveObject<EditorToolbarState>;
   // TODO(wittjosiah): Control positioning.
   customActions?: () => ActionGraphProps;
+  onAction: (action: EditorAction) => void;
 };
 
 export type EditorToolbarProps = ThemedClassName<
@@ -53,13 +49,17 @@ export type EditorToolbarProps = ThemedClassName<
 
 export type EditorToolbarItem = EditorAction | MenuItemGroup | MenuSeparator;
 
-export const createEditorAction = (id: string, invoke: () => void, properties: Partial<MenuActionProperties>) => {
-  const { label = [`${id} label`, { ns: translationKey }], ...rest } = properties;
-  return createMenuAction(id, invoke, { label, ...rest }) as Action<MenuActionProperties>;
-};
+export const createEditorAction = (
+  payload: EditorActionPayload & Partial<MenuActionProperties>,
+  icon: string,
+  label: Label = [`${payload.type} label`, { ns: translationKey }],
+  id: string = payload.type,
+) => createMenuAction(id, { icon, label, ...payload }) as EditorAction;
 
 export const createEditorActionGroup = (
   id: string,
   props: Omit<ToolbarMenuActionGroupProperties, 'icon'>,
   icon?: string,
 ) => createMenuItemGroup(id, { icon, iconOnly: true, ...props });
+
+export const editorToolbarSearch = createEditorAction({ type: 'search' }, 'ph--magnifying-glass--regular');

package/src/components/EditorToolbar/{view-mode.ts → viewMode.ts}

@@ -6,7 +6,6 @@ import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { type EditorViewMode } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const createViewModeGroupAction = (value: string) =>
@@ -21,24 +20,24 @@ const createViewModeGroupAction = (value: string) =>
     'ph--eye--regular',
   );
 
-const createViewModeActions = (value: string, onViewModeChange: (mode: EditorViewMode) => void) =>
+const createViewModeActions = (value: string) =>
   Object.entries({
     preview: 'ph--eye--regular',
     source: 'ph--pencil-simple--regular',
     readonly: 'ph--pencil-slash--regular',
   }).map(([viewMode, icon]) => {
-    const checked = viewMode === value;
-    return createEditorAction(`view-mode--${viewMode}`, () => onViewModeChange(viewMode as EditorViewMode), {
-      label: [`${viewMode} mode label`, { ns: translationKey }],
-      checked,
+    return createEditorAction(
+      { type: 'view-mode', data: viewMode, checked: viewMode === value },
       icon,
-    });
+      [`${viewMode} mode label`, { ns: translationKey }],
+      `view-mode--${viewMode}`,
+    );
   });
 
-export const createViewMode = (state: EditorToolbarState, onViewModeChange: (mode: EditorViewMode) => void) => {
+export const createViewMode = (state: EditorToolbarState) => {
   const value = state.viewMode ?? 'source';
   const viewModeGroupAction = createViewModeGroupAction(value);
-  const viewModeActions = createViewModeActions(value, onViewModeChange);
+  const viewModeActions = createViewModeActions(value);
   return {
     nodes: [viewModeGroupAction as NodeArg<any>, ...viewModeActions],
     edges: [

package/src/defaults.ts

@@ -17,9 +17,7 @@ const margin = '!mt-[1rem]';
  * NOTE: Max width - 4rem = 2rem left/right margin (or 2rem gutter plus 1rem left/right margin).
  */
 // TOOD(burdon): Adjust depending on
-export const editorWidth = '!mli-auto is-full max-is-[min(50rem,100%-4rem)]';
-
-export const editorContent = mx(margin, editorWidth);
+export const editorContent = mx(margin, '!mli-auto w-full max-w-[min(50rem,100%-4rem)]');
 
 /**
  * Margin for numbers.
@@ -52,6 +50,6 @@ export const stackItemContentEditorClassNames = (role?: string) =>
 
 export const stackItemContentToolbarClassNames = (role?: string) =>
   mx(
-    'relative z-[1] flex is-full bg-toolbarSurface border-be border-separator',
-    role === 'section' && 'sticky block-start-0 -mbe-px min-is-0',
+    'attention-surface is-full border-be !border-separator',
+    role === 'section' && 'sticky block-start-0 z-[1] -mbe-px min-is-0',
   );

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

@@ -5,13 +5,20 @@
 import '@dxos-theme';
 
 import '@preact/signals-react';
-
-import { Repo } from '@automerge/automerge-repo';
-import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import React, { useEffect, useState } from 'react';
 
+import { Repo } from '@dxos/automerge/automerge-repo';
+import { BroadcastChannelNetworkAdapter } from '@dxos/automerge/automerge-repo-network-broadcastchannel';
 import { Expando } from '@dxos/echo-schema';
-import { DocAccessor, live, createDocAccessor, useQuery, useSpace, type Space, Query } from '@dxos/react-client/echo';
+import {
+  DocAccessor,
+  Filter,
+  create,
+  createDocAccessor,
+  useQuery,
+  useSpace,
+  type Space,
+} from '@dxos/react-client/echo';
 import { useIdentity, type Identity } from '@dxos/react-client/halo';
 import { ClientRepeater, type ClientRepeatedComponentProps } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
@@ -72,12 +79,11 @@ const Story = () => {
         doc.text = initialContent;
       });
 
-      const object2 = await repo2.find<TestObject>(object1.url);
+      const object2 = repo2.find<TestObject>(object1.url);
       await object2.whenReady();
 
-      // TODO(mykola): Fix types.
-      setObject1({ handle: object1 as any, path: ['text'] });
-      setObject2({ handle: object2 as any, path: ['text'] });
+      setObject1({ handle: object1, path: ['text'] });
+      setObject2({ handle: object2, path: ['text'] });
     });
   }, []);
 
@@ -105,7 +111,7 @@ const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
   const [source, setSource] = useState<DocAccessor>();
-  const objects = useQuery(space, Query.type(Expando, { type: 'test' }));
+  const objects = useQuery<Expando>(space, Filter.from({ type: 'test' }));
 
   useEffect(() => {
     if (!source && objects.length) {
@@ -133,9 +139,9 @@ export const WithEcho = {
         createSpace
         onSpaceCreated={async ({ space }) => {
           space.db.add(
-            live({
+            create({
               type: 'test',
-              content: live(Expando, { content: initialContent }),
+              content: create(Expando, { content: initialContent }),
             }),
           );
         }}

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

@@ -2,7 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type DocHandle, Repo } from '@automerge/automerge-repo';
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { render, screen } from '@testing-library/react';
@@ -13,6 +12,8 @@ import get from 'lodash.get';
 import React, { type FC, useEffect, useRef, useState } from 'react';
 import { describe, test } from 'vitest';
 
+import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
+
 import { automerge } from './automerge';
 
 type TestObject = {
@@ -35,8 +36,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, path }),
       EditorView.updateListener.of((update) => {
         if (view.state.doc.toString() === 'hello!') {
           // Update editor.
@@ -46,7 +46,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: get(handle.docSync()!, path), extensions }),
       parent: ref.current!,
     });
 

package/src/extensions/automerge/automerge.ts

@@ -4,10 +4,10 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { next as A } from '@automerge/automerge';
 import { StateField, type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
+import { next as A } from '@dxos/automerge/automerge';
 import { type DocAccessor } from '@dxos/react-client/echo';
 
 import { cursorConverter } from './cursor';
@@ -19,7 +19,7 @@ export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({
     create: () => ({
       path: accessor.path.slice(),
-      lastHeads: A.getHeads(accessor.handle.doc()!),
+      lastHeads: A.getHeads(accessor.handle.docSync()!),
       unreconciledTransactions: [],
     }),