From e4801b0cfae8bf6c573f7018953fdec41b2df9d2 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Mon, 11 Jan 2021 14:42:12 +0100 Subject: [PATCH] allow to pass a fragment name to the collaboration extension --- .../docPages/api/extensions/collaboration.md | 7 +++--- .../docPages/guide/collaborative-editing.md | 22 ++++++++++++++++--- .../src/collaboration.ts | 6 ++++- 3 files changed, 28 insertions(+), 7 deletions(-) diff --git a/docs/src/docPages/api/extensions/collaboration.md b/docs/src/docPages/api/extensions/collaboration.md index ac17e4cae..e5f5bfe0c 100644 --- a/docs/src/docPages/api/extensions/collaboration.md +++ b/docs/src/docPages/api/extensions/collaboration.md @@ -20,9 +20,10 @@ yarn add @tiptap/extension-collaboration yjs y-websocket ``` ## Settings -| Option | Type | Default | Description | -| -------- | -------- | ------- | ----------------------------- | -| document | `Object` | `null` | An initialized Y.js document. | +| 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. | ## Commands | Command | Parameters | Description | diff --git a/docs/src/docPages/guide/collaborative-editing.md b/docs/src/docPages/guide/collaborative-editing.md index 19a102021..562fdb859 100644 --- a/docs/src/docPages/guide/collaborative-editing.md +++ b/docs/src/docPages/guide/collaborative-editing.md @@ -222,13 +222,29 @@ Don’t want to wrap your head around the backend part? No worries, we offer a m ::: --> ### The document name -The document name is `'example-document'` in all examples here, but it could be any string. In a real-world app you’d probably add the name of your entity, the ID of the entity and in some cases even the field (if you have multiple fields that you want to make collaborative). Here is how that could look like for a CMS: +The document name is `'example-document'` in all examples here, but it could be any string. In a real-world app you’d probably add the name of your entity and the ID of the entity. Here is how that could look like: ```js -const documentName = 'page.140.content' +const documentName = 'page.140' ``` -In the backend, you can split the string to know the user is typing on a page with the ID 140 in the `content` field and manage authorization and such accordingly. New documents are created on the fly, no need to tell the backend about them, besides passing a string to the provider. +In the backend, you can split the string to know the user is typing on a page with the ID 140 to manage authorization and such accordingly. New documents are created on the fly, no need to tell the backend about them, besides passing a string to the provider. + +And if you’d like to sync multiple fields with one Y.js document, just pass different fragment names to the collaboration extension: + +```js +// a tiptap instance for the field +Collaboration.configure({ + document: ydoc, + fragment: 'title', +}) + +// and another instance for the summary, both in the same Y.js document +Collaboration.configure({ + document: ydoc, + fragment: 'summary', +}) +``` ### Authentication With the `onConnect` hook you can write a custom Promise to check if a client is authenticated. That can be a request to an API, to a microservice, a database query, or whatever is needed, as long as it’s executing `resolve()` at some point. You can also pass contextual data to the `resolve()` method which will be accessible in other hooks. diff --git a/packages/extension-collaboration/src/collaboration.ts b/packages/extension-collaboration/src/collaboration.ts index c68191fdc..a48ac60e4 100644 --- a/packages/extension-collaboration/src/collaboration.ts +++ b/packages/extension-collaboration/src/collaboration.ts @@ -11,6 +11,7 @@ export interface CollaborationOptions { * An initialized Y.js document. */ document: any, + fragment: string, } export const Collaboration = Extension.create({ @@ -18,6 +19,7 @@ export const Collaboration = Extension.create({ defaultOptions: { document: null, + fragment: 'default', }, addCommands() { @@ -52,7 +54,9 @@ export const Collaboration = Extension.create({ addProseMirrorPlugins() { return [ ySyncPlugin( - this.options.document.getXmlFragment('prosemirror'), + this.options.document.getXmlFragment( + this.options.fragment, + ), ), yUndoPlugin(), ]