From ecd0a6669a353bbf25ded963b43fbc871e9726a0 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 11 Jan 2021 18:37:30 +0100
Subject: [PATCH] add support for raw Y.js fragments to the collaboration
 extension

---
 .../demos/Examples/MultipleEditors/index.vue  | 32 +++++++++++--------
 .../docPages/api/extensions/collaboration.md  |  9 +++---
 .../docPages/guide/collaborative-editing.md   | 13 ++++++--
 .../src/collaboration.ts                      | 21 +++++++-----
 4 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/docs/src/demos/Examples/MultipleEditors/index.vue b/docs/src/demos/Examples/MultipleEditors/index.vue
index 6c9f4fdfe..33c6d2307 100644
--- a/docs/src/demos/Examples/MultipleEditors/index.vue
+++ b/docs/src/demos/Examples/MultipleEditors/index.vue
@@ -70,7 +70,7 @@ export default {
         Text,
         Collaboration.configure({
           document: ydoc,
-          fragment: 'title',
+          field: 'title',
         }),
       ],
     })
@@ -84,7 +84,7 @@ export default {
         CustomTaskItem,
         Collaboration.configure({
           document: ydoc,
-          fragment: 'tasks',
+          field: 'tasks',
         }),
       ],
     })
@@ -96,7 +96,7 @@ export default {
         Text,
         Collaboration.configure({
           document: ydoc,
-          fragment: 'description',
+          field: 'description',
         }),
       ],
     })
@@ -112,17 +112,23 @@ export default {
 </script>
 
 <style lang="scss">
-ul[data-type="taskList"] {
-  list-style: none;
-  padding: 0;
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
 
-  li {
-    display: flex;
-    align-items: center;
+  ul[data-type="taskList"] {
+    list-style: none;
+    padding: 0;
 
-    > input {
-      flex: 0 0 auto;
-      margin-right: 0.5rem;
+    li {
+      display: flex;
+      align-items: center;
+
+      > input {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+      }
     }
   }
 }
@@ -137,7 +143,7 @@ ul[data-type="taskList"] {
 
 .form__item {
   margin: 0 0 1rem;
-  padding: 1rem;
+  padding: 0.75rem 1rem;
   border-radius: 5px;
   border: 1px solid #e9ecef;
 
diff --git a/docs/src/docPages/api/extensions/collaboration.md b/docs/src/docPages/api/extensions/collaboration.md
index e5f5bfe0c..674a92148 100644
--- a/docs/src/docPages/api/extensions/collaboration.md
+++ b/docs/src/docPages/api/extensions/collaboration.md
@@ -20,10 +20,11 @@ yarn add @tiptap/extension-collaboration yjs y-websocket
 ```
 
 ## Settings
-| Option   | Type     | Default   | Description                                                                               |
-| -------- | -------- | --------- | ----------------------------------------------------------------------------------------- |
-| document | `Object` | `null`    | An initialized Y.js document.                                                             |
-| fragment | `String` | `default` | Name of the Y.js fragment, can be changed to sync multiple fields with one Y.js document. |
+| Option   | Type     | Default     | Description                                                                             |
+| -------- | -------- | ----------- | --------------------------------------------------------------------------------------- |
+| document | `Object` | `null`      | An initialized Y.js document.                                                           |
+| field    | `String` | `'default'` | Name of a Y.js fragment, can be changed to sync multiple fields with one Y.js document. |
+| fragment | `Object` | `null`      | A raw Y.js fragment, can be used instead of `document` and `field`.                     |
 
 ## Commands
 | Command | Parameters | Description           |
diff --git a/docs/src/docPages/guide/collaborative-editing.md b/docs/src/docPages/guide/collaborative-editing.md
index 562fdb859..af6867916 100644
--- a/docs/src/docPages/guide/collaborative-editing.md
+++ b/docs/src/docPages/guide/collaborative-editing.md
@@ -236,13 +236,22 @@ And if you’d like to sync multiple fields with one Y.js document, just pass di
 // a tiptap instance for the field
 Collaboration.configure({
   document: ydoc,
-  fragment: 'title',
+  field: 'title',
 })
 
 // and another instance for the summary, both in the same Y.js document
 Collaboration.configure({
   document: ydoc,
-  fragment: 'summary',
+  field: 'summary',
+})
+```
+
+If your setup is somehow more complex, for example with nested fragments, you can pass a raw Y.js fragment too. `document` and `field` will be ignored then.
+
+```js
+// a raw Y.js fragment
+Collaboration.configure({
+  fragment: ydoc.getXmlFragment('custom'),
 })
 ```
 
diff --git a/packages/extension-collaboration/src/collaboration.ts b/packages/extension-collaboration/src/collaboration.ts
index 59d3378af..fa3fe8164 100644
--- a/packages/extension-collaboration/src/collaboration.ts
+++ b/packages/extension-collaboration/src/collaboration.ts
@@ -12,9 +12,13 @@ export interface CollaborationOptions {
    */
   document: any,
   /**
-   * A string to determine the fragment that should be used.
+   * Name of a Y.js fragment, can be changed to sync multiple fields with one Y.js document.
    */
-  fragment: string,
+  field: string,
+  /**
+   * A raw Y.js fragment, can be used instead of `document` and `field`.
+   */
+  fragment: any,
 }
 
 export const Collaboration = Extension.create({
@@ -22,7 +26,8 @@ export const Collaboration = Extension.create({
 
   defaultOptions: <CollaborationOptions>{
     document: null,
-    fragment: 'default',
+    field: 'default',
+    fragment: null,
   },
 
   addCommands() {
@@ -55,12 +60,12 @@ export const Collaboration = Extension.create({
   },
 
   addProseMirrorPlugins() {
+    const fragment = this.options.fragment
+      ? this.options.fragment
+      : this.options.document.getXmlFragment(this.options.field)
+
     return [
-      ySyncPlugin(
-        this.options.document.getXmlFragment(
-          this.options.fragment,
-        ),
-      ),
+      ySyncPlugin(fragment),
       yUndoPlugin(),
     ]
   },