2024-07-19 19:09:41 +08:00
|
|
|
import * as DrawIO from '../services/drawio.ts';
|
2023-08-23 02:30:39 +08:00
|
|
|
import {wait} from '../services/util';
|
2022-02-06 07:15:58 +08:00
|
|
|
|
|
|
|
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;
|
2022-11-16 23:21:22 +08:00
|
|
|
|
2023-04-19 05:20:02 +08:00
|
|
|
/** @type {ImageManager} * */
|
2022-11-16 23:21:22 +08:00
|
|
|
const imageManager = window.$components.first('image-manager');
|
2023-04-19 05:20:02 +08:00
|
|
|
imageManager.show(image => {
|
2022-02-06 07:15:58 +08:00
|
|
|
if (selectedNode) {
|
2022-09-05 22:06:47 +08:00
|
|
|
const imgElem = selectedNode.querySelector('img');
|
2023-04-19 05:20:02 +08:00
|
|
|
pageEditor.undoManager.transact(() => {
|
2022-09-05 22:06:47 +08:00
|
|
|
pageEditor.dom.setAttrib(imgElem, 'src', image.url);
|
|
|
|
pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id);
|
|
|
|
});
|
2022-02-06 07:15:58 +08:00
|
|
|
} else {
|
2022-09-05 22:06:47 +08:00
|
|
|
const imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`;
|
2022-02-06 07:15:58 +08:00
|
|
|
pageEditor.insertContent(imgHTML);
|
|
|
|
}
|
|
|
|
}, 'drawio');
|
|
|
|
}
|
|
|
|
|
|
|
|
async function updateContent(pngData) {
|
|
|
|
const loadingImage = window.baseUrl('/loading.gif');
|
|
|
|
|
2023-04-19 05:20:02 +08:00
|
|
|
const handleUploadError = error => {
|
2022-02-06 07:15:58 +08:00
|
|
|
if (error.status === 413) {
|
|
|
|
window.$events.emit('error', options.translations.serverUploadLimitText);
|
|
|
|
} else {
|
|
|
|
window.$events.emit('error', options.translations.imageUploadErrorText);
|
|
|
|
}
|
2023-04-19 17:46:13 +08:00
|
|
|
console.error(error);
|
2022-02-06 07:15:58 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
// Handle updating an existing image
|
|
|
|
if (currentNode) {
|
|
|
|
DrawIO.close();
|
2023-04-19 05:20:02 +08:00
|
|
|
const imgElem = currentNode.querySelector('img');
|
2022-02-06 07:15:58 +08:00
|
|
|
try {
|
|
|
|
const img = await DrawIO.upload(pngData, options.pageId);
|
2023-04-19 05:20:02 +08:00
|
|
|
pageEditor.undoManager.transact(() => {
|
2022-09-05 22:06:47 +08:00
|
|
|
pageEditor.dom.setAttrib(imgElem, 'src', img.url);
|
|
|
|
pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id);
|
|
|
|
});
|
2022-02-06 07:15:58 +08:00
|
|
|
} catch (err) {
|
|
|
|
handleUploadError(err);
|
2023-08-23 02:30:39 +08:00
|
|
|
throw new Error(`Failed to save image with error: ${err}`);
|
2022-02-06 07:15:58 +08:00
|
|
|
}
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2023-08-23 02:30:39 +08:00
|
|
|
await wait(5);
|
|
|
|
|
2023-08-24 01:50:37 +08:00
|
|
|
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>`);
|
2023-08-23 02:30:39 +08:00
|
|
|
DrawIO.close();
|
|
|
|
|
|
|
|
try {
|
|
|
|
const img = await DrawIO.upload(pngData, options.pageId);
|
|
|
|
pageEditor.undoManager.transact(() => {
|
|
|
|
pageEditor.dom.setAttrib(id, 'src', img.url);
|
2023-08-24 01:50:37 +08:00
|
|
|
pageEditor.dom.setAttrib(wrapId, 'drawio-diagram', img.id);
|
2023-08-23 02:30:39 +08:00
|
|
|
});
|
|
|
|
} catch (err) {
|
2023-08-24 01:50:37 +08:00
|
|
|
pageEditor.dom.remove(wrapId);
|
2023-08-23 02:30:39 +08:00
|
|
|
handleUploadError(err);
|
|
|
|
throw new Error(`Failed to save image with error: ${err}`);
|
|
|
|
}
|
2022-02-06 07:15:58 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
function drawingInit() {
|
|
|
|
if (!currentNode) {
|
|
|
|
return Promise.resolve('');
|
|
|
|
}
|
|
|
|
|
2023-01-26 20:16:23 +08:00
|
|
|
const drawingId = currentNode.getAttribute('drawio-diagram');
|
2022-02-06 07:15:58 +08:00
|
|
|
return DrawIO.load(drawingId);
|
|
|
|
}
|
|
|
|
|
2023-04-19 17:46:13 +08:00
|
|
|
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', `<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: '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');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-02-06 07:15:58 +08:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @param {WysiwygConfigOptions} providedOptions
|
|
|
|
* @return {function(Editor, string)}
|
|
|
|
*/
|
|
|
|
export function getPlugin(providedOptions) {
|
|
|
|
options = providedOptions;
|
2023-04-19 17:46:13 +08:00
|
|
|
return register;
|
2023-04-19 05:20:02 +08:00
|
|
|
}
|