@dxos/react-ui-editor 0.3.9-next.7522f7a → 0.3.9

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

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

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

@@ -0,0 +1,4 @@
+export * from './useCollaboration';
+export * from './useTextModel';
+export * from './yjs';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,OAAO,CAAC"}

package/dist/types/src/hooks/useCollaboration.d.ts

@@ -0,0 +1,9 @@
+import type { Extension } from '@codemirror/state';
+import type { ThemeMode } from '@dxos/react-ui';
+import type { EditorModel } from './useTextModel';
+/**
+ * Replication and awareness (incl. remote selection).
+ * https://codemirror.net/docs/ref/#collab
+ */
+export declare const useCollaboration: (model: EditorModel, themeMode: ThemeMode) => Extension | undefined;
+//# sourceMappingURL=useCollaboration.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCollaboration.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useCollaboration.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAMnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,UAAW,WAAW,aAAa,SAAS,KAAG,SAAS,GAAG,SAuBvF,CAAC"}

package/dist/types/src/{model.d.ts → hooks/useTextModel.d.ts}

@@ -1,26 +1,14 @@
-import { type EditorView } from '@codemirror/view';
-import { type ComponentProps } from 'react';
 import type * as awarenessProtocol from 'y-protocols/awareness';
-import { type Space, type TextObject } from '@dxos/react-client/echo';
+import { type DocAccessor, type Space, type TextObject } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
 import type { YText, YXmlFragment } from '@dxos/text-model';
