Improve the editor for iOS

[claviska]

Fixed

• [x] Page scrolls to the top when hitting enter or using formatting shortcuts, e.g. CMD+B.
• [x] Selection disappears when interacting with the toolbar
  • This appears to be a standard iOS behavior and is replicable in TinyMCE and CKEditor as well
• [x] Toolbar sometimes goes offscreen when the virtual keyboard appears
• [x] Links outside of content regions aren't getting intercepted as expected

Needs Third Party Fix

• [ ] Viewport units appear to have the wrong size, particularly Empower's cover photos
  • Bug reported: https://bugs.webkit.org/show_bug.cgi?id=172926
• [ ] Can't deselect images or embeds by tapping outside of them (and can't type or move the cursor when one is selected)
  • Bug reported: https://github.com/tinymce/tinymce/issues/3715
• [ ] Page scrolls to the bottom when hitting an arrow key
  • Bug reported: https://github.com/tinymce/tinymce/issues/3242

[claviska]

I just launched a small funding blitz so I can finally nail down proper iOS support.

Please contribute if you can: paypal.me/abeautifulsite

[ReinerKnudsen]

done.

Now I need to get my postleaf running again. It is down with a 502 Bad gateway after the latest update.

[claviska]

Thanks! 🙌

Feel free to jump on the dev chat and I'll try to troubleshoot with you. My guess is the .env file though. Compare it to the latest version since certain settings were moved there.

[claviska]

We're all funded and an iPad has been procured! A very special thanks to everyone that helped make this possible. 🙌

Now, I have some good news to share:

My wife and I are expecting a baby any day now. This is obviously very awesome, but it's also a stressful time and will require a lot of attention from both of us.

That said, it's going to take a little extra time to tackle this. I'm still going to be active here, on the forum, and on the chat, but I won't have as much time for development as I normally do.

This doesn't mean I've forgotten about iOS support or other open issues. 😄

In the meantime, I've finished up the docs (except for the API stuff). You can do everything from installing and updating to building a complete theme.

As usual, I'll be around online to answer any questions or help you out if you get stuck.

Thanks again, and thanks for your patience as our family gets a little bigger. 👨‍👩‍👧‍👦

[claviska]

I experimented with this quite a bit today. It appears that TinyMCE, CKEditor, and contentEditable in general perform better (and behave more correctly) when they're NOT rendered inside an iframe in mobile Safari.

I think the next step is to ditch the iframe and see how the editor performs without it. I've tested demos of TinyMCE, CKEditor, and raw contentEditable regions and haven't noticed most of the aforementioned issues. 🤔

[claviska]

Tonight I confirmed that ditching the iframe does indeed make the editor behave correctly in iOS. I suspect other mobile platforms may have similar issues with performance and scrolling, but can't verify that myself.

To proceed, the new challenge is to include admin-specific styles for panels, the file manager, etc. in such way that they don't clash with the themes styles. At least we know that good support for iOS is possible, at least it seems.

[claviska]

Progress! I was able to knock out some of the most annoying issues tonight. 💪

Looks like I'll be able to stick with the iframe approach after all. IMO, it's the cleanest way to render the page in the editor since it doesn't require embedding tons of admin HTML/CSS/JS into the actual post.

There are a few more items left on the list (and bound to be more that come up), but I'm finally feeling really confident about making Postleaf work really well on iOS. 😊

[claviska]

Alright folks. I've narrowed down the remaining issues to reproducible bugs in TinyMCE and Webkit. I've filed two new bug reports and supported another existing bug report by producing a test case for it.

Postleaf's editor is very much usable now in iOS, even on iPhones. Of course, screen real estate on a phone is rather limiting, but it works well for minor changes. I suspect most people on iPhones will be using Quick Post anyway, or only making basic edits such as correcting typos.

What these bugs will fix:

• When adding/removing content, viewport units recalculate causing the page to shift.
• Cover photos using viewport units, such as the one used by Postleaf's default theme, often render way too large because of the way mobile Safari calculates them. You can use Zen Mode to work around this.
• Pressing the arrow keys can cause the page to scroll down unexpectedly.
• It's currently difficult to deselect an image or embed.

Unfortunately, all the remaining issues aren't something I can work around, so I'm going to diligently keep track of these bug reports and encourage the TinyMCE and Webkit developers to get them fixed! 💪