@dxos/react-ui-editor 0.3.8-next.f4e0086 → 0.3.9-main.325dd0a

package/dist/types/src/automerge/automerge-plugin/PatchSemaphore.d.ts

@@ -0,0 +1,16 @@
+import { type EditorView } from '@codemirror/view';
+import { next as automerge } from '@dxos/automerge/automerge';
+import { type Field } from './plugin';
+import { type Peer } from '../demo';
+type Doc<T> = automerge.Doc<T>;
+type Heads = automerge.Heads;
+type ChangeFn = (atHeads: Heads, change: (doc: Doc<unknown>) => void) => Heads | undefined;
+export declare class PatchSemaphore {
+    _field: Field;
+    _inReconcile: boolean;
+    _queue: Array<ChangeFn>;
+    constructor(field?: Field);
+    reconcile: (handle: Peer, view: EditorView) => void;
+}
+export {};
+//# sourceMappingURL=PatchSemaphore.d.ts.map

package/dist/types/src/automerge/automerge-plugin/PatchSemaphore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatchSemaphore.d.ts","sourceRoot":"","sources":["../../../../../src/automerge/automerge-plugin/PatchSemaphore.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAI9D,OAAO,EAAE,KAAK,KAAK,EAA8E,MAAM,UAAU,CAAC;AAClH,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC,KAAK,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC/B,KAAK,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;AAE7B,KAAK,QAAQ,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,OAAO,CAAC,KAAK,IAAI,KAAK,KAAK,GAAG,SAAS,CAAC;AAE3F,qBAAa,cAAc;IACzB,MAAM,EAAG,KAAK,CAAC;IACf,YAAY,UAAS;IACrB,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAM;gBAEjB,KAAK,CAAC,EAAE,KAAK;IAMzB,SAAS,WAAY,IAAI,QAAQ,UAAU,UA2CzC;CACH"}

package/dist/types/src/automerge/automerge-plugin/amToCodemirror.d.ts

@@ -0,0 +1,6 @@
+import { type EditorSelection } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
+import { type Patch, type Prop } from '@dxos/automerge/automerge';
+declare const _default: (view: EditorView, selection: EditorSelection, target: Prop[], patches: Patch[]) => void;
+export default _default;
+//# sourceMappingURL=amToCodemirror.d.ts.map

package/dist/types/src/automerge/automerge-plugin/amToCodemirror.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"amToCodemirror.d.ts","sourceRoot":"","sources":["../../../../../src/automerge/automerge-plugin/amToCodemirror.ts"],"names":[],"mappings":"AAIA,OAAO,EAA8B,KAAK,eAAe,EAAoB,MAAM,mBAAmB,CAAC;AACvG,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAGL,KAAK,KAAK,EACV,KAAK,IAAI,EAGV,MAAM,2BAA2B,CAAC;+BAIb,UAAU,aAAa,eAAe,UAAU,IAAI,EAAE,WAAW,KAAK,EAAE;AAA9F,wBAgBE"}

package/dist/types/src/automerge/automerge-plugin/codeMirrorToAm.d.ts

@@ -0,0 +1,7 @@
+import { type EditorState, type Transaction } from '@codemirror/state';
+import { type Heads } from '@dxos/automerge/automerge';
+import { type Field } from './plugin';
+import { type Peer } from '../demo';
+declare const _default: (field: Field, handle: Peer, transactions: Transaction[], state: EditorState) => Heads | undefined;
+export default _default;
+//# sourceMappingURL=codeMirrorToAm.d.ts.map

package/dist/types/src/automerge/automerge-plugin/codeMirrorToAm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeMirrorToAm.d.ts","sourceRoot":"","sources":["../../../../../src/automerge/automerge-plugin/codeMirrorToAm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAa,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAElF,OAAO,EAAc,KAAK,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;+CAEE,IAAI,gBAAgB,WAAW,EAAE,SAAS,WAAW,KAAG,KAAK,GAAG,SAAS;AAA/G,wBA0BE"}

package/dist/types/src/automerge/automerge-plugin/index.d.ts

@@ -0,0 +1,3 @@
+export { plugin } from './plugin';
+export { PatchSemaphore } from './PatchSemaphore';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/automerge/automerge-plugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/automerge/automerge-plugin/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/types/src/automerge/automerge-plugin/plugin.d.ts

