From 3a5971993675f97bd97bbaaaafcaa146f4b4d715 Mon Sep 17 00:00:00 2001
From: Maxim Zhukov <maxim.zhukov.dev@gmail.com>
Date: Sun, 7 May 2023 00:24:50 -0500
Subject: [PATCH] feat(highlighted-styles): allow to set CSS styles

#2 Allow a user to set CSS styles for the highlighted words
---
 public/manifest.json                   |  2 +-
 src/pages/content/components/index.tsx | 27 ++++++++++++++++++++--
 src/pages/popup/Popup.tsx              | 31 +++++++++++++++++++++++++-
 src/pages/popup/index.css              |  2 +-
 src/services/constants.tsx             |  3 +++
 5 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/public/manifest.json b/public/manifest.json
index 63a6abb..e297616 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -27,7 +27,7 @@
         "src/pages/content/index.js"
       ],
       "css": [
-        "assets/css/contentStyle16833527642.chunk.css"
+        "assets/css/contentStyle16834342064.chunk.css"
       ]
     }
   ],
diff --git a/src/pages/content/components/index.tsx b/src/pages/content/components/index.tsx
index 1a47c2c..b281ab4 100644
--- a/src/pages/content/components/index.tsx
+++ b/src/pages/content/components/index.tsx
@@ -1,9 +1,13 @@
 import { createRoot } from "react-dom/client";
 import DebugPopup from "@src/pages/content/components/DebugPopup";
 import App from "@src/pages/content/components/App";
-import refreshOnUpdate from "virtual:reload-on-update-in-view";
 import { get } from "@services/storage/storageService";
-import { SETTINGS_DEBUG } from "@services/constants";
+import {
+  SETTINGS_DEBUG,
+  SETTINGS_HIGHLIGHTED_STYLES,
+  SETTINGS_HIGHLIGHTED_STYLES_DEFAULT_VALUE,
+} from "@services/constants";
+import refreshOnUpdate from "virtual:reload-on-update-in-view";
 
 refreshOnUpdate("pages/content");
 
@@ -32,7 +36,26 @@ const initApp = () => {
   createRoot(root).render(<App />);
 };
 
+const addStyleBlock = (styles: string) => {
+  var sheet = document.createElement("style");
+  sheet.innerHTML = `.highlighted { ${styles} }`;
+  document.body.appendChild(sheet);
+};
+
+const initStyles = () => {
+  const key = SETTINGS_HIGHLIGHTED_STYLES,
+    defaultValue = SETTINGS_HIGHLIGHTED_STYLES_DEFAULT_VALUE;
+
+  get(key).then((result) => {
+    const highlightedStyles = result?.[key] || defaultValue;
+    if (highlightedStyles) {
+      addStyleBlock(highlightedStyles);
+    }
+  });
+};
+
 function init() {
+  initStyles();
   initApp();
   initDebug();
 }
diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
index a637765..f3e85b8 100644
--- a/src/pages/popup/Popup.tsx
+++ b/src/pages/popup/Popup.tsx
@@ -1,11 +1,19 @@
 import { ChangeEvent } from "react";
 import "@pages/popup/Popup.css";
-import { SETTINGS_DEBUG, SETTINGS_KEYWORDS } from "@services/constants";
+import {
+  SETTINGS_DEBUG,
+  SETTINGS_KEYWORDS,
+  SETTINGS_HIGHLIGHTED_STYLES,
+  SETTINGS_HIGHLIGHTED_STYLES_DEFAULT_VALUE,
+} from "@services/constants";
 import useSettingsHook from "./hooks/useSettingsHook";
 
 const Popup = () => {
   const [debug, setDebug] = useSettingsHook<boolean>(SETTINGS_DEBUG);
   const [keywords, setKeywords] = useSettingsHook<string>(SETTINGS_KEYWORDS);
+  const [highlightedStyles, setHighlightedStyles] = useSettingsHook<string>(
+    SETTINGS_HIGHLIGHTED_STYLES
+  );
 
   const handleDebugChange = (e: ChangeEvent<HTMLInputElement>) => {
     setDebug(e.target.checked);
@@ -15,6 +23,12 @@ const Popup = () => {
     setKeywords(e.target.value);
   };
 
+  const handleHighlightedStylesChange = (
+    e: ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    setHighlightedStyles(e.target.value);
+  };
+
   return (
     <div className="App">
       <header className="App-header">
@@ -49,6 +63,21 @@ const Popup = () => {
               onChange={handleKeywordsChange}
             />
           </div>
+
+          <div>
+            <div>
+              <label htmlFor="highlightedStyles">Highlighted styles: </label>
+            </div>
+            <textarea
+              id="highlightedStyles"
+              name="highlightedStyles"
+              placeholder={SETTINGS_HIGHLIGHTED_STYLES_DEFAULT_VALUE}
+              cols={45}
+              rows={8}
+              value={highlightedStyles}
+              onChange={handleHighlightedStylesChange}
+            />
+          </div>
         </fieldset>
       </header>
     </div>
diff --git a/src/pages/popup/index.css b/src/pages/popup/index.css
index e53cbc1..897e1d1 100644
--- a/src/pages/popup/index.css
+++ b/src/pages/popup/index.css
@@ -1,6 +1,6 @@
 body {
   width: 400px;
-  height: 300px;
+  height: 440px;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
diff --git a/src/services/constants.tsx b/src/services/constants.tsx
index 4f7f72c..103c353 100644
--- a/src/services/constants.tsx
+++ b/src/services/constants.tsx
@@ -1,3 +1,6 @@
 export const SETTINGS_DEBUG = "settings.debug";
 export const SETTINGS_KEYWORDS = "settings.keywords";
+export const SETTINGS_HIGHLIGHTED_STYLES = "settings.highlighted-styles";
+export const SETTINGS_HIGHLIGHTED_STYLES_DEFAULT_VALUE =
+  "background-color: yellow;";
 export const OBSERVABLE_DEBOUNCE_TIME_MS = 500;