@dxos/react-ui-editor 0.3.11-main.870164f → 0.3.11-main.8d54a30

package/dist/types/src/hooks/{yjs/space-provider.d.ts → yjs.d.ts}

@@ -1,27 +1,27 @@
 import { Observable } from 'lib0/observable';
-import * as awarenessProtocol from 'y-protocols/awareness';
+import * as YP from 'y-protocols/awareness';
 import { type Doc } from 'yjs';
 import { type Space } from '@dxos/react-client/echo';
-type Awareness = awarenessProtocol.Awareness;
+import { type EditorModel, type UseTextModelProps } from './useTextModel';
+export declare const createYjsModel: ({ identity, space, text }: UseTextModelProps) => EditorModel;
 /**
  * Yjs awareness provider on top of a DXOS space.
  */
-export declare class SpaceAwarenessProvider extends Observable<any> {
+export declare class YAwarenessProvider extends Observable<any> {
     private readonly _space;
     private readonly _awareness;
     private readonly _clientId;
     private readonly _channel;
-    constructor({ space, doc, channel, awareness }: {
+    constructor({ space, doc, channel, awareness, }: {
         space: Space;
         doc: Doc;
         channel: string;
-        awareness?: Awareness;
+        awareness?: YP.Awareness;
     });
-    get awareness(): Awareness;
+    get awareness(): YP.Awareness;
     private _handleAwarenessUpdate;
     private _handleSpaceMessage;
     private _readMessage;
     private _handleBeforeUnload;
 }
-export {};
-//# sourceMappingURL=space-provider.d.ts.map
+//# sourceMappingURL=yjs.d.ts.map

package/dist/types/src/hooks/yjs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"yjs.d.ts","sourceRoot":"","sources":["../../../../src/hooks/yjs.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAI/B,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAKrD,OAAO,EAAE,KAAK,WAAW,EAA0B,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGlG,eAAO,MAAM,cAAc,8BAA+B,iBAAiB,KAAG,WAyC7E,CAAC;AAOF;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACrD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IAC1C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAS;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;gBAEtB,EACV,KAAK,EACL,GAAG,EACH,OAAO,EACP,SAAS,GACV,EAAE;QACD,KAAK,EAAE,KAAK,CAAC;QACb,GAAG,EAAE,GAAG,CAAC;QACT,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC;KAC1B;IA4BD,IAAI,SAAS,IAAI,EAAE,CAAC,SAAS,CAE5B;IAED,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,mBAAmB;CAG5B"}

package/dist/types/src/styles/cursors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursors.d.ts","sourceRoot":"","sources":["../../../../src/styles/cursors.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW;;;CAAsD,CAAC"}

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

@@ -1,3 +1,4 @@
+export * from './cursors';
 export * from './markdown';
 export * from './tokens';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC"}

package/dist/types/src/testing/replicator.d.ts

@@ -1,10 +1,10 @@
 import { Observable } from 'lib0/observable';
-import * as awarenessProtocol from 'y-protocols/awareness';
+import * as YP from 'y-protocols/awareness';
 import { Doc } from 'yjs';
 import { Event } from '@dxos/async';
 import { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 import { type EditorModel } from '../hooks';
-type Awareness = awarenessProtocol.Awareness;
+type Awareness = YP.Awareness;
 /**
  * Yjs awareness provider in-memory.
  */

package/dist/types/src/testing/replicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"replicator.d.ts","sourceRoot":"","sources":["../../../../src/testing/replicator.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEzD,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAM7C;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACpD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoB;IAClD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAM;gBAEf,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA+BtG,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IA0CpB,OAAO,CAAC,mBAAmB;CAG5B;AAED;;GAEG;AACH,qBAAa,UAAU;IAIT,OAAO,CAAC,QAAQ,CAAC,KAAK;IAHlC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,MAAM,CAAqB;gBAEN,KAAK,EAAE,QAAQ;IAE5C,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE;IAI7B,UAAU,OAAQ,MAAM,QAAO,GAAG,KAAe,WAAW,CAoB1D;CACH;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,UAAU,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,4BAA6B,kBAAkB,KAAG,WAEzE,CAAC"}
+{"version":3,"file":"replicator.d.ts","sourceRoot":"","sources":["../../../../src/testing/replicator.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,KAAK,SAAS,GAAG,EAAE,CAAC,SAAS,CAAC;AAM9B;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACpD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoB;IAClD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAM;gBAEf,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA4BtG,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IA0CpB,OAAO,CAAC,mBAAmB;CAG5B;AAED;;GAEG;AACH,qBAAa,UAAU;IAIT,OAAO,CAAC,QAAQ,CAAC,KAAK;IAHlC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,MAAM,CAAqB;gBAEN,KAAK,EAAE,QAAQ;IAE5C,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE;IAI7B,UAAU,OAAQ,MAAM,QAAO,GAAG,KAAe,WAAW,CAoB1D;CACH;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,UAAU,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,4BAA6B,kBAAkB,KAAG,WAEzE,CAAC"}

package/dist/types/src/util/cursor.d.ts

@@ -0,0 +1,17 @@
+import { Facet } from '@codemirror/state';
+/**
+ * Converts indexes into the text document into stable peer-independent cursors.
+ *
+ * See:
+ *  - https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
+ *  - https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
+ *
+ * @param {assoc} number Negative values will associate the cursor with the previous character
+ *                       while positive - with the next one.
+ */
+export interface CursorConverter {
+    toCursor(position: number, assoc?: -1 | 1 | undefined): string;
+    fromCursor(cursor: string): number;
+}
+export declare const CursorConverter: Facet<CursorConverter, CursorConverter>;
+//# sourceMappingURL=cursor.d.ts.map

package/dist/types/src/util/cursor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../../src/util/cursor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAOD,eAAO,MAAM,eAAe,yCAE1B,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './cursor';
+export * from './util';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}

package/dist/types/src/util/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/util/util.ts"],"names":[],"mappings":"AAMA;;GAEG;AAEH,eAAO,MAAM,eAAe,kCAOR,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.11-main.870164f",
+  "version": "0.3.11-main.8d54a30",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -38,19 +38,20 @@
     "y-codemirror.next": "^0.3.2",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.10",
-    "@dxos/async": "0.3.11-main.870164f",
-    "@dxos/automerge": "0.3.11-main.870164f",
-    "@dxos/display-name": "0.3.11-main.870164f",
-    "@dxos/invariant": "0.3.11-main.870164f",
-    "@dxos/debug": "0.3.11-main.870164f",
-    "@dxos/log": "0.3.11-main.870164f",
-    "@dxos/echo-schema": "0.3.11-main.870164f",
-    "@dxos/protocols": "0.3.11-main.870164f",
-    "@dxos/react-async": "0.3.11-main.870164f",
-    "@dxos/react-ui": "0.3.11-main.870164f",
-    "@dxos/text-model": "0.3.11-main.870164f",
-    "@dxos/react-ui-theme": "0.3.11-main.870164f",
-    "@dxos/util": "0.3.11-main.870164f"
+    "@dxos/async": "0.3.11-main.8d54a30",
+    "@dxos/automerge": "0.3.11-main.8d54a30",
+    "@dxos/debug": "0.3.11-main.8d54a30",
+    "@dxos/display-name": "0.3.11-main.8d54a30",
+    "@dxos/echo-schema": "0.3.11-main.8d54a30",
+    "@dxos/invariant": "0.3.11-main.8d54a30",
+    "@dxos/log": "0.3.11-main.8d54a30",
+    "@dxos/context": "0.3.11-main.8d54a30",
+    "@dxos/protocols": "0.3.11-main.8d54a30",
+    "@dxos/react-async": "0.3.11-main.8d54a30",
+    "@dxos/react-ui": "0.3.11-main.8d54a30",
+    "@dxos/react-ui-theme": "0.3.11-main.8d54a30",
+    "@dxos/text-model": "0.3.11-main.8d54a30",
+    "@dxos/util": "0.3.11-main.8d54a30"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
@@ -66,18 +67,18 @@
     "deepsignal": "1.4.0-shallow.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/config": "0.3.11-main.870164f",
-    "@dxos/echo-typegen": "0.3.11-main.870164f",
-    "@dxos/echo-signals": "0.3.11-main.870164f",
-    "@dxos/react-client": "0.3.11-main.870164f",
-    "@dxos/storybook-utils": "0.3.11-main.870164f",
-    "@dxos/react-ui": "0.3.11-main.870164f"
+    "@dxos/config": "0.3.11-main.8d54a30",
+    "@dxos/echo-typegen": "0.3.11-main.8d54a30",
+    "@dxos/react-client": "0.3.11-main.8d54a30",
+    "@dxos/react-ui": "0.3.11-main.8d54a30",
+    "@dxos/storybook-utils": "0.3.11-main.8d54a30",
+    "@dxos/echo-signals": "0.3.11-main.8d54a30"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.11-main.870164f"
+    "@dxos/react-client": "0.3.11-main.8d54a30"
   },
   "publishConfig": {
     "access": "public"

package/src/components/TextEditor/TextEditor.tsx

@@ -77,7 +77,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     >();
     useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
 
-    // TODO(burdon): Factor out?
+    // TODO(burdon): Factor out as extension.
     const { awareness, peer } = model;
     useEffect(() => {
       if (awareness && peer) {

package/src/{hooks/automerge → components/TextEditor}/automerge.stories.tsx

@@ -2,19 +2,29 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@preact/signals-react'; // Register react integration
+import '@dxosTheme';
+
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import { EditorView } from '@codemirror/view';
+import '@preact/signals-react'; // Register react integration
 import { basicSetup } from 'codemirror';
 import get from 'lodash.get';
 import React, { useEffect, useRef, useState } from 'react';
 
-// TODO(burdon): Why separate imports?
 import { type Prop } from '@dxos/automerge/automerge';
-import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
+import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
+import { Filter, setGlobalAutomergePreference } from '@dxos/echo-schema';
+import { type PublicKey } from '@dxos/keys';
+import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { ClientRepeater } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/storybook-utils';
 
-import { type IDocHandle } from './handle';
-import { automergePlugin } from './plugin';
+import { MarkdownEditor } from './TextEditor';
+import { type IDocHandle, automerge, awareness } from '../../extensions';
+import { useTextModel } from '../../hooks';
+
+// TODO(burdon): Move to components.
 
 type EditorProps = {
   handle: IDocHandle;
@@ -28,7 +38,7 @@ const Editor = ({ handle, path }: EditorProps) => {
   useEffect(() => {
     const view = (editorRoot.current = new EditorView({
       doc: get(handle.docSync()!, path),
-      extensions: [basicSetup, automergePlugin(handle, path)],
+      extensions: [basicSetup, automerge({ handle, path }), awareness()],
       parent: containerRef.current as any,
     }));
 
@@ -89,3 +99,53 @@ export default {
 };
 
 export const Default = {};
+
+const EchoStory = ({ id, spaceKey }: { id: number; spaceKey: PublicKey }) => {
+  const identity = useIdentity();
+  const space = useSpace(spaceKey);
+  // TODO(dmaretskyi): useQuery doesn't work.
+  const [obj] = space?.db.query(Filter.from({ type: 'test' })).objects ?? [];
+
+  const model = useTextModel({
+    text: obj?.content,
+    identity,
+    space,
+  });
+
+  if (!model) {
+    return null;
+  }
+
+  return (
+    // <div className={mx(fixedInsetFlexLayout, groupSurface)}>
+    <div className='flex justify-center overflow-y-scroll'>
+      <div className='flex flex-col w-[800px] py-16'>
+        <MarkdownEditor model={model} />
+        <div className='flex shrink-0 h-[300px]'></div>
+      </div>
+    </div>
+    // </div>
+  );
+};
+
+export const WithEcho = {
+  render: () => {
+    setGlobalAutomergePreference(true);
+    return (
+      <ClientRepeater
+        count={2}
+        createSpace
+        onCreateSpace={async (space) => {
+          space.db.add(
+            new Expando({
+              type: 'test',
+              content: new TextObject('Hello world!'),
+            }),
+          );
+        }}
+        Component={EchoStory}
+      />
+    );
+  },
+  decorators: [withTheme],
+};

package/src/components/TextEditor/codemirror.stories.ts

@@ -17,7 +17,8 @@ import { type Identity } from '@dxos/react-client/halo';
 import { joinCommonSpace, TestBuilder, textGenerator } from '@dxos/react-client/testing';
 import { YText } from '@dxos/text-model';
 
-import { cursorColor, SpaceAwarenessProvider } from '../../hooks';
+import { YAwarenessProvider } from '../../hooks';
+import { cursorColor } from '../../styles';
 import { EditorDocument, types as schema } from '../../testing';
 
 export default {
@@ -35,7 +36,7 @@ const updateEditor = async (id: number, editor: HTMLDivElement, identity: Identi
     return;
   }
 
-  const { awareness } = new SpaceAwarenessProvider({ space, doc, channel: `yjs.awareness.${text.id}` });
+  const { awareness } = new YAwarenessProvider({ space, doc, channel: `yjs.awareness.${text.id}` });
   awareness.setLocalStateField('user', {
     name: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
     // TODO(wittjosiah): Pick colours from theme based on identity key.

package/src/{hooks/yjs → components/TextEditor}/yjs.stories.tsx

@@ -12,7 +12,7 @@ import { ClientRepeater, textGenerator, useDataGenerator } from '@dxos/react-cli
 import { useId, Input } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { MarkdownEditor } from '../../components';
+import { MarkdownEditor } from './TextEditor';
 import { Replicator, useYjsModel } from '../../testing';
 
 export default {

package/src/{hooks/automerge/plugin.ts → extensions/automerge/automerge.ts}

@@ -1,57 +1,34 @@
 //
 // Copyright 2023 DXOS.org
+// Copyright 2024 Automerge
+// Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import {
-  Annotation,
-  type EditorState,
-  type Extension,
-  Facet,
-  StateEffect,
-  StateField,
-  type Transaction,
-  type TransactionSpec,
-} from '@codemirror/state';
+import { Facet, StateField, type Extension, type Transaction } from '@codemirror/state';
 import { ViewPlugin, type EditorView, type PluginValue, type ViewUpdate } from '@codemirror/view';
 
-import * as automerge from '@dxos/automerge/automerge';
-import { type Heads, type Prop } from '@dxos/automerge/automerge';
+import { next as A } from '@dxos/automerge/automerge';
+import { type Prop } from '@dxos/automerge/automerge';
 
-import { type IDocHandle } from './handle';
+import { cursorConverter } from './cursor';
+import { effectType, type IDocHandle, isReconcileTx, type Value } from './defs';
 import { PatchSemaphore } from './semaphore';
-
-export type Value = {
-  lastHeads: Heads;
-  path: Prop[];
-  unreconciledTransactions: Transaction[];
-};
-
-type UpdateHeads = {
-  newHeads: Heads;
-};
-
-export const effectType = StateEffect.define<UpdateHeads>({});
-
-export const updateHeads = (newHeads: Heads): StateEffect<UpdateHeads> => effectType.of({ newHeads });
-
-export const getLastHeads = (state: EditorState, field: Field): Heads => state.field(field).lastHeads;
-
-export const getPath = (state: EditorState, field: Field): Prop[] => state.field(field).path;
-
-export type Field = StateField<Value>;
+import { CursorConverter } from '../../util';
 
 const semaphoreFacet = Facet.define<PatchSemaphore, PatchSemaphore>({
   combine: (values) => values.at(-1)!, // Take last.
 });
 
-export type AutomergePlugin = {
-  extension: Extension;
+export type AutomergeOptions = {
+  handle: IDocHandle;
+  path: Prop[];
 };
 
-export const automergePlugin = (handle: IDocHandle, path: Prop[]): AutomergePlugin => {
+export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
+  // TODO(burdon): Rename.
   const stateField: StateField<Value> = StateField.define({
     create: () => ({
-      lastHeads: automerge.getHeads(handle.docSync()!),
+      lastHeads: A.getHeads(handle.docSync()!),
       unreconciledTransactions: [],
       path: path.slice(),
     }),
@@ -107,26 +84,11 @@ export const automergePlugin = (handle: IDocHandle, path: Prop[]): AutomergePlug
   );
 
   return {
-    extension: [stateField, semaphoreFacet.of(semaphore), viewPlugin],
+    extension: [
+      CursorConverter.of(cursorConverter(handle, path)),
+      semaphoreFacet.of(semaphore),
+      stateField,
+      viewPlugin,
+    ],
   };
 };
-
-export const reconcileAnnotationType = Annotation.define<unknown>();
-
-export const isReconcileTx = (tr: Transaction): boolean => !!tr.annotation(reconcileAnnotationType);
-
-export const makeReconcile = (tr: TransactionSpec) => {
-  if (tr.annotations != null) {
-    if (tr.annotations instanceof Array) {
-      tr.annotations = [...tr.annotations, reconcileAnnotationType.of({})];
-    } else {
-      tr.annotations = [tr.annotations, reconcileAnnotationType.of({})];
-    }
-  } else {
-    tr.annotations = [reconcileAnnotationType.of({})];
-  }
-  // return {
-  // ...tr,
-  // annotations: reconcileAnnotationType.of({})
-  // }
-};

package/src/extensions/automerge/cursor.ts

@@ -0,0 +1,51 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import get from 'lodash.get';
+
+import type { Prop } from '@dxos/automerge/automerge';
+import { next as automerge } from '@dxos/automerge/automerge';
+
+import { type IDocHandle } from './defs';
+import { type CursorConverter } from '../../util';
+
+export const cursorConverter = (handle: IDocHandle, path: Prop[]): CursorConverter => ({
+  // TODO(burdon): Handle assoc to associate with a previous character.
+  toCursor: (pos) => {
+    const doc = handle.docSync();
+    if (!doc) {
+      return '';
+    }
+
+    const value = get(doc, path);
+    if (typeof value === 'string' && value.length <= pos) {
+      return 'end';
+    }
+
+    // NOTE: Slice is needed because getCursor mutates the array.
+    return automerge.getCursor(doc, path.slice(), pos);
+  },
+  fromCursor: (cursor) => {
+    if (cursor === '') {
+      return 0;
+    }
+
+    const doc = handle.docSync();
+    if (!doc) {
+      return 0;
+    }
+
+    if (cursor === 'end') {
+      const value = get(doc, path);
+      if (typeof value === 'string') {
+        return value.length;
+      } else {
+        return 0;
+      }
+    }
+
+    // NOTE: Slice is needed because getCursor mutates the array.
+    return automerge.getCursorPosition(doc, path.slice(), cursor);
+  },
+});

package/src/extensions/automerge/defs.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2023 DXOS.org
+// Ref: https://github.com/automerge/automerge-codemirror
+//
+
+import {
+  Annotation,
+  StateEffect,
+  type StateField,
+  type EditorState,
+  type Transaction,
+  type TransactionSpec,
+} from '@codemirror/state';
+
+import { type ChangeFn, type ChangeOptions, type Doc, type Heads, type Prop } from '@dxos/automerge/automerge';
+
+export type Value = {
+  lastHeads: Heads;
+  path: Prop[];
+  unreconciledTransactions: Transaction[];
+};
+
+type UpdateHeads = {
+  newHeads: Heads;
+};
+
+export const effectType = StateEffect.define<UpdateHeads>({});
+
+export const updateHeads = (newHeads: Heads): StateEffect<UpdateHeads> => effectType.of({ newHeads });
+
+export const getLastHeads = (state: EditorState, field: StateField<Value>): Heads => state.field(field).lastHeads;
+
+export const getPath = (state: EditorState, field: StateField<Value>): Prop[] => state.field(field).path;
+
+export const reconcileAnnotationType = Annotation.define<unknown>();
+
+export const isReconcileTx = (tr: Transaction): boolean => !!tr.annotation(reconcileAnnotationType);
+
+export const makeReconcile = (tr: TransactionSpec) => {
+  if (tr.annotations != null) {
+    if (tr.annotations instanceof Array) {
+      tr.annotations = [...tr.annotations, reconcileAnnotationType.of({})];
+    } else {
+      tr.annotations = [tr.annotations, reconcileAnnotationType.of({})];
+    }
+  } else {
+    tr.annotations = [reconcileAnnotationType.of({})];
+  }
+  // return {
+  //   ...tr,
+  //   annotations: reconcileAnnotationType.of({})
+  // }
+};
+
+export type IDocHandle<T = any> = {
+  docSync(): Doc<T> | undefined;
+  change(callback: ChangeFn<T>, options?: ChangeOptions<T>): void;
+  changeAt(heads: Heads, callback: ChangeFn<T>, options?: ChangeOptions<T>): string[] | undefined;
+
+  addListener(event: 'change', listener: () => void): void;
+  removeListener(event: 'change', listener: () => void): void;
+};

package/src/extensions/automerge/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { automerge } from './automerge';
+export { type IDocHandle } from './defs';

package/src/{hooks → extensions}/automerge/semaphore.ts

@@ -1,15 +1,23 @@
 //
 // Copyright 2023 DXOS.org
+// Copyright 2024 Automerge
+// Ref: https://github.com/automerge/automerge-codemirror
 //
 
-// TODO(burdon): Additional copyright?
-
+import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
 import { next as automerge } from '@dxos/automerge/automerge';
 
-import { type IDocHandle } from './handle';
-import { type Field, isReconcileTx, getPath, reconcileAnnotationType, updateHeads, getLastHeads } from './plugin';
+import {
+  getLastHeads,
+  getPath,
+  isReconcileTx,
+  reconcileAnnotationType,
+  updateHeads,
+  type IDocHandle,
+  type Value,
+} from './defs';
 import { updateAutomerge } from './update-automerge';
 import { updateCodeMirror } from './update-codemirror';
 
@@ -22,15 +30,10 @@ type ChangeFn = (atHeads: Heads, change: (doc: Doc<unknown>) => void) => Heads |
  * TODO(burdon): Comment.
  */
 export class PatchSemaphore {
-  _field!: Field;
   _inReconcile = false;
   _queue: Array<ChangeFn> = [];
 
-  constructor(field?: Field) {
-    if (field !== undefined) {
-      this._field = field;
-    }
-  }
+  constructor(private readonly _field: StateField<Value>) {}
 
   reconcile = (handle: IDocHandle, view: EditorView) => {
     if (this._inReconcile) {
@@ -42,9 +45,8 @@ export class PatchSemaphore {
     const oldHeads = getLastHeads(view.state, this._field);
     let selection = view.state.selection;
 
-    const transactions = view.state.field(this._field).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
-
     // First undo all the unreconciled transactions.
+    const transactions = view.state.field(this._field).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
     const toInvert = transactions.slice().reverse();
     for (const tx of toInvert) {
       const inverted = tx.changes.invert(tx.startState.doc);

package/src/{hooks → extensions}/automerge/update-automerge.ts

@@ -1,18 +1,17 @@
 //
 // Copyright 2023 DXOS.org
+// Copyright 2024 Automerge
+// Ref: https://github.com/automerge/automerge-codemirror
 //
 
-// TODO(burdon): Additional copyright?
-
-import { type EditorState, type Text, type Transaction } from '@codemirror/state';
+import { type EditorState, type StateField, type Text, type Transaction } from '@codemirror/state';
 
 import { next as am, type Heads } from '@dxos/automerge/automerge';
 
-import { type IDocHandle } from './handle';
-import { type Field } from './plugin';
+import { type IDocHandle, type Value } from './defs';
 
 export const updateAutomerge = (
-  field: Field,
+  field: StateField<Value>,
   handle: IDocHandle,
   transactions: Transaction[],
   state: EditorState,