mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-27 10:52:40 +08:00
3e39dbb298
## Summary Fixed the text formatting toolbar not working properly on mobile web browsers. ## Problem The toolbar had multiple issues on mobile devices: - It would render off-screen or be covered by the virtual keyboard - The flag-based rendering system caused visibility issues on mobile - Long-press text selection didn't trigger the toolbar - Wide toolbars could overflow the viewport <img src="https://github.com/user-attachments/assets/8f54590c-1d2c-4c87-abab-32206df17ebf" width="250"> ## Solution - Use fixed positioning at bottom of screen on mobile devices - Position toolbar above virtual keyboard using Visual Viewport API - Handle toolbar visibility directly via `selectionchange` event - Bypass flag-based rendering system on mobile to avoid rendering issues - Add `touchend` listener to handle long-press text selection - Limit toolbar max-width to viewport minus padding - Enable horizontal scrolling for overflow content <img src="https://github.com/user-attachments/assets/45130860-f01a-45c1-87c5-d43264f88613" width="250"> ## Test plan - [x] Tested on mobile Safari (iOS) - [x] Tested on mobile Chrome (Android) - [x] Verified desktop browsers still work correctly - [x] Verified the toolbar is fixed to the bottom of the screen and above virtual keyboard - [x] Verified long-press text selection triggers toolbar <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Mobile toolbar now anchors to the bottom, adapts width, and repositions dynamically to stay above on-screen keyboards. * Toolbar visibility is context-aware, showing when native-like text selections occur and hiding otherwise; touch interactions are handled for reliable toggling. * Desktop experience and public APIs remain unchanged. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: DarkSky <darksky2048@gmail.com>