Lit-element: LitElement + Ckeditor5

[aadamsx]

I can only get the new Ckeditor5 classic to render properly OUTSIDE a lit-html render. The editor inside the render does not get rendered properly.

I tried fooling around with firstUpdated and updated, but nothing worked.

https://stackblitz.com/edit/lit-element-ckeditor5

[blikblum]

Try this.querySelector( '#editor' ) instead of document.querySelector( '#editor' )

[aadamsx]

Try this.querySelector( '#editor' ) instead of document.querySelector( '#editor' )

Doesn't work. Thanks anyhow :)

[web-padawan]

Appears to be submitted as ckeditor/ckeditor5-engine#692

[aadamsx]

Looks like shadydom needs changes as well? https://github.com/webcomponents/shadydom/issues/113

[web-padawan]

@aadamsx yep, this should be polyfilled at some point, but first we should see the consensus across implementors (at least Google, Apple and Mozilla). In the meanwhile, I recommend closing this issue in favour of the shadydom one, it would make more sense to continue discussion there.

[aadamsx]

@web-padawan I'd like to track it here too if you don't mind? Won't LitElement need to make changes too?

[web-padawan]

@aadamsx no it would not need any changes. Basically there are 2 things needed:

1. Polyfill getSelection on ShadowRoot, which has to be done in shadydom
2. Update CKEditor to use getRootNode().getSelection() in case if root node is not a document

[aadamsx]

@web-padawan two different libs, polyfills, so it sounds like this issue is going to be around a LONG time...

[blikblum]

I used renderRoot this.renderRoot.querySelector( '#editor' ) in firstUpdated and the editor was rendered but seems that there's another issue probably the cited above

[aadamsx]

Could you fork the example and add in your code so we can see what you’re taking about @blikblum?

[justinfagnani]

@aadamsx I couldn't load your StackBlitz link

[aadamsx]

I just updated the link: https://stackblitz.com/edit/lit-element-ckeditor5

[blikblum]

https://stackblitz.com/edit/lit-element-ckeditor5-3vcntj?file=index.js

document.querySelector does not cross shadowDom boundaries so you need to query from shadowRoot

[aadamsx]

@blikblum yeah, the render is not correct. I hope this issue gets resolved quickly, as I will not be able to fully use LitElement without a proper editor.

[blikblum]

@aadamsx you can disable shadow dom with createRenderRoot. I updated the example in stackblitz

[thepassle]

@aadamsx https://polymer.slack.com/archives/CATC4MEUS/p1538772989000100

Overwriting createRenderRoot() will cause the template to be rendered to lightdom (had to check myself to make sure though).

[aadamsx]

Using the Light Dom worked. But in order to use the ckeditor inside another template, like wouild be the case in more normal situations, it seems even the "parent" LitElement class needs createRenderRoot() (rendered to Light-Dom).

https://stackblitz.com/edit/lit-element-ckeditor5-create-render-root

I think this means anything in the "chain" of components that uses the ckeditor will need to be a Light Dom component?

[web-padawan]

See my comment here: https://github.com/Polymer/lit-element/issues/245#issuecomment-427601365

The problem is, whenever you pick some JS library, open the "issues" and search for "Shadow DOM" there. It mostly applies to WYSIWYG editors because of getSelection API, but there are also other DOM API, e.g. activeElement which also should be obtained from shadow root, when it is used.