mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-09-06 01:22:23 +00:00
Fixed code-block drag+drop handling
- Added custom handling, Tracks if contenteditable blocks are being dragged. On drop the selection location will be roughly checked to put the block above or below the cursor block root element.
This commit is contained in:
parent
29cc35a304
commit
54a4c6e678
@ -593,6 +593,7 @@ class WysiwygEditor {
|
|||||||
registerEditorShortcuts(editor);
|
registerEditorShortcuts(editor);
|
||||||
|
|
||||||
let wrap;
|
let wrap;
|
||||||
|
let draggedContentEditable;
|
||||||
|
|
||||||
function hasTextContent(node) {
|
function hasTextContent(node) {
|
||||||
return node && !!( node.textContent || node.innerText );
|
return node && !!( node.textContent || node.innerText );
|
||||||
@ -601,12 +602,19 @@ class WysiwygEditor {
|
|||||||
editor.on('dragstart', function () {
|
editor.on('dragstart', function () {
|
||||||
let node = editor.selection.getNode();
|
let node = editor.selection.getNode();
|
||||||
|
|
||||||
if (node.nodeName !== 'IMG') return;
|
if (node.nodeName === 'IMG') {
|
||||||
wrap = editor.dom.getParent(node, '.mceTemp');
|
wrap = editor.dom.getParent(node, '.mceTemp');
|
||||||
|
|
||||||
if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) {
|
if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) {
|
||||||
wrap = node.parentNode;
|
wrap = node.parentNode;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Track dragged contenteditable blocks
|
||||||
|
if (node.hasAttribute('contenteditable') && node.getAttribute('contenteditable') === 'false') {
|
||||||
|
draggedContentEditable = node;
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
editor.on('drop', function (event) {
|
editor.on('drop', function (event) {
|
||||||
@ -614,7 +622,7 @@ class WysiwygEditor {
|
|||||||
rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
|
rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
|
||||||
|
|
||||||
// Template insertion
|
// Template insertion
|
||||||
const templateId = event.dataTransfer.getData('bookstack/template');
|
const templateId = event.dataTransfer && event.dataTransfer.getData('bookstack/template');
|
||||||
if (templateId) {
|
if (templateId) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
window.$http.get(`/templates/${templateId}`).then(resp => {
|
window.$http.get(`/templates/${templateId}`).then(resp => {
|
||||||
@ -638,6 +646,22 @@ class WysiwygEditor {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Handle contenteditable section drop
|
||||||
|
if (!event.isDefaultPrevented() && draggedContentEditable) {
|
||||||
|
event.preventDefault();
|
||||||
|
editor.undoManager.transact(function () {
|
||||||
|
const selectedNode = editor.selection.getNode();
|
||||||
|
const range = editor.selection.getRng();
|
||||||
|
const selectedNodeRoot = selectedNode.closest('body > *');
|
||||||
|
if (range.startOffset > (range.startContainer.length / 2)) {
|
||||||
|
editor.$(selectedNodeRoot).after(draggedContentEditable);
|
||||||
|
} else {
|
||||||
|
editor.$(selectedNodeRoot).before(draggedContentEditable);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle image insert
|
||||||
if (!event.isDefaultPrevented()) {
|
if (!event.isDefaultPrevented()) {
|
||||||
editorPaste(event, editor, context);
|
editorPaste(event, editor, context);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user