Add a custom CollaborationCursor Tiptap extension

Needed to define our own render function.

Signed-off-by: Jonas <[email protected]>

src/extensions/CollaborationCursor.js

@@ -0,0 +1,39 @@
+import { CollaborationCursor as TiptapCollaborationCursor } from '@tiptap/extension-collaboration-cursor'
+
+const CollaborationCursor = TiptapCollaborationCursor.extend({
+	addOptions() {
+		return {
+			provider: null,
+			user: {
+				name: null,
+				color: null,
+			},
+			render: user => {
+				const cursor = document.createElement('span')
+
+				cursor.classList.add('collaboration-cursor__caret')
+				cursor.setAttribute('style', `border-color: ${user.color}`)
+
+				const label = document.createElement('div')
+
+				label.classList.add('collaboration-cursor__label')
+				label.classList.add(`collaboration-cursor__label__${user.name}`)
+				label.setAttribute('style', `background-color: ${user.color}`)
+				label.insertBefore(document.createTextNode(user.name), null)
+				cursor.insertBefore(label, null)
+
+				setTimeout(() => {
+					label.classList.add('collaboration-cursor__label_fadeout')
+				}, 5000)
+
+				return cursor
+			},
+		}
+	},
+	onTransaction: (transaction) => {
+		// console.debug('collab cursor transaction', transaction)
+		// console.debug('collab cursor transaction getMeta clientID', transaction.getMeta('clientID'))
+	},
+})
+
+export default CollaborationCursor

src/extensions/index.js

@@ -20,6 +20,7 @@
  *
  */
 
+import CollaborationCursor from './CollaborationCursor.js'
 import Emoji from './Emoji.js'
 import Keymap from './Keymap.js'
 import UserColor from './UserColor.js'
@@ -30,6 +31,7 @@ import KeepSyntax from './KeepSyntax.js'
 import Mention from './Mention.js'
 
 export {
+	CollaborationCursor,
 	Emoji,
 	Keymap,
 	UserColor,