From 24ff5cd2376be132f625ad6c1485703c7ea77aa4 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Mon, 30 Nov 2020 14:27:36 +0100 Subject: [PATCH 1/4] docs: update content --- .../docPages/guide/collaborative-editing.md | 30 ++++++++----------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/docs/src/docPages/guide/collaborative-editing.md b/docs/src/docPages/guide/collaborative-editing.md index 3384fa27..e15a9a30 100644 --- a/docs/src/docPages/guide/collaborative-editing.md +++ b/docs/src/docPages/guide/collaborative-editing.md @@ -4,6 +4,12 @@ Using collaborative editing in production? Do the right thing and [sponsor our work](/sponsor)! ::: + + ## toc ## Introduction @@ -27,7 +33,7 @@ npm install @tiptap/extension-collaboration yjs y-webrtc yarn add @tiptap/extension-collaboration yjs y-webrtc ``` -And create a new Y document, and register it with tiptap: +Now, create a new Y document, and register it with tiptap: ```js import { Editor } from '@tiptap/core' @@ -39,15 +45,13 @@ import { WebrtcProvider } from 'y-webrtc' const ydoc = new Y.Doc() // Registered with a WebRTC provider const provider = new WebrtcProvider('example-document', ydoc) -// Point to the ProseMirror schema -const type = ydoc.getXmlFragment('prosemirror') const editor = new Editor({ extensions: [ // … // Register the document with tiptap Collaboration.configure({ - type: type, + provider }), ], }) @@ -86,15 +90,13 @@ import { WebsocketProvider } from 'y-websocket' const ydoc = new Y.Doc() // Registered with a WebSocket provider const provider = new WebsocketProvider('ws://127.0.0.1:1234', 'example-document', ydoc) -// Point to the ProseMirror schema -const type = ydoc.getXmlFragment('prosemirror') const editor = new Editor({ extensions: [ // … // Register the document with tiptap Collaboration.configure({ - type: type, + provider }), ], }) @@ -144,13 +146,12 @@ import { WebsocketProvider } from 'y-websocket' const ydoc = new Y.Doc() const provider = new WebsocketProvider('ws://127.0.0.1:1234', 'example-document', ydoc) -const type = ydoc.getXmlFragment('prosemirror') const editor = new Editor({ extensions: [ // … Collaboration.configure({ - type: type, + provider }), // Register the collaboration cursor extension CollaborationCursor.configure({ @@ -184,7 +185,6 @@ import * as Y from 'yjs' import { IndexeddbPersistence } from 'y-indexeddb' const ydoc = new Y.Doc() -const type = ydoc.getXmlFragment('prosemirror') // Store the Y document in the browser const indexdb = new IndexeddbPersistence('example-document', ydoc) @@ -192,7 +192,7 @@ const editor = new Editor({ extensions: [ // … Collaboration.configure({ - type: type, + provider }), ], }) @@ -213,9 +213,7 @@ import { Server } from '@hocuspocus/server' const server = Server.configure({ onJoinDocument(data, resolve, reject) { - const { - documentName, clientID, requestHeaders, clientsCount, document, - } = data + const { documentName, clientID, requestHeaders, clientsCount, document } = data // Your code here, for example a request to an API // If the user is authorized … @@ -260,9 +258,7 @@ const server = Server.configure({ // executed when the document is changed onChange(data) { - const { - documentName, clientID, requestHeaders, clientsCount, document, - } = data + const { documentName, clientID, requestHeaders, clientsCount, document } = data }, }) From aa9420688ba1cb151d8ac309e0c58e5b4b787967 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Mon, 30 Nov 2020 14:30:24 +0100 Subject: [PATCH 2/4] fix collab examples --- .../demos/Extensions/Collaboration/index.vue | 16 +++---------- .../Extensions/CollaborationCursor/index.vue | 24 +++++++------------ 2 files changed, 11 insertions(+), 29 deletions(-) diff --git a/docs/src/demos/Extensions/Collaboration/index.vue b/docs/src/demos/Extensions/Collaboration/index.vue index a420f995..caddab84 100644 --- a/docs/src/demos/Extensions/Collaboration/index.vue +++ b/docs/src/demos/Extensions/Collaboration/index.vue @@ -18,30 +18,21 @@ export default { data() { return { - documentName: 'tiptap-collaboration-extension', - ydoc: null, - provider: null, - type: null, editor: null, } }, mounted() { - this.ydoc = new Y.Doc() - this.provider = new WebrtcProvider(this.documentName, this.ydoc) - this.type = this.ydoc.getXmlFragment('prosemirror') + const ydoc = new Y.Doc() + const provider = new WebrtcProvider('tiptap-collaboration-extension', ydoc) this.editor = new Editor({ - // TODO: This is added by every new user. - // content: ` - //

Example Text

