basically working badly

Author: adhamu

package.json

@@ -41,7 +41,8 @@
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-string-replace": "^1.0.0"
   },
   "devDependencies": {
     "@adhamu/zero": "^3.0.1",

public/index.html

@@ -11,8 +11,8 @@
 
   <style>
     body {
-      padding: 3rem;
       max-width: 880px;
+      padding: 3rem;
       margin: 0 auto;
       font-family: 'Source Sans Pro', sans-serif;
     }
@@ -24,6 +24,12 @@
     .searchSuggestions ul {
       top: calc(100% - 3px);
     }
+
+    mark {
+      background: transparent;
+      font-weight: bold;
+      text-decoration: underline;
+    }
   </style>
 </head>
 

src/SearchSuggestions.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import type { Props } from './types'
 
-import { getElementText, wrapElementText } from './getElementText'
+import { getElementText, wrapElementText } from './elementText'
 import { Styled } from './styled'
 import { useSuggestions } from './useSuggestions'
 

src/__tests__/SearchSuggestions.test.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import SearchSuggestions from '../SearchSuggestions'
-import * as getElementText from '../getElementText'
+import * as getElementText from '../elementText'
 
 const suggestions = ['reddit', 'facebook', 'twitter'].map(word => (
   <a key={word} href={`https://${word}.com`}>

src/__tests__/getElementText.test.tsx renamed to src/__tests__/elementText.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { getElementText } from '../getElementText'
+import { getElementText } from '../elementText'
 
 describe('getElementText', () => {
   const Test = ({ children }: { children?: React.ReactNode }) => (

src/elementText.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import reactStringReplace from 'react-string-replace'
+
+export const getElementText = (node: React.ReactNode): string | undefined => {
+  if (['string', 'number'].includes(typeof node)) {
+    return node as string
+  }
+
+  if (node instanceof Array) {
+    return [...new Set(node.map(getElementText))].join(' ')
+  }
+
+  if (typeof node === 'object' && node) {
+    return getElementText((node as React.ReactElement).props.children)
+  }
+
+  return undefined
+}
+
+export const wrapElementText = (
+  node: React.ReactNode,
+  str: string | undefined
+): React.ReactElement | React.ReactNode => {
+  const {
+    props: { children },
+  } = node as React.ReactElement
+
+  if (!Array.isArray(children) && typeof children !== 'string') {
+    return wrapElementText(children, str)
+  }
+
+  if (Array.isArray(children)) {
+    return children.map((e: React.ReactElement) => wrapElementText(e, str))
+  }
+
+  return React.cloneElement(node as React.ReactElement, {
+    children: (
+      <span>
+        {reactStringReplace(children, str, (match, key) => (
+          <mark key={key}>{match}</mark>
+        ))}
+      </span>
+    ),
+  })
+
+  return node
+}

src/example/App.tsx

@@ -54,8 +54,18 @@ const suggestions = [
   'pressure',
   'cooperate',
 ].map(word => (
-  <a key={word} href={`https://www.google.co.uk/search?q=${word}`}>
-    {word}
+  <a
+    key={word}
+    onKeyDown={e => {
+      if (e.key === 'Enter') {
+        console.log(word)
+      }
+    }}
+    onClick={() => {
+      console.log(word)
+    }}
+  >
+    <div>{word}</div>
   </a>
 ))
 

src/getElementText.tsx

@@ -7,6 +7,11 @@ export const Styled = styled.div<{ withTheme?: boolean }>`
     width: 100%;
   }
 
+  mark {
+    display: inline;
+    padding: 0;
+  }
+
   ul {
     position: absolute;
     top: 100%;
@@ -15,11 +20,6 @@ export const Styled = styled.div<{ withTheme?: boolean }>`
     list-style-type: none;
     overflow-y: auto;
 
-    li mark {
-      display: inline;
-      padding: 0;
-    }
-
     li > * {
       display: block;
       cursor: pointer;
@@ -28,7 +28,6 @@ export const Styled = styled.div<{ withTheme?: boolean }>`
       &:focus {
         border: 0;
         box-shadow: 0;
-        font-weight: bold;
         outline: 0;
       }
     }

src/styled.ts

@@ -5113,6 +5113,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-string-replace@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-1.0.0.tgz#a003f94792147509107af9d376436460234911b1"
+  integrity sha512-+iLsyE4AeSmnfctgswXOf1PmKRgns6wJ4LVb+8ADMU6mDK3jvBE11QzfMQf7CYtPUUiBCDjZ9ZppzXOIYrzCRg==
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"