X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/58cadce052f5cc3c9ce2bc12f88a93cac310699a..refs/pull/5096/head:/resources/js/wysiwyg/plugin-codeeditor.js

diff --git a/resources/js/wysiwyg/plugin-codeeditor.js b/resources/js/wysiwyg/plugin-codeeditor.js
index fa3804ea8..c01a7eca0 100644
--- a/resources/js/wysiwyg/plugin-codeeditor.js
+++ b/resources/js/wysiwyg/plugin-codeeditor.js
@@ -6,12 +6,20 @@ function elemIsCodeBlock(elem) {
  * @param {Editor} editor
  * @param {String} code
  * @param {String} language
+ * @param {String} direction
  * @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) => {
+function showPopup(editor, code, language, direction, callback) {
+    /** @var {CodeEditor} codeEditor * */
+    const codeEditor = window.$components.first('code-editor');
+    const bookMark = editor.selection.getBookmark();
+    codeEditor.open(code, language, direction, (newCode, newLang) => {
         callback(newCode, newLang);
         editor.focus();
+        editor.selection.moveToBookmark(bookMark);
+    }, () => {
+        editor.focus();
+        editor.selection.moveToBookmark(bookMark);
     });
 }
 
@@ -20,7 +28,8 @@ function showPopup(editor, code, language, callback) {
  * @param {CodeBlockElement} codeBlock
  */
 function showPopupForCodeBlock(editor, codeBlock) {
-    showPopup(editor, codeBlock.getContent(), codeBlock.getLanguage(), (newCode, newLang) => {
+    const direction = codeBlock.getAttribute('dir') || '';
+    showPopup(editor, codeBlock.getContent(), codeBlock.getLanguage(), direction, (newCode, newLang) => {
         codeBlock.setContent(newCode, newLang);
     });
 }
@@ -46,8 +55,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';
@@ -172,13 +181,17 @@ function register(editor) {
             showPopupForCodeBlock(editor, selectedNode);
         } else {
             const textContent = editor.selection.getContent({format: 'text'});
-            showPopup(editor, textContent, '', (newCode, newLang) => {
+            const direction = document.dir === 'rtl' ? 'ltr' : '';
+            showPopup(editor, textContent, '', direction, (newCode, newLang) => {
                 const pre = doc.createElement('pre');
                 const code = doc.createElement('code');
                 code.classList.add(`language-${newLang}`);
                 code.innerText = newCode;
-                pre.append(code);
+                if (direction) {
+                    pre.setAttribute('dir', direction);
+                }
 
+                pre.append(code);
                 editor.insertContent(pre.outerHTML);
             });
         }
@@ -198,6 +211,12 @@ function register(editor) {
                     contenteditable: 'false',
                 });
 
+                const childCodeBlock = el.children().filter(child => child.name === 'code')[0] || null;
+                const direction = el.attr('dir') || (childCodeBlock && childCodeBlock.attr('dir')) || '';
+                if (direction) {
+                    wrapper.attr('dir', direction);
+                }
+
                 const spans = el.getAll('span');
                 for (const span of spans) {
                     span.unwrap();
@@ -215,6 +234,13 @@ function register(editor) {
 
         editor.serializer.addNodeFilter('code-block', elms => {
             for (const el of elms) {
+                const direction = el.attr('dir');
+                if (direction && el.firstChild) {
+                    el.firstChild.attr('dir', direction);
+                } else if (el.firstChild) {
+                    el.firstChild.attr('dir', null);
+                }
+
                 el.unwrap();
             }
         });