- // `, extensions: [ Document, Paragraph, Text, Collaboration.configure({ - type: this.type, + provider, }), ], }) @@ -49,7 +40,6 @@ export default { beforeDestroy() { this.editor.destroy() - this.provider.destroy() }, } diff --git a/docs/src/demos/Extensions/CollaborationCursor/index.vue b/docs/src/demos/Extensions/CollaborationCursor/index.vue index 187cbbf4..cc3f25f2 100644 --- a/docs/src/demos/Extensions/CollaborationCursor/index.vue +++ b/docs/src/demos/Extensions/CollaborationCursor/index.vue @@ -19,35 +19,28 @@ export default { data() { return { - documentName: 'tiptap-collaboration-cursor-extension', - ydoc: null, - provider: null, - type: null, editor: null, } }, mounted() { - this.ydoc = new Y.Doc() - this.provider = new WebrtcProvider(this.documentName, this.ydoc) - this.type = this.ydoc.getXmlFragment('prosemirror') + const ydoc = new Y.Doc() + const provider = new WebrtcProvider('tiptap-collaboration-cursor-extension', ydoc) this.editor = new Editor({ - // TODO: This is added by every new user. - // content: ` - //

Example Text

- // `, extensions: [ Document, Paragraph, Text, Collaboration.configure({ - type: this.type, + provider, }), CollaborationCursor.configure({ - provider: this.provider, - name: 'Cyndi Lauper', - color: '#f783ac', + provider, + user: { + name: 'Cyndi Lauper', + color: '#f783ac', + }, }), ], }) @@ -55,7 +48,6 @@ export default { beforeDestroy() { this.editor.destroy() - this.provider.destroy() }, } From d84bdf1b41ad152b81cc81fafcfc16689be3c50b Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Mon, 30 Nov 2020 14:44:18 +0100 Subject: [PATCH 3/4] fix broken link --- docs/src/docPages/guide/collaborative-editing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/docPages/guide/collaborative-editing.md b/docs/src/docPages/guide/collaborative-editing.md index e15a9a30..29ad3b94 100644 --- a/docs/src/docPages/guide/collaborative-editing.md +++ b/docs/src/docPages/guide/collaborative-editing.md @@ -163,7 +163,7 @@ const editor = new Editor({ }) ``` -As you can see, you can pass a name and color for every user. Look at the [collaborative editing example](/exmplaes/collaborative-editing), to see a more advanced example. +As you can see, you can pass a name and color for every user. Look at the [collaborative editing example](/examples/collaborative-editing), to see a more advanced example. ### Offline support Adding offline support to your collaborative editor is basically a one-liner, thanks to the fantastic [Y IndexedDB adapter](https://github.com/yjs/y-indexeddb). Install it: From 3ff8303ebd5d62be0ce74bf452d82525c78d3562 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Mon, 30 Nov 2020 14:50:26 +0100 Subject: [PATCH 4/4] docs: update event documentation --- docs/src/docPages/api/events.md | 41 +++++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 5 deletions(-) diff --git a/docs/src/docPages/api/events.md b/docs/src/docPages/api/events.md index db2a990d..3ce73274 100644 --- a/docs/src/docPages/api/events.md +++ b/docs/src/docPages/api/events.md @@ -3,9 +3,9 @@ ## toc ## Introduction -The editor fires a few different events that you can hook into. There are two ways to register event listeners: +The editor fires a few different events that you can hook into. There are three ways to register event listeners: -## Option 1: Right-away +## Option 1: Configuration You can define your event listeners on a new editor instance right-away: ```js @@ -29,12 +29,12 @@ const editor = new Editor({ // The editor isn’t focused anymore. }, onDestroy() { - // The editor is destroyed. + // The editor is being destroyed. }, }) ``` -## Option 2: Later +## Option 2: Binding Or you can register your event listeners on a running editor instance: ### Bind event listeners @@ -64,7 +64,7 @@ editor.on('blur', ({ event }) => { } editor.on('destroy', () => { - // The editor is destroyed. + // The editor is being destroyed. } ``` @@ -82,3 +82,34 @@ editor.on('update', onUpdate) // … and unbind. editor.off('update', onUpdate) ``` + +## Option 3: Extensions +Moving your event listeners to custom extensions (or nodes, or marks) is also possible. Here’s how that would look like: + +```js +import { Extension } from '@tiptap/core' + +const CustomExtension = Extension.create({ + onCreate() { + // The editor is ready. + }, + onUpdate() { + // The content has changed. + }, + onSelection() { + // The selection has changed. + }, + onTransaction({ transaction }) { + // The editor state has changed. + }, + onFocus({ event }) { + // The editor is focused. + }, + onBlur({ event }) { + // The editor isn’t focused anymore. + }, + onDestroy() { + // The editor is being destroyed. + }, +}) +```