feat: enable multiple files in the same yjs doc (#1551)

* feat: enable multiple files in the same yjs doc

* feat: add storybook page for plugin-collab

* [autofix.ci] apply automated fixes

* chore: resolve lock file conflict

* chore: remove unneeded conversion

* chore: f

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Mirone <[email protected]>

packages/integrations/vue/tsconfig.json

@@ -1,12 +1,13 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "preserve",
     "jsxFactory": "h",
     "jsxFragmentFactory": "Fragment",
     "rootDir": "src",
     "types": ["vue"],
-    "outDir": "lib"
+    "outDir": "lib",
+    "jsxImportSource": "vue"
   },
   "include": ["src"]
 }

packages/plugins/plugin-collab/package.json

@@ -59,7 +59,7 @@
     "@milkdown/core": "workspace:*",
     "@milkdown/ctx": "workspace:*",
     "@milkdown/prose": "workspace:*",
-    "y-prosemirror": "^1.2.1",
+    "y-prosemirror": "^1.2.12",
     "y-protocols": "^1.0.5",
     "yjs": "^13.5.38"
   },

packages/plugins/plugin-collab/src/collab-service.ts

@@ -18,14 +18,14 @@ import {
   undo,
   yCursorPlugin,
   yCursorPluginKey,
-  yDocToProsemirror,
+  yXmlFragmentToProseMirrorRootNode,
   ySyncPlugin,
   ySyncPluginKey,
   yUndoPlugin,
   yUndoPluginKey,
 } from 'y-prosemirror'
 import type { Awareness } from 'y-protocols/awareness'
-import type { Doc, PermanentUserData } from 'yjs'
+import type { Doc, PermanentUserData, XmlFragment } from 'yjs'
 import { applyUpdate, encodeStateAsUpdate } from 'yjs'
 
 /// @internal
@@ -86,7 +86,7 @@ export class CollabService {
   /// @internal
   #options: CollabServiceOptions = {}
   /// @internal
-  #doc: Doc | null = null
+  #xmlFragment: XmlFragment | null = null
   /// @internal
   #awareness: Awareness | null = null
   /// @internal
@@ -107,11 +107,10 @@ export class CollabService {
 
   /// @internal
   #createPlugins(): Plugin[] {
-    if (!this.#doc) throw missingYjsDoc()
+    if (!this.#xmlFragment) throw missingYjsDoc()
     const { ySyncOpts, yUndoOpts } = this.#options
-    const type = this.#doc.getXmlFragment('prosemirror')
     const plugins = [
-      ySyncPlugin(type, ySyncOpts),
+      ySyncPlugin(this.#xmlFragment, ySyncOpts),
       yUndoPlugin(yUndoOpts),
       new Plugin({
         key: CollabKeymapPluginKey,
@@ -156,7 +155,13 @@ export class CollabService {
 
   /// Bind the document to the service.
   bindDoc(doc: Doc) {
-    this.#doc = doc
+    this.#xmlFragment = doc.getXmlFragment('prosemirror')
+    return this
+  }
+
+  /// Bind the Yjs XmlFragment to the service.
+  bindXmlFragment(xmlFragment: XmlFragment) {
+    this.#xmlFragment = xmlFragment
     return this
   }
 
@@ -186,20 +191,23 @@ export class CollabService {
     condition?: (yDocNode: Node, templateNode: Node) => boolean
   ) {
     if (!this.#ctx) throw ctxNotBind()
-    if (!this.#doc) throw missingYjsDoc()
+    if (!this.#xmlFragment) throw missingYjsDoc()
     const conditionFn =
       condition || ((yDocNode) => yDocNode.textContent.length === 0)
 
     const node = this.#valueToNode(template)
     const schema = this.#ctx.get(schemaCtx)
-    const yDocNode = yDocToProsemirror(schema, this.#doc)
+    const yDocNode = yXmlFragmentToProseMirrorRootNode(
+      this.#xmlFragment,
+      schema
+    )
 
     if (node && conditionFn(yDocNode, node)) {
-      const fragment = this.#doc.getXmlFragment('prosemirror')
+      const fragment = this.#xmlFragment
       fragment.delete(0, fragment.length)
       const templateDoc = prosemirrorToYDoc(node)
       const template = encodeStateAsUpdate(templateDoc)
-      applyUpdate(this.#doc, template)
+      if (fragment.doc) applyUpdate(fragment.doc, template)
       templateDoc.destroy()
     }
 

packages/plugins/plugin-collab/src/shim.d.ts

@@ -51,7 +51,10 @@ declare module 'y-prosemirror' {
   export const yCursorPluginKey: PluginKey<any>
   export const ySyncPluginKey: PluginKey<any>
   export const yUndoPluginKey: PluginKey<any>
-  export function yDocToProsemirror(schema: Schema, ydoc: Y.Doc): Node
+  export function yXmlFragmentToProseMirrorRootNode(
+    yXmlFragment: Y.XmlFragment,
+    schema: Schema
+  ): Node
   export function ySyncPlugin(
     yXmlFragment: Y.XmlFragment,
     { colors, colorMapping, permanentUserData, onFirstRender }?: YSyncOpts