New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the editor for iOS #23

Open
claviska opened this Issue Apr 27, 2017 · 8 comments

Comments

Projects
None yet
2 participants
@claviska
Member

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 modified the milestone: 1.0.0-alpha.3 Apr 27, 2017

@claviska

This comment has been minimized.

Member

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

This comment has been minimized.

ReinerKnudsen commented May 18, 2017

@claviska

This comment has been minimized.

Member

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

This comment has been minimized.

Member

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

This comment has been minimized.

Member

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

This comment has been minimized.

Member

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

This comment has been minimized.

Member

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

This comment has been minimized.

Member

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 added Bug and removed Help Wanted Enhancement labels Jun 5, 2017

@claviska claviska removed this from the 1.0.0-beta.1 milestone Jun 5, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment