fix: rename CollaborationCursor to CollaborationCaret

The extension got renamed upstream.

Signed-off-by: Jonas <jonas@freesources.org>

Author: mejo-

src/components/Editor.vue

@@ -104,7 +104,7 @@ import { provideEditorWidth } from '../composables/useEditorWidth.ts'
 import { provideSaveService } from '../composables/useSaveService.ts'
 import { provideSyncService } from '../composables/useSyncService.ts'
 import { useSyntaxHighlighting } from '../composables/useSyntaxHighlighting.ts'
-import { CollaborationCursor } from '../extensions/index.js'
+import { CollaborationCaret } from '../extensions/index.js'
 import { exposeForDebugging, removeFromDebugging } from '../helpers/debug.js'
 import { logger } from '../helpers/logger.js'
 import { setInitialYjsState } from '../helpers/setInitialYjsState.js'
@@ -240,7 +240,7 @@ export default defineComponent({
 		const extensions = [
 			Autofocus.configure({ fileId: props.fileId }),
 			Collaboration.configure({ document: ydoc }),
-			CollaborationCursor.configure({ provider: { awareness } }),
+			CollaborationCaret.configure({ provider: { awareness } }),
 		]
 		const editor = isRichEditor
 			? createRichEditor({
@@ -929,7 +929,7 @@ export default defineComponent({
 }
 
 /* Give a remote user a caret */
-.collaboration-cursor__caret {
+.collaboration-carets__caret {
 	position: relative;
 	margin-left: -1px;
 	margin-right: -1px;
@@ -940,7 +940,7 @@ export default defineComponent({
 }
 
 /* Render the username above the caret */
-.collaboration-cursor__label {
+.collaboration-carets__label {
 	position: absolute;
 	top: -1.4em;
 	left: -1px;
@@ -955,11 +955,11 @@ export default defineComponent({
 	white-space: nowrap;
 	opacity: 0;
 
-	&.collaboration-cursor__label__active {
+	&.collaboration-carets__label__active {
 		opacity: 1;
 	}
 
-	&:not(.collaboration-cursor__label__active) {
+	&:not(.collaboration-carets__label__active) {
 		transition: opacity 0.2s 5s;
 	}
 }

src/composables/useEditorMethods.ts

@@ -5,7 +5,7 @@
 
 import type { Editor } from '@tiptap/core'
 import escapeHtml from 'escape-html'
-import type { AwarenessUser } from '../extensions/CollaborationCursor.ts'
+import type { AwarenessUser } from '../extensions/CollaborationCaret.ts'
 import Markdown from '../extensions/Markdown.js'
 import markdownit from '../markdownit/index.js'
 import { isUser, type Session } from '../services/SyncService'

src/css/print.scss

@@ -135,8 +135,8 @@
 		}
 	}
 
-	.collaboration-cursor__caret,
-	.collaboration-cursor__label {
+	.collaboration-carets__caret,
+	.collaboration-carets__label {
 		display: none;
 	}
 }

src/css/prosemirror.scss

@@ -37,7 +37,7 @@ div.ProseMirror {
 		user-select: text;
 		font-size: var(--default-font-size);
 
-		&:not(.collaboration-cursor__caret) {
+		&:not(.collaboration-carets__caret) {
 			border: none !important;
 		}
 

src/extensions/CollaborationCursor.ts src/extensions/CollaborationCaret.tssrc/extensions/CollaborationCursor.ts renamed to src/extensions/CollaborationCaret.ts

@@ -4,7 +4,7 @@
  */
 
 import { t } from '@nextcloud/l10n'
-import { CollaborationCursor as TiptapCollaborationCursor } from '@tiptap/extension-collaboration-cursor'
+import { CollaborationCaret as TiptapCollaborationCaret } from '@tiptap/extension-collaboration-caret'
 
 export interface AwarenessUser {
 	color: string
@@ -14,18 +14,18 @@ export interface AwarenessUser {
 /**
  * @param clientId The Yjs client ID
  */
-function showCursorLabel(clientId: number) {
+function showCaretLabel(clientId: number) {
 	setTimeout(() => {
 		const el = document.getElementById(
-			`collaboration-cursor__label__${clientId}`,
+			`collaboration-carets__label__${clientId}`,
 		)
 		if (!el) {
 			return
 		}
 
-		el.classList.add('collaboration-cursor__label__active')
+		el.classList.add('collaboration-carets__label__active')
 		setTimeout(() => {
-			el?.classList.remove('collaboration-cursor__label__active')
+			el?.classList.remove('collaboration-carets__label__active')
 		}, 50)
 	}, 50)
 }
@@ -38,26 +38,30 @@ function getTimestamp() {
 }
 
 /**
- * Render the cursor decoration
+ * Render the caret decoration
  *
  * @param user the users awareness data
  * @param clientId not part of the tiptap type signature but provided by y-prosemirror
  */
 function render(user: AwarenessUser, clientId?: number): HTMLElement {
 	const cursor = document.createElement('span')
-	cursor.classList.add('collaboration-cursor__caret')
+
+	cursor.classList.add('collaboration-carets__caret')
 	cursor.setAttribute('style', `border-color: ${user.color}`)
+
 	const label = document.createElement('div')
-	label.classList.add('collaboration-cursor__label')
-	label.id = `collaboration-cursor__label__${clientId}`
+	label.id = `collaboration-carets__label__${clientId}`
+
+	label.classList.add('collaboration-carets__label')
 	label.setAttribute('style', `background-color: ${user.color}`)
 	const text = document.createTextNode(user.name || t('text', 'Guest'))
 	label.insertBefore(text, null)
 	cursor.insertBefore(label, null)
+
 	return cursor
 }
 
-const CollaborationCursor = TiptapCollaborationCursor.extend({
+const CollaborationCaret = TiptapCollaborationCaret.extend({
 	addOptions() {
 		return {
 			...this.parent?.(),
@@ -74,16 +78,16 @@ const CollaborationCursor = TiptapCollaborationCursor.extend({
 			) => {
 				if (origin !== 'local') {
 					for (const clientId of [...added, ...updated]) {
-						if (clientId !== this.options.user.clientId) {
-							showCursorLabel(clientId)
+						if (clientId !== this.options.user.clientID) {
+							showCaretLabel(clientId)
 						}
 					}
 				}
 			},
 		)
 	},
 
-	// Flag own cursor as active on undoable changes to the document state
+	// Flag own caret as active on undoable changes to the document state
 	onTransaction({ transaction, editor }) {
 		const addToHistory = transaction.getMeta('addToHistory') ?? true
 		const pointer = transaction.getMeta('pointer')
@@ -97,4 +101,4 @@ const CollaborationCursor = TiptapCollaborationCursor.extend({
 	},
 })
 
-export default CollaborationCursor
+export default CollaborationCaret

src/extensions/index.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import CollaborationCursor from './CollaborationCursor.ts'
+import CollaborationCaret from './CollaborationCaret.ts'
 import Emoji from './Emoji.js'
 import FocusTrap from './FocusTrap.js'
 import KeepSyntax from './KeepSyntax.js'
@@ -14,7 +14,7 @@ import RichText from './RichText.js'
 import UserColor from './UserColor.js'
 
 export {
-	CollaborationCursor,
+	CollaborationCaret,
 	Emoji,
 	FocusTrap,
 	KeepSyntax,