Update to automerge-repo 2.1.0

Author: alexjg

CHANGELOG.md

@@ -21,5 +21,6 @@ let editorConfig = {
 ```
 
 ## Contributors
+
 - @alexjg
 - @brianhung

README.md

@@ -87,7 +87,9 @@ const adapter = new SchemaAdapter({
 This schema adapter can then be passed to `init` as an option:
 
 ```typescript
-const { pmDoc, schema, plugin } = init(handle, ["text"], { schemaAdapter: adapter })
+const { pmDoc, schema, plugin } = init(handle, ["text"], {
+  schemaAdapter: adapter,
+})
 ```
 
 There are a number of keys available in the `automerge` mapping. To understand what they all mean you need to understand the goals of schema mapping:

examples/react/package-lock.json

@@ -10,17 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@automerge/automerge": "^2.2.1",
-    "@automerge/automerge-repo": "^1.1.9",
-    "@automerge/automerge-repo-network-broadcastchannel": "^1.1.9",
-    "@automerge/automerge-repo-network-websocket": "^1.1.9",
-    "@automerge/automerge-repo-react-hooks": "^1.1.9",
-    "@automerge/automerge-repo-storage-indexeddb": "^1.1.9",
-    "@automerge/prosemirror": "^0.0.12",
-    "prosemirror-example-setup": "^1.2.2",
-    "prosemirror-model": "^1.20.0",
+    "@automerge/automerge": "^3.0.0",
+    "@automerge/automerge-repo": "^2.1.0",
+    "@automerge/automerge-repo-network-broadcastchannel": "^2.1.0",
+    "@automerge/automerge-repo-network-websocket": "^2.1.0",
+    "@automerge/automerge-repo-react-hooks": "^2.1.0",
+    "@automerge/automerge-repo-storage-indexeddb": "^2.1.0",
+    "@automerge/prosemirror": "file://../../",
+    "prosemirror-example-setup": "^1.2.3",
+    "prosemirror-model": "^1.25.2",
     "prosemirror-state": "^1.4.3",
-    "prosemirror-view": "^1.33.5",
+    "prosemirror-view": "^1.40.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/react/package.json

@@ -1,47 +1,32 @@
 import { AutomergeUrl } from "@automerge/automerge-repo"
-import { useHandle } from "@automerge/automerge-repo-react-hooks"
-import { useEffect, useRef, useState } from "react"
+import { useDocHandle } from "@automerge/automerge-repo-react-hooks"
+import { useEffect, useRef } from "react"
 import { EditorState, Transaction } from "prosemirror-state"
 import { EditorView } from "prosemirror-view"
 import { exampleSetup } from "prosemirror-example-setup"
-import {
-  syncPlugin,
-  pmDocFromSpans,
-  basicSchemaAdapter,
-} from "@automerge/prosemirror"
-import { next as am } from "@automerge/automerge"
+import { init, basicSchemaAdapter } from "@automerge/prosemirror"
 import "prosemirror-example-setup/style/style.css"
 import "prosemirror-menu/style/menu.css"
 import "prosemirror-view/style/prosemirror.css"
 import "./App.css"
 
 function App({ docUrl }: { docUrl: AutomergeUrl }) {
   const editorRoot = useRef<HTMLDivElement>(null)
-  const handle = useHandle<{ text: string }>(docUrl)
-  const [loaded, setLoaded] = useState(handle && handle.docSync() != null)
-  useEffect(() => {
-    if (handle != null) {
-      handle.whenReady().then(() => {
-        if (handle.docSync() != null) {
-          setLoaded(true)
-        }
-      })
-    }
-  }, [handle])
+  const handle = useDocHandle<{ text: string }>(docUrl)
 
   useEffect(() => {
-    const adapter = basicSchemaAdapter
     let view: EditorView
-    if (editorRoot.current != null && loaded) {
+
+    if (editorRoot.current != null && handle != null) {
+      const { pmDoc, schema, plugin } = init(handle, ["text"], {
+        schemaAdapter: basicSchemaAdapter,
+      })
       view = new EditorView(editorRoot.current, {
         state: EditorState.create({
-          schema: adapter.schema, // It's important that we use the schema from the mirror
-          plugins: [
-            ...exampleSetup({ schema: adapter.schema }),
-            syncPlugin({ adapter, handle, path: ["text"] }),
-          ],
+          schema, // It's important that we use the schema from the mirror
+          plugins: [...exampleSetup({ schema }), plugin],
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          doc: pmDocFromSpans(adapter, am.spans(handle.docSync()!, ["text"])),
+          doc: pmDoc,
         }),
         dispatchTransaction: (tx: Transaction) => {
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -54,7 +39,7 @@ function App({ docUrl }: { docUrl: AutomergeUrl }) {
         view.destroy()
       }
     }
-  }, [editorRoot, loaded, handle])
+  }, [editorRoot, handle])
 
   return <div id="editor" ref={editorRoot}></div>
 }

examples/react/src/App.tsx

@@ -19,7 +19,7 @@ const repo = new Repo({
 const rootDocUrl = `${document.location.hash.substring(1)}`
 let handle
 if (isValidAutomergeUrl(rootDocUrl)) {
-  handle = repo.find(rootDocUrl)
+  handle = await repo.find(rootDocUrl)
 } else {
   handle = repo.create({ text: "hello world" })
 }

examples/react/src/main.tsx

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 import wasm from "vite-plugin-wasm"
+import path from "path"
 
 export default defineConfig({
   // customize this to your repo name for github pages deploy
@@ -14,4 +15,30 @@ export default defineConfig({
     format: "es",
     plugins: () => [wasm()],
   },
+
+  // This is only necessary because we are using the local prosemirror build.
+  // This leads to issues where multiple instances of prosemirror-model are
+  // loaded, which breaks prosemirror. In a real application you don't need to
+  // do this
+  resolve: {
+    alias: {
+      "@automerge/prosemirror": path.resolve(__dirname, "../../dist"),
+      "prosemirror-model": path.resolve(
+        __dirname,
+        "../../node_modules/prosemirror-model",
+      ),
+      "prosemirror-state": path.resolve(
+        __dirname,
+        "../../node_modules/prosemirror-state",
+      ),
+      "prosemirror-view": path.resolve(
+        __dirname,
+        "../../node_modules/prosemirror-view",
+      ),
+      "prosemirror-transform": path.resolve(
+        __dirname,
+        "../../node_modules/prosemirror-transform",
+      ),
+    },
+  },
 })