-export type EditorSlots = {
-    root?: Omit<ComponentProps<'div'>, 'ref'>;
-    editor?: {
-        className?: string;
-        placeholder?: string;
-        spellCheck?: boolean;
-        tabIndex?: number;
-        markdownTheme?: Parameters<typeof EditorView.theme>[0];
-    };
-};
 type Awareness = awarenessProtocol.Awareness;
 type Provider = {
     awareness: Awareness;
 };
 export type EditorModel = {
     id: string;
-    content: string | YText | YXmlFragment;
+    content: string | YText | YXmlFragment | DocAccessor;
     provider?: Provider;
     peer?: {
         id: string;
@@ -34,4 +22,4 @@ export type UseTextModelOptions = {
 };
 export declare const useTextModel: ({ identity, space, text }: UseTextModelOptions) => EditorModel | undefined;
 export {};
-//# sourceMappingURL=model.d.ts.map
+//# sourceMappingURL=useTextModel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTextModel.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextModel.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,KAAK,EACV,KAAK,UAAU,EAIhB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAK5D,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAC7C,KAAK,QAAQ,GAAG;IAAE,SAAS,EAAE,SAAS,CAAA;CAAE,CAAC;AAGzC,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,GAAG,KAAK,GAAG,YAAY,GAAG,WAAW,CAAC;IACrD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAKF,eAAO,MAAM,YAAY,8BAA+B,mBAAmB,KAAG,WAAW,GAAG,SAoD3F,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/yjs/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}

package/dist/types/src/hooks/yjs/space-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"space-provider.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/yjs/space-provider.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAG/B,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGrD,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAO7C;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACzD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAS;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;gBAEtB,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA+BlH,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,mBAAmB;CAG5B"}

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

@@ -1,5 +1,5 @@
-export * from './components';
-export * from './model';
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';
+export * from './components';
+export * from './hooks';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE5D,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

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

@@ -1,3 +1,7 @@
+import type { StyleSpec } from 'style-mod';
 import { type TailwindConfig } from '@dxos/react-ui-theme';
+export type ThemeStyles = {
+    [selector: string]: StyleSpec;
+};
 export declare const tokens: TailwindConfig['theme'];
 //# sourceMappingURL=tokens.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/tokens.ts"],"names":[],"mappings":"AAIA,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAG3E,eAAO,MAAM,MAAM,EAAE,cAAc,CAAC,OAAO,CAA4B,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/tokens.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3E,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,cAAc,CAAC,OAAO,CAA4B,CAAC"}

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

@@ -3,7 +3,7 @@ import * as awarenessProtocol 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 '../model';
+import { type EditorModel } from '../hooks';
 type Awareness = awarenessProtocol.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;AAG5C,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,CAmB1D;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,WAGzE,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,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,CAmB1D;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,WAGzE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.9-next.7522f7a",
+  "version": "0.3.9",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,16 +13,16 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.11.0",
-    "@codemirror/commands": "^6.3.0",
-    "@codemirror/lang-markdown": "^6.2.2",
-    "@codemirror/language": "^6.9.2",
+    "@codemirror/autocomplete": "^6.11.1",
+    "@codemirror/commands": "^6.3.2",
+    "@codemirror/lang-markdown": "^6.2.3",
+    "@codemirror/language": "^6.9.3",
     "@codemirror/language-data": "^6.3.1",
     "@codemirror/lint": "^6.4.2",
-    "@codemirror/search": "^6.5.4",
-    "@codemirror/state": "^6.3.1",
+    "@codemirror/search": "^6.5.5",
+    "@codemirror/state": "^6.3.3",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.22.0",
+    "@codemirror/view": "^6.22.2",
     "@fluentui/react-tabster": "^9.12.0",
     "@lezer/common": "^1.1.1",
     "@lezer/highlight": "^1.2.0",
@@ -37,8 +37,9 @@
     "@tiptap/pm": "2.0.0-beta.220",
     "@tiptap/react": "2.0.0-beta.220",
     "@tiptap/starter-kit": "2.0.0-beta.220",
-    "codemirror": "^6.65.7",
+    "codemirror": "6.0.1",
     "lib0": "^0.2.65",
+    "lodash.defaultsdeep": "^4.6.1",
     "lodash.get": "^4.4.2",
     "prosemirror-model": "^1.19.0",
     "prosemirror-state": "^1.4.2",
@@ -48,37 +49,39 @@
     "y-prosemirror": "~1.0.20",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.10",
-    "@dxos/display-name": "0.3.9-next.7522f7a",
-    "@dxos/debug": "0.3.9-next.7522f7a",
-    "@dxos/log": "0.3.9-next.7522f7a",
-    "@dxos/protocols": "0.3.9-next.7522f7a",
-    "@dxos/react-async": "0.3.9-next.7522f7a",
-    "@dxos/react-ui": "0.3.9-next.7522f7a",
-    "@dxos/react-ui-theme": "0.3.9-next.7522f7a",
-    "@dxos/util": "0.3.9-next.7522f7a",
-    "@dxos/text-model": "0.3.9-next.7522f7a"
+    "@dxos/debug": "0.3.9",
+    "@dxos/echo-schema": "0.3.9",
+    "@dxos/automerge": "0.3.9",
+    "@dxos/display-name": "0.3.9",
+    "@dxos/invariant": "0.3.9",
+    "@dxos/log": "0.3.9",
+    "@dxos/protocols": "0.3.9",
+    "@dxos/react-ui": "0.3.9",
+    "@dxos/react-async": "0.3.9",
+    "@dxos/react-ui-theme": "0.3.9",
+    "@dxos/text-model": "0.3.9",
+    "@dxos/util": "0.3.9"
   },
   "devDependencies": {
-    "@codemirror/basic-setup": "^0.20.0",
+    "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
     "@phosphor-icons/react": "^2.0.5",
-    "@types/codemirror": "^5.60.14",
+    "@types/lodash.defaultsdeep": "^4.6.6",
     "@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/automerge": "0.3.9-next.7522f7a",
-    "@dxos/config": "0.3.9-next.7522f7a",
-    "@dxos/echo-typegen": "0.3.9-next.7522f7a",
-    "@dxos/react-client": "0.3.9-next.7522f7a",
-    "@dxos/echo-schema": "0.3.9-next.7522f7a",
-    "@dxos/storybook-utils": "0.3.9-next.7522f7a"
+    "@dxos/react-ui": "0.3.9",
+    "@dxos/storybook-utils": "0.3.9",
+    "@dxos/config": "0.3.9",
+    "@dxos/echo-typegen": "0.3.9",
+    "@dxos/react-client": "0.3.9"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.9-next.7522f7a"
+    "@dxos/react-client": "0.3.9"
   },
   "publishConfig": {
     "access": "public"

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

@@ -8,8 +8,8 @@ import { next as automerge } from '@dxos/automerge/automerge';
 
 import amToCodemirror from './amToCodemirror';
 import codeMirrorToAm from './codeMirrorToAm';
+import { type IDocHandle } from './handle';
 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;
@@ -27,8 +27,8 @@ export class PatchSemaphore {
     }
   }
 
