Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-30 15:42:41 +01:00
Code Issues Releases Wiki Activity

Made it possible to drag in template content

Browse Source
This commit is contained in:
Dan Brown 2019-08-26 15:34:03 +01:00
parent 5979f6667b
commit fde3867313
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
4 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -222,16 +222,30 @@ class MarkdownEditor {
}
});
// Handle images on drag-drop
// Handle image & content drag n drop
cm.on('drop', (cm, event) => {
event.stopPropagation();
event.preventDefault();
let cursorPos = cm.coordsChar({left: event.pageX, top: event.pageY});
cm.setCursor(cursorPos);
if (!event.dataTransfer || !event.dataTransfer.files) return;
for (let i = 0; i < event.dataTransfer.files.length; i++) {
uploadImage(event.dataTransfer.files[i]);
const templateId = event.dataTransfer.getData('bookstack/template');
if (templateId) {
const cursorPos = cm.coordsChar({left: event.pageX, top: event.pageY});
cm.setCursor(cursorPos);
event.preventDefault();
window.$http.get(`/templates/${templateId}`).then(resp => {
const content = resp.data.markdown || resp.data.html;
cm.replaceSelection(content);
});
}
if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length > 0) {
const cursorPos = cm.coordsChar({left: event.pageX, top: event.pageY});
cm.setCursor(cursorPos);
event.stopPropagation();
event.preventDefault();
for (let i = 0; i < event.dataTransfer.files.length; i++) {
uploadImage(event.dataTransfer.files[i]);
}
}
});
// Helper to replace editor content

9
resources/assets/js/components/template-manager.js
View File

@ -16,6 +16,9 @@ class TemplateManager {
// Template list item content click
DOM.onChildEvent(this.elem, '.template-item-content', 'click', this.handleTemplateItemClick.bind(this));
// Template list item drag start
DOM.onChildEvent(this.elem, '.template-item', 'dragstart', this.handleTemplateItemDragStart.bind(this));
this.setupSearchBox();
}
@ -24,6 +27,12 @@ class TemplateManager {
this.insertTemplate(templateId, 'replace');
}
handleTemplateItemDragStart(event, templateItem) {
const templateId = templateItem.closest('[template-id]').getAttribute('template-id');
event.dataTransfer.setData('bookstack/template', templateId);
event.dataTransfer.setData('text/plain', templateId);
}
handleTemplateActionClick(event, actionButton) {
event.stopPropagation();

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

@ -608,6 +608,18 @@ class WysiwygEditor {
let dom = editor.dom,
rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
// Template insertion
const templateId = event.dataTransfer.getData('bookstack/template');
if (templateId) {
event.preventDefault();
window.$http.get(`/templates/${templateId}`).then(resp => {
editor.selection.setRng(rng);
editor.undoManager.transact(function () {
editor.execCommand('mceInsertContent', false, resp.data.html);
});
});
}
// Don't allow anything to be dropped in a captioned image.
if (dom.getParent(rng.startContainer, '.mceTemp')) {
event.preventDefault();

1
resources/assets/sass/_tinymce.scss
View File

@ -61,6 +61,7 @@
.page-content.mce-content-body {
padding-top: 16px;
outline: none;
}
// Fix to prevent 'No color' option from not being clickable.