@@ -0,0 +1,25 @@
+import { type EditorState, type Extension, StateEffect, StateField, type Transaction, type TransactionSpec } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
+import * as automerge from '@dxos/automerge/automerge';
+import { type Doc, type Heads, type Prop } from '@dxos/automerge/automerge';
+import { type Peer } from '../demo';
+export type Value = {
+    lastHeads: Heads;
+    path: Prop[];
+    unreconciledTransactions: Transaction[];
+};
+type UpdateHeads = {
+    newHeads: Heads;
+};
+export declare const effectType: import("@codemirror/state").StateEffectType<UpdateHeads>;
+export declare const updateHeads: (newHeads: automerge.next.Heads) => StateEffect<UpdateHeads>;
+export declare const getLastHeads: (state: EditorState, field: Field) => automerge.next.Heads;
+export declare const getPath: (state: EditorState, field: Field) => Prop[];
+export type Field = StateField<Value>;
+export declare const plugin: <T>(doc: automerge.next.Doc<T>, path: Prop[]) => Extension;
+export declare const reconcileAnnotationType: import("@codemirror/state").AnnotationType<unknown>;
+export declare const isReconcileTx: (tr: Transaction) => boolean;
+export declare const makeReconcile: (tr: TransactionSpec) => void;
+export declare const reconcile: (handle: Peer, view: EditorView) => void;
+export {};
+//# sourceMappingURL=plugin.d.ts.map

package/dist/types/src/automerge/automerge-plugin/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../../../src/automerge/automerge-plugin/plugin.ts"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,SAAS,EAEd,WAAW,EACX,UAAU,EACV,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAG5E,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,EAAE,KAAK,CAAC;IACjB,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,wBAAwB,EAAE,WAAW,EAAE,CAAC;CACzC,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,KAAK,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,UAAU,0DAAsC,CAAC;AAE9D,eAAO,MAAM,WAAW,sCAAsB,YAAY,WAAW,CAAgC,CAAC;AAEtG,eAAO,MAAM,YAAY,UAAW,WAAW,uCAAsD,CAAC;AAEtG,eAAO,MAAM,OAAO,UAAW,WAAW,mBAAiB,IAAI,EAA6B,CAAC;AAE7F,MAAM,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;AAMtC,eAAO,MAAM,MAAM,wCAA0B,IAAI,EAAE,KAAG,SAiCrD,CAAC;AAEF,eAAO,MAAM,uBAAuB,qDAA+B,CAAC;AAEpE,eAAO,MAAM,aAAa,OAAQ,WAAW,KAAG,OAAmD,CAAC;AAEpG,eAAO,MAAM,aAAa,OAAQ,eAAe,SAchD,CAAC;AAEF,eAAO,MAAM,SAAS,WAAY,IAAI,QAAQ,UAAU,SAEvD,CAAC"}

package/dist/types/src/automerge/automerge.stories.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const EditorStory: {
+    render: () => JSX.Element;
+};
+//# sourceMappingURL=automerge.stories.d.ts.map

package/dist/types/src/automerge/automerge.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"automerge.stories.d.ts","sourceRoot":"","sources":["../../../../src/automerge/automerge.stories.tsx"],"names":[],"mappings":";;;AAkGA,wBAEE;AAEF,eAAO,MAAM,WAAW;;CAEvB,CAAC"}

package/dist/types/src/automerge/demo.d.ts

@@ -0,0 +1,25 @@
+import { Event } from '@dxos/async';
+import { type Doc, next as automerge, type ChangeOptions, type ChangeFn, type Heads } from '@dxos/automerge/automerge';
+export declare class Peer {
+    changeEvent: Event<void>;
+    storage: Map<string, Uint8Array>;
+    stats: {
+        messagesSent: number;
+        messagesReceived: number;
+        bytesSent: number;
+        bytesReceived: number;
+        snapshotBytes: number;
+        incrementalBytes: number;
+    };
+    doc: Doc<{
+        text: string;
+    }>;
+    change(options: string | ChangeOptions<any> | ChangeFn<any>, callback?: ChangeFn<any>): void;
+    changeAt(scope: Heads, options: string | ChangeOptions<any> | ChangeFn<any>, callback?: ChangeFn<any>): automerge.Heads | null;
+    replicate(): {
+        readable: ReadableStream<Uint8Array>;
+        writable: WritableStream<Uint8Array>;
+    };
+    private _handleChange;
+}
+//# sourceMappingURL=demo.d.ts.map

