Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-07-08 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed code-block drag+drop handling

Browse Source 
- 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:
Dan Brown 2020-02-15 21:37:41 +00:00
parent 29cc35a304
commit 54a4c6e678
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
1 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
resources/js/components/wysiwyg-editor.js
View File

@ -593,6 +593,7 @@ class WysiwygEditor {
registerEditorShortcuts(editor);
let wrap;
let draggedContentEditable;
function hasTextContent(node) {
return node && !!( node.textContent || node.innerText );
@ -601,12 +602,19 @@ class WysiwygEditor {
editor.on('dragstart', function () {
let node = editor.selection.getNode();
if (node.nodeName !== 'IMG') return;
wrap = editor.dom.getParent(node, '.mceTemp');
if (node.nodeName === 'IMG') {
wrap = editor.dom.getParent(node, '.mceTemp');
if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) {
wrap = node.parentNode;
if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) {
wrap = node.parentNode;
}
}
// Track dragged contenteditable blocks
if (node.hasAttribute('contenteditable') && node.getAttribute('contenteditable') === 'false') {
draggedContentEditable = node;
}
});
editor.on('drop', function (event) {
@ -614,7 +622,7 @@ class WysiwygEditor {
rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
// Template insertion
const templateId = event.dataTransfer.getData('bookstack/template');
const templateId = event.dataTransfer && event.dataTransfer.getData('bookstack/template');
if (templateId) {
event.preventDefault();
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()) {
editorPaste(event, editor, context);
}