BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/plugin-drawio.js

   1 import DrawIO from "../services/drawio";
   2
   3 let pageEditor = null;
   4 let currentNode = null;
   5
   6 /**
   7  * @type {WysiwygConfigOptions}
   8  */
   9 let options = {};
  10
  11 function isDrawing(node) {
  12     return node.hasAttribute('drawio-diagram');
  13 }
  14
  15 function showDrawingManager(mceEditor, selectedNode = null) {
  16     pageEditor = mceEditor;
  17     currentNode = selectedNode;
  18     // Show image manager
  19     window.ImageManager.show(function (image) {
  20         if (selectedNode) {
  21             let imgElem = selectedNode.querySelector('img');
  22             pageEditor.dom.setAttrib(imgElem, 'src', image.url);
  23             pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id);
  24         } else {
  25             let imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`;
  26             pageEditor.insertContent(imgHTML);
  27         }
  28     }, 'drawio');
  29 }
  30
  31 function showDrawingEditor(mceEditor, selectedNode = null) {
  32     pageEditor = mceEditor;
  33     currentNode = selectedNode;
  34     DrawIO.show(options.drawioUrl, drawingInit, updateContent);
  35 }
  36
  37 async function updateContent(pngData) {
  38     const id = "image-" + Math.random().toString(16).slice(2);
  39     const loadingImage = window.baseUrl('/loading.gif');
  40
  41     const handleUploadError = (error) => {
  42         if (error.status === 413) {
  43             window.$events.emit('error', options.translations.serverUploadLimitText);
  44         } else {
  45             window.$events.emit('error', options.translations.imageUploadErrorText);
  46         }
  47         console.log(error);
  48     };
  49
  50     // Handle updating an existing image
  51     if (currentNode) {
  52         DrawIO.close();
  53         let imgElem = currentNode.querySelector('img');
  54         try {
  55             const img = await DrawIO.upload(pngData, options.pageId);
  56             pageEditor.dom.setAttrib(imgElem, 'src', img.url);
  57             pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id);
  58         } catch (err) {
  59             handleUploadError(err);
  60         }
  61         return;
  62     }
  63
  64     setTimeout(async () => {
  65         pageEditor.insertContent(`<div drawio-diagram contenteditable="false"><img src="${loadingImage}" id="${id}"></div>`);
  66         DrawIO.close();
  67         try {
  68             const img = await DrawIO.upload(pngData, options.pageId);
  69             pageEditor.dom.setAttrib(id, 'src', img.url);
  70             pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id);
  71         } catch (err) {
  72             pageEditor.dom.remove(id);
  73             handleUploadError(err);
  74         }
  75     }, 5);
  76 }
  77
  78
  79 function drawingInit() {
  80     if (!currentNode) {
  81         return Promise.resolve('');
  82     }
  83
  84     let drawingId = currentNode.getAttribute('drawio-diagram');
  85     return DrawIO.load(drawingId);
  86 }
  87
  88 /**
  89  *
  90  * @param {WysiwygConfigOptions} providedOptions
  91  * @return {function(Editor, string)}
  92  */
  93 export function getPlugin(providedOptions) {
  94     options = providedOptions;
  95     return function(editor, url) {
  96
  97         editor.addCommand('drawio', () => {
  98             const selectedNode = editor.selection.getNode();
  99             showDrawingEditor(editor, isDrawing(selectedNode) ? selectedNode : null);
 100         });
 101
 102         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>`)
 103
 104         editor.ui.registry.addSplitButton('drawio', {
 105             tooltip: 'Insert/edit drawing',
 106             icon: 'diagram',
 107             onAction() {
 108                 editor.execCommand('drawio');
 109             },
 110             fetch(callback) {
 111                 callback([
 112                     {
 113                         type: 'choiceitem',
 114                         text: 'Drawing manager',
 115                         value: 'drawing-manager',
 116                     }
 117                 ]);
 118             },
 119             onItemAction(api, value) {
 120                 if (value === 'drawing-manager') {
 121                     const selectedNode = editor.selection.getNode();
 122                     showDrawingManager(editor, isDrawing(selectedNode) ? selectedNode : null);
 123                 }
 124             }
 125         });
 126
 127         editor.on('dblclick', event => {
 128             let selectedNode = editor.selection.getNode();
 129             if (!isDrawing(selectedNode)) return;
 130             showDrawingEditor(editor, selectedNode);
 131         });
 132
 133         editor.on('SetContent', function () {
 134             const drawings = editor.dom.select('body > div[drawio-diagram]');
 135             if (!drawings.length) return;
 136
 137             editor.undoManager.transact(function () {
 138                 drawings.each((index, elem) => {
 139                     elem.setAttribute('contenteditable', 'false');
 140                 });
 141             });
 142         });
 143
 144     };
 145 }