package/dist/types/src/automerge/demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo.d.ts","sourceRoot":"","sources":["../../../../src/automerge/demo.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EACL,KAAK,GAAG,EACR,IAAI,IAAI,SAAS,EACjB,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,KAAK,EAEX,MAAM,2BAA2B,CAAC;AAEnC,qBAAa,IAAI;IACf,WAAW,cAAe;IAE1B,OAAO,0BAAiC;IACxC,KAAK;;;;;;;MAOH;IAEF,GAAG,EAAG,GAAG,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE5B,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC;IAKrF,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC;IAOrG,SAAS,IAAI;QAAE,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;QAAC,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAA;KAAE;IAgD3F,OAAO,CAAC,aAAa;CAgBtB"}

package/dist/types/stories/html/code-mirror.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-mirror.stories.d.ts","sourceRoot":"","sources":["../../../../stories/html/code-mirror.stories.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAMhD,OAAO,EAAE,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;;;;AAS5D,wBAEE;AAoEF,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAoBjF,CAAC"}
+{"version":3,"file":"code-mirror.stories.d.ts","sourceRoot":"","sources":["../../../../stories/html/code-mirror.stories.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAKhD,OAAO,EAAE,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;;;;AAS5D,wBAEE;AAoEF,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAoBjF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.8-next.f4e0086",
+  "version": "0.3.9-main.325dd0a",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,20 +13,20 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.4.2",
-    "@codemirror/commands": "^6.2.2",
-    "@codemirror/lang-markdown": "^6.1.0",
-    "@codemirror/language": "^6.6.0",
-    "@codemirror/language-data": "^6.1.0",
-    "@codemirror/lint": "^6.2.0",
-    "@codemirror/search": "^6.3.0",
-    "@codemirror/state": "^6.2.0",
-    "@codemirror/theme-one-dark": "^6.1.1",
-    "@codemirror/view": "^6.9.2",
+    "@codemirror/autocomplete": "^6.11.0",
+    "@codemirror/commands": "^6.3.0",
+    "@codemirror/lang-markdown": "^6.2.2",
+    "@codemirror/language": "^6.9.2",
+    "@codemirror/language-data": "^6.3.1",
+    "@codemirror/lint": "^6.4.2",
+    "@codemirror/search": "^6.5.4",
+    "@codemirror/state": "^6.3.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.22.0",
     "@fluentui/react-tabster": "^9.12.0",
-    "@lezer/common": "^1.0.2",
-    "@lezer/highlight": "^1.1.3",
-    "@lezer/markdown": "^1.0.2",
+    "@lezer/common": "^1.1.1",
+    "@lezer/highlight": "^1.2.0",
+    "@lezer/markdown": "^1.1.1",
     "@replit/codemirror-vim": "^6.0.14",
     "@tiptap/core": "2.0.0-beta.220",
     "@tiptap/extension-collaboration": "2.0.0-beta.220",
@@ -37,7 +37,7 @@
     "@tiptap/pm": "2.0.0-beta.220",
     "@tiptap/react": "2.0.0-beta.220",
     "@tiptap/starter-kit": "2.0.0-beta.220",
-    "codemirror": "^6.0.1",
+    "codemirror": "^6.65.7",
     "lib0": "^0.2.65",
     "lodash.get": "^4.4.2",
     "prosemirror-model": "^1.19.0",
@@ -47,31 +47,34 @@
     "y-prosemirror": "~1.0.20",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.8",
-    "@dxos/display-name": "0.3.8-next.f4e0086",
-    "@dxos/log": "0.3.8-next.f4e0086",
-    "@dxos/react-async": "0.3.8-next.f4e0086",
-    "@dxos/debug": "0.3.8-next.f4e0086",
-    "@dxos/react-ui-theme": "0.3.8-next.f4e0086",
-    "@dxos/react-ui": "0.3.8-next.f4e0086",
-    "@dxos/text-model": "0.3.8-next.f4e0086",
-    "@dxos/util": "0.3.8-next.f4e0086",
-    "@dxos/protocols": "0.3.8-next.f4e0086"
+    "@dxos/debug": "0.3.9-main.325dd0a",
+    "@dxos/display-name": "0.3.9-main.325dd0a",
+    "@dxos/log": "0.3.9-main.325dd0a",
+    "@dxos/protocols": "0.3.9-main.325dd0a",
+    "@dxos/react-ui": "0.3.9-main.325dd0a",
+    "@dxos/react-ui-theme": "0.3.9-main.325dd0a",
+    "@dxos/text-model": "0.3.9-main.325dd0a",
+    "@dxos/react-async": "0.3.9-main.325dd0a",
+    "@dxos/util": "0.3.9-main.325dd0a"
   },
   "devDependencies": {
+    "@codemirror/basic-setup": "^0.20.0",
+    "@types/codemirror": "^5.60.14",
     "@types/lodash.get": "^4.4.7",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/echo-schema": "0.3.8-next.f4e0086",
-    "@dxos/config": "0.3.8-next.f4e0086",
-    "@dxos/echo-typegen": "0.3.8-next.f4e0086",
-    "@dxos/react-client": "0.3.8-next.f4e0086"
+    "@dxos/automerge": "0.3.9-main.325dd0a",
+    "@dxos/echo-schema": "0.3.9-main.325dd0a",
+    "@dxos/config": "0.3.9-main.325dd0a",
+    "@dxos/echo-typegen": "0.3.9-main.325dd0a",
+    "@dxos/react-client": "0.3.9-main.325dd0a"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.8-next.f4e0086"
+    "@dxos/react-client": "0.3.9-main.325dd0a"
   },
   "publishConfig": {
     "access": "public"

package/src/automerge/automerge-plugin/PatchSemaphore.ts

@@ -0,0 +1,74 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+
+import { next as automerge } from '@dxos/automerge/automerge';
+
+import amToCodemirror from './amToCodemirror';
+import codeMirrorToAm from './codeMirrorToAm';
+import { type Field, isReconcileTx, getPath, reconcileAnnotationType, updateHeads, getLastHeads } from './plugin';
+import { type Peer } from '../demo';
+
+type Doc<T> = automerge.Doc<T>;
+type Heads = automerge.Heads;
+
+type ChangeFn = (atHeads: Heads, change: (doc: Doc<unknown>) => void) => Heads | undefined;
+
+export class PatchSemaphore {
+  _field!: Field;
+  _inReconcile = false;
+  _queue: Array<ChangeFn> = [];
+
+  constructor(field?: Field) {
+    if (field !== undefined) {
+      this._field = field;
+    }
+  }
+
+  reconcile = (handle: Peer, view: EditorView) => {
+    if (!this._inReconcile) {
+      return;
+    }
+    this._inReconcile = true;
+
+    const path = getPath(view.state, this._field);
+    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 toInvert = transactions.slice().reverse();
+    for (const tx of toInvert) {
+      const inverted = tx.changes.invert(tx.startState.doc);
+      selection = selection.map(inverted);
+      view.dispatch({
+        changes: inverted,
+        annotations: reconcileAnnotationType.of(true),
+      });
+    }
+
+    // now apply the unreconciled transactions to the document
+    let newHeads = codeMirrorToAm(this._field, handle, transactions, view.state);
+
+    // NOTE: null and undefined each come from automerge and repo respectively
+    if (newHeads === null || newHeads === undefined) {
+      // TODO: @alexjg this is the call that's resetting the editor state on click
+      newHeads = automerge.getHeads(handle.doc);
+    }
+
+    // now get the diff between the updated state of the document and the heads
+    // and apply that to the codemirror doc
+    const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.doc, oldHeads, newHeads);
+    amToCodemirror(view, selection, path, diff);
+
+    view.dispatch({
+      effects: updateHeads(newHeads),
+      annotations: reconcileAnnotationType.of({}),
+    });
+
+    this._inReconcile = false;
+  };
+}

package/src/automerge/automerge-plugin/amToCodemirror.ts

@@ -0,0 +1,105 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
+
+import {
+  type DelPatch,
+  type InsertPatch,
+  type Patch,
+  type Prop,
+  type PutPatch,
+  type SpliceTextPatch,
+} from '@dxos/automerge/automerge';
+
+import { reconcileAnnotationType } from './plugin';
+
+export default (view: EditorView, selection: EditorSelection, target: Prop[], patches: Patch[]) => {
+  for (const patch of patches) {
+    const changeSpec = handlePatch(patch, target, view.state);
+    if (changeSpec != null) {
+      const changeSet = ChangeSet.of(changeSpec, view.state.doc.length, '\n');
+      selection = selection.map(changeSet, 1);
+      view.dispatch({
+        changes: changeSet,
+        annotations: reconcileAnnotationType.of({}),
+      });
+    }
+  }
+  view.dispatch({
+    selection,
+    annotations: reconcileAnnotationType.of({}),
+  });
+};
+
+const handlePatch = (patch: Patch, target: Prop[], state: EditorState): ChangeSpec | null => {
+  if (patch.action === 'insert') {
+    return handleInsert(target, patch);
+  } else if (patch.action === 'splice') {
+    return handleSplice(target, patch);
+  } else if (patch.action === 'del') {
+    return handleDel(target, patch);
+  } else if (patch.action === 'put') {
+    return handlePut(target, patch, state);
+  } else {
+    return null;
+  }
+};
+
+const handleInsert = (target: Prop[], patch: InsertPatch): Array<ChangeSpec> => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
+  }
+  const text = patch.values.map((v) => (v ? v.toString() : '')).join('');
+  return [{ from: index, to: index, insert: text }];
+};
+
+const handleSplice = (target: Prop[], patch: SpliceTextPatch): Array<ChangeSpec> => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
+  }
+  return [{ from: index, insert: patch.value }];
+};
+
+const handleDel = (target: Prop[], patch: DelPatch): Array<ChangeSpec> => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
+  }
+  const length = patch.length || 1;
+  return [{ from: index, to: index + length }];
+};
+
+const handlePut = (target: Prop[], patch: PutPatch, state: EditorState): Array<ChangeSpec> => {
+  const index = charPath(target, [...patch.path, 0]);
+  if (index == null) {
+    return [];
+  }
+  const length = state.doc.length;
+  if (typeof patch.value !== 'string') {
+    return []; // TODO(dmaretskyi): How to handle non string values?
+  }
+  return [{ from: 0, to: length, insert: patch.value as any }];
+};
+
+// If the path of the patch is of the form [path, <index>] then we know this is
+// a path to a character within the sequence given by path
+const charPath = (textPath: Prop[], candidatePath: Prop[]): number | null => {
+  if (candidatePath.length !== textPath.length + 1) {
+    return null;
+  }
+  for (let i = 0; i < textPath.length; i++) {
+    if (textPath[i] !== candidatePath[i]) {
+      return null;
+    }
+  }
+  const index = candidatePath[candidatePath.length - 1];
+  if (typeof index === 'number') {
+    return index;
+  }
+  return null;
+};

