Fix Tiptap collaboration cursor rendering after v3 upgrade#817
Fix Tiptap collaboration cursor rendering after v3 upgrade#817chrismaddalena merged 4 commits intomasterfrom
Conversation
Co-authored-by: chrismaddalena <10526228+chrismaddalena@users.noreply.github.com>
Co-authored-by: chrismaddalena <10526228+chrismaddalena@users.noreply.github.com>
Co-authored-by: chrismaddalena <10526228+chrismaddalena@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Fixes Tiptap v3 collaboration caret/cursor label rendering by aligning code and styles with the renamed extension and updated CSS classnames.
Changes:
- Renamed the Tiptap extension import/usage to
CollaborationCaret - Updated SCSS selectors from
collaboration-cursor__*tocollaboration-carets__*
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| javascript/src/frontend/collab_forms/rich_text_editor/index.tsx | Updates the collaboration caret extension import and configuration usage to match Tiptap v3 naming. |
| javascript/src/frontend/collab_forms/editor.scss | Updates caret/label selectors to match the new DOM classnames emitted by Tiptap v3. |
Files not reviewed (1)
- javascript/package-lock.json: Language not supported
| import * as Y from "yjs"; | ||
| import Collaboration from "@tiptap/extension-collaboration"; | ||
| import CollaborationCarent from "@tiptap/extension-collaboration-caret"; | ||
| import CollaborationCaret from "@tiptap/extension-collaboration-caret"; |
There was a problem hiding this comment.
The PR description/template states this PR must only contribute documentation, but the diff includes TypeScript/SCSS code changes. Please switch to the appropriate pull request template (or update the PR description to the correct template) so reviewers/maintainers can process it under the right contribution requirements.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #817 +/- ##
=======================================
Coverage 91.37% 91.37%
=======================================
Files 368 368
Lines 20933 20933
=======================================
Hits 19127 19127
Misses 1806 1806 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
… and picomatch packages PR #817 inadvertently removed parent package entries for @floating-ui/dom and @parcel/watcher from package-lock.json while keeping platform-specific variants, causing 'npm ci' to fail in Docker builds with "Missing from lock file" errors. Regenerated package-lock.json via full 'npm install' to restore proper dependency tree structure. This adds: - @floating-ui/dom@1.7.5 (required by @tiptap/extension-bubble-menu) - @parcel/watcher@2.5.6 (peer dependency of @graphql-codegen/cli) - picomatch@4.0.3 (transitive dependency of @parcel/watcher) Verified: 'npm ci' and 'npm run build-frontend-prod' both complete successfully. Co-authored-by: chrismaddalena <10526228+chrismaddalena@users.noreply.github.com>
Requirements for Contributing Documentation
Description of the Change
Tiptap v3 upgrade (Oct 2025) renamed
@tiptap/extension-collaboration-cursor→@tiptap/extension-collaboration-caretand changed rendered CSS classes fromcollaboration-cursor__*tocollaboration-carets__*(plural). CSS selectors were not updated, breaking cursor label positioning.Changes:
CollaborationCarent→CollaborationCaretinrich_text_editor/index.tsx.collaboration-cursor__*→.collaboration-carets__*ineditor.scsspackage-lock.jsonvianpm install(520 packages locked)Before:
CSS selector
.collaboration-cursor__labelnever matched → username rendered inline.After:
CSS selector
.collaboration-carets__labelmatches →position: absolute; top: -1.4emapplies correctly.Release Notes
Fixed collaboration cursor labels appearing inline in document text instead of positioned above cursors.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.