Added "page_include_parse" theme event

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

diff --git a/resources/js/wysiwyg/plugin-drawio.js b/resources/js/wysiwyg/plugin-drawio.js
index b6b768c0a97209ffa503264b7b622578c5d188ed..64ef1fffbcfc26cd63f2c06c90b4f4ed762dbdc8 100644 (file)
--- a/resources/js/wysiwyg/plugin-drawio.js
+++ b/resources/js/wysiwyg/plugin-drawio.js
@@ -18,11 +18,13 @@ function showDrawingManager(mceEditor, selectedNode = null) {
     // Show image manager
     window.ImageManager.show(function (image) {
         if (selectedNode) {
-            let imgElem = selectedNode.querySelector('img');
-            pageEditor.dom.setAttrib(imgElem, 'src', image.url);
-            pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id);
+            const imgElem = selectedNode.querySelector('img');
+            pageEditor.undoManager.transact(function () {
+                pageEditor.dom.setAttrib(imgElem, 'src', image.url);
+                pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id);
+            });
         } else {
-            let imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`;
+            const imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`;
             pageEditor.insertContent(imgHTML);
         }
     }, 'drawio');
@@ -53,8 +55,10 @@ async function updateContent(pngData) {
         let imgElem = currentNode.querySelector('img');
         try {
             const img = await DrawIO.upload(pngData, options.pageId);
-            pageEditor.dom.setAttrib(imgElem, 'src', img.url);
-            pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id);
+            pageEditor.undoManager.transact(function () {
+                pageEditor.dom.setAttrib(imgElem, 'src', img.url);
+                pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id);
+            });
         } catch (err) {
             handleUploadError(err);
         }
@@ -66,8 +70,10 @@ async function updateContent(pngData) {
         DrawIO.close();
         try {
             const img = await DrawIO.upload(pngData, options.pageId);
-            pageEditor.dom.setAttrib(id, 'src', img.url);
-            pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id);
+            pageEditor.undoManager.transact(function () {
+                pageEditor.dom.setAttrib(id, 'src', img.url);
+                pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id);
+            });
         } catch (err) {
             pageEditor.dom.remove(id);
             handleUploadError(err);
@@ -102,16 +108,18 @@ export function getPlugin(providedOptions) {
         editor.ui.registry.addIcon('diagram', `<svg width="24" height="24" fill="${options.darkMode ? '#BBB' : '#000000'}" xmlns="http://www.w3.org/2000/svg"><path d="M20.716 7.639V2.845h-4.794v1.598h-7.99V2.845H3.138v4.794h1.598v7.99H3.138v4.794h4.794v-1.598h7.99v1.598h4.794v-4.794h-1.598v-7.99zM4.736 4.443h1.598V6.04H4.736zm1.598 14.382H4.736v-1.598h1.598zm9.588-1.598h-7.99v-1.598H6.334v-7.99h1.598V6.04h7.99v1.598h1.598v7.99h-1.598zm3.196 1.598H17.52v-1.598h1.598zM17.52 6.04V4.443h1.598V6.04zm-4.21 7.19h-2.79l-.582 1.599H8.643l2.717-7.191h1.119l2.724 7.19h-1.302zm-2.43-1.006h2.086l-1.039-3.06z"/></svg>`)
 
         editor.ui.registry.addSplitButton('drawio', {
-            tooltip: 'Drawing',
+            tooltip: 'Insert/edit drawing',
             icon: 'diagram',
             onAction() {
                 editor.execCommand('drawio');
+                // Hack to de-focus the tinymce editor toolbar
+                window.document.body.dispatchEvent(new Event('mousedown', {bubbles: true}));
             },
             fetch(callback) {
                 callback([
                     {
                         type: 'choiceitem',
-                        text: 'Drawing Manager',
+                        text: 'Drawing manager',
                         value: 'drawing-manager',
                     }
                 ]);
@@ -131,13 +139,13 @@ export function getPlugin(providedOptions) {
         });
 
         editor.on('SetContent', function () {
-            const drawings = editor.$('body > div[drawio-diagram]');
+            const drawings = editor.dom.select('body > div[drawio-diagram]');
             if (!drawings.length) return;
 
             editor.undoManager.transact(function () {
-                drawings.each((index, elem) => {
-                    elem.setAttribute('contenteditable', 'false');
-                });
+                for (const drawing of drawings) {
+                    drawing.setAttribute('contenteditable', 'false');
+                }
             });
         });