X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/c6ad16dba657c82512ae495a4a38b99b8cfa9eeb..refs/pull/3499/head:/resources/js/code.mjs

diff --git a/resources/js/code.mjs b/resources/js/code.mjs
index 3a7706573..0b8190379 100644
--- a/resources/js/code.mjs
+++ b/resources/js/code.mjs
@@ -25,6 +25,7 @@ import 'codemirror/mode/ruby/ruby';
 import 'codemirror/mode/rust/rust';
 import 'codemirror/mode/shell/shell';
 import 'codemirror/mode/sql/sql';
+import 'codemirror/mode/stex/stex';
 import 'codemirror/mode/toml/toml';
 import 'codemirror/mode/vb/vb';
 import 'codemirror/mode/vbscript/vbscript';
@@ -59,6 +60,7 @@ const modeMap = {
     js: 'javascript',
     jl: 'julia',
     julia: 'julia',
+    latex: 'text/x-stex',
     lua: 'lua',
     md: 'markdown',
     mdown: 'markdown',
@@ -83,6 +85,7 @@ const modeMap = {
     rs: 'rust',
     shell: 'shell',
     sh: 'shell',
+    stext: 'text/x-stex',
     bash: 'shell',
     toml: 'toml',
     sql: 'text/x-sql',
@@ -204,56 +207,22 @@ function getTheme() {
 /**
  * Create a CodeMirror instance for showing inside the WYSIWYG editor.
  *  Manages a textarea element to hold code content.
- * @param {HTMLElement} elem
+ * @param {HTMLElement} cmContainer
+ * @param {String} content
+ * @param {String} language
  * @returns {{wrap: Element, editor: *}}
  */
-export function wysiwygView(elem) {
-    const doc = elem.ownerDocument;
-    const codeElem = elem.querySelector('code');
-
-    let lang = getLanguageFromCssClasses(elem.className || '');
-    if (!lang && codeElem) {
-        lang = getLanguageFromCssClasses(codeElem.className || '');
-    }
-
-    elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
-    const content = elem.textContent;
-    const newWrap = doc.createElement('div');
-    const newTextArea = doc.createElement('textarea');
-
-    newWrap.className = 'CodeMirrorContainer';
-    newWrap.setAttribute('data-lang', lang);
-    newWrap.setAttribute('dir', 'ltr');
-    newTextArea.style.display = 'none';
-    elem.parentNode.replaceChild(newWrap, elem);
-
-    newWrap.appendChild(newTextArea);
-    newWrap.contentEditable = 'false';
-    newTextArea.textContent = content;
-
-    let cm = CodeMirror(function(elt) {
-        newWrap.appendChild(elt);
-    }, {
+export function wysiwygView(cmContainer, content, language) {
+    return CodeMirror(cmContainer, {
         value: content,
-        mode:  getMode(lang, content),
+        mode: getMode(language, content),
         lineNumbers: true,
         lineWrapping: false,
         theme: getTheme(),
         readOnly: true
     });
-
-    return {wrap: newWrap, editor: cm};
 }
 
-/**
- * Get the code language from the given css classes.
- * @param {String} classes
- * @return {String}
- */
-function getLanguageFromCssClasses(classes) {
-    const langClasses = classes.split(' ').filter(cssClass => cssClass.startsWith('language-'));
-    return (langClasses[0] || '').replace('language-', '');
-}
 
 /**
  * Create a CodeMirror instance to show in the WYSIWYG pop-up editor
@@ -276,6 +245,21 @@ export function popupEditor(elem, modeSuggestion) {
     });
 }
 
+/**
+ * Create an inline editor to replace the given textarea.
+ * @param {HTMLTextAreaElement} textArea
+ * @param {String} mode
+ * @returns {CodeMirror3}
+ */
+export function inlineEditor(textArea, mode) {
+    return CodeMirror.fromTextArea(textArea, {
+        mode: getMode(mode, textArea.value),
+        lineNumbers: true,
+        lineWrapping: false,
+        theme: getTheme(),
+    });
+}
+
 /**
  * Set the mode of a codemirror instance.
  * @param cmInstance