Split out codemirror JS to its own module

[bookstack] / resources / js / wysiwyg / plugin-codeeditor.js

diff --git a/resources/js/wysiwyg/plugin-codeeditor.js b/resources/js/wysiwyg/plugin-codeeditor.js
index 97bfebf9a7aa96d936cff8cb9a02a3631a9bdee8..f0ec78afcc852a8c952fb2f9701ae5e301a7536e 100644 (file)
--- a/resources/js/wysiwyg/plugin-codeeditor.js
+++ b/resources/js/wysiwyg/plugin-codeeditor.js
@@ -1,5 +1,3 @@
-import Code from "../services/code";
-
 function elemIsCodeBlock(elem) {
     return elem.className === 'CodeMirrorContainer';
 }
@@ -31,8 +29,10 @@ function showPopup(editor) {
         const editorElem = selectedNode.querySelector('.CodeMirror');
         const cmInstance = editorElem.CodeMirror;
         if (cmInstance) {
-            Code.setContent(cmInstance, code);
-            Code.setMode(cmInstance, lang, code);
+            window.importVersioned('code').then(Code => {
+                Code.setContent(cmInstance, code);
+                Code.setMode(cmInstance, lang, code);
+            });
         }
         const textArea = selectedNode.querySelector('textarea');
         if (textArea) textArea.textContent = code;
@@ -69,7 +69,7 @@ function register(editor, url) {
     editor.ui.registry.addIcon('codeblock', '<svg width="24" height="24"><path d="M4 3h16c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1Zm1 2v14h14V5Z"/><path d="M11.103 15.423c.277.277.277.738 0 .922a.692.692 0 0 1-1.106 0l-4.057-3.78a.738.738 0 0 1 0-1.107l4.057-3.872c.276-.277.83-.277 1.106 0a.724.724 0 0 1 0 1.014L7.6 12.012ZM12.897 8.577c-.245-.312-.2-.675.08-.955.28-.281.727-.27 1.027.033l4.057 3.78a.738.738 0 0 1 0 1.107l-4.057 3.872c-.277.277-.83.277-1.107 0a.724.724 0 0 1 0-1.014l3.504-3.412z"/></svg>')
 
     editor.ui.registry.addButton('codeeditor', {
-        title: 'Insert code block',
+        tooltip: 'Insert code block',
         icon: 'codeblock',
         onAction() {
             editor.execCommand('codeeditor');
@@ -93,7 +93,7 @@ function register(editor, url) {
         showPopup(editor);
     });
 
-    function parseCodeMirrorInstances() {
+    function parseCodeMirrorInstances(Code) {
 
         // Recover broken codemirror instances
         $('.CodeMirrorContainer').filter((index ,elem) => {
@@ -111,17 +111,18 @@ function register(editor, url) {
         });
     }
 
-    editor.on('init', function() {
+    editor.on('init', async function() {
+        const Code = await window.importVersioned('code');
         // Parse code mirror instances on init, but delay a little so this runs after
         // initial styles are fetched into the editor.
         editor.undoManager.transact(function () {
-            parseCodeMirrorInstances();
+            parseCodeMirrorInstances(Code);
         });
         // Parsed code mirror blocks when content is set but wait before setting this handler
         // to avoid any init 'SetContent' events.
         setTimeout(() => {
             editor.on('SetContent', () => {
-                setTimeout(parseCodeMirrorInstances, 100);
+                setTimeout(() => parseCodeMirrorInstances(Code), 100);
             });
         }, 200);
     });