@dxos/react-ui-editor 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/src/components/EditorToolbar/util.ts

@@ -2,28 +2,30 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type EditorView } from '@codemirror/view';
+import { type Rx } from '@effect-rx/rx-react';
 import { useMemo } from 'react';
 
-import { create, type ReactiveObject } from '@dxos/live-object';
-import { type Label, type ThemedClassName } from '@dxos/react-ui';
+import { type Action } from '@dxos/app-graph';
+import { live, type Live } from '@dxos/live-object';
+import { 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, EditorActionPayload, EditorViewMode, Formatting } from '../../extensions';
+import type { EditorAction, EditorViewMode, Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
-export type EditorToolbarState = Formatting &
-  Partial<{ comment: boolean; viewMode: EditorViewMode; selection: boolean }>;
+export type EditorToolbarState = Formatting & Partial<{ viewMode: EditorViewMode }>;
 
 export const useEditorToolbarState = (initialState: Partial<EditorToolbarState> = {}) => {
-  return useMemo(() => create<EditorToolbarState>(initialState), []);
+  return useMemo(() => live<EditorToolbarState>(initialState), []);
 };
 
 export type EditorToolbarFeatureFlags = Partial<{
@@ -31,16 +33,17 @@ export type EditorToolbarFeatureFlags = Partial<{
   formatting: boolean;
   lists: boolean;
   blocks: boolean;
-  comment: boolean;
   search: boolean;
-  viewMode: boolean;
+  // TODO(wittjosiah): Factor out. Depend on plugin-level capabilities.
+  image: () => void;
+  viewMode: (mode: EditorViewMode) => void;
 }>;
 
 export type EditorToolbarActionGraphProps = {
-  state: ReactiveObject<EditorToolbarState>;
+  state: Live<EditorToolbarState>;
+  getView: () => EditorView;
   // TODO(wittjosiah): Control positioning.
-  customActions?: () => ActionGraphProps;
-  onAction: (action: EditorAction) => void;
+  customActions?: Rx.Rx<ActionGraphProps>;
 };
 
 export type EditorToolbarProps = ThemedClassName<
@@ -49,17 +52,13 @@ export type EditorToolbarProps = ThemedClassName<
 
 export type EditorToolbarItem = EditorAction | MenuItemGroup | MenuSeparator;
 
-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 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 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/{viewMode.ts → view-mode.ts}

@@ -6,6 +6,7 @@ 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) =>
@@ -20,24 +21,24 @@ const createViewModeGroupAction = (value: string) =>
     'ph--eye--regular',
   );
 
-const createViewModeActions = (value: string) =>
+const createViewModeActions = (value: string, onViewModeChange: (mode: EditorViewMode) => void) =>
   Object.entries({
     preview: 'ph--eye--regular',
     source: 'ph--pencil-simple--regular',
     readonly: 'ph--pencil-slash--regular',
   }).map(([viewMode, icon]) => {
-    return createEditorAction(
-      { type: 'view-mode', data: viewMode, checked: viewMode === value },
+    const checked = viewMode === value;
+    return createEditorAction(`view-mode--${viewMode}`, () => onViewModeChange(viewMode as EditorViewMode), {
+      label: [`${viewMode} mode label`, { ns: translationKey }],
+      checked,
       icon,
-      [`${viewMode} mode label`, { ns: translationKey }],
-      `view-mode--${viewMode}`,
-    );
+    });
   });
 