package/src/automerge/automerge-plugin/codeMirrorToAm.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type EditorState, type Text, type Transaction } from '@codemirror/state';
+
+import { next as am, type Heads } from '@dxos/automerge/automerge';
+
+import { type Field } from './plugin';
+import { type Peer } from '../demo';
+
+export default (field: Field, handle: Peer, transactions: Transaction[], state: EditorState): Heads | undefined => {
+  const { lastHeads, path } = state.field(field);
+
+  // We don't want to call `automerge.updateAt` if there are no changes.
+  // Otherwise later on `automerge.diff` will return empty patches that result in a no-op but still mess up the selection.
+  let hasChanges = false;
+  for (const tr of transactions) {
+    if (tr.changes.length) {
+      tr.changes.iterChanges(() => {
+        hasChanges = true;
+      });
+    }
+  }
+
+  if (!hasChanges) {
+    return undefined;
+  }
+
+  const newHeads = handle.changeAt(lastHeads, (doc: am.Doc<unknown>) => {
+    for (const tr of transactions) {
+      tr.changes.iterChanges((fromA: number, toA: number, _fromB: number, _toB: number, inserted: Text) => {
+        am.splice(doc, path, fromA, toA - fromA, inserted.toString());
+      });
+    }
+  });
+  return newHeads ?? undefined;
+};

