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.

diff --git a/app/Uploads/Attachment.php b/app/Uploads/Attachment.php
index 6e55003a96b5bbf1dceb4731bcce6440aff5a30d..3367594ef4aee6782ec4051dbb8efc69f3051584 100644 (file)
--- a/app/Uploads/Attachment.php
+++ b/app/Uploads/Attachment.php
@@ -38,4 +38,14 @@ class Attachment extends Ownable
         }
         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
+    {
+
+    }
 }

diff --git a/resources/js/components/sortable-list.js b/resources/js/components/sortable-list.js
index d2b39ff95987006fe9e7dd8e5a8e0892ced2aefd..db50352b8ef3c9573aae382eba8271a3f7f2e6c0 100644 (file)
--- a/resources/js/components/sortable-list.js
+++ b/resources/js/components/sortable-list.js
@@ -2,6 +2,11 @@ import Sortable from "sortablejs";
 
 /**
  * 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}
  */
 class SortableList {
@@ -14,7 +19,21 @@ class SortableList {
             animation: 150,
             onSort: () => {
                 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,
         });
     }
 }

diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js
index 98a5e95c413af65b71a492d96d025f2acdc6ff97..92a678fbdc311eaf42cd477f40d52cd0ca56e7d2 100644 (file)
--- a/resources/js/components/wysiwyg-editor.js
+++ b/resources/js/components/wysiwyg-editor.js
@@ -639,6 +639,7 @@ class WysiwygEditor {
                 });
 
                 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 06ab5f912b89e7046fbb91bb7bd3f1daa954a3f7..671864a3bbb40b4b7916d4b200f399100e8a319c 100644 (file)
--- a/resources/views/attachments/manager-list.blade.php
+++ b/resources/views/attachments/manager-list.blade.php
@@ -3,6 +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()]) }}"
              class="card drag-card">
             <div class="handle">@icon('grip')</div>
             <div class="py-s">