Merge pull request #11 from FSou1/feat/highlight-complete-word

feat(complete-words): add complete words highlighting

package.json

@@ -1,6 +1,6 @@
 {
   "name": "keywords-highlighter",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "a chrome extension that highlights keywords on web pages, making it easy to find or skip information",
   "license": "MIT",
   "repository": {

src/pages/content/components/App.tsx

@@ -12,6 +12,7 @@ export default function App() {
       className: rule.id,
       keywords: rule.keywords,
       styles: rule.cssStyles,
+      highlightCompleteWords: rule.highlightCompleteWords,
     };
   };
 
@@ -27,6 +28,7 @@ export default function App() {
         <Highlighter
           keywords={rule.keywords}
           highlightedClassName={rule.className}
+          highlightCompleteWords={rule.highlightCompleteWords}
           debounceTimeMs={OBSERVABLE_DEBOUNCE_TIME_MS}
         />
       ))}

src/pages/content/components/Highlighter.tsx

@@ -3,21 +3,24 @@ import { findAndWrap } from "@src/lib/findAndWrapHTMLNodes";
 import useMutationObservable, {
   DEFAULT_OPTIONS,
 } from "../hooks/useMutationObservable";
+import { buildFindTextRegExp } from "../utils/regExpHelper";
 
 interface HighlighterProps {
   debounceTimeMs: number;
   keywords: string;
   highlightedClassName: string;
+  highlightCompleteWords: boolean;
 }
 
 export default function Highlighter({
   debounceTimeMs,
   keywords,
   highlightedClassName,
+  highlightCompleteWords,
 }: HighlighterProps) {
   const onMutation = useCallback(() => {
     findAndWrap(document.body, {
-      findTextRegExp: new RegExp(keywords.replaceAll(",", "|"), "gi"),
+      findTextRegExp: buildFindTextRegExp({ keywords, highlightCompleteWords }),
       wrapWithTag: "span",
       wrapWithClassName: highlightedClassName,
       wrapIf: (node: Text) => {

src/pages/content/utils/regExpHelper.tsx

@@ -0,0 +1,18 @@
+export function buildFindTextRegExp({
+  keywords,
+  highlightCompleteWords,
+}): RegExp {
+  return new RegExp(
+    keywords
+      .split(",")
+      .map((word: string) => {
+        if (highlightCompleteWords) {
+          return `\\b${word}\\b`;
+        } else {
+          return word;
+        }
+      })
+      .join("|"),
+    "gi"
+  );
+}

src/pages/options/Options.tsx

@@ -58,6 +58,7 @@ export default function Options() {
       keywords: null,
       cssStyles: null,
       enabledOn: null,
+      highlightCompleteWords: false,
     };
   };
 

src/pages/options/components/KeywordRule.tsx

@@ -4,13 +4,15 @@ import TextField from "@mui/material/TextField";
 import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
 import DeleteIcon from "@mui/icons-material/Delete";
-import Button from "@mui/material/Button";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
 
 export interface IKeywordRule {
   id: string;
   keywords: string;
   cssStyles: string;
   enabledOn: string;
+  highlightCompleteWords: boolean;
 }
 
 export type KeywordRuleProps = IKeywordRule & {
@@ -19,7 +21,14 @@ export type KeywordRuleProps = IKeywordRule & {
 };
 
 export default function KeywordRule(props: KeywordRuleProps) {
-  const { keywords, cssStyles, enabledOn, onRuleChange, onDeleteRule } = props;
+  const {
+    keywords,
+    cssStyles,
+    enabledOn,
+    highlightCompleteWords,
+    onRuleChange,
+    onDeleteRule,
+  } = props;
 
   const handleKeywordsChange: React.ChangeEventHandler<HTMLInputElement> = (
     event
@@ -48,6 +57,15 @@ export default function KeywordRule(props: KeywordRuleProps) {
     });
   };
 
+  const handleHighlightCompleteWordsChange: React.ChangeEventHandler<
+    HTMLInputElement
+  > = (event) => {
+    onRuleChange({
+      ...props,
+      highlightCompleteWords: event.target.checked,
+    });
+  };
+
   const handleDeleteClick = () => {
     onDeleteRule({
       ...props,
@@ -103,6 +121,19 @@ export default function KeywordRule(props: KeywordRuleProps) {
         />
       </Grid>
 
+      <Grid item xs={12} textAlign="left">
+        <FormControlLabel
+          control={
+            <Checkbox
+              name="highlightCompleteWords"
+              checked={highlightCompleteWords}
+              onChange={handleHighlightCompleteWordsChange}
+            />
+          }
+          label="Only highlight complete words"
+        />
+      </Grid>
+
       <Grid item xs={12}>
         <Divider />
       </Grid>