mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-30 15:42:41 +01:00
Made it possible to drag in template content
This commit is contained in:
parent
5979f6667b
commit
fde3867313
@ -222,16 +222,30 @@ class MarkdownEditor {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Handle images on drag-drop
|
// Handle image & content drag n drop
|
||||||
cm.on('drop', (cm, event) => {
|
cm.on('drop', (cm, event) => {
|
||||||
|
|
||||||
|
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.stopPropagation();
|
||||||
event.preventDefault();
|
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++) {
|
for (let i = 0; i < event.dataTransfer.files.length; i++) {
|
||||||
uploadImage(event.dataTransfer.files[i]);
|
uploadImage(event.dataTransfer.files[i]);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Helper to replace editor content
|
// Helper to replace editor content
|
||||||
|
@ -16,6 +16,9 @@ class TemplateManager {
|
|||||||
// Template list item content click
|
// Template list item content click
|
||||||
DOM.onChildEvent(this.elem, '.template-item-content', 'click', this.handleTemplateItemClick.bind(this));
|
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();
|
this.setupSearchBox();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -24,6 +27,12 @@ class TemplateManager {
|
|||||||
this.insertTemplate(templateId, 'replace');
|
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) {
|
handleTemplateActionClick(event, actionButton) {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
||||||
|
@ -608,6 +608,18 @@ class WysiwygEditor {
|
|||||||
let dom = editor.dom,
|
let dom = editor.dom,
|
||||||
rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
|
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.
|
// Don't allow anything to be dropped in a captioned image.
|
||||||
if (dom.getParent(rng.startContainer, '.mceTemp')) {
|
if (dom.getParent(rng.startContainer, '.mceTemp')) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
@ -61,6 +61,7 @@
|
|||||||
|
|
||||||
.page-content.mce-content-body {
|
.page-content.mce-content-body {
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fix to prevent 'No color' option from not being clickable.
|
// Fix to prevent 'No color' option from not being clickable.
|
||||||
|
Loading…
Reference in New Issue
Block a user