Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-24 03:42:32 +01:00
Code Issues Releases Wiki Activity

Continued implementation of attachment drag+drop

Browse Source 
Cannot get working in chrome reliably due to conflicting handling of
events and drag+drop API. Getting attachment drop working breaks other
parts of TinyMCE.
Implementing current work as should still work for MD editor and within
FireFox.

Related to #1460
This commit is contained in:
Dan Brown 2020-09-13 18:29:48 +01:00
parent e305ba14d9
commit ad48cd3e48
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
5 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/Uploads/Attachment.php
View File

@ -3,6 +3,13 @@
use BookStack\Entities\Page;
use BookStack\Ownable;
/**
* @property int id
* @property string name
* @property string path
* @property string extension
* @property bool external
*/
class Attachment extends Ownable
{
protected $fillable = ['name', 'order'];
@ -39,13 +46,19 @@ class Attachment extends Ownable
return url('/attachments/' . $this->id);
}
/**
* Generate a HTML link to this attachment.
*/
public function htmlLink(): string
{
return '<a target="_blank" href="'.e($this->getUrl()).'">'.e($this->name).'</a>';
}
/**
* Generate a markdown link to this attachment.
*/
public function markdownLink(): string
{
return '['. $this->name .']('. $this->getUrl() .')';
}
}

2
resources/js/components/markdown-editor.js
View File

@ -256,7 +256,7 @@ class MarkdownEditor {
}
const clipboard = new Clipboard(event.dataTransfer);
if (clipboard.hasItems()) {
if (clipboard.hasItems() && clipboard.getImages().length > 0) {
const cursorPos = cm.coordsChar({left: event.pageX, top: event.pageY});
cm.setCursor(cursorPos);
event.stopPropagation();

2
resources/js/components/sortable-list.js
View File

@ -21,11 +21,9 @@ class SortableList {
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);
}

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

@ -638,8 +638,8 @@ class WysiwygEditor {
});
// Custom drop event handling
editor.on('drop', function (event) {
console.log('drop')
let dom = editor.dom,
rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());

2
resources/views/attachments/manager-list.blade.php
View File

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