Started attachment drag/drop

Currently fighting between sortable and tinymce mechanisms which prevent
this working due to the different events stopping the drop event while
needing the dragover for cursor placement.
This commit is contained in:
Dan Brown 2020-07-28 10:45:28 +01:00
parent 76fcbd3752
commit 18f406d97b
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
4 changed files with 32 additions and 1 deletions

View File

@ -38,4 +38,14 @@ class Attachment extends Ownable
} }
return url('/attachments/' . $this->id); return url('/attachments/' . $this->id);
} }
public function htmlLink(): string
{
return '<a target="_blank" href="'.e($this->getUrl()).'">'.e($this->name).'</a>';
}
public function markdownLink(): string
{
}
} }

View File

@ -2,6 +2,11 @@ import Sortable from "sortablejs";
/** /**
* SortableList * SortableList
*
* Can have data set on the dragged items by setting a 'data-drag-content' attribute.
* This attribute must contain JSON where the keys are content types and the values are
* the data to set on the data-transfer.
*
* @extends {Component} * @extends {Component}
*/ */
class SortableList { class SortableList {
@ -14,7 +19,21 @@ class SortableList {
animation: 150, animation: 150,
onSort: () => { onSort: () => {
this.$emit('sort', {ids: sortable.toArray()}); this.$emit('sort', {ids: sortable.toArray()});
} },
setData(dataTransferItem, dragEl) {
console.log('cat');
const jsonContent = dragEl.getAttribute('data-drag-content');
if (jsonContent) {
const contentByType = JSON.parse(jsonContent);
dataTransferItem.setData('bookstack/json', jsonContent);
for (const [type, content] of Object.entries(contentByType)) {
dataTransferItem.setData(type, content);
}
}
},
revertOnSpill: true,
dropBubble: true,
dragoverBubble: false,
}); });
} }
} }

View File

@ -639,6 +639,7 @@ class WysiwygEditor {
}); });
editor.on('drop', function (event) { editor.on('drop', function (event) {
console.log('drop')
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());

View File

@ -3,6 +3,7 @@
<div component="ajax-delete-row" <div component="ajax-delete-row"
option:ajax-delete-row:url="{{ url('/attachments/' . $attachment->id) }}" option:ajax-delete-row:url="{{ url('/attachments/' . $attachment->id) }}"
data-id="{{ $attachment->id }}" data-id="{{ $attachment->id }}"
data-drag-content="{{ json_encode(['text/html' => $attachment->htmlLink()]) }}"
class="card drag-card"> class="card drag-card">
<div class="handle">@icon('grip')</div> <div class="handle">@icon('grip')</div>
<div class="py-s"> <div class="py-s">