Skip to content

fix(FloatingButtons): group smartpicker button and drag handle together - #7818

Merged
mejo- merged 1 commit into
mainfrom
fix/floating_buttons
Oct 22, 2025
Merged

fix(FloatingButtons): group smartpicker button and drag handle together#7818
mejo- merged 1 commit into
mainfrom
fix/floating_buttons

Conversation

@mejo-

Copy link
Copy Markdown
Member
  • The button group follows the cursor now
  • The button group is top-aligned to hovered paragraph node
  • The drag handle button has cursor type grab
  • Not displayed on mobile and full width view

Also removes block margin from link previews. We already have margin between paragraphs and it makes the floating buttons look off otherwise.

Fixes: #7272
Fixes: #7604

🖼️ Screenshots

🏚️ Before🏡 After
grafikgrafik

🖼️ Screencast

Screencast
recording1

🏁 Checklist

  • Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
  • Sign-off message is added to all commits
  • Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests

@mejo-mejo- self-assigned this Oct 22, 2025
@mejo-mejo- added bug Something isn't working 3. to review ux labels Oct 22, 2025
- The button group follows the cursor now
- The button group is top-aligned to hovered paragraph node
- The drag handle button has cursor type `grab`
- Not displayed on mobile and full width view
Also removes block margin from link previews. We already have margin
between paragraphs and it makes the floating buttons look off otherwise.
Fixes: #7272Fixes: #7604
Signed-off-by: Jonas <jonas@freesources.org>
@mejo-
mejo-force-pushed the fix/floating_buttons branch from 8236b6d to 2e44814CompareOctober 22, 2025 15:26
@codecov

codecovBot commented Oct 22, 2025

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 59.72%. Comparing base (70e48dd) to head (2e44814).
⚠️ Report is 18 commits behind head on main.

Additional details and impacted files
@@ Coverage Diff @@## main #7818 +/- ##
==========================================
+ Coverage 52.96% 59.72% +6.75% 
==========================================
Files 501 499 -2 Lines 43372 38327 -5045 Branches 1092 1061 -31 ==========================================
- Hits 22973 22890 -83 + Misses 20293 15332 -4961 + Partials 106 105 -1 

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

class="floating-buttons"
:class="{ heading: isHeadingNode }"
:on-node-change="onNodeChange">
<NcButton

@juliusknorrjuliusknorrOct 22, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Seems a bit weird to have the plus button wrapped in the drag handle itself. I guess that is a bit of a shortcut to have a more straight forward implementation. Only "issue" i could see is that you can use the plus button as a drag handle as well. Not a blocker for me though

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Hehe, first I thought the same. Then I realized that it's exactly what the "notion style" Tiptap example does it as well 🤪

I didn't see a good reason to not do it and actually it results in cleaner code, as I can reuse the node and pos returned by the drag handler callback for the plus button action.

@mejo-

Copy link
Copy Markdown
MemberAuthor

/backport to stable32

@mejo-
mejo- merged commit ab10022 into mainOct 22, 2025
72 of 77 checks passed
@mejo-
mejo- deleted the fix/floating_buttons branch October 22, 2025 18:49
@mejo-

Copy link
Copy Markdown
MemberAuthor

/backport to stable32

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

Labels

3. to reviewbugSomething isn't workingux

Projects

Archived in project

4 participants

@mejo-@juliusknorr@marcoambrosini@benjaminfrueh