mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 03:35:35 +00: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) => {
|
||||
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
|
||||
|
@ -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();
|
||||
|
||||
|
@ -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();
|
||||
|
@ -61,6 +61,7 @@
|
||||
|
||||
.page-content.mce-content-body {
|
||||
padding-top: 16px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Fix to prevent 'No color' option from not being clickable.
|
||||
|
Loading…
Reference in New Issue
Block a user