X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/e711290d8b1ce06b38e0560248806e8de2077870..refs/pull/4317/head:/resources/js/wysiwyg/plugin-codeeditor.js diff --git a/resources/js/wysiwyg/plugin-codeeditor.js b/resources/js/wysiwyg/plugin-codeeditor.js index 7446e6870..2fe2ac26a 100644 --- a/resources/js/wysiwyg/plugin-codeeditor.js +++ b/resources/js/wysiwyg/plugin-codeeditor.js @@ -9,9 +9,16 @@ function elemIsCodeBlock(elem) { * @param {function(string, string)} callback (Receives (code: string,language: string) */ function showPopup(editor, code, language, callback) { - window.$components.first('code-editor').open(code, language, (newCode, newLang) => { + /** @var {CodeEditor} codeEditor * */ + const codeEditor = window.$components.first('code-editor'); + const bookMark = editor.selection.getBookmark(); + codeEditor.open(code, language, (newCode, newLang) => { callback(newCode, newLang); editor.focus(); + editor.selection.moveToBookmark(bookMark); + }, () => { + editor.focus(); + editor.selection.moveToBookmark(bookMark); }); } @@ -46,8 +53,8 @@ function defineCodeBlockCustomElement(editor) { super(); this.attachShadow({mode: 'open'}); - const stylesToCopy = document.querySelectorAll('link[rel="stylesheet"]:not([media="print"])'); - const copiedStyles = Array.from(stylesToCopy).map(styleEl => styleEl.cloneNode(false)); + const stylesToCopy = document.head.querySelectorAll('link[rel="stylesheet"]:not([media="print"]),style'); + const copiedStyles = Array.from(stylesToCopy).map(styleEl => styleEl.cloneNode(true)); const cmContainer = document.createElement('div'); cmContainer.style.pointerEvents = 'none'; @@ -116,7 +123,9 @@ function defineCodeBlockCustomElement(editor) { const container = this.shadowRoot.querySelector('.CodeMirrorContainer'); const renderEditor = Code => { this.editor = Code.wysiwygView(container, this.shadowRoot, content, this.getLanguage()); - setTimeout(() => this.style.height = null, 12); + setTimeout(() => { + this.style.height = null; + }, 12); }; window.importVersioned('code').then(Code => { @@ -143,9 +152,8 @@ function defineCodeBlockCustomElement(editor) { /** * @param {Editor} editor - * @param {String} url */ -function register(editor, url) { +function register(editor) { editor.ui.registry.addIcon('codeblock', ''); editor.ui.registry.addButton('codeeditor', { @@ -183,7 +191,7 @@ function register(editor, url) { } }); - editor.on('dblclick', event => { + editor.on('dblclick', () => { const selectedNode = editor.selection.getNode(); if (elemIsCodeBlock(selectedNode)) { showPopupForCodeBlock(editor, selectedNode); @@ -193,7 +201,7 @@ function register(editor, url) { editor.on('PreInit', () => { editor.parser.addNodeFilter('pre', elms => { for (const el of elms) { - const wrapper = tinymce.html.Node.create('code-block', { + const wrapper = window.tinymce.html.Node.create('code-block', { contenteditable: 'false', }); @@ -234,9 +242,8 @@ function register(editor, url) { } /** - * @param {WysiwygConfigOptions} options * @return {register} */ -export function getPlugin(options) { +export function getPlugin() { return register; }