From da6a2d3b513c7ba7b4ef3fe6e5144257cee9f3cc Mon Sep 17 00:00:00 2001
From: Matt Panaro <matt.panaro@gmail.com>
Date: Tue, 31 Dec 2024 12:27:08 -0500
Subject: [PATCH 1/3] introduce drag & drop handlers to search box

without modification, default browser behavior for dropping new text on top of pre-existing text in an input field is to insert the new text in between whatever characters the mouse is pointing to at time of drop.  Instead, by adding handlers, the pre-existing content can be overwritten/replaced.  The primary use-case is for accessing quoted toots, or referenced hashtags or accounts, in the feed by searching for the linked URLs & showing the original/expanded version of them in the search results (as opposed to clicking on the links themselves and having them open in a new tab, on a potentially different mastodon server)
Since the search box is designed to actively process its input for context-clues, after the text has been dropped, an Input event is triggered to bubble up from the search-box's new handleDrop method, that will cause the handleChange method to be invoked.  This strategy was adapted from https://stackoverflow.com/a/47409362
---
 .../features/compose/components/search.tsx    | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/app/javascript/mastodon/features/compose/components/search.tsx b/app/javascript/mastodon/features/compose/components/search.tsx
index 84e11e44b5..d5f7e00baf 100644
--- a/app/javascript/mastodon/features/compose/components/search.tsx
+++ b/app/javascript/mastodon/features/compose/components/search.tsx
@@ -451,6 +451,33 @@ export const Search: React.FC<{
     setSelectedOption(-1);
   }, [setExpanded, setSelectedOption]);
 
