Extracted draw.io functionality to own file

resources/assets/js/components/markdown-editor.js

@@ -1,6 +1,6 @@
 const MarkdownIt = require("markdown-it");
 const mdTasksLists = require('markdown-it-task-lists');
-const code = require('../code');
+const code = require('../libs/code');
 
 class MarkdownEditor {
 

resources/assets/js/libs/drawio.js

@@ -0,0 +1,66 @@
+
+const drawIoUrl = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&proto=json';
+let iFrame = null;
+
+let onInit, onSave;
+
+/**
+ * Show the draw.io editor.
+ * @param onInitCallback - Must return a promise with the xml to load for the editor.
+ * @param onSaveCallback - Is called with the drawing data on save.
+ */
+export function show(onInitCallback, onSaveCallback) {
+    onInit = onInitCallback;
+    onSave = onSaveCallback;
+
+    iFrame = document.createElement('iframe');
+    iFrame.setAttribute('frameborder', '0');
+    window.addEventListener('message', drawReceive);
+    iFrame.setAttribute('src', drawIoUrl);
+    iFrame.setAttribute('class', 'fullscreen');
+    iFrame.style.backgroundColor = '#FFFFFF';
+}
+
+export function close() {
+    drawEventClose();
+}
+
+function drawReceive(event) {
+    if (!event.data || event.data.length < 1) return;
+    let message = JSON.parse(event.data);
+    if (message.event === 'init') {
+        drawEventInit();
+    } else if (message.event === 'exit') {
+        drawEventClose();
+    } else if (message.event === 'save') {
+        drawEventSave(message);
+    } else if (message.event === 'export') {
+        drawEventExport(message);
+    }
+}
+
+function drawEventExport(message) {
+    if (onSave) {
+        onSave(message.data);
+    }
+}
+
+function drawEventSave(message) {
+    drawPostMessage({action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing'});
+}
+
+function drawEventInit() {
+    if (!onInit) return;
+    onInit().then(xml => {
+        drawPostMessage({action: 'load', autosave: 1, xml: ''});
+    });
+}
+
+function drawEventClose() {
+    window.removeEventListener('message', drawReceive);
+    if (iFrame) document.body.removeChild(iFrame);
+}
+
+function drawPostMessage(data) {
+    iFrame.contentWindow.postMessage(JSON.stringify(data), '*');
+}

resources/assets/js/pages/page-form.js

@@ -1,5 +1,6 @@
 "use strict";
-const Code = require('../code');
+const Code = require('../libs/code');
+const DrawIO = require('../libs/drawio');
 
 /**
  * Handle pasting images from clipboard.
@@ -233,27 +234,7 @@ function drawIoPlugin() {
     function showDrawingEditor(mceEditor, selectedNode = null) {
         pageEditor = mceEditor;
         currentNode = selectedNode;
-        iframe = document.createElement('iframe');
+        DrawIO.show(drawingInit, updateContent);
-        iframe.setAttribute('frameborder', '0');
-        window.addEventListener('message', drawReceive);
-        iframe.setAttribute('src', drawIoUrl);
-        iframe.setAttribute('class', 'fullscreen');
-        iframe.style.backgroundColor = '#FFFFFF';
-        document.body.appendChild(iframe);
-    }
-
-    function drawReceive(event) {
-        if (!event.data || event.data.length < 1) return;
-        let message = JSON.parse(event.data);
-        if (message.event === 'init') {
-            drawEventInit();
-        } else if (message.event === 'exit') {
-            drawEventClose();
-        } else if (message.event === 'save') {
-            drawEventSave(message);
-        } else if (message.event === 'export') {
-            drawEventExport(message);
-        }
     }
 
     function updateContent(pngData) {
@@ -266,8 +247,7 @@ function drawIoPlugin() {
 
         // Handle updating an existing image
         if (currentNode) {
-            console.log(currentNode);
+            DrawIO.close();
-            drawEventClose();
             let imgElem = currentNode.querySelector('img');
             let drawingId = currentNode.getAttribute('drawio-diagram');
             window.$http.put(window.baseUrl(`/images/drawing/upload/${drawingId}`), data).then(resp => {
@@ -281,7 +261,7 @@ function drawIoPlugin() {
 
         setTimeout(() => {
             pageEditor.insertContent(`<div drawio-diagram contenteditable="false"><img src="${loadingImage}" id="${id}"></div>`);
-            drawEventClose();
+            DrawIO.close();
             window.$http.post(window.baseUrl('/images/drawing/upload'), data).then(resp => {
                 pageEditor.dom.setAttrib(id, 'src', resp.data.url);
                 pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', resp.data.id);
@@ -293,41 +273,20 @@ function drawIoPlugin() {
         }, 5);
     }
 
-    function drawEventExport(message) {
-        updateContent(message.data);
-    }
 
-    function drawEventSave(message) {
+    function drawingInit() {
-        drawPostMessage({action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing'});
-    }
-
-    function drawEventInit() {
         if (!currentNode) {
-            drawPostMessage({action: 'load', autosave: 1, xml: ''});
+            return Promise.resolve('');
-            return;
         }
 
-        let imgElem = currentNode.querySelector('img');
         let drawingId = currentNode.getAttribute('drawio-diagram');
-        $http.get(window.baseUrl(`/images/base64/${drawingId}`)).then(resp => {
+        return window.$http.get(window.baseUrl(`/images/base64/${drawingId}`)).then(resp => {
-            let xml = `data:image/png;base64,${resp.data.content}`;
+            return `data:image/png;base64,${resp.data.content}`;
-            drawPostMessage({action: 'load', autosave: 1, xml});
         });
     }
 
-    function drawEventClose() {
-        window.removeEventListener('message', drawReceive);
-        if (iframe) document.body.removeChild(iframe);
-    }
-
-    function drawPostMessage(data) {
-        iframe.contentWindow.postMessage(JSON.stringify(data), '*');
-    }
-
     window.tinymce.PluginManager.add('drawio', function(editor, url) {
 
-        let $ = editor.$;
-
         editor.addCommand('drawio', () => {
             showDrawingEditor(editor);
         });
@@ -345,7 +304,7 @@ function drawIoPlugin() {
         });
 
         editor.on('SetContent', function () {
-            let drawings = $('body > div[drawio-diagram]');
+            let drawings = editor.$('body > div[drawio-diagram]');
             if (!drawings.length) return;
 
             editor.undoManager.transact(function () {
@@ -380,9 +339,8 @@ window.tinymce.PluginManager.add('customhr', function (editor) {
     });
 });
 
+// Load plugins
 let plugins = "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor";
-
-// Load custom plugins
 codePlugin();
 if (document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') === 'true') {
     drawIoPlugin();

resources/assets/js/pages/page-show.js

@@ -1,5 +1,5 @@
 const Clipboard = require("clipboard");
-const Code = require('../code');
+const Code = require('../libs/code');
 
 let setupPageShow = window.setupPageShow = function (pageId) {
 

resources/assets/js/vues/code-editor.js

@@ -1,4 +1,4 @@
-const codeLib = require('../code');
+const codeLib = require('../libs/code');
 
 const methods = {
     show() {