[Android][Cordova]Create an Editor failed on Android WebView

[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 a classic editor

✅ Expected result

The editor should replace the textarea

❎ Actual result

Exeption is thrown:

ckeditor.js:5 Uncaught (in promise) TypeError: e.on is not a function
    at fh.listenTo (ckeditor.js:5)
    at fh.listenTo (ckeditor.js:5)
    at Fi (ckeditor.js:5)
    at Ah._createForm (ckeditor.js:5)
    at Ah.init (ckeditor.js:5)
    at <anonymous>

📃 Other details that might be useful

The application runs in a native WebView (built by cordova)
navigator.userAgent
"Mozilla/5.0 (Linux; Android 7.0; BTV-W09 Build/HUAWEIBEETHOVEN-W09; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/62.0.3202.84 Mobile Safari/537.36"
The device is an Android 7.1.1

[Reinmar]

@Mgsy, am I right that you tested CKE5 in WebView? What was the result?

[Mgsy]

@Mgsy, am I right that you tested CKE5 in WebView? What was the result?

Yes, I was testing CKE5 in WebView and the editor has initialized and worked properly. I've just checked it again( WebView on Android 7.0) and everything was fine.

I think this part:

built by cordova

is important in this issue. Probably error is caused by way how Cordova builds whole application.

[stevesum]

The cordova build doesn't modify the ckeditor.js itself. It just included in the index.html.
And because the exception is thrown in the ckeditor.js I don't think it has any connection to the cordova build.
Unfortunatelly I can't/hard debug further with the minified version of ckeditor.js.
When the exception is thrown, then the 'e' is the HTMLDocument what hasn't 'on' method.
e.on is undefined therefore can't register the 'mousedown' event with that.

[stevesum]

Is possible to get/build a non minified version from the ckeditor.js. With that I would be able to debug where that HTMLDocument element came from.

[stevesum]

On iOS webview I also get an error with ckeditor.js
Line5 Unexpected keyword 'const'. Const declarations are not supported in strict mode.

[Mgsy]

@stevesum, thanks for details. I've created a simple project with Cordova and I was able to reproduce this error. However, as I said before, I've tested CKEditor 5 in WebView (Android 7.0) and it has worked properly, so it seems that this one is related strict to Cordova.

[stevesum]

Ok. Tell me if I able to help more. This editor is very important us to include in the next version of our application, and I should know if I have to downgrade the ckeditor to version 4 or the version 5 will get a bugfix soon.
If neccessary (and I can get a non minified version) I can help to found the bug and fix it.

[Reinmar]

On iOS webview I also get an error with ckeditor.js
Line5 Unexpected keyword 'const'. Const declarations are not supported in strict mode.

This is due to lack of support for ES6 in iOS's webview ;/. You'd need to transpile CKEditor to ES5. It's covered in this guide: https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/advanced-setup.html#Option-Building-to-ES5-target.

[Reinmar]

If neccessary (and I can get a non minified version) I can help to found the bug and fix it.

You need to change webpack's configuration and rebuild the editor. You can find more details about how to rebuild the editor here: https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/advanced-setup.html.

You will need to disable (just remove them) these 3 lines to get a non-minified version:

https://github.com/ckeditor/ckeditor5-build-classic/blob/fca5ff7599615f92813516c51f0ddc85c70f0744/webpack.config.js#L34-L36

[stevesum]

With the ES5 build on iOS webView I get same result as on Android.
TypeError: e.on is not a function. (In 'e.on(t,o,a)', 'e.on' is undefined)
I'll try debug with the non minified version

[stevesum]

The reason as I see is in the Sencha ExtJS 5.2 (or because the cordova), the 'addEventListener' function of the Document node is:

function (evt, handler, capture) {

    var e = evt.toLowerCase();

    if (typeof documentEventHandlers[e] != 'undefined') {

        documentEventHandlers[e].subscribe(handler);

    } else {

        m_document_addEventListener.call(document, evt, handler, capture);

    }

}

what is not match with your regexp pattern in the isNative function

/^function.*?\(\) \{\n \[native code\]\n\}$/

therefore the listenTo function in the DomEmitterMixin won't replace it with a ProxyEmitter, so the element won't get the 'on' method, when the clickOutsideHandler is called.

Have you any idea how could I fix this?

[Reinmar]

It's a bug in Sench/Cordova. We use isNative() from lodash.js, so nothing special here. We had a similar issue with zone.js but it was fixed by its developers.

We may stop using isNative(), but TBH, we'd rather check first if it's fixed in the new version of Sencha/Cordova and whether they are aware of these problems.

[stevesum]

Then the conclusion is to use CKEditor 4 for now?

[Reinmar]

It depends on:

• whether it works fine in a new Sencha/Cordova and you can upgrade to them,
• or whether we could switch to some isNative()'s alternative if there's no hope that this is going to be fixed by Sencha/Cordova. We use it in one place some maybe we can figure something else out. WDYT, @oleq?

[oleq]

The reason as I see is in the Sencha ExtJS 5.2 (or because the cordova), the 'addEventListener' function of the Document node is:

So the problem is that a framework overwrites a native function? If so, there's very little we can do about it. The good news is that the problem could be resolved by applying one of the solutions here https://github.com/ckeditor/ckeditor5-utils/issues/201#issuecomment-344218812.

[Reinmar]

So the problem is that a framework overwrites a native function?

Yes. I think that something like this. And zone.js was fixed by Angular devs by customizing the toString() method of that function so it returns native-like results. So it certainly can be fixed on Sencha's side.

I'm not sure whether https://github.com/ckeditor/ckeditor5-utils/issues/201#issuecomment-344218812 is the right solution – we'll need to write some proper heuristic because the problem is that we can't use instanceof and now we can't use isNative() too so it's hard to think about something smarter... ;/ Every heuristic may break – even checking a couple of native Node's properties like nodeType, offsetTop, etc. It may happen that some non-native object will have them defined too or that one of them will not be defined in some specific case on a native DOM object ;|

[stevesum]

Yes. Probably the cordova what override that native addEventListener function to send messages from the native code to the webview. (And I don't think they too flexible with change request. I opened an issue there almost 1 month ago, and still not a response.)
So would be better if you could figure out a better identify method. For now, I'll hack the regexp macher to be able to identify this modified function as a native, what hopefully will solve my problem.

Just an another question: Now I generate a non minified code (disabled the BabiliPlugin in webpack.config) but it still generate the .map file and require to load it. Is any way in the config to switch off the generation of the map file also?

[oleq]

we can't use instanceof and now we can't use isNative() too so it's hard to think about something smarter

I disagree. We can use instanceof Node but we must do

node instanceof node.ownerDocument.defaultView.Node

instead. Of course checking if oD exist along with dV. That should do the trick for iframes.

[oleq]

@stevesum I hope this PR will help ckeditor/ckeditor5-utils#208.

[Reinmar]

Just an another question: Now I generate a non minified code (disabled the BabiliPlugin in webpack.config) but it still generate the .map file and require to load it. Is any way in the config to switch off the generation of the map file also?

This file is only loaded if you have the console open. So it doesn't slow down your app for your users.

But if you want to disable source maps anyway, then it would be this line: https://github.com/ckeditor/ckeditor5-build-classic/blob/fca5ff7599615f92813516c51f0ddc85c70f0744/webpack.config.js#L18.

[stevesum]

@oleq your solution works perfectly on cordova

@Reinmar now the editor is appeared, but I can't write anything into on iOS devices with virtual keyboard.
I checked the DOM and i see this structure:

<div class="ck-blurred ck-editor__editable ck-rounded-corners ck-editor__editable_inline" contenteditable="true" role="textbox" aria-label="Rich Text Editor, main">

<p><br data-cke-filler="true"></p>

<p><br data-cke-filler="true"></p>

</div>

If I tap into the editor part, then I get the virtual keyboard, but my typing doesn't write into the area and not stored either in the value.

[vladikoff]

Also hitting the same problem as @stevesum in Cordova for Android, I will try the fix from #683 (comment) once I have more time.

[vladikoff]

and just to confirm custom addEventListener is probably to blame:

Cordova (Left) | simple webpage in Chrome (Right)

[stevesum]

@filippov The fix from #683 comment will solve the editor creation problem, but I still not able to use the CKEditor 5 in cordova apps, because it can't handle well the virtual keyboard there. So the editor will rendered, and everything seems to work until you try to type something in to the editor. The virtual keyboard will appear automatically as you tap into the editor area, but your typing won't be added there (nor to the value of the editor) So temporarily I downgraded to the CKEditor 4. 2017-11-29 2:42 GMT+01:00 Vlad Filippov <[email protected]>:

…

and just to confirm custom addEventListener is probably to blame: Cordova (Left) | simple webpage in Chrome (Right) [image: image] <https://user-images.githubusercontent.com/128755/33353610-9be49bea-d47c-11e7-919c-119122a30309.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#683 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACQrUIdSRFVLHNGq139GMdkrT3O17RoGks5s7LaWgaJpZM4Qlxpw> .

[stevesum]

@Reinmar would you able to check the problem with the virtual keyboard? Or please give me any suggestion where to try debug why the virtual keyboard types not cached by the CKEditor 5 in cordova webView?

[Reinmar]

Could you create a separate ticket for it? To not merge too many issues into this one.

[stevesum]

Ok. #701

[Reinmar]

Do the issues mentioned in this ticket still occur?

[Reinmar]

Closing due to lack of activity.