constructor() {
super();
this.attachShadow({mode: 'open'});
- const linkElem = document.createElement('link');
- linkElem.setAttribute('rel', 'stylesheet');
- linkElem.setAttribute('href', window.baseUrl('/dist/styles.css'));
+
+ const stylesToCopy = document.querySelectorAll('link[rel="stylesheet"]:not([media="print"])');
+ const copiedStyles = Array.from(stylesToCopy).map(styleEl => styleEl.cloneNode(false));
const cmContainer = document.createElement('div');
cmContainer.style.pointerEvents = 'none';
cmContainer.contentEditable = 'false';
cmContainer.classList.add('CodeMirrorContainer');
- this.shadowRoot.append(linkElem, cmContainer);
+ this.shadowRoot.append(...copiedStyles, cmContainer);
}
getLanguage() {
const container = this.shadowRoot.querySelector('.CodeMirrorContainer');
const renderCodeMirror = (Code) => {
this.cm = Code.wysiwygView(container, content, this.getLanguage());
- Code.updateLayout(this.cm);
- setTimeout(() => {
- this.style.height = null;
- }, 1);
+ setTimeout(() => Code.updateLayout(this.cm), 10);
+ setTimeout(() => this.style.height = null, 12);
};
window.importVersioned('code').then((Code) => {
showPopup(editor, textContent, '', (newCode, newLang) => {
const pre = doc.createElement('pre');
const code = doc.createElement('code');
- console.log(newCode);
code.classList.add(`language-${newLang}`);
code.innerText = newCode;
pre.append(code);