Merge branch 'main' into develop

themes/medium/LayoutSearch.js

@@ -6,6 +6,7 @@ import CategoryGroup from './components/CategoryGroup'
 import { useEffect } from 'react'
 import { isBrowser } from '@/lib/utils'
 import BLOG from '@/blog.config'
+import Mark from 'mark.js'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import BlogPostListPage from './components/BlogPostListPage'
 
@@ -16,8 +17,12 @@ export const LayoutSearch = (props) => {
     setTimeout(() => {
       const container = isBrowser() && document.getElementById('container')
       if (container && container.innerHTML) {
-        const re = new RegExp(`${keyword}`, 'gim')
-        container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)
+        const re = new RegExp(keyword, 'gim')
+        const instance = new Mark(container)
+        instance.markRegExp(re, {
+          element: 'span',
+          className: 'text-red-500 border-b border-dashed'
+        })
       }
     },
     100)

themes/medium/components/SearchInput.js

@@ -3,7 +3,6 @@ import { useImperativeHandle, useRef, useState } from 'react'
 let lock = false
 
 const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
-  // const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '')
   const [onLoading, setLoadingState] = useState(false)
   const router = useRouter()
   const searchInputRef = useRef()
@@ -20,9 +19,6 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
 
     if (key && key !== '') {
       setLoadingState(true)
-      // router.push({ pathname: '/search/' + key }).then(r => {
-      //   setLoadingState(false)
-      // })
       location.href = '/search/' + key
     } else {
       router.push({ pathname: '/' }).then(r => {