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

docs/src/demos/Examples/CollaborativeEditing/index.vue

@@ -5,7 +5,7 @@
     <div class="editor__footer">
       <div :class="`editor__status editor__status--${status}`">
         <template v-if="status === 'connected'">
-          {{ users.length }} user{{ users.length === 1 ? '' : 's' }} online
+          {{ users.length }} user{{ users.length === 1 ? '' : 's' }} online in {{ room }}
         </template>
         <template v-else>
           offline
@@ -37,6 +37,14 @@ const getRandomElement = list => {
   return list[Math.floor(Math.random() * list.length)]
 }
 
+const getRandomRoom = () => {
+  return getRandomElement([
+    'room.one',
+    'room.two',
+    'room.three',
+  ])
+}
+
 export default {
   components: {
     EditorContent,
@@ -54,19 +62,20 @@ export default {
       editor: null,
       users: [],
       status: 'connecting',
+      room: getRandomRoom(),
     }
   },
 
   mounted() {
     const ydoc = new Y.Doc()
-    this.provider = new WebsocketProvider('wss://websocket.tiptap.dev', 'tiptap-collaboration-example', ydoc)
+    this.provider = new WebsocketProvider('wss://websocket.tiptap.dev', this.room, ydoc)
     this.provider.on('status', event => {
       this.status = event.status
     })
 
     window.ydoc = ydoc
 
-    this.indexdb = new IndexeddbPersistence('tiptap-collaboration-example', ydoc)
+    this.indexdb = new IndexeddbPersistence(this.room, ydoc)
 
     this.editor = new Editor({
       extensions: [

docs/src/pages/index.vue

@@ -6,7 +6,7 @@
           The headless editor framework for web artisans.
         </h1>
         <p class="is-large">
-          tiptap gives you full control about every single aspect of your text editor experience. It’s customizable, comes with a ton of extensions, is open source, has an extensive documentation, and is simply a joy to use. Join our welcoming community and start building cool things!
+          tiptap gives you full control about every single aspect of your text editor experience. It’s customizable, comes with a ton of extensions, is open source and has an extensive documentation. Join our welcoming community and start building cool things!
         </p>
         <btn-wrapper>
           <btn type="primary" icon="arrow-right-line" to="/installation">