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

diff --git a/app/Uploads/Attachment.php b/app/Uploads/Attachment.php
index 3367594ef4aee6782ec4051dbb8efc69f3051584..66c032be587dca8c0a41c606df510c6e74d14479 100644 (file)
--- a/app/Uploads/Attachment.php
+++ b/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() .')';
     }
 }

diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index 6e646c72bbf32af50378697782c73c96f6ee5164..5ffe4ef4d32b18d6e352831bd0fd3b10cb41ac77 100644 (file)
--- a/resources/js/components/markdown-editor.js
+++ b/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();

diff --git a/resources/js/components/sortable-list.js b/resources/js/components/sortable-list.js
index db50352b8ef3c9573aae382eba8271a3f7f2e6c0..0af0e11c901a5b58d98f4ef7687004c117334e3d 100644 (file)
--- a/resources/js/components/sortable-list.js
+++ b/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);
                     }

diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js
index 92a678fbdc311eaf42cd477f40d52cd0ca56e7d2..05897c250dd52eb373e510f0bbad907ea1b39024 100644 (file)
--- a/resources/js/components/wysiwyg-editor.js
+++ b/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());
 

diff --git a/resources/views/attachments/manager-list.blade.php b/resources/views/attachments/manager-list.blade.php
index 671864a3bbb40b4b7916d4b200f399100e8a319c..30307ff4122515bf0b7dba1ab822b20a2f71fd40 100644 (file)
--- a/resources/views/attachments/manager-list.blade.php
+++ b/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">