Merge pull request #632 from BookStackApp/draw.io

[bookstack] / resources / assets / js / pages / page-form.js

diff --git a/resources/assets/js/pages/page-form.js b/resources/assets/js/pages/page-form.js
index 8e70d2db589cb2a340bfbe72539ea4232d03c977..f7bfe22cf86377eee9b63b29c45d7eb9adfd1a2c 100644 (file)
--- a/resources/assets/js/pages/page-form.js
+++ b/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.
@@ -218,7 +219,6 @@ function codePlugin() {
 
     });
 }
-codePlugin();
 
 function drawIoPlugin() {
 
@@ -234,27 +234,7 @@ function drawIoPlugin() {
     function showDrawingEditor(mceEditor, selectedNode = null) {
         pageEditor = mceEditor;
         currentNode = selectedNode;
-        iframe = document.createElement('iframe');
-        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);
-        }
+        DrawIO.show(drawingInit, updateContent);
     }
 
     function updateContent(pngData) {
@@ -267,8 +247,7 @@ function drawIoPlugin() {
 
         // Handle updating an existing image
         if (currentNode) {
-            console.log(currentNode);
-            drawEventClose();
+            DrawIO.close();
             let imgElem = currentNode.querySelector('img');
             let drawingId = currentNode.getAttribute('drawio-diagram');
             window.$http.put(window.baseUrl(`/images/drawing/upload/${drawingId}`), data).then(resp => {
@@ -282,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);
@@ -294,48 +273,27 @@ function drawIoPlugin() {
         }, 5);
     }
 
-    function drawEventExport(message) {
-        updateContent(message.data);
-    }
 
-    function drawEventSave(message) {
-        drawPostMessage({action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing'});
-    }
-
-    function drawEventInit() {
+    function drawingInit() {
         if (!currentNode) {
-            drawPostMessage({action: 'load', autosave: 1, xml: ''});
-            return;
+            return Promise.resolve('');
         }
 
-        let imgElem = currentNode.querySelector('img');
         let drawingId = currentNode.getAttribute('drawio-diagram');
-        $http.get(window.baseUrl(`/images/base64/${drawingId}`)).then(resp => {
-            let xml = `data:image/png;base64,${resp.data.content}`;
-            drawPostMessage({action: 'load', autosave: 1, xml});
+        return window.$http.get(window.baseUrl(`/images/base64/${drawingId}`)).then(resp => {
+            return `data:image/png;base64,${resp.data.content}`;
         });
     }
 
-    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);
         });
 
         editor.addButton('drawio', {
-            text: 'Drawing',
-            icon: false,
+            tooltip: 'Drawing',
+            image: window.baseUrl('/system_images/drawing.svg'),
             cmd: 'drawio'
         });
 
@@ -346,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 () {
@@ -358,7 +316,6 @@ function drawIoPlugin() {
 
     });
 }
-drawIoPlugin();
 
 window.tinymce.PluginManager.add('customhr', function (editor) {
     editor.addCommand('InsertHorizontalRule', function () {
@@ -382,7 +339,13 @@ window.tinymce.PluginManager.add('customhr', function (editor) {
     });
 });
 
-
+// Load plugins
+let plugins = "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor";
+codePlugin();
+if (document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') === 'true') {
+    drawIoPlugin();
+    plugins += ' drawio';
+}
 
 module.exports = {
     selector: '#html-editor',
@@ -402,9 +365,9 @@ module.exports = {
     extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram]',
     automatic_uploads: false,
     valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre],+div[img]",
-    plugins: "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor drawio",
+    plugins: plugins,
     imagetools_toolbar: 'imageoptions',
-    toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr | removeformat code fullscreen drawio",
+    toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr drawio | removeformat code fullscreen",
     content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
     style_formats: [
         {title: "Header Large", format: "h2"},