-  reconcile = (handle: Peer, view: EditorView) => {
-    if (!this._inReconcile) {
+  reconcile = (handle: IDocHandle, view: EditorView) => {
+    if (this._inReconcile) {
       return;
     }
     this._inReconcile = true;
@@ -56,12 +56,12 @@ export class PatchSemaphore {
     // 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);
+      newHeads = automerge.getHeads(handle.docSync()!);
     }
 
     // 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);
+    const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.docSync()!, oldHeads, newHeads);
     amToCodemirror(view, selection, path, diff);
 
     view.dispatch({

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

@@ -6,21 +6,24 @@ import { type EditorState, 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 Peer } from '../demo';
 
-export default (field: Field, handle: Peer, transactions: Transaction[], state: EditorState): Heads | undefined => {
+export default (
+  field: Field,
+  handle: IDocHandle,
+  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;
-      });
-    }
+    tr.changes.iterChanges(() => {
+      hasChanges = true;
+    });
   }
 
   if (!hasChanges) {

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

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type * as A from '@dxos/automerge/automerge';
+
+export type IDocHandle<T = any> = {
+  docSync(): A.Doc<T> | undefined;
+  change(callback: A.ChangeFn<T>, options?: A.ChangeOptions<T>): void;
+  changeAt(heads: A.Heads, callback: A.ChangeFn<T>, options?: A.ChangeOptions<T>): string[] | undefined;
+
+  addListener(event: 'change', listener: () => void): void;
+  removeListener(event: 'change', listener: () => void): void;
+};

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

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export { plugin, reconcile } from './plugin';
-export { PatchSemaphore } from './PatchSemaphore';
+export { automergePlugin, type AutomergePlugin } from './plugin';
+export { type IDocHandle } from './handle';

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

@@ -12,13 +12,13 @@ import {
   type Transaction,
   type TransactionSpec,
 } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
+import { ViewPlugin, type EditorView, type PluginValue, type ViewUpdate } from '@codemirror/view';
 
 import * as automerge from '@dxos/automerge/automerge';
-import { type Doc, type Heads, type Prop } from '@dxos/automerge/automerge';
+import { type Heads, type Prop } from '@dxos/automerge/automerge';
 
 import { PatchSemaphore } from './PatchSemaphore';
-import { type Peer } from '../demo';
+import { type IDocHandle } from './handle';
 
 export type Value = {
   lastHeads: Heads;
@@ -44,10 +44,14 @@ const semaphoreFacet = Facet.define<PatchSemaphore, PatchSemaphore>({
   combine: (values) => values.at(-1)!, // Take last.
 });
 
-export const plugin = <T>(doc: Doc<T>, path: Prop[]): Extension => {
+export type AutomergePlugin = {
+  extension: Extension;
+};
+
+export const automergePlugin = (handle: IDocHandle, path: Prop[]): AutomergePlugin => {
   const stateField: StateField<Value> = StateField.define({
     create: () => ({
-      lastHeads: automerge.getHeads(doc),
+      lastHeads: automerge.getHeads(handle.docSync()!),
       unreconciledTransactions: [],
       path: path.slice(),
     }),
@@ -76,7 +80,36 @@ export const plugin = <T>(doc: Doc<T>, path: Prop[]): Extension => {
   });
   const semaphore = new PatchSemaphore(stateField);
 
-  return [stateField, semaphoreFacet.of(semaphore)];
+  const viewPlugin = ViewPlugin.fromClass(
+    class AutomergeCodemirrorViewPlugin implements PluginValue {
+      private _view: EditorView;
+
+      constructor(view: EditorView) {
+        this._view = view;
+        handle.addListener('change', this._handleChange);
+      }
+
+      update(update: ViewUpdate) {
+        if (update.transactions.length > 0 && update.transactions.some((t) => !isReconcileTx(t))) {
+          queueMicrotask(() => {
+            this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
+          });
+        }
+      }
+
+      destroy() {
+        handle.addListener('change', this._handleChange);
+      }
+
+      private _handleChange = () => {
+        this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
+      };
+    },
+  );
+
+  return {
+    extension: [stateField, semaphoreFacet.of(semaphore), viewPlugin],
+  };
 };
 
 export const reconcileAnnotationType = Annotation.define<unknown>();
@@ -98,7 +131,3 @@ export const makeReconcile = (tr: TransactionSpec) => {
   // annotations: reconcileAnnotationType.of({})
   // }
 };
-
-export const reconcile = (handle: Peer, view: EditorView) => {
-  view.state.facet(semaphoreFacet).reconcile(handle, view);
-};

package/src/automerge/automerge.stories.tsx

@@ -2,17 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import { basicSetup } from '@codemirror/basic-setup';
+import '@preact/signals-react'; // Register react integration
+import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import { EditorView } from '@codemirror/view';
+import { basicSetup } from 'codemirror';
+import get from 'lodash.get';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { type Prop, next as automerge } from '@dxos/automerge/automerge';
+import { type Prop } from '@dxos/automerge/automerge';
+import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
 
-import { plugin as amgPlugin, reconcile } from './automerge-plugin';
-import { Peer } from './demo';
+import { type IDocHandle, automergePlugin } from './automerge-plugin';
 
 type EditorProps = {
-  handle: Peer;
+  handle: IDocHandle;
   path: Prop[];
 };
 
@@ -21,27 +24,13 @@ const Editor = ({ handle, path }: EditorProps) => {
   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);
-      },
+      doc: get(handle.docSync()!, path),
+      extensions: [basicSetup, automergePlugin(handle, path)],
       parent: containerRef.current as any,
     }));
 
-    const handleChange = () => {
-      reconcile(handle, view);
-    };
-
-    handle.changeEvent.on(handleChange);
-
     return () => {
-      handle.changeEvent.off(handleChange);
       view.destroy();
     };
   }, []);
