From 493d8027cd99656cdbeb92c01da99b5baa485a09 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Mon, 29 Apr 2024 19:21:13 +0100
Subject: [PATCH] Attachments: Fixed drag into editor in Chrome

Seemed to be chrome specific from testing.
Required editors to have preventDefault called on dragover.
Tested in Chrome, FF, & Safari.
Tested in both editors, and re-tested text/image drop to ensure still
works.

Fixed #4975
---
 resources/js/markdown/codemirror.js         |  4 ++++
 resources/js/wysiwyg/drop-paste-handling.js | 15 +++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/resources/js/markdown/codemirror.js b/resources/js/markdown/codemirror.js
index 9d54c19d7..2ea944865 100644
--- a/resources/js/markdown/codemirror.js
+++ b/resources/js/markdown/codemirror.js
@@ -44,6 +44,10 @@ export async function init(editor) {
                 editor.actions.insertClipboardImages(clipboardImages, event.pageX, event.pageY);
             }
         },
+        // Handle dragover event to allow as drop-target in chrome
+        dragover: event => {
+            event.preventDefault();
+        },
         // Handle image paste
         paste: event => {
             const clipboard = new Clipboard(event.clipboardData || event.dataTransfer);
diff --git a/resources/js/wysiwyg/drop-paste-handling.js b/resources/js/wysiwyg/drop-paste-handling.js
index 9668692c8..172ad970f 100644
--- a/resources/js/wysiwyg/drop-paste-handling.js
+++ b/resources/js/wysiwyg/drop-paste-handling.js
@@ -149,11 +149,26 @@ function drop(editor, options, event) {
     wrap = null;
 }
 
+/**
+ * @param {Editor} editor
+ * @param {DragEvent} event
+ */
+function dragOver(editor, event) {
+    // This custom handling essentially emulates the default TinyMCE behaviour while allowing us
+    // to specifically call preventDefault on the event to allow the drop of custom elements.
+    event.preventDefault();
+    editor.focus();
+    const rangeUtils = window.tinymce.dom.RangeUtils;
+    const range = rangeUtils.getCaretRangeFromPoint(event.clientX ?? 0, event.clientY ?? 0, editor.getDoc());
+    editor.selection.setRng(range);
+}
+
 /**
  * @param {Editor} editor
  * @param {WysiwygConfigOptions} options
  */
 export function listenForDragAndPaste(editor, options) {
+    editor.on('dragover', event => dragOver(editor, event));
     editor.on('dragstart', () => dragStart(editor));
     editor.on('drop', event => drop(editor, options, event));
     editor.on('paste', event => paste(editor, options, event));