package/src/automerge/automerge-plugin/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { plugin } from './plugin';
+export { PatchSemaphore } from './PatchSemaphore';

package/src/automerge/automerge-plugin/plugin.ts

@@ -0,0 +1,104 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  Annotation,
+  type EditorState,
+  type Extension,
+  Facet,
+  StateEffect,
+  StateField,
+  type Transaction,
+  type TransactionSpec,
+} from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
+
+import * as automerge from '@dxos/automerge/automerge';
+import { type Doc, type Heads, type Prop } from '@dxos/automerge/automerge';
+
+import { PatchSemaphore } from './PatchSemaphore';
+import { type Peer } from '../demo';
+
+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>;
+
+const semaphoreFacet = Facet.define<PatchSemaphore, PatchSemaphore>({
+  combine: (values) => values.at(-1)!, // Take last.
+});
+
+export const plugin = <T>(doc: Doc<T>, path: Prop[]): Extension => {
+  const stateField: StateField<Value> = StateField.define({
+    create: () => ({
+      lastHeads: automerge.getHeads(doc),
+      unreconciledTransactions: [],
+      path: path.slice(),
+    }),
+    update: (value: Value, tr: Transaction) => {
+      const result: Value = {
+        lastHeads: value.lastHeads,
+        unreconciledTransactions: value.unreconciledTransactions.slice(),
+        path: path.slice(),
+      };
+      let clearUnreconciled = false;
+      for (const effect of tr.effects) {
+        if (effect.is(effectType)) {
+          result.lastHeads = effect.value.newHeads;
+          clearUnreconciled = true;
+        }
+      }
+      if (clearUnreconciled) {
+        result.unreconciledTransactions = [];
+      } else {
+        if (!isReconcileTx(tr)) {
+          result.unreconciledTransactions.push(tr);
+        }
+      }
+      return result;
+    },
+  });
+  const semaphore = new PatchSemaphore(stateField);
+
+  return [stateField, semaphoreFacet.of(semaphore)];
+};
+
+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 const reconcile = (handle: Peer, view: EditorView) => {
+  view.state.facet(semaphoreFacet).reconcile(handle, view);
+};