+  const handleDragOver = useCallback(
+    (event: React.DragEvent<HTMLInputElement>) => {
+      event.preventDefault();
+    },
+    [],
+  );
+  const handleDrop = useCallback(
+    (event: React.DragEvent<HTMLInputElement>) => {
+      event.preventDefault();
+
+      handleClear();
+
+      const query =
+        event.dataTransfer.getData('URL') ||
+        event.dataTransfer.getData('text/plain');
+
+      Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value',
+      )?.set?.call(event.target, query);
+
+      event.currentTarget.focus();
+      event.target.dispatchEvent(new Event('change', { bubbles: true }));
+    },
+    [handleClear],
+  );
+
   return (
     <form className={classNames('search', { active: expanded })}>
       <input
@@ -468,6 +495,8 @@ export const Search: React.FC<{
         onKeyDown={handleKeyDown}
         onFocus={handleFocus}
         onBlur={handleBlur}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
       />
 
       <button type='button' className='search__icon' onClick={handleClear}>

From 4b28d99f16e5b098204b32b8991c343392e1c949 Mon Sep 17 00:00:00 2001
From: Matt Panaro <matt.panaro@gmail.com>
Date: Tue, 31 Dec 2024 21:32:51 -0500
Subject: [PATCH 2/3] refactor handleChange to include helper-object for
 quickActions

parameterize and move all the objects being pushed to newQuickActions (inside of handleChange) into a helper-object called QuickActionGenerators, so that handleChange isn't so many lines; it also separates the concerns a bit between parsing search input text and generating quickActions based on it
---
 .../features/compose/components/search.tsx    | 190 ++++++++++--------
 1 file changed, 106 insertions(+), 84 deletions(-)

diff --git a/app/javascript/mastodon/features/compose/components/search.tsx b/app/javascript/mastodon/features/compose/components/search.tsx
index d5f7e00baf..c38939a2d6 100644
--- a/app/javascript/mastodon/features/compose/components/search.tsx
+++ b/app/javascript/mastodon/features/compose/components/search.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState, useRef } from 'react';
+import { useCallback, useState, useRef, useMemo } from 'react';
 
 import {
   defineMessages,
@@ -252,6 +252,103 @@ export const Search: React.FC<{
     [dispatch, history],
   );
 
+  const QuickActionGenerators: {
+    couldBeURL: (url: string) => SearchOption;
+    couldBeHashtag: (tag: string) => SearchOption;
+    couldBeUsername: (username: string) => SearchOption;
+    couldBeStatusSearch: (status: string) => SearchOption;
+    accountSearch: (account: string) => SearchOption;
+  } = useMemo(
+    () => ({
+      couldBeURL: (url: string): SearchOption => ({
+        key: 'open-url',
+        label: (
+          <FormattedMessage
+            id='search.quick_action.open_url'
+            defaultMessage='Open URL in Mastodon'
+          />
+        ),
+        action: () => {
+          dispatch(openURL({ url: url }))
+            .then((result) => {
+              if (isFulfilled(result)) {
+                if (result.payload.accounts[0]) {
+                  history.push(`/@${result.payload.accounts[0].acct}`);
+                } else if (result.payload.statuses[0]) {
+                  history.push(
+                    `/@${result.payload.statuses[0].account.acct}/${result.payload.statuses[0].id}`,
+                  );
+                }
+              }
+              return void 0;
+            })
+            .catch((e: unknown) => {
+              console.error(e);
+            })
+            .finally(() => {
+              unfocus();
+            });
+        },
+      }),
+      couldBeHashtag: (tag: string): SearchOption => ({
+        key: 'go-to-hashtag',
+        label: (
+          <FormattedMessage
+            id='search.quick_action.go_to_hashtag'
+            defaultMessage='Go to hashtag {x}'
+            values={{ x: <mark>#{tag}</mark> }}
+          />
+        ),
+        action: () => {
+          history.push(`/tags/${tag}`);
+          void dispatch(clickSearchResult({ q: tag, type: 'hashtag' }));
+          unfocus();
+        },
+      }),
+      couldBeUsername: (username: string): SearchOption => ({
+        key: 'go-to-account',
+        label: (
+          <FormattedMessage
+            id='search.quick_action.go_to_account'
+            defaultMessage='Go to profile {x}'
+            values={{ x: <mark>@{username}</mark> }}
+          />
+        ),
+        action: () => {
+          history.push(`/@${username}`);
+          void dispatch(clickSearchResult({ q: username, type: 'account' }));
+          unfocus();
+        },
+      }),
+      couldBeStatusSearch: (status: string): SearchOption => ({
+        key: 'status-search',
+        label: (
+          <FormattedMessage
+            id='search.quick_action.status_search'
+            defaultMessage='Posts matching {x}'
+            values={{ x: <mark>{status}</mark> }}
+          />
+        ),
+        action: () => {
+          submit(status, 'statuses');
+        },
+      }),
+      accountSearch: (account: string): SearchOption => ({
+        key: 'account-search',
+        label: (
+          <FormattedMessage
+            id='search.quick_action.account_search'
+            defaultMessage='Profiles matching {x}'
+            values={{ x: <mark>{account}</mark> }}
+          />
+        ),
+        action: () => {
+          submit(account, 'accounts');
+        },
+      }),
+    }),
+    [dispatch, history, submit],
+  );
   const handleChange = useCallback(
     ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
       setValue(value);
@@ -264,30 +361,7 @@ export const Search: React.FC<{
           trimmedValue.startsWith('https://') && !trimmedValue.includes(' ');
 
         if (couldBeURL) {
-          newQuickActions.push({
-            key: 'open-url',
-            label: (
-              <FormattedMessage
-                id='search.quick_action.open_url'
-                defaultMessage='Open URL in Mastodon'
-              />
-            ),
-            action: async () => {
-              const result = await dispatch(openURL({ url: trimmedValue }));
-
-              if (isFulfilled(result)) {
-                if (result.payload.accounts[0]) {
-                  history.push(`/@${result.payload.accounts[0].acct}`);
-                } else if (result.payload.statuses[0]) {
-                  history.push(
-                    `/@${result.payload.statuses[0].account.acct}/${result.payload.statuses[0].id}`,
-                  );
-                }
-              }
-
-              unfocus();
-            },
-          });
+          newQuickActions.push(QuickActionGenerators.couldBeURL(trimmedValue));
         }
 
         const couldBeHashtag =
@@ -295,81 +369,29 @@ export const Search: React.FC<{
           trimmedValue.match(HASHTAG_REGEX);
 
         if (couldBeHashtag) {
-          newQuickActions.push({
-            key: 'go-to-hashtag',
-            label: (
-              <FormattedMessage
-                id='search.quick_action.go_to_hashtag'
-                defaultMessage='Go to hashtag {x}'
-                values={{ x: <mark>#{trimmedValue.replace(/^#/, '')}</mark> }}
-              />
-            ),
-            action: () => {
-              const query = trimmedValue.replace(/^#/, '');
-              history.push(`/tags/${query}`);
-              void dispatch(clickSearchResult({ q: query, type: 'hashtag' }));
-              unfocus();
-            },
-          });
+          newQuickActions.push(QuickActionGenerators.couldBeHashtag(trimmedValue.replace(/^#/, '')));
         }
 
         const couldBeUsername = /^@?[a-z0-9_-]+(@[^\s]+)?$/i.exec(trimmedValue);
 
         if (couldBeUsername) {
-          newQuickActions.push({
-            key: 'go-to-account',
-            label: (
-              <FormattedMessage
-                id='search.quick_action.go_to_account'
-                defaultMessage='Go to profile {x}'
-                values={{ x: <mark>@{trimmedValue.replace(/^@/, '')}</mark> }}
-              />
-            ),
-            action: () => {
-              const query = trimmedValue.replace(/^@/, '');
-              history.push(`/@${query}`);
-              void dispatch(clickSearchResult({ q: query, type: 'account' }));
-              unfocus();
-            },
-          });
+          newQuickActions.push(QuickActionGenerators.couldBeUsername(trimmedValue.replace(/^@/, '')));
         }
 
         const couldBeStatusSearch = searchEnabled;
 
         if (couldBeStatusSearch && signedIn) {
-          newQuickActions.push({
-            key: 'status-search',
-            label: (
-              <FormattedMessage
-                id='search.quick_action.status_search'
-                defaultMessage='Posts matching {x}'
-                values={{ x: <mark>{trimmedValue}</mark> }}
-              />
-            ),
-            action: () => {
-              submit(trimmedValue, 'statuses');
-            },
-          });
+          newQuickActions.push(
+            QuickActionGenerators.couldBeStatusSearch(trimmedValue),
+          );
         }
 
-        newQuickActions.push({
-          key: 'account-search',
-          label: (
-            <FormattedMessage
-              id='search.quick_action.account_search'
-              defaultMessage='Profiles matching {x}'
-              values={{ x: <mark>{trimmedValue}</mark> }}
-            />
-          ),
-          action: () => {
-            submit(trimmedValue, 'accounts');
-          },
-        });
+        newQuickActions.push(QuickActionGenerators.accountSearch(trimmedValue));
       }
 
       setQuickActions(newQuickActions);
     },
-    [dispatch, history, signedIn, setValue, setQuickActions, submit],
+    [signedIn, setValue, setQuickActions, QuickActionGenerators],
   );
 
   const handleClear = useCallback(() => {

From 7fb47a4866bc5fd73449f19beb7c1052c3ea2b47 Mon Sep 17 00:00:00 2001
From: Matt Panaro <matt.panaro@gmail.com>
Date: Tue, 31 Dec 2024 22:29:19 -0500
Subject: [PATCH 3/3] refactor handleChange to extract context from URLs

previously, the search box would only add new quickActions if raw `@` or `#` characters were found in the search string; but in the case of a drag and drop, or a copy-paste, of a URL into the search bar, no elements of the URL's path would be recognized for potential quickActions.
This change enables identification of possible hashtags or user accounts in a (presumed) mastodon URL; augmenting id by special input characters.
---
 .../features/compose/components/search.tsx    | 35 ++++++++++++++++---
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/javascript/mastodon/features/compose/components/search.tsx b/app/javascript/mastodon/features/compose/components/search.tsx
index c38939a2d6..3ff1691d82 100644
--- a/app/javascript/mastodon/features/compose/components/search.tsx
+++ b/app/javascript/mastodon/features/compose/components/search.tsx
@@ -360,22 +360,47 @@ export const Search: React.FC<{
         const couldBeURL =
           trimmedValue.startsWith('https://') && !trimmedValue.includes(' ');
 
+        let mastoPath;
         if (couldBeURL) {
           newQuickActions.push(QuickActionGenerators.couldBeURL(trimmedValue));
+
+          // presume URL is from a mastodon server; not just some random web URL
+          mastoPath = new URL(trimmedValue).pathname.replace(/^\//, '');
+        } else {
+          mastoPath = '';
         }
 
         const couldBeHashtag =
           (trimmedValue.startsWith('#') && trimmedValue.length > 1) ||
-          trimmedValue.match(HASHTAG_REGEX);
+          trimmedValue.match(HASHTAG_REGEX) ||
+          (couldBeURL && mastoPath.startsWith('tags/'));
 
         if (couldBeHashtag) {
-          newQuickActions.push(QuickActionGenerators.couldBeHashtag(trimmedValue.replace(/^#/, '')));
+          const hashtag = couldBeURL
+            ? mastoPath.replace(/^tags\//, '')
+            : trimmedValue.replace(/^#/, '');
+
+          newQuickActions.push(QuickActionGenerators.couldBeHashtag(hashtag));
         }
 
-        const couldBeUsername = /^@?[a-z0-9_-]+(@[^\s]+)?$/i.exec(trimmedValue);
-
+        const userRegexp = /^@?[a-z0-9_-]+(@[^\s]+)?$/i;
+        const couldBeUsername =
+          userRegexp.test(trimmedValue) ||
+          (couldBeURL && userRegexp.test(mastoPath));
         if (couldBeUsername) {
-          newQuickActions.push(QuickActionGenerators.couldBeUsername(trimmedValue.replace(/^@/, '')));
+          const mastoUser = mastoPath.replace(/^@/, '');
+
+          const username = !couldBeURL
+            ? trimmedValue.replace(/^@/, '')
+            : // @ts-expect-error : mastoPath was tested against userRegexp above, meaning there must be at least one `@`:
+              // so match can't return null here
+              mastoPath.match(/@/g).length === 1
+              ? // if there's only 1 `@` in mastoPath, obtain domain from URL's FQDN & append to mastoUser
+                `${mastoUser}@${new URL(trimmedValue).hostname}`
+              : // otherwise there were at least (hopefully, only) 2, and it's a full masto identifier
+                mastoUser;
+
+          newQuickActions.push(QuickActionGenerators.couldBeUsername(username));
         }
 
         const couldBeStatusSearch = searchEnabled;