From e099f4206e5c02cc8f85c567857d0c1a3db1de01 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 21 Jun 2023 15:49:53 +0200
Subject: [PATCH] Add a custom CollaborationCursor Tiptap extension

Needed to define our own render function.

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/extensions/CollaborationCursor.js | 39 +++++++++++++++++++++++++++
 src/extensions/index.js               |  2 ++
 2 files changed, 41 insertions(+)
 create mode 100644 src/extensions/CollaborationCursor.js

diff --git a/src/extensions/CollaborationCursor.js b/src/extensions/CollaborationCursor.js
new file mode 100644
index 00000000000..0be8a9e62a1
--- /dev/null
+++ b/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
diff --git a/src/extensions/index.js b/src/extensions/index.js
index b0fecc5940e..c6929f7ed2c 100644
--- a/src/extensions/index.js
+++ b/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,