package/src/automerge/automerge.stories.tsx

@@ -0,0 +1,105 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { basicSetup } from '@codemirror/basic-setup';
+import { EditorView } from '@codemirror/view';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { type Prop, next as automerge } from '@dxos/automerge/automerge';
+
+import { plugin as amgPlugin } from './automerge-plugin';
+import { reconcile } from './automerge-plugin/plugin';
+import { Peer } from './demo';
+
+type EditorProps = {
+  handle: Peer;
+  path: Prop[];
+};
+
+const Editor = ({ handle, path }: EditorProps) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const editorRoot = useRef<EditorView>();
+
+  useEffect(() => {
+    const doc = handle.doc;
+    const source = doc.text; // this should use path
+    const plugin = amgPlugin(doc, path);
+    const view = (editorRoot.current = new EditorView({
+      doc: source,
+      extensions: [basicSetup, plugin],
+      dispatch: (transaction) => {
+        view.update([transaction]);
+        reconcile(handle, view);
+      },
+      parent: containerRef.current as any,
+    }));
+
+    const handleChange = () => {
+      reconcile(handle, view);
+    };
+
+    handle.changeEvent.on(handleChange);
+
+    return () => {
+      handle.changeEvent.off(handleChange);
+      view.destroy();
+    };
+  }, []);
+
+  return <div className='codemirror-editor' ref={containerRef} onKeyDown={(evt) => evt.stopPropagation()} />;
+};
+
+const Story = () => {
+  const [object1, setObject1] = useState<Peer | null>(null);
+  const [object2, setObject2] = useState<Peer | null>(null);
+  const [stats1, setStats1] = useState<any>({});
+  const [stats2, setStats2] = useState<any>({});
+
+  useEffect(() => {
+    const object1 = new Peer();
+    object1.doc = automerge.from({ text: 'Hello world!' });
+
+    const object2 = new Peer();
+    object2.doc = automerge.init();
+
+    const r1 = object1.replicate();
+    const r2 = object2.replicate();
+
+    void r1.readable.pipeTo(r2.writable);
+    void r2.readable.pipeTo(r1.writable);
+
+    setObject1(object1);
+    setObject2(object2);
+
+    setInterval(() => {
+      setStats1({ ...object1.stats });
+      setStats2({ ...object2.stats });
+    }, 500);
+  }, []);
+
+  if (!object1 || !object2) {
+    return null;
+  }
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', width: '100vw' }}>
+      <div>
+        <Editor handle={object1} path={['text']} />
+        <div style={{ whiteSpace: 'pre' }}>{JSON.stringify(stats1, null, 2)}</div>
+      </div>
+      <div>
+        <Editor handle={object2} path={['text']} />
+        <div style={{ whiteSpace: 'pre' }}>{JSON.stringify(stats2, null, 2)}</div>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Automerge',
+};
+
+export const EditorStory = {
+  render: () => <Story />,
+};

