demos: remove indexeddb provider from example, use new websocket provider

demos/package.json

@@ -8,14 +8,13 @@
     "ts": "tsc --project tsconfig.base.json --noEmit && tsc --project tsconfig.react.json --noEmit && tsc --project tsconfig.vue-2.json --noEmit && tsc --project tsconfig.vue-3.json --noEmit"
   },
   "dependencies": {
+    "@hocuspocus/provider": "^1.0.0-alpha.26",
     "d3": "^7.1.1",
     "fast-glob": "^3.2.7",
     "remixicon": "^2.5.0",
     "shiki": "^0.9.12",
     "simplify-js": "^1.2.4",
-    "y-indexeddb": "^9.0.6",
     "y-webrtc": "^10.2.2",
-    "y-websocket": "^1.3.17",
     "yjs": "^13.5.21"
   },
   "devDependencies": {

demos/src/Examples/CollaborativeEditing/React/index.jsx

@@ -2,8 +2,6 @@ import React, {
   useState, useCallback, useEffect,
 } from 'react'
 import * as Y from 'yjs'
-import { WebsocketProvider } from 'y-websocket'
-import { IndexeddbPersistence } from 'y-indexeddb'
 import { useEditor, EditorContent } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import TaskList from '@tiptap/extension-task-list'
@@ -12,6 +10,7 @@ import Highlight from '@tiptap/extension-highlight'
 import CharacterCount from '@tiptap/extension-character-count'
 import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
+import { HocuspocusProvider } from '@hocuspocus/provider'
 import MenuBar from './MenuBar'
 import './styles.scss'
 
@@ -54,7 +53,14 @@ const getRandomName = () => getRandomElement(names)
 const room = getRandomRoom()
 
 const ydoc = new Y.Doc()
-const websocketProvider = new WebsocketProvider('wss://connect.tiptap.dev', room, ydoc)
+const websocketProvider = new HocuspocusProvider({
+  url: 'wss://connect.hocuspocus.cloud',
+  parameters: {
+    key: 'write_B0sHbuV5xwYl6WzGjoqL',
+  },
+  name: room,
+  document: ydoc,
+})
 
 const getInitialUser = () => {
   return JSON.parse(localStorage.getItem('currentUser')) || {
@@ -88,13 +94,6 @@ export default () => {
   })
 
   useEffect(() => {
-    // Store shared data persistently in browser to make offline editing possible
-    const indexeddbProvider = new IndexeddbPersistence(room, ydoc)
-
-    indexeddbProvider.on('synced', () => {
-      console.log('Loaded content from database …')
-    })
-
     // Update status changes
     websocketProvider.on('status', event => {
       setStatus(event.status)

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

@@ -30,8 +30,7 @@ import TaskItem from '@tiptap/extension-task-item'
 import Highlight from '@tiptap/extension-highlight'
 import CharacterCount from '@tiptap/extension-character-count'
 import * as Y from 'yjs'
-import { WebsocketProvider } from 'y-websocket'
-import { IndexeddbPersistence } from 'y-indexeddb'
+import { HocuspocusProvider } from '@hocuspocus/provider'
 import MenuBar from './MenuBar.vue'
 
 const getRandomElement = list => {
@@ -59,7 +58,6 @@ export default {
         color: this.getRandomColor(),
       },
       provider: null,
-      indexdb: null,
       editor: null,
       status: 'connecting',
       room: getRandomRoom(),
@@ -68,13 +66,19 @@ export default {
 
   mounted() {
     const ydoc = new Y.Doc()
-    this.provider = new WebsocketProvider('wss://connect.tiptap.dev', this.room, ydoc)
+    this.provider = new HocuspocusProvider({
+      url: 'wss://connect.hocuspocus.cloud',
+      parameters: {
+        key: 'write_B0sHbuV5xwYl6WzGjoqL',
+      },
+      name: this.room,
+      document: ydoc,
+    })
+
     this.provider.on('status', event => {
       this.status = event.status
     })
 
-    this.indexdb = new IndexeddbPersistence(this.room, ydoc)
-
     this.editor = new Editor({
       extensions: [
         StarterKit.configure({