Fix search injection behaviour

WorldBrain · Feb 12, 2024 · 363c45e · 363c45e
1 parent 2f4fd53
commit 363c45e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 30 deletions.
diff --git a/src/annotations/annotation-save-logic.ts b/src/annotations/annotation-save-logic.ts
@@ -152,7 +152,7 @@ export async function createAnnotation({
 
             if (shareData?.remoteId != null) {
                 createAndCopyShareLink(
-                    shareData.remoteId,
+                    shareData?.remoteId,
                     annotationUrl,
                     contentSharingBG,
                     syncSettingsBG,

diff --git a/src/search-injection/components/container.tsx b/src/search-injection/components/container.tsx
@@ -133,19 +133,14 @@ class Container extends React.Component<Props, State> {
             isStickyContainer: isSticky,
         })
 
-        const target = document.getElementById('memexResults')
+        const target = document.getElementById(
+            constants.REACT_ROOTS.searchInjection,
+        )
 
         if (isSticky) {
             target.style.position = 'sticky'
             target.style.top = '100px'
             target.style.zIndex = '100'
-
-            const parentElement = target.parentElement
-            if (parentElement && parentElement.id === 'rcnt') {
-                const wrapperDiv = document.createElement('div')
-                parentElement.replaceChild(wrapperDiv, target)
-                wrapperDiv.appendChild(target)
-            }
         } else {
             target.style.position = 'relative'
             target.style.top = 'unset'
@@ -160,19 +155,14 @@ class Container extends React.Component<Props, State> {
             isSticky,
         )
 
-        const target = document.getElementById('memexResults')
+        const target = document.getElementById(
+            constants.REACT_ROOTS.searchInjection,
+        )
 
         if (isSticky) {
             target.style.position = 'sticky'
             target.style.top = '100px'
             target.style.zIndex = '100'
-
-            const parentElement = target.parentElement
-            if (parentElement && parentElement.id === 'rcnt') {
-                const wrapperDiv = document.createElement('div')
-                parentElement.replaceChild(wrapperDiv, target)
-                wrapperDiv.appendChild(target)
-            }
         } else {
             target.style.position = 'relative'
             target.style.top = 'unset'

diff --git a/src/search-injection/searchInjection.tsx b/src/search-injection/searchInjection.tsx
@@ -132,15 +132,6 @@ export const handleRenderSearchInjection = async (
         //     return false
         // }
 
-        const component = document.getElementById(
-            constants.REACT_ROOTS.searchInjection,
-        )
-        if (component) {
-            component.parentNode.removeChild(component)
-            component.style.position = 'sticky'
-            component.style.top = '100px'
-            component.style.zIndex = '30000'
-        }
         const sideBox = document.getElementById(searchEngineObj.container.side)
 
         if (sideBox) {
@@ -174,17 +165,34 @@ export const handleRenderSearchInjection = async (
                     searchList.style.gridAutoFlow = 'column'
                     searchList.insertAdjacentElement('beforeend', root)
                 } else if (!suggestionsContainer) {
+                    const containerAbove = document.getElementById(
+                        searchEngineObj.container.above,
+                    )
+
+                    const newDiv = document.createElement('div')
+                    newDiv.style.display = 'flex'
+                    newDiv.style.gap = '50px'
+                    if (containerAbove) {
+                        newDiv.appendChild(containerAbove)
+                        containerWithSuggestions.appendChild(newDiv)
+                    }
+                    const sideBoxContainer = document.createElement('div')
+                    sideBoxContainer.style.height = '100%'
+                    sideBoxContainer.style.overflow = 'visible'
+                    sideBoxContainer.appendChild(root)
+
+                    root.style.position = 'sticky'
+                    root.style.top = '100px'
+                    root.style.zIndex = '100'
+
                     containerWithSuggestions.style.display = 'grid'
                     containerWithSuggestions.style.gap = '130px'
                     containerWithSuggestions.style.flexDirection = 'row'
                     containerWithSuggestions.style.gridAutoFlow = 'column'
                     containerWithSuggestions.style.justifyContent =
                         'space-between'
 
-                    containerWithSuggestions.insertAdjacentElement(
-                        'beforeend',
-                        root,
-                    )
+                    newDiv.insertAdjacentElement('beforeend', sideBoxContainer)
                 } else {
                     suggestionsContainer.insertBefore(
                         root,
@@ -289,6 +297,23 @@ export const handleRenderSearchInjection = async (
         // Render the React component on the target element
         // Passing this same function so that it can change position
 
+        // const component = document.getElementById(
+        //     constants.REACT_ROOTS.searchInjection,
+        // )
+        // console.log('component', component)
+        // if (component) {
+        //     if (!sideBox) {
+        //         console.log('sidebooox')
+        //         component.parentNode.removeChild(component)
+
+        //         const sideBoxContainer = document.createElement('div')
+        //         sideBoxContainer.style.height = '100%'
+        //         sideBoxContainer.appendChild(component)
+        //     }
+        //     component.style.position = 'sticky'
+        //     component.style.top = '100px'
+        //     component.style.zIndex = '100'
+        // }
         ReactDOM.render(
             <Root
                 query={query}