added validation for custom search engine url

Author: SentinelKnight

src/stores/keystroke.store.ts

@@ -6,6 +6,7 @@ import {Clipboard, EmitterSubscription, Linking} from 'react-native'
 import {IRootStore} from 'store'
 import {ItemType, Widget} from './ui.store'
 import {EMOJI_ROW_SIZE} from './emoji.store'
+import { isValidCustomSearchEngineUrl } from 'widgets/settings/general'
 
 let keyDownListener: EmitterSubscription | undefined
 let keyUpListener: EmitterSubscription | undefined
@@ -298,17 +299,24 @@ export const createKeystrokeStore = (root: IRootStore) => {
                     })
                     break
                   case 'custom':
-                    Linking.openURL(
-                      root.ui.customSearchUrl.replace(
-                        '%s',
-                        encodeURI(root.ui.query),
-                      ),
-                    ).catch(e => {
+                    if (isValidCustomSearchEngineUrl(root.ui.customSearchUrl)) {
+                      Linking.openURL(
+                        root.ui.customSearchUrl.replace(
+                          '%s',
+                          encodeURI(root.ui.query),
+                        ),
+                      ).catch(e => {
+                        solNative.showToast(
+                          `Could not open URL: ${root.ui.query}, error: ${e}`,
+                          'error',
+                        )
+                      })
+                    } else {
                       solNative.showToast(
-                        `Could not open URL: ${root.ui.query}, error: ${e}`,
+                        `Invalid search URL. Please ensure the URL is a valid search engine URL and includes a query parameter. Example: https://google.com/search?q=%s`,
                         'error',
                       )
-                    })
+                    }
                     break
                 }
 

src/widgets/settings/general.tsx

@@ -6,6 +6,12 @@ import {observer} from 'mobx-react-lite'
 import {ScrollView, Text, TouchableOpacity, View} from 'react-native'
 import {useStore} from 'store'
 
+export const isValidCustomSearchEngineUrl = (url: string) => {
+  if (url.trim() === '') return false
+  const searchPatternRegex =
+    /^https?:\/\/(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(:\d+)?(\/[^\s?#]*)?\?q=%s$/
+  return searchPatternRegex.test(url)
+}
 export const General = observer(() => {
   const store = useStore()
   return (
@@ -65,18 +71,28 @@ export const General = observer(() => {
                   />
                   {value === 'custom' && (
                     <View className="flex-1">
-                      <Input
-                        className="w-80 text-xs rounded border border-lightBorder dark:border-darkBorder px-1"
-                        inputClassName={
-                          store.ui.searchEngine !== 'custom'
-                            ? 'opacity-45 dark:text-white'
-                            : ''
-                        }
-                        readOnly={store.ui.searchEngine !== 'custom'}
-                        value={store.ui.customSearchUrl}
-                        onChangeText={e => store.ui.setCustomSearchUrl(e)}
-                        placeholder="https://google.com/search?q=%s"
-                      />
+                      <View className="flex-row items-center gap-2">
+                        <Input
+                          className="w-80 text-xs rounded border border-lightBorder dark:border-darkBorder px-1"
+                          inputClassName={
+                            store.ui.searchEngine !== 'custom'
+                              ? 'opacity-45 dark:text-white'
+                              : ''
+                          }
+                          readOnly={store.ui.searchEngine !== 'custom'}
+                          value={store.ui.customSearchUrl}
+                          onChangeText={e => store.ui.setCustomSearchUrl(e)}
+                          placeholder="https://google.com/search?q=%s"
+                        />
+                        {store.ui.searchEngine === 'custom' &&
+                          (isValidCustomSearchEngineUrl(
+                            store.ui.customSearchUrl,
+                          ) ? (
+                            <View className="w-2 h-2 rounded-full bg-green-500" />
+                          ) : (
+                            <View className="w-2 h-2 rounded-full bg-red-500" />
+                          ))}
+                      </View>
                       <Text className="text-xs text-neutral-500 dark:text-neutral-400 mt-1 ml-1">
                         Use %s in place of the search term
                       </Text>