Use the new storage feature for the CollaborationCursor extension (#2096)

* extension-collaboration-cursor: make use of the new storage feature, deprecate users command and onUsers callback, clean up

* docs: update the jobs page

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

@@ -65,7 +65,6 @@ const getInitialUser = () => {
 
 export default () => {
   const [status, setStatus] = useState('connecting')
-  const [users, setUsers] = useState([])
   const [currentUser, setCurrentUser] = useState(getInitialUser)
 
   const editor = useEditor({
@@ -84,9 +83,6 @@ export default () => {
       }),
       CollaborationCursor.configure({
         provider: websocketProvider,
-        onUpdate: updatedUsers => {
-          setUsers(updatedUsers)
-        },
       }),
     ],
   })
@@ -96,7 +92,7 @@ export default () => {
     const indexeddbProvider = new IndexeddbPersistence(room, ydoc)
 
     indexeddbProvider.on('synced', () => {
-      console.log('Loaded content from database  …')
+      console.log('Loaded content from database …')
     })
 
     // Update status changes
@@ -109,7 +105,7 @@ export default () => {
   useEffect(() => {
     if (editor && currentUser) {
       localStorage.setItem('currentUser', JSON.stringify(currentUser))
-      editor.chain().focus().user(currentUser).run()
+      editor.chain().focus().updateUser(currentUser).run()
     }
   }, [editor, currentUser])
 
@@ -128,7 +124,7 @@ export default () => {
       <div className="editor__footer">
           <div className={`editor__status editor__status--${status}`}>
             {status === 'connected'
-              ? `${users.length} user${users.length === 1 ? '' : 's'} online in ${room}`
+              ? `${editor.storage.collaborationCursor.users.length} user${editor.storage.collaborationCursor.users.length === 1 ? '' : 's'} online in ${room}`
               : 'offline'}
           </div>
           <div className="editor__name">

demos/src/Examples/CollaborativeEditing/Vue/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 in {{ room }}
+          {{ editor.storage.collaborationCursor.users.length }} user{{ editor.storage.collaborationCursor.users.length === 1 ? '' : 's' }} online in {{ room }}
         </template>
         <template v-else>
           offline
@@ -61,7 +61,6 @@ export default {
       provider: null,
       indexdb: null,
       editor: null,
-      users: [],
       status: 'connecting',
       room: getRandomRoom(),
     }
@@ -74,8 +73,6 @@ export default {
       this.status = event.status
     })
 
-    window.ydoc = ydoc
-
     this.indexdb = new IndexeddbPersistence(this.room, ydoc)
 
     this.editor = new Editor({
@@ -92,9 +89,6 @@ export default {
         CollaborationCursor.configure({
           provider: this.provider,
           user: this.currentUser,
-          onUpdate: users => {
-            this.users = users
-          },
         }),
         CharacterCount.configure({
           limit: 10000,
@@ -120,7 +114,7 @@ export default {
 
     updateCurrentUser(attributes) {
       this.currentUser = { ...this.currentUser, ...attributes }
-      this.editor.chain().focus().user(this.currentUser).run()
+      this.editor.chain().focus().updateUser(this.currentUser).run()
 
       localStorage.setItem('currentUser', JSON.stringify(this.currentUser))
     },