Ckeditor5: [Android][iOS][Cordova]Virtual keyboard doesn't work as an input

[stevesum]

🐞 Is this a bug report or feature request? (choose one)

• Bug report

💻 Version of CKEditor

CKEditor 5 classic editor build 1.0.0-alpha.2

📋 Steps to reproduce

1. Create an editor
2. tap into the editor area
3. when the virtual keyboard appears, type on the virtual keyboard

✅ Expected result

typed text should appear in the editor area

❎ Actual result

the editor area stays empty and the value of the editor also null

📃 Other details that might be useful

The application runs in a native WebView (built by cordova)
after I fixed the addListener problem by #683

[Reinmar]

The package responsible for handling typing is https://github.com/ckeditor/ckeditor5-typing.

It handles typing by using MutationObserver and applying various heuristics to recognise what was typed, where and what should be the selection. This is by far the most complex feature ;/

The reason why it works in such a non-straightforward way is that browsers don't expose any other API to handle typing. There's only the beforeInput event, but it's not fully speced yet and available in Chrome and Safari only.

So, how to debug this?

The first thing to do will be to check whether both of these listeners work: https://github.com/ckeditor/ckeditor5-typing/blob/645b92bda7cbc1471f8423149aed4cd4252c1357/src/input.js#L45-L51. When someone presses a letter, both should be executed. And there should be reasonable mutations.

The known issue with Android browsers is that the keydown is fired without keyCode. That's due to the fact that keyboards in Android are implemented as IME widgets. They simply do not let the browser know what key has been pressed (because there might not be any) but instead tell the browser to insert/delete some character. This means that our mutation-based typing handler can handle typing but at the same time we have problems with handling Backspace and Enter. @szymonkups is working on these cases right now. We'll either use beforeInput or more heuristics for mutations.

[Reinmar]

PS. My biggest worry here is that there's no mutation observer available in Cordova yet. I don't know how old Chromium they use there, but it'd mean that veery old.

I know that someone was using mutation observer's polyfill with Android, so that could be one thing to check. But in general, things get seriously hard when someone uses so outdated platforms.

[stevesum]

I'll test it.
The problem is happened to me on iOS also, so I don't think the 'outdated platforms' could be blamed for it. The minimal requirements of the cordova-ios framework what we use is the iOS9.

[Reinmar]

Do you remember how to reproduce that issue on iOS?

Generally speaking, we didn't spend much time on testing and debugging mobile devices yet because we first want to polish the editor for desktop environments as this is still the most common use case for rich text editing. So all kind of feedback on what's the status of things on iOS or Android will be very helpful for us.

[stevesum]

Hi. I tested again with both Android and iOS, and as I see on the android the problem is already solved.

But on iOS still can't type into the CKEditor with the virtual keyboard.
I tried to debug the problem, and as I see the 'keydown' event is cached and delegated into the _handleKeydown function in the Input class, but I can't follow the code from there.

[f1ames]

@stevesum is there any particular iOS/Safari version you test with?

[stevesum]

@f1ames iOS 11.44.1/WKWebview

[Reinmar]

@f1ames, @Mgsy are we able to test CKE5 in that webview quickly? I don't mean that particular version, but the webview itself.

[f1ames]

@Reinmar I have used a special app for this (AFAIR this one - should be present on our testing devices) so yes on Android. TBH, haven't check if there is something similar for iOS. Will take a look in a spare moment.

[Mgsy]

I've investigated this issue a bit and it seems that this bug is related to Cordova.

At first, I checked whether CKEditor 5 works in a native iOS WebView (WKWebview and UIWebView) and I was able to use the editor without any problems. So, I decided to create a project in Cordova and see how the editor will behave.

My project was using cordova ios 4.5.5 (the latest version) and cordova wkwebview engine plugin, which makes Cordova use WKWebView component. After building and running the app, CKEditor loaded properly, but I wasn't able to type inside of it via the virtual keyboard.

The device I use is iPad with iOS 11.4.

[wwalc]

In case anyone was interested, PhoneGap / Apache Cordova popularity:

(source: https://www.appbrain.com/stats/libraries/details/phonegap/phonegap-apache-cordova)

[allanpoppe]

So... no news on this?

I'm using ckeditor5 inside an Ionic app. On Android it works very well. On iOS I have this issue: can't type anything.

"cordova-ios": "4.5.5",
"cordova-plugin-ionic-webview": "2.3.2",
"@ckeditor/ckeditor5-angular": "1.0.1",
"@ckeditor/ckeditor5-build-classic": "11.2.0",

[Reinmar]

No, we haven't worked on this. It seems to be caused by some bug in Cordova. If you could help to debug it (see https://github.com/ckeditor/ckeditor5/issues/701#issuecomment-348931166 for some hints) we'd be grateful.

[allanpoppe]

I think the CSS below will solve the issue, but I don't have time to test it now. I've switched to another plugin, on which I had the same issue.

Ionic disables user select by default.
Maybe the CSS tag needs to be changed, I don't know. This is for the other plugin.

[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

[Reinmar]

Thanks for the tip! It makes a lot of sense. @Mgsy could you test it?

[Mgsy]

Thanks for the tip! It makes a lot of sense. @Mgsy could you test it?

At first, I've checked whether the problem is solved on the latest iOS (12.1.1) and after building the project in Cordova and running it on the iPad I was able to type inside the editor using the virtual keyboard.

@allanpoppe, could you tell us which version of iOS you use?

[allanpoppe]

Latest, tested in emulator. And in real devices also.

[Reinmar]

Could you perhaps share some code/project that we could build locally to test it?

[Mgsy]

I've managed to reproduce the issue. Generally, there are two conclusions:

• The virtual keyboard works fine when you build an app using Cordova and deploy with Xcode
• The issue is reproducible when you use the Ionic framework. After focusing the editor, the selection doesn't appear in the editable and there's no way to type anything.

Ionic disables user select by default. Maybe the CSS tag needs to be changed, I don't know. This is for the other plugin.

I've tested your solution and you're right. After changing the user-select property on the CKEditor component, you would be able to type inside the editor.

So, adding this to the component will solve the issue:

{
    -webkit-user-select: text;
    user-select: text;
}

[Reinmar]

That's a great news :) I think we should add a section about this in https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/overview.html. Could you do that, @Mgsy?

[allanpoppe]

Cool, glad to help.