X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/cd929b2555b0cc246d55df7380902a9eb2f9d2df..refs/pull/3770/head:/resources/js/wysiwyg/plugin-codeeditor.js diff --git a/resources/js/wysiwyg/plugin-codeeditor.js b/resources/js/wysiwyg/plugin-codeeditor.js index db4490215..5377f564e 100644 --- a/resources/js/wysiwyg/plugin-codeeditor.js +++ b/resources/js/wysiwyg/plugin-codeeditor.js @@ -39,16 +39,16 @@ function defineCodeBlockCustomElement(editor) { 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() { @@ -111,10 +111,8 @@ function defineCodeBlockCustomElement(editor) { 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) => { @@ -165,7 +163,6 @@ function register(editor, url) { 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);