feat: highlight keyword

Author: pacexy

package.json

@@ -10,11 +10,13 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-highlight-words": "^0.20.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
+    "@types/react-highlight-words": "^0.16.4",
     "@vitejs/plugin-react": "^4.0.0",
     "typescript": "^5.0.4",
     "vite": "^4.3.9",

pnpm-lock.yaml

@@ -90,6 +90,10 @@
   color: var(--text1);
 }
 
+#comment-search-root .comment-item-highlight {
+  background-color: #f8eec2;
+}
+
 #comment-search-root .comment-item-time {
   color: var(--text3);
   margin-top: 4px;

src/App.css

@@ -1,10 +1,13 @@
 import { useRef, useState } from 'react'
+import Highlighter from 'react-highlight-words'
 import { fetchComments } from './api'
 import { Reply } from './reply'
 import { extractVideoId, formatDateTime } from './utils'
 
 import './App.css'
 
+let keyword = ''
+
 export default function App() {
   const dialogRef = useRef<HTMLDialogElement>(null)
   const [comments, setComments] = useState<Reply[]>()
@@ -22,10 +25,11 @@ export default function App() {
             if (e.key === 'Enter' && promiseRef.current) {
               e.preventDefault()
               // `e.currentTarget` will be null after `await`
-              const keyword = e.currentTarget.value
+              const _keyword = e.currentTarget.value
+              keyword = _keyword
               promiseRef.current
                 .then((allComments) => {
-                  const comments = searchComments(allComments, keyword)
+                  const comments = searchComments(allComments, _keyword)
                   setComments(comments)
                 })
                 .catch((e) => {
@@ -87,9 +91,13 @@ const CommentTree: React.FC<CommentProps> = ({ comments, sub = false }) => {
             <span className='comment-item-username'>
               {comment.member.uname}
             </span>
-            <span className='comment-item-message'>
-              {comment.content.message}
-            </span>
+            <Highlighter
+              className='comment-item-message'
+              highlightClassName='comment-item-highlight'
+              searchWords={[keyword]}
+              autoEscape={true}
+              textToHighlight={comment.content.message}
+            />
             <div className='comment-item-time'>
               {formatDateTime(comment.ctime)}
             </div>