import DrawIO from "../services/drawio"; let pageEditor = null; let currentNode = null; /** * @type {WysiwygConfigOptions} */ let options = {}; function isDrawing(node) { return node.hasAttribute('drawio-diagram'); } function showDrawingManager(mceEditor, selectedNode = null) { pageEditor = mceEditor; currentNode = selectedNode; // 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); } else { let imgHTML = `
`; pageEditor.insertContent(imgHTML); } }, '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) => { if (error.status === 413) { window.$events.emit('error', options.translations.serverUploadLimitText); } else { window.$events.emit('error', options.translations.imageUploadErrorText); } console.log(error); }; // Handle updating an existing image if (currentNode) { DrawIO.close(); 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); } catch (err) { handleUploadError(err); } return; } setTimeout(async () => { pageEditor.insertContent(`
`); 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); } catch (err) { pageEditor.dom.remove(id); handleUploadError(err); } }, 5); } function drawingInit() { if (!currentNode) { return Promise.resolve(''); } let drawingId = currentNode.getAttribute('drawio-diagram'); return DrawIO.load(drawingId); } /** * * @param {WysiwygConfigOptions} providedOptions * @return {function(Editor, string)} */ 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'); }, 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 => { let selectedNode = editor.selection.getNode(); if (!isDrawing(selectedNode)) return; showDrawingEditor(editor, selectedNode); }); editor.on('SetContent', function () { const drawings = editor.$('body > div[drawio-diagram]'); if (!drawings.length) return; editor.undoManager.transact(function () { drawings.each((index, elem) => { elem.setAttribute('contenteditable', 'false'); }); }); }); }; }