Skip to content

Fix/issue 7647 node view selection update#7691

Open
emrullahtastan wants to merge 5 commits intoueberdosis:mainfrom
emrullahtastan:fix/issue-7647-node-view-selection-update
Open

Fix/issue 7647 node view selection update#7691
emrullahtastan wants to merge 5 commits intoueberdosis:mainfrom
emrullahtastan:fix/issue-7647-node-view-selection-update

Conversation

@emrullahtastan
Copy link
Copy Markdown
Contributor

Changes Overview

This PR fixes an issue where custom node views (in both Vue 3 and React) were incorrectly marked as "selected" (receiving the .ProseMirror-selectednode class) whenever they were part of a TextSelection or AllSelection (e.g., Cmd+A).

Implementation Approach

I refined the handleSelectionUpdate method in both VueNodeViewRenderer and ReactNodeViewRenderer. The updated logic now specifically checks if the current editor selection is an instance of NodeSelection and if its position exactly matches the node's position.

Additionally, this PR adopts the recent currentPos lifecycle improvements from upstream/main to ensure safer and more performant position tracking during selection updates.

Testing Done

Manual Testing (Vue 3): Verified with CustomParagraph and Images demos. Cmd+A no longer triggers erroneous selection borders, while direct clicks on images correctly trigger NodeSelection.
Manual Testing (React): Verified identical behavior in the React Images demo.
Conflict Resolution: Successfully merged and tested with the latest upstream/main changes.

Verification Steps

Open a demo with custom node views (e.g., Examples/Images/Vue).
Press Cmd+A to select all.
Expected: Text is highlighted, but the image does NOT receive a selection border/style.
Click directly on the image.
Expected: The image DOES receive a selection border (standard NodeSelection still works).

Additional Notes

The fix addresses the regression reported in issue #7647 while maintaining compatibility with the latest internal position-checking mechanisms introduced in recent Tiptap updates.

Checklist

  • I have created a changeset for this PR if necessary.
  • My changes do not break the library.
  • I have added tests where applicable.
  • I have followed the project guidelines.
  • I have fixed any lint issues.

Related Issues

Fixes #7647

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 2, 2026

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit 996b516
🔍 Latest deploy log https://app.netlify.com/projects/tiptap-embed/deploys/69d4c2977e349a0008ebca0b
😎 Deploy Preview https://deploy-preview-7691--tiptap-embed.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 7, 2026

🦋 Changeset detected

Latest commit: 996b516

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 72 packages
Name Type
@tiptap/react Patch
@tiptap/vue-3 Patch
@tiptap/extension-drag-handle-react Patch
@tiptap/extension-drag-handle-vue-3 Patch
@tiptap/core Patch
@tiptap/extension-audio Patch
@tiptap/extension-blockquote Patch
@tiptap/extension-bold Patch
@tiptap/extension-bubble-menu Patch
@tiptap/extension-bullet-list Patch
@tiptap/extension-code-block-lowlight Patch
@tiptap/extension-code-block Patch
@tiptap/extension-code Patch
@tiptap/extension-collaboration-caret Patch
@tiptap/extension-collaboration Patch
@tiptap/extension-color Patch
@tiptap/extension-details Patch
@tiptap/extension-document Patch
@tiptap/extension-drag-handle-vue-2 Patch
@tiptap/extension-drag-handle Patch
@tiptap/extension-emoji Patch
@tiptap/extension-file-handler Patch
@tiptap/extension-floating-menu Patch
@tiptap/extension-font-family Patch
@tiptap/extension-hard-break Patch
@tiptap/extension-heading Patch
@tiptap/extension-highlight Patch
@tiptap/extension-horizontal-rule Patch
@tiptap/extension-image Patch
@tiptap/extension-invisible-characters Patch
@tiptap/extension-italic Patch
@tiptap/extension-link Patch
@tiptap/extension-list Patch
@tiptap/extension-mathematics Patch
@tiptap/extension-mention Patch
@tiptap/extension-node-range Patch
@tiptap/extension-ordered-list Patch
@tiptap/extension-paragraph Patch
@tiptap/extension-strike Patch
@tiptap/extension-subscript Patch
@tiptap/extension-superscript Patch
@tiptap/extension-table-of-contents Patch
@tiptap/extension-table Patch
@tiptap/extension-text-align Patch
@tiptap/extension-text-style Patch
@tiptap/extension-text Patch
@tiptap/extension-twitch Patch
@tiptap/extension-typography Patch
@tiptap/extension-underline Patch
@tiptap/extension-unique-id Patch
@tiptap/extension-youtube Patch
@tiptap/extensions Patch
@tiptap/html Patch
@tiptap/markdown Patch
@tiptap/pm Patch
@tiptap/starter-kit Patch
@tiptap/static-renderer Patch
@tiptap/suggestion Patch
@tiptap/vue-2 Patch
@tiptap/extension-character-count Patch
@tiptap/extension-dropcursor Patch
@tiptap/extension-focus Patch
@tiptap/extension-gapcursor Patch
@tiptap/extension-history Patch
@tiptap/extension-list-item Patch
@tiptap/extension-list-keymap Patch
@tiptap/extension-placeholder Patch
@tiptap/extension-table-cell Patch
@tiptap/extension-table-header Patch
@tiptap/extension-table-row Patch
@tiptap/extension-task-item Patch
@tiptap/extension-task-list Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

handleSelectionUpdate in VueNodeViewRenderer breaks use flow

1 participant