Skip to content
This repository has been archived by the owner. It is now read-only.

Improve the editor for iOS #23

Open
4 of 7 tasks
claviska opened this issue Apr 27, 2017 · 8 comments
Open
4 of 7 tasks

Improve the editor for iOS #23

claviska opened this issue Apr 27, 2017 · 8 comments
Assignees

Comments

@claviska
Copy link
Member

@claviska claviska commented Apr 27, 2017

Fixed

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

Needs Third Party Fix

@claviska claviska self-assigned this Apr 27, 2017
@claviska claviska added this to the 1.0.0-alpha.3 milestone Apr 27, 2017
@claviska claviska removed this from the 1.0.0-alpha.3 milestone Apr 28, 2017
@claviska claviska added this to the 1.0.0-alpha.3 milestone Apr 30, 2017
@claviska
Copy link
Member Author

@claviska claviska commented May 18, 2017

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
Copy link

@ReinerKnudsen ReinerKnudsen commented May 18, 2017

@claviska
Copy link
Member Author

@claviska claviska commented May 18, 2017

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 claviska removed this from the 1.0.0-alpha.5 milestone May 22, 2017
@claviska
Copy link
Member Author

@claviska claviska commented May 30, 2017

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 claviska added this to the 1.0.0-beta.1 milestone May 31, 2017
@claviska
Copy link
Member Author

@claviska claviska commented Jun 2, 2017

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
Copy link
Member Author

@claviska claviska commented Jun 4, 2017

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 added a commit that referenced this issue Jun 5, 2017
claviska added a commit that referenced this issue Jun 5, 2017
claviska added a commit that referenced this issue Jun 5, 2017
@claviska
Copy link
Member Author

@claviska claviska commented Jun 5, 2017

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
Copy link
Member Author

@claviska claviska commented Jun 5, 2017

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! 💪

@claviska claviska removed this from the 1.0.0-beta.1 milestone Jun 5, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants