[stable34] fix(FloatingButtons): hide btns until first mousemove

[silverkszlo]

📝 Summary

Floating buttons overlapped the placeholder when opening Text editor on Android ~tablet-size. This fix hides them on mount until first mousemove. The Vue 3 wrapper of @tiptap/extension-drag-handle does that internally, so this is only needed for the stable branches.

The buttons only render when the viewport is >= 1024px: they are gated by showFloatingButtons in ContentContainer.vue, which uses useIsMobile(), a pure width check. The DragHandle plugin positions and reveals the buttons only in its mousemove handler. Until then they sit unpositioned at the editor's top-left corner, on top of the placeholder. Touch devices never fire mousemove, so on tablet-size touch screens (wide enough to pass the width check) the buttons stayed overlapping the placeholder permanently.

🖼️ Screenshots

🏚️ Before | 🏡 After

|

B | A

🏁 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
• Documentation (README or documentation) has been updated or is not required

🤖 AI (if applicable)

• The content of this PR was partly or fully generated using AI tools
• The AI-generated content was reviewed, comprehended and tested by a human

[max-nextcloud]

So this means these buttons will stay hidden on touch devices no matter what, right?

They do seem useful though. Can't we trigger the positioning differently from the mouse move?

[silverkszlo]

So this means these buttons will stay hidden on touch devices no matter what, right?

They do seem useful though. Can't we trigger the positioning differently from the mouse move?

As far as I understand it, they were always hidden on touch devices:

text/src/components/Editor/ContentContainer.vue

Line 65 in 313312b

&& !this.isMobile

[max-nextcloud]

I think isMobile only checks the screen size. It has the wrong name. At least your PR description says:

The buttons only render when the viewport is >= 1024px: they are gated by showFloatingButtons in ContentContainer.vue, which uses useIsMobile(), a pure width check.

[silverkszlo]

I think isMobile only checks the screen size. It has the wrong name. At least your PR description says:

The buttons only render when the viewport is >= 1024px: they are gated by showFloatingButtons in ContentContainer.vue, which uses useIsMobile(), a pure width check.

Ah, you mean touch devices with big screens, now I get it :)

So according to my UI testing in the browser, the floating buttons appear on touch devices with >=1024px screens when you tap on a paragraph, which should be fine, right?

I have tested that with with Chrome's DevTools → Sensors → Show Sensors → Touch: Force enabled

[silverkszlo]

/backport to stable33 please

[silverkszlo]

/backport to stable32 please

[silverkszlo]

/backport to stable31 please

[backportbot]

The backport to stable31 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable31
git pull origin stable31

# Create the new backport branch
git checkout -b backport/9101/stable31

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick 49eb01fb

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/9101/stable31

Error: Failed to check for changes with origin/stable31: No changes found in backport branch

---

Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.