@@ -50,31 +39,29 @@ const Editor = ({ handle, path }: EditorProps) => {
 };
 
 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>({});
+  const [object1, setObject1] = useState<DocHandle<any> | null>(null);
+  const [object2, setObject2] = useState<DocHandle<any> | null>(null);
 
   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);
+    queueMicrotask(async () => {
+      const repo1 = new Repo({
+        network: [new BroadcastChannelNetworkAdapter()],
+      });
+      const repo2 = new Repo({
+        network: [new BroadcastChannelNetworkAdapter()],
+      });
+
+      const object1 = repo1.create();
+      object1.change((doc: any) => {
+        doc.text = 'Hello world!';
+      });
+
+      const object2 = repo2.find(object1.url);
+      await object2.whenReady();
+
+      setObject1(object1);
+      setObject2(object2);
+    });
   }, []);
 
   if (!object1 || !object2) {
@@ -85,11 +72,9 @@ const Story = () => {
     <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>
   );
@@ -99,6 +84,6 @@ export default {
   title: 'Automerge',
 };
 
-export const EditorStory = {
+export const AutomergeRepo = {
   render: () => <Story />,
 };

package/src/components/TextEditor/TextEditor.stories.tsx

@@ -14,7 +14,7 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor } from './TextEditor';
 import { createHyperlinkTooltip, hyperlinkDecoration } from './extensions';
-import { useTextModel } from '../../model';
+import { useTextModel } from '../../hooks';
 
 const text = [
   '',
@@ -37,9 +37,12 @@ const hyperLinkTooltip = () =>
     );
   });
 
-const Story = () => {
-  const [item] = useState({ text: new TextObject(text) });
+const Story = ({ automerge }: { automerge?: boolean }) => {
+  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: !!automerge }) });
   const model = useTextModel({ text: item.text });
+  if (!model) {
+    return <></>;
+  }
 
   return (
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
@@ -70,3 +73,7 @@ export default {
 };
 
 export const Default = {};
+
+export const Automerge = {
+  render: () => <Story automerge />,
+};