From 2893e244bd3b002a1623ed397c5f5e42d07264c5 Mon Sep 17 00:00:00 2001
From: PrinOrange <prinorange@outlook.com>
Date: Sat, 23 Nov 2024 21:26:13 +0800
Subject: [PATCH 1/2] fix: UX Optimization: When pasting the entire URL, it
 supposed to auto remove the extra protocol head from clipboard. Fixes #1761

---
 apps/renderer/src/modules/discover/form.tsx | 32 +++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/apps/renderer/src/modules/discover/form.tsx b/apps/renderer/src/modules/discover/form.tsx
index 49032eb8cb..6f6ecfde5b 100644
--- a/apps/renderer/src/modules/discover/form.tsx
+++ b/apps/renderer/src/modules/discover/form.tsx
@@ -19,7 +19,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation } from "@tanstack/react-query"
 import { produce } from "immer"
 import { atom, useAtomValue, useStore } from "jotai"
-import type { FC } from "react"
+import type { ClipboardEvent, FC } from "react"
 import { memo, useCallback, useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
@@ -140,6 +140,34 @@ export function DiscoverForm({ type = "search" }: { type?: string }) {
     form.setValue("keyword", trimmedKeyword)
   }, [form, keyword, prefix])
 
+  const handlePasteKeyword = useCallback(
+    (event: ClipboardEvent<HTMLInputElement>) => {
+      event.preventDefault()
+
+      const clipboardData = event.clipboardData || window.Clipboard
+      const keywordInClipboard = clipboardData.getData("text")
+
+      const trimmedKeyword = keywordInClipboard.trimStart()
+      if (!prefix) {
+        form.setValue("keyword", trimmedKeyword)
+        return
+      }
+      const isValidPrefix = prefix.find((p) => trimmedKeyword.startsWith(p))
+      if (!isValidPrefix) {
+        form.setValue("keyword", prefix[0])
+
+        return
+      }
+
+      if (trimmedKeyword.startsWith(`${isValidPrefix}${isValidPrefix}`)) {
+        form.setValue("keyword", trimmedKeyword.slice(isValidPrefix.length))
+      }
+
+      form.setValue("keyword", trimmedKeyword)
+    },
+    [form, prefix],
+  )
+
   const handleSuccess = useCallback(
     (item: DiscoverSearchData[number]) => {
       const currentData = jotaiStore.get(discoverSearchDataAtom)
@@ -210,7 +238,7 @@ export function DiscoverForm({ type = "search" }: { type?: string }) {
               <FormItem>
                 <FormLabel>{t(info[type]?.label)}</FormLabel>
                 <FormControl>
-                  <Input autoFocus {...field} />
+                  <Input autoFocus {...field} onPaste={handlePasteKeyword} />
                 </FormControl>
                 <FormMessage />
               </FormItem>

From face05fea9b20a3b08f0d33d3c8f35bbd0e90558 Mon Sep 17 00:00:00 2001
From: PrinOrange <prinorange@outlook.com>
Date: Mon, 25 Nov 2024 23:53:34 +0800
Subject: [PATCH 2/2] refractor: remove `useEffect` listening for keyword
 change. Use `onChange` handle instead.

---
 apps/renderer/src/modules/discover/form.tsx | 42 ++++-----------------
 1 file changed, 7 insertions(+), 35 deletions(-)

diff --git a/apps/renderer/src/modules/discover/form.tsx b/apps/renderer/src/modules/discover/form.tsx
index 6f6ecfde5b..efa681ef08 100644
--- a/apps/renderer/src/modules/discover/form.tsx
+++ b/apps/renderer/src/modules/discover/form.tsx
@@ -19,8 +19,8 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation } from "@tanstack/react-query"
 import { produce } from "immer"
 import { atom, useAtomValue, useStore } from "jotai"
-import type { ClipboardEvent, FC } from "react"
-import { memo, useCallback, useEffect, useState } from "react"
+import type { ChangeEvent, FC } from "react"
+import { memo, useCallback, useState } from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
@@ -119,35 +119,9 @@ export function DiscoverForm({ type = "search" }: { type?: string }) {
     }
   }
 
-  const keyword = form.watch("keyword")
-  useEffect(() => {
-    const trimmedKeyword = keyword.trimStart()
-    if (!prefix) {
-      form.setValue("keyword", trimmedKeyword)
-      return
-    }
-    const isValidPrefix = prefix.find((p) => trimmedKeyword.startsWith(p))
-    if (!isValidPrefix) {
-      form.setValue("keyword", prefix[0])
-
-      return
-    }
-
-    if (trimmedKeyword.startsWith(`${isValidPrefix}${isValidPrefix}`)) {
-      form.setValue("keyword", trimmedKeyword.slice(isValidPrefix.length))
-    }
-
-    form.setValue("keyword", trimmedKeyword)
-  }, [form, keyword, prefix])
-
-  const handlePasteKeyword = useCallback(
-    (event: ClipboardEvent<HTMLInputElement>) => {
-      event.preventDefault()
-
-      const clipboardData = event.clipboardData || window.Clipboard
-      const keywordInClipboard = clipboardData.getData("text")
-
-      const trimmedKeyword = keywordInClipboard.trimStart()
+  const handleKeywordChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const trimmedKeyword = event.target.value.trimStart()
       if (!prefix) {
         form.setValue("keyword", trimmedKeyword)
         return
@@ -155,14 +129,12 @@ export function DiscoverForm({ type = "search" }: { type?: string }) {
       const isValidPrefix = prefix.find((p) => trimmedKeyword.startsWith(p))
       if (!isValidPrefix) {
         form.setValue("keyword", prefix[0])
-
         return
       }
-
       if (trimmedKeyword.startsWith(`${isValidPrefix}${isValidPrefix}`)) {
         form.setValue("keyword", trimmedKeyword.slice(isValidPrefix.length))
+        return
       }
-
       form.setValue("keyword", trimmedKeyword)
     },
     [form, prefix],
@@ -238,7 +210,7 @@ export function DiscoverForm({ type = "search" }: { type?: string }) {
               <FormItem>
                 <FormLabel>{t(info[type]?.label)}</FormLabel>
                 <FormControl>
-                  <Input autoFocus {...field} onPaste={handlePasteKeyword} />
+                  <Input autoFocus {...field} onChange={handleKeywordChange} />
                 </FormControl>
                 <FormMessage />
               </FormItem>