add cursors but broken

Signed-off-by: Matt Krick <[email protected]>

packages/client/hooks/useTipTapPageEditor.ts

@@ -2,6 +2,7 @@ import {TiptapCollabProvider, TiptapCollabProviderWebsocket} from '@hocuspocus/p
 import {SearchAndReplace} from '@sereneinserenade/tiptap-search-and-replace'
 import CharacterCount from '@tiptap/extension-character-count'
 import Collaboration from '@tiptap/extension-collaboration'
+import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
 import Document from '@tiptap/extension-document'
 import Focus from '@tiptap/extension-focus'
 import Mention from '@tiptap/extension-mention'
@@ -11,7 +12,7 @@ import {TaskList} from '@tiptap/extension-task-list'
 import Underline from '@tiptap/extension-underline'
 import {generateJSON, generateText, useEditor} from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import {useEffect, useRef, useState} from 'react'
+import {useRef, useState} from 'react'
 import * as Y from 'yjs'
 import {LoomExtension} from '../components/promptResponse/loomExtension'
 import {TiptapLinkExtension} from '../components/promptResponse/TiptapLinkExtension'
@@ -51,7 +52,7 @@ export const useTipTapPageEditor = (
   const {teamId, placeholder} = options
   const atmosphere = useAtmosphere()
   const {history} = useRouter<{meetingId: string}>()
-  const [doc] = useState(() => {
+  const [document] = useState(() => {
     const doc = new Y.Doc()
     const frag = doc.getXmlFragment('default')
     // update the URL to match the title
@@ -78,6 +79,15 @@ export const useTipTapPageEditor = (
   })
   const placeholderRef = useRef(placeholder)
   placeholderRef.current = placeholder
+  // Connect to your Collaboration server
+  const provider = useState(() => {
+    if (!pageId) return
+    return new TiptapCollabProvider({
+      websocketProvider: makeHocusPocusSocket(atmosphere.authToken),
+      name: `page:${pageId}`,
+      document
+    })
+  })
   const editor = useEditor(
     {
       content: '',
@@ -122,23 +132,20 @@ export const useTipTapPageEditor = (
           limit: 1900
         }),
         Collaboration.configure({
-          document: doc // Configure Y.Doc for collaboration
+          document
+        }),
+        CollaborationCursor.configure({
+          provider,
+          user: {
+            name: 'Cyndi Lauper',
+            color: '#f783ac'
+          }
         })
       ],
       autofocus: true,
       editable: true
     },
     []
   )
-  // Connect to your Collaboration server
-  useEffect(() => {
-    if (!pageId) return
-    new TiptapCollabProvider({
-      websocketProvider: makeHocusPocusSocket(atmosphere.authToken),
-      name: `page:${pageId}`,
-      document: doc
-    })
-  }, [])
-
   return {editor}
 }

packages/client/package.json

@@ -94,6 +94,7 @@
     "@tiptap/core": "^2.11.5",
     "@tiptap/extension-character-count": "^2.11.5",
     "@tiptap/extension-collaboration": "^2.11.5",
+    "@tiptap/extension-collaboration-cursor": "^2.11.5",
     "@tiptap/extension-focus": "^2.11.5",
     "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-link": "^2.11.5",

yarn.lock

@@ -7768,6 +7768,11 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.11.5.tgz#a550c544804e65507ab66dc8ab89a1e2f7d9228d"
   integrity sha512-xOvHevNIQIcCCVn9tpvXa1wBp0wHN/2umbAZGTVzS+AQtM7BTo0tz8IyzwxkcZJaImONcUVYLOLzt2AgW1LltA==
 
+"@tiptap/extension-collaboration-cursor@^2.11.5":
+  version "2.11.5"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-collaboration-cursor/-/extension-collaboration-cursor-2.11.5.tgz#967ae84534f8ea8e25229cfbecfd0ee9a46ba759"
+  integrity sha512-sazBzi5HCHgGRihSzWHhHFMSI9oU0v/qqiDZYJ/zhzCKEWONx8WlS6WTxo6z3l6/Qz9lm7clmHNUQNWxnssAOA==
+
 "@tiptap/extension-collaboration@^2.11.5":
   version "2.11.5"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-collaboration/-/extension-collaboration-2.11.5.tgz#7edbcf88b3659dfb18c44aa45c50bbbf31ac1405"