From c724d7b09c28c521fc5ab6a0b19e1cfbab971b27 Mon Sep 17 00:00:00 2001
From: Matt Panaro <matt.panaro@gmail.com>
Date: Sun, 12 Nov 2023 13:23:32 -0500
Subject: [PATCH] refactor drag'n'drop on search input

current default behavior is to insert additional drag & drop content into pre-existing content: e.g. first `alpha` is dropped, then `beta`; and the search-string becomes `alpbetaha`.  This change causes additional dropped content to overwrite pre-existing content entirely, such that `alpha` becomes `beta`.  Currently, drag-and-drop content in Chrome consists of the URL of the item being dragged; but in Firefox, using the `x-moz-url-desc`, if a tag or an account is dragged, then the display-text (e.g. `#somehashtag` or `@user`) will be dropped instead.  This enables the content-specific search drop-down to work on the more specific data-types (so, search for hashtag, or profile).  This functionality currently only works with Firefox, though: hence the `TODO` annotation
---
 .../features/compose/components/search.jsx    | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/app/javascript/mastodon/features/compose/components/search.jsx b/app/javascript/mastodon/features/compose/components/search.jsx
index caae965a637..35b2f401e9c 100644
--- a/app/javascript/mastodon/features/compose/components/search.jsx
+++ b/app/javascript/mastodon/features/compose/components/search.jsx
@@ -165,6 +165,25 @@ class Search extends PureComponent {
     this.setState({ expanded: false, selectedOption: -1 });
   };
 
+  handleDragOver = (e) => {
+    e.preventDefault();
+  };
+  handleDrop = (e) => {
+    const { onChange } = this.props;
+
+    e.preventDefault();
+
+    this.setState({ expanded: true, selectedOption: -1 });
+
+    // TODO: update the type parameter if/when `url-desc` is standardized
+    let query = e.dataTransfer.getData('text/x-moz-url-desc') ||
+        e.dataTransfer.getData('text/uri-list') ||
+        e.dataTransfer.getData('text/plain');
+    onChange(query);
+    this._calculateOptions(query);
+    e.target.focus();
+  };
+
   handleHashtagClick = () => {
     const { value, onClickSearchResult, history } = this.props;
 
@@ -333,6 +352,8 @@ class Search extends PureComponent {
           onKeyDown={this.handleKeyDown}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
+          onDragOver={this.handleDragOver}
+          onDrop={this.handleDrop}
         />
 
         <div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>