Merge branch 'main' into develop

themes/example/LayoutSearch.js

@@ -4,6 +4,7 @@ import { BlogListScroll } from './components/BlogListScroll'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import SearchInput from './components/SearchInput'
+import Mark from 'mark.js'
 import LayoutBase from './LayoutBase'
 import { isBrowser } from '@/lib/utils'
 
@@ -15,8 +16,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)
   }, [router.events])

themes/fukasawa/LayoutSearch.js

@@ -4,6 +4,7 @@ import BlogListPage from './components/BlogListPage'
 import BlogListScroll from './components/BlogListScroll'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
+import Mark from 'mark.js'
 import { isBrowser } from '@/lib/utils'
 
 export const LayoutSearch = (props) => {
@@ -14,8 +15,12 @@ export const LayoutSearch = (props) => {
     setTimeout(() => {
       const container = isBrowser() && document.getElementById('container')
       if (container && container.innerHTML) {
-        const re = new RegExp(`${currentSearch}`, 'gim')
-        container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`)
+        const re = new RegExp(currentSearch, 'gim')
+        const instance = new Mark(container)
+        instance.markRegExp(re, {
+          element: 'span',
+          className: 'text-red-500 border-b border-dashed'
+        })
       }
     }, 100)
   })

themes/hexo/LayoutSearch.js

@@ -6,6 +6,7 @@ import BlogPostListPage from './components/BlogPostListPage'
 import LayoutBase from './LayoutBase'
 import SearchInput from './components/SearchInput'
 import { useGlobal } from '@/lib/global'
+import Mark from 'mark.js'
 import TagItemMini from './components/TagItemMini'
 import Card from './components/Card'
 import Link from 'next/link'
@@ -25,10 +26,12 @@ export const LayoutSearch = props => {
         const targets = document.getElementsByClassName('replace')
         for (const container of targets) {
           if (container && container.innerHTML) {
-            const re = new RegExp(`${currentSearch}`, 'gim')
-            container.innerHTML = container.innerHTML.replace(
-              re, `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`
-            )
+            const re = new RegExp(currentSearch, 'gim')
+            const instance = new Mark(container)
+            instance.markRegExp(re, {
+              element: 'span',
+              className: 'text-red-500 border-b border-dashed'
+            })
           }
         }
       }

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 => {

themes/next/LayoutSearch.js

@@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import BlogPostListPage from './components/BlogPostListPage'
+import Mark from 'mark.js'
 import BLOG from '@/blog.config'
 
 export const LayoutSearch = (props) => {
@@ -12,8 +13,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'
+      })
     }
   }, 200)
   return (