github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-28 19:06:39 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Merge branch 'drawing_updates'

Browse Source
This commit is contained in:
Dan Brown
2018-05-27 19:42:25 +01:00
parent 9ec114641c 2bd6ba9895
commit 6b84a76af1
35 changed files with 538 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
resources/assets/js/components/markdown-editor.js
View File

@ -52,6 +52,10 @@ class MarkdownEditor {
let action = button.getAttribute('data-action');
if (action === 'insertImage') this.actionInsertImage();
if (action === 'insertLink') this.actionShowLinkSelector();
if (action === 'insertDrawing' && event.ctrlKey) {
this.actionShowImageManager();
return;
}
if (action === 'insertDrawing') this.actionStartDrawing();
});
@ -293,7 +297,14 @@ class MarkdownEditor {
this.cm.focus();
this.cm.replaceSelection(newText);
this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);
});
}, 'gallery');
}
actionShowImageManager() {
let cursorPos = this.cm.getCursor('from');
window.ImageManager.show(image => {
this.insertDrawing(image, cursorPos);
}, 'drawio');
}
// Show the popup link selector and insert a link when finished
@ -324,10 +335,7 @@ class MarkdownEditor {
};
window.$http.post(window.baseUrl('/images/drawing/upload'), data).then(resp => {
let newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url}"></div>`;
this.cm.focus();
this.cm.replaceSelection(newText);
this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);
this.insertDrawing(resp.data, cursorPos);
DrawIO.close();
}).catch(err => {
window.$events.emit('error', trans('errors.image_upload_error'));
@ -336,6 +344,13 @@ class MarkdownEditor {
});
}
insertDrawing(image, originalCursor) {
let newText = `<div drawio-diagram="${image.id}"><img src="${image.url}"></div>`;
this.cm.focus();
this.cm.replaceSelection(newText);
this.cm.setCursor(originalCursor.line, originalCursor.ch + newText.length);
}
// Show draw.io if enabled and handle save.
actionEditDrawing(imgContainer) {
if (document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') !== 'true') return;
@ -353,8 +368,8 @@ class MarkdownEditor {
uploaded_to: Number(document.getElementById('page-editor').getAttribute('page-id'))
};
window.$http.put(window.baseUrl(`/images/drawing/upload/${drawingId}`), data).then(resp => {
let newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url + `?updated=${Date.now()}`}"></div>`;
window.$http.post(window.baseUrl(`/images/drawing/upload`), data).then(resp => {
let newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url}"></div>`;
let newContent = this.cm.getValue().split('\n').map(line => {
if (line.indexOf(`drawio-diagram="${drawingId}"`) !== -1) {
return newText;

43
resources/assets/js/components/wysiwyg-editor.js
View File

@ -221,8 +221,6 @@ function codePlugin() {
function drawIoPlugin() {
const drawIoUrl = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&proto=json';
let iframe = null;
let pageEditor = null;
let currentNode = null;
@ -230,6 +228,22 @@ function drawIoPlugin() {
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 = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`;
pageEditor.insertContent(imgHTML);
}
}, 'drawio');
}
function showDrawingEditor(mceEditor, selectedNode = null) {
pageEditor = mceEditor;
currentNode = selectedNode;
@ -248,9 +262,9 @@ function drawIoPlugin() {
if (currentNode) {
DrawIO.close();
let imgElem = currentNode.querySelector('img');
let drawingId = currentNode.getAttribute('drawio-diagram');
window.$http.put(window.baseUrl(`/images/drawing/upload/${drawingId}`), data).then(resp => {
pageEditor.dom.setAttrib(imgElem, 'src', `${resp.data.url}?updated=${Date.now()}`);
window.$http.post(window.baseUrl(`/images/drawing/upload`), data).then(resp => {
pageEditor.dom.setAttrib(imgElem, 'src', resp.data.url);
pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', resp.data.id);
}).catch(err => {
window.$events.emit('error', trans('errors.image_upload_error'));
console.log(err);
@ -287,13 +301,24 @@ function drawIoPlugin() {
window.tinymce.PluginManager.add('drawio', function(editor, url) {
editor.addCommand('drawio', () => {
showDrawingEditor(editor);
let selectedNode = editor.selection.getNode();
showDrawingEditor(editor, isDrawing(selectedNode) ? selectedNode : null);
});
editor.addButton('drawio', {
type: 'splitbutton',
tooltip: 'Drawing',
image: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMDAwMDAiICB4bWxucz0iaHR0cDovL3d3 dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTIzIDdWMWgtNnYySDdWMUgxdjZoMnYx MEgxdjZoNnYtMmgxMHYyaDZ2LTZoLTJWN2gyek0zIDNoMnYySDNWM3ptMiAxOEgzdi0yaDJ2Mnpt MTItMkg3di0ySDVWN2gyVjVoMTB2MmgydjEwaC0ydjJ6bTQgMmgtMnYtMmgydjJ6TTE5IDVWM2gy djJoLTJ6bS01LjI3IDloLTMuNDlsLS43MyAySDcuODlsMy40LTloMS40bDMuNDEgOWgtMS42M2wt Ljc0LTJ6bS0zLjA0LTEuMjZoMi42MUwxMiA4LjkxbC0xLjMxIDMuODN6Ii8+CiAgICA8cGF0aCBk PSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPg==`,
cmd: 'drawio'
cmd: 'drawio',
menu: [
{
text: 'Drawing Manager',
onclick() {
let selectedNode = editor.selection.getNode();
showDrawingManager(editor, isDrawing(selectedNode) ? selectedNode : null);
}
}
]
});
editor.on('dblclick', event => {
@ -443,7 +468,7 @@ class WysiwygEditor {
html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
html += '</a>';
win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
});
}, 'gallery');
}
},
@ -522,7 +547,7 @@ class WysiwygEditor {
html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
html += '</a>';
editor.execCommand('mceInsertContent', false, html);
});
}, 'gallery');
}
});

