X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/a4fbde9185bf03db0b0d6e0ca278b235987c2035..refs/pull/4467/head:/resources/js/wysiwyg/plugin-drawio.js

diff --git a/resources/js/wysiwyg/plugin-drawio.js b/resources/js/wysiwyg/plugin-drawio.js
index c98b1aa10..3b343a958 100644
--- a/resources/js/wysiwyg/plugin-drawio.js
+++ b/resources/js/wysiwyg/plugin-drawio.js
@@ -34,7 +34,6 @@ function showDrawingManager(mceEditor, selectedNode = null) {
 }
 
 async function updateContent(pngData) {
-    const id = `image-${Math.random().toString(16).slice(2)}`;
     const loadingImage = window.baseUrl('/loading.gif');
 
     const handleUploadError = error => {
@@ -65,17 +64,19 @@ async function updateContent(pngData) {
 
     await wait(5);
 
-    pageEditor.insertContent(`<div drawio-diagram contenteditable="false"><img src="${loadingImage}" id="${id}"></div>`);
+    const id = `drawing-${Math.random().toString(16).slice(2)}`;
+    const wrapId = `drawing-wrap-${Math.random().toString(16).slice(2)}`;
+    pageEditor.insertContent(`<div drawio-diagram contenteditable="false" id="${wrapId}"><img src="${loadingImage}" id="${id}"></div>`);
     DrawIO.close();
 
     try {
         const img = await DrawIO.upload(pngData, options.pageId);
         pageEditor.undoManager.transact(() => {
             pageEditor.dom.setAttrib(id, 'src', img.url);
-            pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id);
+            pageEditor.dom.setAttrib(wrapId, 'drawio-diagram', img.id);
         });
     } catch (err) {
-        pageEditor.dom.remove(id);
+        pageEditor.dom.remove(wrapId);
         handleUploadError(err);
         throw new Error(`Failed to save image with error: ${err}`);
     }