X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/e711290d8b1ce06b38e0560248806e8de2077870..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 3d1125841..3b343a958 100644
--- a/resources/js/wysiwyg/plugin-drawio.js
+++ b/resources/js/wysiwyg/plugin-drawio.js
@@ -1,4 +1,5 @@
-import DrawIO from '../services/drawio';
+import * as DrawIO from '../services/drawio';
+import {wait} from '../services/util';
let pageEditor = null;
let currentNode = null;
@@ -32,14 +33,7 @@ function showDrawingManager(mceEditor, selectedNode = null) {
}, 'drawio');
}
-function showDrawingEditor(mceEditor, selectedNode = null) {
- pageEditor = mceEditor;
- currentNode = selectedNode;
- DrawIO.show(options.drawioUrl, drawingInit, updateContent);
-}
-
async function updateContent(pngData) {
- const id = `image-${Math.random().toString(16).slice(2)}`;
const loadingImage = window.baseUrl('/loading.gif');
const handleUploadError = error => {
@@ -48,7 +42,7 @@ async function updateContent(pngData) {
} else {
window.$events.emit('error', options.translations.imageUploadErrorText);
}
- console.log(error);
+ console.error(error);
};
// Handle updating an existing image
@@ -63,24 +57,29 @@ async function updateContent(pngData) {
});
} catch (err) {
handleUploadError(err);
+ throw new Error(`Failed to save image with error: ${err}`);
}
return;
}
- setTimeout(async () => {
- pageEditor.insertContent(``);
- 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);
- });
- } catch (err) {
- pageEditor.dom.remove(id);
- handleUploadError(err);
- }
- }, 5);
+ await wait(5);
+
+ const id = `drawing-${Math.random().toString(16).slice(2)}`;
+ const wrapId = `drawing-wrap-${Math.random().toString(16).slice(2)}`;
+ pageEditor.insertContent(``);
+ DrawIO.close();
+
+ try {
+ const img = await DrawIO.upload(pngData, options.pageId);
+ pageEditor.undoManager.transact(() => {
+ pageEditor.dom.setAttrib(id, 'src', img.url);
+ pageEditor.dom.setAttrib(wrapId, 'drawio-diagram', img.id);
+ });
+ } catch (err) {
+ pageEditor.dom.remove(wrapId);
+ handleUploadError(err);
+ throw new Error(`Failed to save image with error: ${err}`);
+ }
}
function drawingInit() {
@@ -92,6 +91,66 @@ function drawingInit() {
return DrawIO.load(drawingId);
}
+function showDrawingEditor(mceEditor, selectedNode = null) {
+ pageEditor = mceEditor;
+ currentNode = selectedNode;
+ DrawIO.show(options.drawioUrl, drawingInit, updateContent);
+}
+
+/**
+ * @param {Editor} editor
+ */
+function register(editor) {
+ editor.addCommand('drawio', () => {
+ const selectedNode = editor.selection.getNode();
+ showDrawingEditor(editor, isDrawing(selectedNode) ? selectedNode : null);
+ });
+
+ editor.ui.registry.addIcon('diagram', ``);
+
+ editor.ui.registry.addSplitButton('drawio', {
+ 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',
+ value: 'drawing-manager',
+ },
+ ]);
+ },
+ onItemAction(api, value) {
+ if (value === 'drawing-manager') {
+ const selectedNode = editor.selection.getNode();
+ showDrawingManager(editor, isDrawing(selectedNode) ? selectedNode : null);
+ }
+ },
+ });
+
+ editor.on('dblclick', () => {
+ const selectedNode = editor.selection.getNode();
+ if (!isDrawing(selectedNode)) return;
+ showDrawingEditor(editor, selectedNode);
+ });
+
+ editor.on('SetContent', () => {
+ const drawings = editor.dom.select('body > div[drawio-diagram]');
+ if (!drawings.length) return;
+
+ editor.undoManager.transact(() => {
+ for (const drawing of drawings) {
+ drawing.setAttribute('contenteditable', 'false');
+ }
+ });
+ });
+}
+
/**
*
* @param {WysiwygConfigOptions} providedOptions
@@ -99,54 +158,5 @@ function drawingInit() {
*/
export function getPlugin(providedOptions) {
options = providedOptions;
- return function(editor, url) {
- editor.addCommand('drawio', () => {
- const selectedNode = editor.selection.getNode();
- showDrawingEditor(editor, isDrawing(selectedNode) ? selectedNode : null);
- });
-
- editor.ui.registry.addIcon('diagram', ``);
-
- editor.ui.registry.addSplitButton('drawio', {
- 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',
- value: 'drawing-manager',
- },
- ]);
- },
- onItemAction(api, value) {
- if (value === 'drawing-manager') {
- const selectedNode = editor.selection.getNode();
- showDrawingManager(editor, isDrawing(selectedNode) ? selectedNode : null);
- }
- },
- });
-
- editor.on('dblclick', event => {
- const selectedNode = editor.selection.getNode();
- if (!isDrawing(selectedNode)) return;
- showDrawingEditor(editor, selectedNode);
- });
-
- editor.on('SetContent', () => {
- const drawings = editor.dom.select('body > div[drawio-diagram]');
- if (!drawings.length) return;
-
- editor.undoManager.transact(() => {
- for (const drawing of drawings) {
- drawing.setAttribute('contenteditable', 'false');
- }
- });
- });
- };
+ return register;
}