Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into main

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()
+    const ydoc = new Y.Doc()
-    this.provider = new WebrtcProvider(this.documentName, this.ydoc)
+    const provider = new WebrtcProvider('tiptap-collaboration-extension', ydoc)
-    this.type = this.ydoc.getXmlFragment('prosemirror')
 
     this.editor = new Editor({
-      // TODO: This is added by every new user.
-      // content: `
-      //   <p>Example Text</p>
-      // `,
       extensions: [
         Document,
         Paragraph,
         Text,
         Collaboration.configure({
-          type: this.type,
+          provider,
         }),
       ],
     })
@@ -49,7 +40,6 @@ export default {
 
   beforeDestroy() {
     this.editor.destroy()
-    this.provider.destroy()
   },
 }
 </script>

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()
+    const ydoc = new Y.Doc()
-    this.provider = new WebrtcProvider(this.documentName, this.ydoc)
+    const provider = new WebrtcProvider('tiptap-collaboration-cursor-extension', ydoc)
-    this.type = this.ydoc.getXmlFragment('prosemirror')
 
     this.editor = new Editor({
-      // TODO: This is added by every new user.
-      // content: `
-      //   <p>Example Text</p>
-      // `,
       extensions: [
         Document,
         Paragraph,
         Text,
         Collaboration.configure({
-          type: this.type,
+          provider,
         }),
         CollaborationCursor.configure({
-          provider: this.provider,
+          provider,
+          user: {
             name: 'Cyndi Lauper',
             color: '#f783ac',
+          },
         }),
       ],
     })
@@ -55,7 +48,6 @@ export default {
 
   beforeDestroy() {
     this.editor.destroy()
-    this.provider.destroy()
   },
 }
 </script>

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.
+  },
+})
+```

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)!
 :::
 
+<!--
+TODO:
+- Pass auth token to the provider
+-
+ -->
+
 ## 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({
@@ -162,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:
@@ -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 {
+    const { documentName, clientID, requestHeaders, clientsCount, document } = data
-      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 {
+    const { documentName, clientID, requestHeaders, clientsCount, document } = data
-      documentName, clientID, requestHeaders, clientsCount, document,
-    } = data
 
   },
 })