47
resources/assets/js/vues/image-manager.js
View File

@ -26,25 +26,32 @@ const data = {
imageUpdateSuccess: false,
imageDeleteSuccess: false,
deleteConfirm: false,
};
const methods = {
show(providedCallback) {
show(providedCallback, imageType = null) {
callback = providedCallback;
this.showing = true;
this.$el.children[0].components.overlay.show();
// Get initial images if they have not yet been loaded in.
if (dataLoaded) return;
if (dataLoaded && imageType === this.imageType) return;
if (imageType) {
this.imageType = imageType;
this.resetState();
}
this.fetchData();
dataLoaded = true;
},
hide() {
if (this.$refs.dropzone) {
this.$refs.dropzone.onClose();
}
this.showing = false;
this.selectedImage = false;
this.$refs.dropzone.onClose();
this.$el.children[0].components.overlay.hide();
},
@ -62,13 +69,18 @@ const methods = {
},
setView(viewName) {
this.view = viewName;
this.resetState();
this.fetchData();
},
resetState() {
this.cancelSearch();
this.images = [];
this.hasMore = false;
this.deleteConfirm = false;
page = 0;
this.view = viewName;
baseUrl = window.baseUrl(`/images/${this.imageType}/${viewName}/`);
this.fetchData();
baseUrl = window.baseUrl(`/images/${this.imageType}/${this.view}/`);
},
searchImages() {
@ -89,6 +101,7 @@ const methods = {
},
cancelSearch() {
if (!this.searching) return;
this.searching = false;
this.searchTerm = '';
this.images = preSearchImages;
@ -105,6 +118,7 @@ const methods = {
this.callbackAndHide(image);
} else {
this.selectedImage = image;
this.deleteConfirm = false;
this.dependantPages = false;
}
@ -134,17 +148,22 @@ const methods = {
},
deleteImage() {
let force = this.dependantPages !== false;
let url = window.baseUrl('/images/' + this.selectedImage.id);
if (force) url += '?force=true';
this.$http.delete(url).then(response => {
if (!this.deleteConfirm) {
let url = window.baseUrl(`/images/usage/${this.selectedImage.id}`);
this.$http.get(url).then(resp => {
this.dependantPages = resp.data;
}).catch(console.error).then(() => {
this.deleteConfirm = true;
});
return;
}
this.$http.delete(`/images/${this.selectedImage.id}`).then(resp => {
this.images.splice(this.images.indexOf(this.selectedImage), 1);
this.selectedImage = false;
this.$events.emit('success', trans('components.image_delete_success'));
}).catch(error=> {
if (error.response.status === 400) {
this.dependantPages = error.response.data;
}
this.deleteConfirm = false;
});
},