package/src/automerge/demo.ts

@@ -0,0 +1,106 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Event } from '@dxos/async';
+import {
+  type Doc,
+  next as automerge,
+  type ChangeOptions,
+  type ChangeFn,
+  type Heads,
+  type SyncState,
+} from '@dxos/automerge/automerge';
+
+export class Peer {
+  changeEvent = new Event();
+
+  storage = new Map<string, Uint8Array>();
+  stats = {
+    messagesSent: 0,
+    messagesReceived: 0,
+    bytesSent: 0,
+    bytesReceived: 0,
+    snapshotBytes: 0,
+    incrementalBytes: 0,
+  };
+
+  doc!: Doc<{ text: string }>;
+
+  change(options: string | ChangeOptions<any> | ChangeFn<any>, callback?: ChangeFn<any>) {
+    this.doc = automerge.change(this.doc, options, callback);
+    this._handleChange();
+  }
+
+  changeAt(scope: Heads, options: string | ChangeOptions<any> | ChangeFn<any>, callback?: ChangeFn<any>) {
+    const { newDoc, newHeads } = automerge.changeAt(this.doc, scope, options, callback);
+    this.doc = newDoc;
+    this._handleChange();
+    return newHeads;
+  }
+
+  replicate(): { readable: ReadableStream<Uint8Array>; writable: WritableStream<Uint8Array> } {
+    let syncState: SyncState = automerge.initSyncState();
+
+    let unsub: (() => void) | undefined;
+    const readable = new ReadableStream({
+      start: (controller) => {
+        unsub = this.changeEvent.on(() => {
+          const [newState, msg] = automerge.generateSyncMessage(this.doc, syncState);
+          syncState = newState;
+
+          if (msg) {
+            this.stats.messagesSent++;
+            this.stats.bytesSent += msg.byteLength;
+            controller.enqueue(msg);
+          }
+        });
+      },
+      pull: (controller) => {
+        const [newState, msg] = automerge.generateSyncMessage(this.doc, syncState);
+        syncState = newState;
+
+        if (msg) {
+          this.stats.messagesSent++;
+          this.stats.bytesSent += msg.byteLength;
+          controller.enqueue(msg);
+        }
+      },
+      cancel: () => {
+        unsub?.();
+      },
+    });
+
+    const writable = new WritableStream({
+      write: (chunk) => {
+        this.stats.messagesReceived++;
+        this.stats.bytesReceived += chunk.byteLength;
+
+        const [newDoc, newState] = automerge.receiveSyncMessage(this.doc, syncState, chunk);
+        this.doc = newDoc;
+        syncState = newState;
+
+        this._handleChange();
+      },
+    });
+
+    return { readable, writable };
+  }
+
+  private _handleChange() {
+    // TODO(dmaretskyi): Save since + debounce.
+
+    if (this.stats.incrementalBytes > 1024 && this.stats.incrementalBytes > this.stats.snapshotBytes) {
+      const snapshot = automerge.save(this.doc);
+      this.stats.snapshotBytes = snapshot.byteLength;
+      this.stats.incrementalBytes = 0;
+      console.log('snapshot save', snapshot.byteLength);
+    } else {
+      const chunk = automerge.saveIncremental(this.doc);
+      this.stats.incrementalBytes += chunk.length;
+      console.log('incremental save', chunk.length);
+    }
+
+    this.changeEvent.emit();
+  }
+}