Commit Graph
2 Commits
Author SHA1 Message Date
passabilities.ethandDarkSky 3e39dbb298 fix(mobile): fixed toolbar position (#14329)
## 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>
2026-02-24 01:36:09 +08:00
passabilities.eth 0f0bfb9f06 fix(editor): slash menu on mobile browser (#14328)
## Summary
Fixed the slash menu not appearing when typing `/` on mobile web
browsers.

## Problem
Mobile browsers don't reliably fire keyboard events (`keyDown`) when
using virtual keyboards. This caused the slash menu trigger to fail on
mobile devices.

## Solution
- Changed from handling `keyDown` events to `beforeInput` events
- `InputEvent` is fired consistently across all platforms (mobile and
desktop)
- Added proper handling for IME composition to avoid duplicate triggers
- Uses `waitForUpdate()` to ensure the input is processed before
checking for the trigger

## Test plan
- [x] Tested on mobile Safari (iOS)
- [x] Tested on mobile Chrome (Android)
- [x] Verified desktop browsers still work correctly
- [x] Verified IME input (e.g., Chinese/Japanese) doesn't trigger false
positives

Fixes #12910 

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved slash menu input handling for better reliability and enhanced
IME (input method editor) composition support.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-01 19:43:28 +08:00