❓Editor.js inside web component

[lukaszkaleta]

Question

How do I embed editor js inside web component ?

Context

Our application is developed around web component (Lit) and we would like to give a try to editorjs. But when we use it something wierd happens with styles.

` import {css, html, LitElement} from 'lit' import EditorJS from '@editorjs/editorjs';

export class TestingEditor extends LitElement {

firstUpdated(_changedProperties) {
    const editor = new EditorJS(this.renderRoot.querySelector('#editorjs'));
}

render() {
    return html`<div id="editorjs"></div>`
}

}

customElements.define('testing-editor', TestingEditor)

`

Any tips appreciated.

[blahah]

does disabling shadowRoot for the LitElement fix it? If so you need to attach the editorjs styles to the shadowRoot

[MadeByMike]

@blahah I'm not saying this is the best code ever written but here:

 editor.isReady.then(() => {
   const styles = document.querySelector("#editor-js-styles").cloneNode(true);
   this.shadowRoot.appendChild(styles)
 })

It would probably be nice to have an option to render the styles directly within the holder container.

[MadeByMike]

FYI I found many other issues with this working inside a shadow DOM. Had to revert to no shadow DOM.