search

michael / editable-website

A SvelteKit template for building CMS-free editable websites
https://editable.website
MIT License
1.34k stars 103 forks source link

Improve EditorToolBar UX for iOS #9

Open nilskj opened 1 year ago

nilskj commented 1 year ago

Don't hide toolbar when de-activating soft keyboard, move it around based on logic in frontend. This solution can be read about here: sticky-header-ios-keyboard-fix.

I have still found a few edge cases from my phone so it is not perfect 100% of times but might at least be a good start towards fixing this. Mainly my concern is that it kind of flickers when you hit save, I guess it jumps with scroll restoration.

Mitigates the problem mentioned in issue: #1

michael commented 1 year ago

Aww this is such a difficult thing to get right. I have failed with many attempts myself. I tested your version on iPhone and while in some cases the toolbar re-appears in the correct location, in other cases it disappears or gets moved to the middle or bottom of the screen. It's great to have a starting point, but we're not quite there yet. Happy to review new takes on this if you have ideas. Would really be keen to have this solved at some point. Ideally it would stick there with a stable position without the need for any transitions.

nilskj commented 1 year ago

Yea it is a heck of an issue and a lot harder then it seemed at first. What makes it hard for iOS is that there is no event triggered with the soft keyboard transition? If one could find and handle that event this problem would be trivial. I will do some more research, this was the first solution that came to mind :)

michael commented 1 year ago

We are in the middle of the war native apps vs progressive web apps. :) There's no reason why the mobile browser should shift the fixed elements out of the viewport by default. And if there are valid arguments for doing that (can't see them), we should have a way to control this behavior. Hopefully this changes some time soon, so progressive web apps are straight-forward to do.

Anyways... I was just using Notes on the iPhone and maybe this pattern might also be interesting for us: No formatting tools by default until you enter a "Formatting mode" where instead of the keyboard there are formatting controls.

image

Needs a different implementation for mobile, but maybe this gives us more control for a smooth experience.

@nilskj would be up for meeting in person to discuss ideas and their feasibility? :)

nilskj commented 1 year ago

Oh that is interesting, another thing I found is that you can long press on the text itself and access a little menu with formatting options. I can only see Bold, Underline and Italic options there though. Let's discuss this further on :)