Continued implementation of attachment drag+drop

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

app/Uploads/Attachment.php

@@ -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() .')';
     }
 }

resources/js/components/markdown-editor.js

@@ -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();

resources/js/components/sortable-list.js

@@ -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);
                     }

resources/js/components/wysiwyg-editor.js

@@ -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());
 

resources/views/attachments/manager-list.blade.php

@@ -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">