Skip to content

Enhance bubble menu positioning for table cell selections #6482

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jun 20, 2025

Conversation

bdbch
Copy link
Member

@bdbch bdbch commented Jun 20, 2025

Changes Overview

This pull request enhances the BubbleMenuPlugin in packages/extension-bubble-menu by improving the handling of cell selections in the editor. It introduces a utility function to combine DOM rectangles and updates the logic for positioning the bubble menu when a cell selection is detected.

Improvements to cell selection handling:

  • Added combineDOMRects utility function: This function calculates a bounding rectangle that encompasses two DOM rectangles, ensuring proper handling of multi-cell selections. (packages/extension-bubble-menu/src/bubble-menu-plugin.ts, packages/extension-bubble-menu/src/bubble-menu-plugin.tsR15-R44)

  • Updated updatePosition method in BubbleMenuView: Enhanced the logic to detect cell selections and compute the correct bounding rectangle for the bubble menu. This ensures that the menu is positioned correctly for both single-cell and multi-cell selections. (packages/extension-bubble-menu/src/bubble-menu-plugin.ts, packages/extension-bubble-menu/src/bubble-menu-plugin.tsL294-R349)

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 #6410

Copy link

changeset-bot bot commented Jun 20, 2025

🦋 Changeset detected

Latest commit: 4b20c30

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

This PR includes changesets to release 71 packages
Name Type
@tiptap/extension-bubble-menu Patch
@tiptap/react Patch
@tiptap/vue-2 Patch
@tiptap/vue-3 Patch
@tiptap/extension-drag-handle-react Patch
@tiptap/extension-drag-handle-vue-2 Patch
@tiptap/extension-drag-handle-vue-3 Patch
@tiptap/core Patch
@tiptap/extension-blockquote Patch
@tiptap/extension-bold 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-content Patch
@tiptap/extension-details-summary Patch
@tiptap/extension-details Patch
@tiptap/extension-document 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-typography Patch
@tiptap/extension-underline Patch
@tiptap/extension-unique-id Patch
@tiptap/extension-youtube Patch
@tiptap/extensions Patch
@tiptap/html Patch
@tiptap/pm Patch
@tiptap/starter-kit Patch
@tiptap/static-renderer Patch
@tiptap/suggestion 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

Copy link

netlify bot commented Jun 20, 2025

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit 4b20c30
🔍 Latest deploy log https://app.netlify.com/projects/tiptap-embed/deploys/6855c836767412000833b512
😎 Deploy Preview https://deploy-preview-6482--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.

@bdbch bdbch requested a review from Copilot June 20, 2025 20:37
@bdbch bdbch self-assigned this Jun 20, 2025
Copilot

This comment was marked as outdated.

@bdbch bdbch requested a review from Copilot June 20, 2025 20:42
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR enhances the bubble menu’s positioning logic for table cell selections in the editor. Key changes include introducing a new utility function to combine DOM rectangles, updating position calculations for cell selections in the BubbleMenuView, and a changeset file for versioning.

  • Added combineDOMRects utility function to merge two DOMRect instances
  • Updated updatePosition method in BubbleMenuView to account for multi-cell selections
  • Created a changeset documenting the fix

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
packages/extension-bubble-menu/src/bubble-menu-plugin.ts Introduced combineDOMRects and updated position logic
.changeset/early-guests-melt.md Added changeset for bubble menu positioning fix

@bdbch bdbch merged commit 00693b8 into next Jun 20, 2025
14 of 15 checks passed
@bdbch bdbch deleted the bdbch/6410-table-cell-bubblemenu-adjustment branch June 20, 2025 20:56
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.

[Bug]: Bubble Menu anchor is always the last selected table cell instead of whole selection
1 participant