Fixed code block language parsing issue

Language parsing of code blocks could falter on pasted code blocks due
to the lanuage being parsed with a space which would throw an error when
used as a css class.
This adds more extensive language parsing to be safer.

Fixes #3133

diff --git a/resources/js/services/code.js b/resources/js/services/code.js
index 361ccc3f18224108283ad7d67772817c46bb2a26..d82db52710c9b0b0f15cda09ab0866d688632c49 100644 (file)
--- a/resources/js/services/code.js
+++ b/resources/js/services/code.js
@@ -211,9 +211,9 @@ function wysiwygView(elem) {
     const doc = elem.ownerDocument;
     const codeElem = elem.querySelector('code');
 
-    let lang = (elem.className || '').replace('language-', '');
-    if (lang === '' && codeElem) {
-        lang = (codeElem.className || '').replace('language-', '')
+    let lang = getLanguageFromCssClasses(elem.className || '');
+    if (!lang && codeElem) {
+        lang = getLanguageFromCssClasses(codeElem.className || '');
     }
 
     elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
@@ -228,7 +228,7 @@ function wysiwygView(elem) {
     elem.parentNode.replaceChild(newWrap, elem);
 
     newWrap.appendChild(newTextArea);
-    newWrap.contentEditable = false;
+    newWrap.contentEditable = 'false';
     newTextArea.textContent = content;
 
     let cm = CodeMirror(function(elt) {
@@ -245,6 +245,16 @@ function wysiwygView(elem) {
     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
  * @param {HTMLElement} elem