X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/a6bbe4698741a5221f22fa7818a0a3037a54430a..refs/pull/1851/head:/resources/js/services/code.js

diff --git a/resources/js/services/code.js b/resources/js/services/code.js
index 3fcf74125..27413764a 100644
--- a/resources/js/services/code.js
+++ b/resources/js/services/code.js
@@ -14,6 +14,7 @@ import 'codemirror/mode/haskell/haskell';
 import 'codemirror/mode/markdown/markdown';
 import 'codemirror/mode/mllike/mllike';
 import 'codemirror/mode/nginx/nginx';
+import 'codemirror/mode/perl/perl';
 import 'codemirror/mode/php/php';
 import 'codemirror/mode/powershell/powershell';
 import 'codemirror/mode/properties/properties';
@@ -25,6 +26,7 @@ import 'codemirror/mode/sql/sql';
 import 'codemirror/mode/toml/toml';
 import 'codemirror/mode/xml/xml';
 import 'codemirror/mode/yaml/yaml';
+import 'codemirror/mode/pascal/pascal';
 
 // Addons
 import 'codemirror/addon/scroll/scrollpastend';
@@ -58,9 +60,13 @@ const modeMap = {
     markdown: 'markdown',
     ml: 'mllike',
     nginx: 'nginx',
+    perl: 'perl',
+    pl: 'perl',
     powershell: 'powershell',
     properties: 'properties',
     ocaml: 'mllike',
+    pascal: 'text/x-pascal',
+    pas: 'text/x-pascal',
     php: (content) => {
         return content.includes('<?php') ? 'php' : 'text/x-php';
     },
@@ -84,9 +90,20 @@ const modeMap = {
  * Highlight pre elements on a page
  */
 function highlight() {
-    let codeBlocks = document.querySelectorAll('.page-content pre, .comment-box .content pre');
-    for (let i = 0; i < codeBlocks.length; i++) {
-        highlightElem(codeBlocks[i]);
+    const codeBlocks = document.querySelectorAll('.page-content pre, .comment-box .content pre');
+    for (const codeBlock of codeBlocks) {
+        highlightElem(codeBlock);
+    }
+}
+
+/**
+ * Highlight all code blocks within the given parent element
+ * @param {HTMLElement} parent
+ */
+function highlightWithin(parent) {
+    const codeBlocks = parent.querySelectorAll('pre');
+    for (const codeBlock of codeBlocks) {
+        highlightElem(codeBlock);
     }
 }
 
@@ -97,7 +114,7 @@ function highlight() {
 function highlightElem(elem) {
     const innerCodeElem = elem.querySelector('code[class^=language-]');
     elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
-    const content = elem.textContent.trim();
+    const content = elem.textContent;
 
     let mode = '';
     if (innerCodeElem !== null) {
@@ -171,7 +188,7 @@ function getMode(suggestion, content) {
  * @returns {*|string}
  */
 function getTheme() {
-    return window.codeTheme || 'base16-light';
+    return window.codeTheme || 'mdn-like';
 }
 
 /**
@@ -258,10 +275,18 @@ function setMode(cmInstance, modeSuggestion, content) {
 function setContent(cmInstance, codeContent) {
     cmInstance.setValue(codeContent);
     setTimeout(() => {
-        cmInstance.refresh();
+        updateLayout(cmInstance);
     }, 10);
 }
 
+/**
+ * Update the layout (codemirror refresh) of a cm instance.
+ * @param cmInstance
+ */
+function updateLayout(cmInstance) {
+    cmInstance.refresh();
+}
+
 /**
  * Get a CodeMirror instance to use for the markdown editor.
  * @param {HTMLElement} elem
@@ -297,10 +322,12 @@ function getMetaKey() {
 
 export default {
     highlight: highlight,
+    highlightWithin: highlightWithin,
     wysiwygView: wysiwygView,
     popupEditor: popupEditor,
     setMode: setMode,
     setContent: setContent,
+    updateLayout: updateLayout,
     markdownEditor: markdownEditor,
     getMetaKey: getMetaKey,
 };