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 { HocuspocusProvider } from '@hocuspocus/provider'
-import { IndexeddbPersistence } from 'y-indexeddb'
 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({

yarn.lock

@@ -1013,6 +1013,16 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
   integrity sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==
 
+"@hocuspocus/provider@^1.0.0-alpha.26":
+  version "1.0.0-alpha.26"
+  resolved "https://registry.yarnpkg.com/@hocuspocus/provider/-/provider-1.0.0-alpha.26.tgz#77b12b5cf7835a348f20f4e44343af505c2c7dae"
+  integrity sha512-fIilGwvypO3Wj4vsHFSlAmePeIs37RZWY9eQgA8giMkYqkLJan6e3ny7Le+QJdG0MhvrhHXYiFvaBDoisKISsw==
+  dependencies:
+    "@lifeomic/attempt" "^3.0.0"
+    lib0 "^0.2.42"
+    y-protocols "^1.0.5"
+    yjs "^13.5.0"
+
 "@humanwhocodes/config-array@^0.6.0":
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.6.0.tgz#b5621fdb3b32309d2d16575456cbc277fa8f021a"
@@ -1736,6 +1746,11 @@
     npmlog "^4.1.2"
     write-file-atomic "^3.0.3"
 
+"@lifeomic/attempt@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@lifeomic/attempt/-/attempt-3.0.1.tgz#a1d65fc06df3b5650cc851a6cafee0a733f8b58e"
+  integrity sha512-zvQ6ydPI2mevhuZ++l2S93+DS08w27ad942Ae9WW5h7j+giEHrK7rsgbchVTAs0jo35Ox90G5/c8ZDSz5vipWg==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -9139,7 +9154,7 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
-yjs@^13.5.21:
+yjs@^13.5.0, yjs@^13.5.21:
   version "13.5.21"
   resolved "https://registry.yarnpkg.com/yjs/-/yjs-13.5.21.tgz#dd370b011d8e60fb04e65dd2bc4bc89ae94a49f4"
   integrity sha512-DehXnsAp2ALOgdTUCogQlMNB1lcaP8QE3ovpkE9lcsZpKBn5a/yJI/AXbL3lIN0o0v1ezKk7JmqnfUBiZJSARw==