fix search integrations

WorldBrain · Aug 1, 2024 · 6218354 · 6218354
1 parent 817ae13
commit 6218354
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 43 deletions.
diff --git a/src/search-injection/components/Results.tsx b/src/search-injection/components/Results.tsx
@@ -111,32 +111,37 @@ class Results extends React.Component<ResultsProps, ResultsState> {
                                     onClick={props.seeMoreResults}
                                 />
                             </TooltipBox>
-                            <TooltipBox
-                                placement={'bottom'}
-                                tooltipText={'Pin Search Results'}
-                                getPortalRoot={this.props.getRootElement}
-                            >
-                                <Icon
-                                    filePath={'pin'}
-                                    heightAndWidth="18px"
-                                    padding="5px"
-                                    color={
-                                        this.props.isSticky
-                                            ? 'prime1'
-                                            : 'greyScale6'
-                                    }
-                                    onClick={() =>
-                                        props.toggleStickyContainer(
-                                            !this.props.isSticky,
-                                        )
-                                    }
-                                    background={
-                                        this.props.isSticky
-                                            ? 'greyScale3'
-                                            : null
-                                    }
-                                />
-                            </TooltipBox>
+                            {!(
+                                this.props.searchEngine === 'brave' ||
+                                this.props.searchEngine === 'duckduckgo'
+                            ) && (
+                                <TooltipBox
+                                    placement={'bottom'}
+                                    tooltipText={'Pin Search Results'}
+                                    getPortalRoot={this.props.getRootElement}
+                                >
+                                    <Icon
+                                        filePath={'pin'}
+                                        heightAndWidth="18px"
+                                        padding="5px"
+                                        color={
+                                            this.props.isSticky
+                                                ? 'prime1'
+                                                : 'greyScale6'
+                                        }
+                                        onClick={() =>
+                                            props.toggleStickyContainer(
+                                                !this.props.isSticky,
+                                            )
+                                        }
+                                        background={
+                                            this.props.isSticky
+                                                ? 'greyScale3'
+                                                : null
+                                        }
+                                    />
+                                </TooltipBox>
+                            )}
                             <TooltipBox
                                 placement={'bottom'}
                                 tooltipText={

diff --git a/src/search-injection/components/container.tsx b/src/search-injection/components/container.tsx
@@ -138,7 +138,13 @@ class Container extends React.Component<Props, State> {
             constants.REACT_ROOTS.searchEngineInjection,
         )
 
-        if (isSticky) {
+        if (
+            isSticky &&
+            !(
+                this.props.searchEngine === 'brave' ||
+                this.props.searchEngine === 'duckduckgo'
+            )
+        ) {
             target.style.position = 'sticky'
             target.style.top = '100px'
             target.style.zIndex = '100'
@@ -424,7 +430,12 @@ class Container extends React.Component<Props, State> {
                     renderResultItems={this.renderResultItems}
                     renderNotification={this.renderNotification()}
                     getRootElement={this.props.getRootElement}
-                    isSticky={this.state.isStickyContainer}
+                    isSticky={
+                        !(
+                            this.props.searchEngine === 'brave' ||
+                            this.props.searchEngine === 'duckduckgo'
+                        ) && this.state.isStickyContainer
+                    }
                     toggleStickyContainer={this.toggleStickyContainer}
                     updateQuery={this.props.updateQuery}
                     query={this.props.query}

diff --git a/src/search-injection/constants.ts b/src/search-injection/constants.ts
@@ -27,26 +27,26 @@ export const SEARCH_ENGINES: {
     duckduckgo: {
         regex: /(http[s]?:\/\/)?(www.)?duckduckgo[.\w]+\/.*?[?&]q=.*/,
         container: {
-            above: 'results--main',
+            above: 'js-react-sidebar',
             side: 'js-react-sidebar',
         },
         containerType: 'class',
     },
     brave: {
         regex: /(http[s]?:\/\/)?(www.)?brave[.\w]+\/search\?.*/,
         container: {
-            above: 'results',
-            side: 'side-right',
-            sideAlternative: 'rcnt',
+            above: 'sidebar',
+            side: 'sidebar',
+            sideAlternative: 'sidebar',
         },
         containerType: 'id',
     },
     bing: {
         regex: /(http[s]?:\/\/)?(www.)?bing[.\w]+\/search\?.*/,
         container: {
-            above: 'b_results',
+            above: 'b_context',
             side: 'b_context',
-            sideAlternative: 'rcnt',
+            sideAlternative: 'b_context',
         },
         containerType: 'id',
     },

diff --git a/src/search-injection/searchInjection.tsx b/src/search-injection/searchInjection.tsx
@@ -257,12 +257,12 @@ export const handleRenderSearchInjection = async (
         }
 
         if (searchEngine === 'brave') {
-            const suggestionsContainer = document.getElementById(
+            const suggestionsContainer = document.getElementsByClassName(
                 searchEngineObj.container.side,
-            )
-            const containerWithSuggestions = document.getElementById(
+            )[0] as HTMLElement
+            const containerWithSuggestions = document.getElementsByClassName(
                 searchEngineObj.container.sideAlternative,
-            )
+            )[0] as HTMLElement
 
             if (position === 'side') {
                 if (!suggestionsContainer) {
@@ -284,9 +284,9 @@ export const handleRenderSearchInjection = async (
                     )
                 }
             } else {
-                const containerAbove = document.getElementById(
+                const containerAbove = document.getElementsByClassName(
                     searchEngineObj.container.above,
-                )
+                )[0] as HTMLElement
                 containerAbove.insertBefore(root, containerAbove.firstChild)
             }
         }
@@ -410,9 +410,19 @@ export const handleRenderSearchInjection = async (
         }
     })
 
-    const targetNode = document.getElementById(
-        constants.SEARCH_ENGINES[searchEngine].container.sideAlternative,
-    )
+    let targetNode = null
+
+    if (searchEngine === 'brave' || searchEngine === 'duckduckgo') {
+        targetNode = document.getElementsByClassName(
+            constants.SEARCH_ENGINES[searchEngine].container.sideAlternative,
+        )[0] as HTMLElement
+        targetNode.style.overflow = 'visible'
+    } else {
+        targetNode = document.getElementById(
+            constants.SEARCH_ENGINES[searchEngine].container.sideAlternative,
+        )
+    }
+
     const existingInjection = document.getElementById(
         '__MEMEX-SEARCH-INJECTION-ROOT',
     )