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

diff --git a/resources/js/code.mjs b/resources/js/code.mjs
index 3a7706573..5881e2512 100644
--- a/resources/js/code.mjs
+++ b/resources/js/code.mjs
@@ -15,6 +15,7 @@ import 'codemirror/mode/lua/lua';
 import 'codemirror/mode/markdown/markdown';
 import 'codemirror/mode/mllike/mllike';
 import 'codemirror/mode/nginx/nginx';
+import 'codemirror/mode/octave/octave';
 import 'codemirror/mode/perl/perl';
 import 'codemirror/mode/pascal/pascal';
 import 'codemirror/mode/php/php';
@@ -25,6 +26,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';
@@ -38,6 +40,7 @@ import 'codemirror/addon/scroll/scrollpastend';
 // Value can be a mode string or a function that will receive the code content & return the mode string.
 // The function option is used in the event the exact mode could be dynamic depending on the code.
 const modeMap = {
+    bash: 'shell',
     css: 'css',
     c: 'text/x-csrc',
     java: 'text/x-java',
@@ -49,27 +52,32 @@ const modeMap = {
     diff: 'diff',
     for: 'fortran',
     fortran: 'fortran',
+    'f#': 'text/x-fsharp',
+    fsharp: 'text/x-fsharp',
     go: 'go',
     haskell: 'haskell',
     hs: 'haskell',
     html: 'htmlmixed',
     ini: 'properties',
-    javascript: 'javascript',
-    json: {name: 'javascript', json: true},
-    js: 'javascript',
-    jl: 'julia',
-    julia: 'julia',
+    javascript: 'text/javascript',
+    json: 'application/json',
+    js: 'text/javascript',
+    jl: 'text/x-julia',
+    julia: 'text/x-julia',
+    latex: 'text/x-stex',
     lua: 'lua',
+    matlab: 'text/x-octave',
     md: 'markdown',
     mdown: 'markdown',
     markdown: 'markdown',
     ml: 'mllike',
     nginx: 'nginx',
+    octave: 'text/x-octave',
     perl: 'perl',
     pl: 'perl',
     powershell: 'powershell',
     properties: 'properties',
-    ocaml: 'mllike',
+    ocaml: 'text/x-ocaml',
     pascal: 'text/x-pascal',
     pas: 'text/x-pascal',
     php: (content) => {
@@ -83,8 +91,10 @@ const modeMap = {
     rs: 'rust',
     shell: 'shell',
     sh: 'shell',
-    bash: 'shell',
+    stext: 'text/x-stex',
     toml: 'toml',
+    ts: 'text/typescript',
+    typescript: 'text/typescript',
     sql: 'text/x-sql',
     vbs: 'vbscript',
     vbscript: 'vbscript',
@@ -204,56 +214,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 +252,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