Split out codemirror JS to its own module

Added a cache-compatible module loading system/pattern to the codebase.

resources/js/components/code-editor.js

@@ -1,4 +1,3 @@
-import Code from "../services/code";
 import {onChildEvent, onEnterPress, onSelect} from "../services/dom";
 
 /**
@@ -63,13 +62,17 @@ class CodeEditor {
         this.show();
         this.updateEditorMode(language);
 
-        Code.setContent(this.editor, code);
+        window.importVersioned('code').then(Code => {
+            Code.setContent(this.editor, code);
+        });
     }
 
-    show() {
+    async show() {
+        const Code = await window.importVersioned('code');
         if (!this.editor) {
             this.editor = Code.popupEditor(this.editorInput, this.languageInput.value);
         }
+
         this.loadHistory();
         this.popup.components.popup.show(() => {
             Code.updateLayout(this.editor);
@@ -84,7 +87,8 @@ class CodeEditor {
         this.addHistory();
     }
 
-    updateEditorMode(language) {
+    async updateEditorMode(language) {
+        const Code = await window.importVersioned('code');
         Code.setMode(this.editor, language, this.editor.getValue());
     }
 

resources/js/components/code-highlighter.js

@@ -1,8 +1,12 @@
-import Code from "../services/code"
 class CodeHighlighter {
 
     constructor(elem) {
-        Code.highlightWithin(elem);
+        const codeBlocks = elem.querySelectorAll('pre');
+        if (codeBlocks.length > 0) {
+            window.importVersioned('code').then(Code => {
+               Code.highlightWithin(elem);
+            });
+        }
     }
 
 }

resources/js/components/details-highlighter.js

@@ -1,4 +1,3 @@
-import Code from "../services/code"
 class DetailsHighlighter {
 
     constructor(elem) {
@@ -10,7 +9,11 @@ class DetailsHighlighter {
     onToggle() {
         if (this.dealtWith) return;
 
-        Code.highlightWithin(this.elem);
+        if (this.elem.querySelector('pre')) {
+            window.importVersioned('code').then(Code => {
+                Code.highlightWithin(this.elem);
+            });
+        }
         this.dealtWith = true;
     }
 }

resources/js/components/markdown-editor.js

@@ -1,6 +1,5 @@
 import MarkdownIt from "markdown-it";
 import mdTasksLists from 'markdown-it-task-lists';
-import code from '../services/code';
 import Clipboard from "../services/clipboard";
 import {debounce} from "../services/util";
 
@@ -23,13 +22,20 @@ class MarkdownEditor {
 
         this.displayStylesLoaded = false;
         this.input = this.elem.querySelector('textarea');
-        this.cm = code.markdownEditor(this.input);
+
+        this.cm = null;
+        this.Code = null;
+        const cmLoadPromise = window.importVersioned('code').then(Code => {
+            this.cm = Code.markdownEditor(this.input);
+            this.Code = Code;
+            return this.cm;
+        });
 
         this.onMarkdownScroll = this.onMarkdownScroll.bind(this);
 
         const displayLoad = () => {
             this.displayDoc = this.display.contentDocument;
-            this.init();
+            this.init(cmLoadPromise);
         };
 
         if (this.display.contentDocument.readyState === 'complete') {
@@ -45,7 +51,7 @@ class MarkdownEditor {
         });
     }
 
-    init() {
+    init(cmLoadPromise) {
 
         let lastClick = 0;
 
@@ -98,7 +104,15 @@ class MarkdownEditor {
             toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
         });
 
-        this.codeMirrorSetup();
+        cmLoadPromise.then(cm => {
+            this.codeMirrorSetup(cm);
+
+            // Refresh CodeMirror on container resize
+            const resizeDebounced = debounce(() => this.Code.updateLayout(cm), 100, false);
+            const observer = new ResizeObserver(resizeDebounced);
+            observer.observe(this.elem);
+        });
+
         this.listenForBookStackEditorEvents();
 
         // Scroll to text if needed.
@@ -107,11 +121,6 @@ class MarkdownEditor {
         if (scrollText) {
             this.scrollToText(scrollText);
         }
-
-        // Refresh CodeMirror on container resize
-        const resizeDebounced = debounce(() => code.updateLayout(this.cm), 100, false);
-        const observer = new ResizeObserver(resizeDebounced);
-        observer.observe(this.elem);
     }
 
     // Update the input content and render the display.
@@ -158,15 +167,14 @@ class MarkdownEditor {
         topElem.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth'});
     }
 
-    codeMirrorSetup() {
-        const cm = this.cm;
+    codeMirrorSetup(cm) {
         const context = this;
 
         // Text direction
         // cm.setOption('direction', this.textDirection);
         cm.setOption('direction', 'ltr'); // Will force to remain as ltr for now due to issues when HTML is in editor.
         // Custom key commands
-        let metaKey = code.getMetaKey();
+        let metaKey = this.Code.getMetaKey();
         const extraKeys = {};
         // Insert Image shortcut
         extraKeys[`${metaKey}-Alt-I`] = function(cm) {

resources/js/components/page-display.js

@@ -1,5 +1,4 @@
 import Clipboard from "clipboard/dist/clipboard.min";
-import Code from "../services/code";
 import * as DOM from "../services/dom";
 import {scrollAndHighlightElement} from "../services/util";
 
@@ -9,7 +8,7 @@ class PageDisplay {
         this.elem = elem;
         this.pageId = elem.getAttribute('page-display');
 
-        Code.highlight();
+        window.importVersioned('code').then(Code => Code.highlight());
         this.setupPointer();
         this.setupNavHighlighting();
         this.setupDetailsCodeBlockRefresh();