-export const createViewMode = (state: EditorToolbarState) => {
+export const createViewMode = (state: EditorToolbarState, onViewModeChange: (mode: EditorViewMode) => void) => {
   const value = state.viewMode ?? 'source';
   const viewModeGroupAction = createViewModeGroupAction(value);
-  const viewModeActions = createViewModeActions(value);
+  const viewModeActions = createViewModeActions(value, onViewModeChange);
   return {
     nodes: [viewModeGroupAction as NodeArg<any>, ...viewModeActions],
     edges: [

package/src/components/Popover/RefDropdownMenu.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';
+
+import { addEventListener } from '@dxos/async';
+import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
+import { DropdownMenu } from '@dxos/react-ui';
+
+import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
+
+// TODO(burdon): Reconcile with RefPopover?
+
+const customEventOptions = { capture: true, passive: false };
+
+// Create a context for the dxn value.
+type RefDropdownMenuValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
+
+const REF_DROPDOWN_MENU = 'RefDropdownMenu';
+const [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext<RefDropdownMenuValue>(REF_DROPDOWN_MENU, {});
+
+type RefDropdownMenuProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
+
+const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProviderProps) => {
+  const trigger = useRef<DxRefTag | null>(null);
+  const [value, setValue] = useState<RefDropdownMenuValue>({});
+  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleDxRefTagActivate = useCallback(
+    (event: DxRefTagActivate) => {
+      const { refId, label, trigger: dxTrigger } = event;
+      setValue((value) => ({
+        ...value,
+        link: { label, ref: refId },
+        pending: true,
+      }));
+      trigger.current = dxTrigger;
+      queueMicrotask(() => setOpen(true));
+      void onLookup?.({ label, ref: refId }).then((target) =>
+        setValue((value) => ({
+          ...value,
+          target: target ?? undefined,
+          pending: false,
+        })),
+      );
+    },
+    [onLookup],
+  );
+
+  useEffect(() => {
+    return rootRef
+      ? addEventListener(rootRef, 'dx-ref-tag-activate', handleDxRefTagActivate, customEventOptions)
+      : undefined;
+  }, [rootRef]);
+
+  return (
+    <RefDropdownMenuContextProvider pending={value.pending} link={value.link} target={value.target}>
+      <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+        <DropdownMenu.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
+        <div role='none' className='contents' ref={setRootRef}>
+          {children}
+        </div>
+      </DropdownMenu.Root>
+    </RefDropdownMenuContextProvider>
+  );
+};
+
+export const RefDropdownMenu = {
+  Provider: RefDropdownMenuProvider,
+};
+
+export { useRefDropdownMenu };
+
+export type { RefDropdownMenuProviderProps, RefDropdownMenuValue };

package/src/components/Popover/RefPopover.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';
+
+import { addEventListener } from '@dxos/async';
+import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
+import { Popover } from '@dxos/react-ui';
+
+import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
+
+const customEventOptions = { capture: true, passive: false };
+
+// Create a context for the dxn value.
+type RefPopoverValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
+
+const REF_POPOVER = 'RefPopover';
+const [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>(REF_POPOVER, {});
+
+type RefPopoverProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
+
+const RefPopoverProvider = ({ children, onLookup }: RefPopoverProviderProps) => {
+  const trigger = useRef<DxRefTag | null>(null);
+  const [value, setValue] = useState<RefPopoverValue>({});
+  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleDxRefTagActivate = useCallback(
+    (event: DxRefTagActivate) => {
+      const { refId, label, trigger: dxTrigger } = event;
+      setValue((value) => ({
+        ...value,
+        link: { label, ref: refId },
+        pending: true,
+      }));
+      trigger.current = dxTrigger;
+      queueMicrotask(() => setOpen(true));
+      void onLookup?.({ label, ref: refId }).then((target) =>
+        setValue((value) => ({
+          ...value,
+          target: target ?? undefined,
+          pending: false,
+        })),
+      );
+    },
+    [onLookup],
+  );
+
+  useEffect(() => {
+    return rootRef
+      ? addEventListener(rootRef, 'dx-ref-tag-activate', handleDxRefTagActivate, customEventOptions)
+      : undefined;
+  }, [rootRef]);
+
+  return (
+    <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
+        <div role='none' className='contents' ref={setRootRef}>
+          {children}
+        </div>
+      </Popover.Root>
+    </RefPopoverContextProvider>
+  );
+};
+
+export const RefPopover = {
+  Provider: RefPopoverProvider,
+};
+
+export { useRefPopover };
+
+export type { RefPopoverProviderProps, RefPopoverValue };

package/src/components/Popover/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './RefPopover';
+export * from './RefDropdownMenu';

package/src/components/index.ts

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

package/src/defaults.ts

@@ -6,29 +6,28 @@ import { EditorView } from '@codemirror/view';
 
 import { mx } from '@dxos/react-ui-theme';
 
+import { type ThemeExtensionsOptions } from './extensions';
 import { fontMono } from './styles';
 
-const margin = '!mt-[1rem]';
-
 /**
  * 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).
  */
-// TOOD(burdon): Adjust depending on
-export const editorContent = mx(margin, '!mli-auto w-full max-w-[min(50rem,100%-4rem)]');
+export const editorWidth = '!mli-auto is-full max-is-[min(50rem,100%-4rem)]';
 
-/**
- * Margin for numbers.
- */
-export const editorFullWidth = mx(margin);
+export const editorSlots: ThemeExtensionsOptions['slots'] = {
+  scroll: {
+    className: 'pbs-2',
+  },
+  content: {
+    className: editorWidth,
+  },
+};
 
 export const editorGutter = EditorView.theme({
-  // Match margin from content.
-  // Gutter = 2rem + 1rem margin.
   '.cm-gutters': {
-    marginTop: '1rem',
     paddingRight: '1rem',
   },
 });
@@ -50,6 +49,6 @@ export const stackItemContentEditorClassNames = (role?: string) =>
 
 export const stackItemContentToolbarClassNames = (role?: string) =>
   mx(
-    'attention-surface is-full border-be !border-separator',
-    role === 'section' && 'sticky block-start-0 z-[1] -mbe-px min-is-0',
+    'relative z-[1] flex is-full bg-toolbarSurface border-be border-subduedSeparator',
+    role === 'section' && 'sticky block-start-0 -mbe-px min-is-0',
   );

package/src/extensions/annotations.ts

@@ -2,77 +2,54 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type EditorState, type Extension, StateField } from '@codemirror/state';
-import { Decoration, EditorView } from '@codemirror/view';
+import { type Extension, RangeSetBuilder } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
-import { isNotFalsy } from '@dxos/util';
-
-import { Cursor } from '../util';
-
-type Annotation = {
-  cursor: string;
-};
+const annotationMark = Decoration.mark({ class: 'cm-annotation' });
 
 export type AnnotationOptions = {
   match?: RegExp; // TODO(burdon): Update via hook (e.g., for search).
 };
 
-const annotationMark = Decoration.mark({ class: 'cm-annotation' });
-
-export const annotations = (options: AnnotationOptions = {}): Extension => {
-  // TODO(burdon): Build index of matches and cursors (in background function).
-  //  Define annotation action in prompt. E.g., extract company names. Find links, etc.
-  //  Show popover card. A16Z chain demo. Identify, extract, research, link. Multi-agent.
-  const match = (state: EditorState) => {
-    const annotations: Annotation[] = [];
-    const text = state.doc.toString();
-    if (options.match) {
-      const matches = text.matchAll(options.match);
-      for (const match of matches) {
-        const from = match.index!;
-        const to = from + match[0].length;
-        const cursor = Cursor.getCursorFromRange(state, { from, to });
-        annotations.push({ cursor });
-      }
-    }
-
-    return annotations;
-  };
-
-  const annotationsState = StateField.define<Annotation[]>({
-    create: (state) => {
-      return match(state);
-    },
-    update: (value, tr) => {
-      if (!tr.changes.empty) {
-        return match(tr.state);
-      }
-
-      return value;
-    },
-  });
-
+/**
+ *
+ */
+export const annotations = ({ match }: AnnotationOptions = {}): Extension => {
   return [
-    annotationsState,
-    EditorView.decorations.compute([annotationsState], (state) => {
-      const annotations = state.field(annotationsState);
-      const decorations = annotations
-        .map((annotation) => {
-          const range = Cursor.getRangeFromCursor(state, annotation.cursor);
-          return range && annotationMark.range(range.from, range.to);
-        })
-        .filter(isNotFalsy);
-
-      return Decoration.set(decorations);
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet = Decoration.none;
+        update(update: ViewUpdate) {
+          const builder = new RangeSetBuilder<Decoration>();
+          if (match) {
+            // Only process visible lines.
+            const { from, to } = update.view.viewport;
+            const text = update.state.doc.sliceString(from, to);
+            const matches = text.matchAll(match);
+            for (const m of matches) {
+              if (m.index !== undefined) {
+                // Adjust match position relative to viewport.
+                const start = from + m.index;
+                const end = start + m[0].length;
+                builder.add(start, end, annotationMark);
+              }
+            }
+          }
+
+          this.decorations = builder.finish();
+        }
+      },
+      {
+        decorations: (v) => v.decorations,
+      },
+    ),
+
+    EditorView.theme({
+      '.cm-annotation': {
+        textDecoration: 'underline',
+        textDecorationStyle: 'wavy',
+        textDecorationColor: 'var(--dx-errorText)',
+      },
     }),
-    styles,
   ];
 };
-
-const styles = EditorView.theme({
-  '.cm-annotation': {
-    textDecoration: 'underline',
-    textDecorationStyle: 'wavy',
-    textDecorationColor: 'var(--dx-error)',
-  },
-});

package/src/extensions/autocomplete.ts

@@ -17,7 +17,6 @@ import { keymap } from '@codemirror/view';
 export type AutocompleteResult = Completion;
 
 export type AutocompleteOptions = {
-  debug?: boolean;
   activateOnTyping?: boolean;
   override?: CompletionSource[];
   onSearch?: (text: string) => Completion[];
@@ -30,7 +29,7 @@ export type AutocompleteOptions = {
 /**
  * Autocomplete extension.
  */
-export const autocomplete = ({ debug, activateOnTyping, override, onSearch }: AutocompleteOptions = {}): Extension => {
+export const autocomplete = ({ activateOnTyping, override, onSearch }: AutocompleteOptions = {}): Extension => {
   const extensions: Extension[] = [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -40,16 +39,16 @@ export const autocomplete = ({ debug, activateOnTyping, override, onSearch }: Au
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      activateOnTyping,
       override,
-      closeOnBlur: !debug,
-      tooltipClass: () => 'shadow rounded',
+      activateOnTyping,
+      // closeOnBlur: false,
+      // tooltipClass: () => 'rounded-be pbe-1 border-separator',
     }),
   ];
 
   if (onSearch) {
     extensions.push(
-      // TODO(burdon): Optional decoration via addToOptions
+      // TODO(burdon): Optional decoration via addToOptions.
       markdownLanguage.data.of({
         autocomplete: (context: CompletionContext): CompletionResult | null => {
           const match = context.matchBefore(/\w*/);

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

@@ -5,26 +5,19 @@
 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,
-  Filter,
-  create,
-  createDocAccessor,
-  useQuery,
-  useSpace,
-  type Space,
-} from '@dxos/react-client/echo';
+import { DocAccessor, live, createDocAccessor, useQuery, useSpace, type Space, Query } 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';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { editorContent } from '../../defaults';
+import { editorSlots } from '../../defaults';
 import { useTextEditor } from '../../hooks';
 import translations from '../../translations';
 import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '../factories';
@@ -49,12 +42,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
       initialValue: DocAccessor.getValue(source),
       extensions: [
         createBasicExtensions({ placeholder: 'Type here...' }),
-        createThemeExtensions({
-          themeMode,
-          slots: {
-            editor: { className: editorContent },
-          },
-        }),
+        createThemeExtensions({ themeMode, slots: editorSlots }),
         createDataExtensions({ id: 'test', text: source, space, identity }),
       ],
       autoFocus,
@@ -79,11 +67,12 @@ const Story = () => {
         doc.text = initialContent;
       });
 
-      const object2 = repo2.find<TestObject>(object1.url);
+      const object2 = await repo2.find<TestObject>(object1.url);
       await object2.whenReady();
 
-      setObject1({ handle: object1, path: ['text'] });
-      setObject2({ handle: object2, path: ['text'] });
+      // TODO(mykola): Fix types.
+      setObject1({ handle: object1 as any, path: ['text'] });
+      setObject2({ handle: object2 as any, path: ['text'] });
     });
   }, []);
 
@@ -111,7 +100,7 @@ const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
   const [source, setSource] = useState<DocAccessor>();
-  const objects = useQuery<Expando>(space, Filter.from({ type: 'test' }));
+  const objects = useQuery(space, Query.type(Expando, { type: 'test' }));
 
   useEffect(() => {
     if (!source && objects.length) {
@@ -139,9 +128,9 @@ export const WithEcho = {
         createSpace
         onSpaceCreated={async ({ space }) => {
           space.db.add(
-            create({
+            live({
               type: 'test',
-              content: create(Expando, { content: initialContent }),
+              content: live(Expando, { content: initialContent }),
             }),
           );
         }}

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

@@ -2,17 +2,17 @@
 // 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';
 // TODO(wittjosiah): Move to vitest expect (and remove from package.json).
 import chai, { expect } from 'chai';
 import chaiDom from 'chai-dom';
-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 { get } from '@dxos/util';
 
 import { automerge } from './automerge';
 
@@ -24,7 +24,7 @@ const path = ['text'];
 
 class Generator {
   constructor(private readonly _handle: DocHandle<TestObject>) {}
-  update(text: string) {
+  update(text: string): void {
     this._handle.change((doc: TestObject) => {
       doc.text = text;
     });
@@ -36,7 +36,8 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
   const [view, setView] = useState<EditorView>();
   useEffect(() => {
     const extensions = [
-      automerge({ handle, path }),
+      // TODO(mykola): Fix types.
+      automerge({ handle: handle as any, path }),
       EditorView.updateListener.of((update) => {
         if (view.state.doc.toString() === 'hello!') {
           // Update editor.
@@ -46,7 +47,7 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
     ];
 
     const view = new EditorView({
-      state: EditorState.create({ doc: get(handle.docSync()!, path), extensions }),
+      state: EditorState.create({ doc: get(handle.doc()!, 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.docSync()!),
+      lastHeads: A.getHeads(accessor.handle.doc()!),
       unreconciledTransactions: [],
     }),
 

package/src/extensions/automerge/defs.ts

@@ -4,10 +4,9 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { type Heads, type Prop } from '@automerge/automerge';
 import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
 
-import { type Heads, type Prop } from '@dxos/automerge/automerge';
-
 export type State = {
   path: Prop[];
   lastHeads: Heads;