feat: highlight fav words && split long paragraph

src/apis/trans.js

@@ -919,7 +919,7 @@ export const handleTranslate = async (
     httpTimeout,
   });
   if (!response) {
-    throw new Error("tranlate got empty response");
+    throw new Error("translate got empty response");
   }
 
   const result = await parseTransRes(response, {
@@ -934,7 +934,7 @@ export const handleTranslate = async (
     ...apiSetting,
   });
   if (!result?.length) {
-    throw new Error("tranlate got an unexpected result");
+    throw new Error("translate got an unexpected result");
   }
 
   return result;

src/common.js

@@ -8,8 +8,13 @@ import {
   MSG_TRANS_TOGGLE_STYLE,
   MSG_TRANS_PUTRULE,
   APP_CONSTS,
+  OPT_HIGHLIGHT_WORDS_DISABLE,
 } from "./config";
-import { getFabWithDefault, getSettingWithDefault } from "./libs/storage";
+import {
+  getFabWithDefault,
+  getSettingWithDefault,
+  getWordsWithDefault,
+} from "./libs/storage";
 import { Translator } from "./libs/translator";
 import { isIframe, sendIframeMsg } from "./libs/iframe";
 import { touchTapListener } from "./libs/touch";
@@ -209,7 +214,19 @@ export async function run(isUserscript = false) {
 
     // 翻译网页
     const rule = await matchRule(href, setting);
-    const translator = new Translator(rule, setting, isUserscript);
+    let favWords = [];
+    if (
+      rule.highlightWords &&
+      rule.highlightWords !== OPT_HIGHLIGHT_WORDS_DISABLE
+    ) {
+      favWords = Object.keys(await getWordsWithDefault());
+    }
+    const translator = new Translator({
+      rule,
+      setting,
+      favWords,
+      isUserscript,
+    });
 
     // 适配iframe
     if (isIframe) {

src/config/i18n.js

@@ -719,6 +719,11 @@ export const I18N = {
     en: `Terms Style`,
     zh_TW: `專業術語樣式`,
   },
+  highlight_style: {
+    zh: `词汇高亮样式`,
+    en: `Fav Words highlight style`,
+    zh_TW: `詞彙高亮樣式`,
+  },
   selector_style_helper: {
     zh: `开启翻译时注入。`,
     en: `It is injected when translation is turned on.`,
@@ -1669,6 +1674,52 @@ export const I18N = {
     en: `Click to view [Custom Interface Example]`,
     zh_TW: `點選查看【自訂介面範例】`,
   },
+  split_paragraph: {
+    zh: `切分长段落`,
+    en: `Split long paragraph`,
+    zh_TW: `切分長段落`,
+  },
+  split_length: {
+    zh: `切分长度 (0-10000)`,
+    en: `Segmentation length(0-10000)`,
+    zh_TW: `切分長度(0-10000)`,
+  },
+  highlight_words: {
+    zh: `高亮收藏词汇`,
+    en: `Highlight favorite words`,
+    zh_TW: `高亮收藏詞彙`,
+  },
+
+  split_disable: {
+    zh: `禁用`,
+    en: `Disable`,
+    zh_TW: `停用`,
+  },
+  split_textlength: {
+    zh: `按照长度切分`,
+    en: `Split by length`,
+    zh_TW: `依長度切分`,
+  },
+  split_punctuation: {
+    zh: `按照句子切分`,
+    en: `Split by sentence`,
+    zh_TW: `按照句子切分`,
+  },
+  highlight_disable: {
+    zh: `禁用`,
+    en: `Disable`,
+    zh_TW: `停用`,
+  },
+  highlight_beforetrans: {
+    zh: `翻译前高亮`,
+    en: `Highlight before translation`,
+    zh_TW: `翻譯前高亮`,
+  },
+  highlight_aftertrans: {
+    zh: `翻译后高亮`,
+    en: `Highlight after translation`,
+    zh_TW: `翻譯後高亮`,
+  },
 };
 
 export const i18n = (lang) => (key) => I18N[key]?.[lang] || "";

src/config/rules.js

@@ -63,6 +63,24 @@ export const OPT_TIMING_ALL = [
   OPT_TIMING_ALT,
 ];
 
+export const OPT_SPLIT_PARAGRAPH_DISABLE = "split_disable";
+export const OPT_SPLIT_PARAGRAPH_TEXTLENGTH = "split_textlength";
+export const OPT_SPLIT_PARAGRAPH_PUNCTUATION = "split_punctuation";
+export const OPT_SPLIT_PARAGRAPH_ALL = [
+  OPT_SPLIT_PARAGRAPH_DISABLE,
+  OPT_SPLIT_PARAGRAPH_PUNCTUATION,
+  OPT_SPLIT_PARAGRAPH_TEXTLENGTH,
+];
+
+export const OPT_HIGHLIGHT_WORDS_DISABLE = "highlight_disable";
+export const OPT_HIGHLIGHT_WORDS_BEFORETRANS = "highlight_beforetrans";
+export const OPT_HIGHLIGHT_WORDS_AFTERTRANS = "highlight_aftertrans";
+export const OPT_HIGHLIGHT_WORDS_ALL = [
+  OPT_HIGHLIGHT_WORDS_DISABLE,
+  OPT_HIGHLIGHT_WORDS_BEFORETRANS,
+  OPT_HIGHLIGHT_WORDS_AFTERTRANS,
+];
+
 export const DEFAULT_DIY_STYLE = `color: #333;
 background: linear-gradient(
   45deg,
@@ -94,6 +112,7 @@ export const DEFAULT_RULE = {
   bgColor: "", // 译文颜色
   textDiyStyle: "", // 自定义译文样式
   termsStyle: "", // 专业术语样式
+  highlightStyle: "", // 高亮词汇样式
   selectStyle: "", // 选择器节点样式
   parentStyle: "", // 选择器父节点样式
   grandStyle: "", // 选择器父节点样式
@@ -116,6 +135,9 @@ export const DEFAULT_RULE = {
   hasShadowroot: GLOBAL_KEY, // 是否包含shadowroot
   rootsSelector: "", // 翻译范围选择器
   ignoreSelector: "", // 不翻译的选择器
+  splitParagraph: GLOBAL_KEY, // 切分段落
+  splitLength: 0, // 切分段落长度
+  highlightWords: GLOBAL_KEY, // 高亮词汇
 };
 
 // 全局规则
@@ -133,6 +155,7 @@ export const GLOBLA_RULE = {
   bgColor: "", // 译文颜色
   textDiyStyle: DEFAULT_DIY_STYLE, // 自定义译文样式
   termsStyle: "font-weight: bold;", // 专业术语样式
+  highlightStyle: "color: red;", // 高亮词汇样式
   selectStyle: DEFAULT_SELECT_STYLE, // 选择器节点样式
   parentStyle: DEFAULT_SELECT_STYLE, // 选择器父节点样式
   grandStyle: DEFAULT_SELECT_STYLE, // 选择器祖节点样式
@@ -155,6 +178,9 @@ export const GLOBLA_RULE = {
   hasShadowroot: "false", // 是否包含shadowroot
   rootsSelector: "body", // 翻译范围选择器
   ignoreSelector: DEFAULT_IGNORE_SELECTOR, // 不翻译的选择器
+  splitParagraph: OPT_SPLIT_PARAGRAPH_DISABLE, // 切分段落
+  splitLength: 100, // 切分段落长度
+  highlightWords: OPT_HIGHLIGHT_WORDS_DISABLE, // 高亮词汇
 };
 
 export const DEFAULT_RULES = [GLOBLA_RULE];

src/libs/rules.js

@@ -7,6 +7,8 @@ import {
   // OPT_TIMING_ALL,
   DEFAULT_RULE,
   GLOBLA_RULE,
+  OPT_SPLIT_PARAGRAPH_ALL,
+  OPT_HIGHLIGHT_WORDS_ALL,
 } from "../config";
 import { loadOrFetchSubRules } from "./subRules";
 import { getRulesWithDefault, setRules } from "./storage";
@@ -53,6 +55,7 @@ export const matchRule = async (href, { injectRules, subrulesList }) => {
     "terms",
     "aiTerms",
     "termsStyle",
+    "highlightStyle",
     "selectStyle",
     "parentStyle",
     "grandStyle",
@@ -82,12 +85,20 @@ export const matchRule = async (href, { injectRules, subrulesList }) => {
     "transTitle",
     // "detectRemote",
     // "fixerFunc",
+    "splitParagraph",
+    "highlightWords",
   ].forEach((key) => {
     if (!rule[key] || rule[key] === GLOBAL_KEY) {
       rule[key] = globalRule[key];
     }
   });
 
+  ["splitLength"].forEach((key) => {
+    if (!rule[key]) {
+      rule[key] = globalRule[key];
+    }
+  });
+
   // if (!rule.skipLangs || rule.skipLangs.length === 0) {
   //   rule.skipLangs = globalRule.skipLangs;
   // }
@@ -138,6 +149,7 @@ export const checkRules = (rules) => {
         terms,
         aiTerms,
         termsStyle,
+        highlightStyle,
         selectStyle,
         parentStyle,
         grandStyle,
@@ -164,6 +176,9 @@ export const checkRules = (rules) => {
         transStartHook,
         transEndHook,
         // transRemoveHook,
+        splitParagraph,
+        splitLength,
+        highlightWords,
       }) => ({
         pattern: pattern.trim(),
         selector: type(selector) === "string" ? selector : "",
@@ -173,6 +188,7 @@ export const checkRules = (rules) => {
         terms: type(terms) === "string" ? terms : "",
         aiTerms: type(aiTerms) === "string" ? aiTerms : "",
         termsStyle: type(termsStyle) === "string" ? termsStyle : "",
+        highlightStyle: type(highlightStyle) === "string" ? highlightStyle : "",
         selectStyle: type(selectStyle) === "string" ? selectStyle : "",
         parentStyle: type(parentStyle) === "string" ? parentStyle : "",
         grandStyle: type(grandStyle) === "string" ? grandStyle : "",
@@ -203,6 +219,15 @@ export const checkRules = (rules) => {
         // transRemoveHook:
         //   type(transRemoveHook) === "string" ? transRemoveHook : "",
         // fixerFunc: matchValue([GLOBAL_KEY, ...FIXER_ALL], fixerFunc),
+        splitParagraph: matchValue(
+          [GLOBAL_KEY, ...OPT_SPLIT_PARAGRAPH_ALL],
+          splitParagraph
+        ),
+        splitLength: Number.isInteger(splitLength) ? splitLength : 0,
+        highlightWords: matchValue(
+          [GLOBAL_KEY, ...OPT_HIGHLIGHT_WORDS_ALL],
+          highlightWords
+        ),
       })
     );
 

src/libs/translator.js

@@ -18,6 +18,11 @@ import {
   MSG_TRANSBOX_TOGGLE,
   MSG_MOUSEHOVER_TOGGLE,
   MSG_TRANSINPUT_TOGGLE,
+  OPT_HIGHLIGHT_WORDS_BEFORETRANS,
+  OPT_HIGHLIGHT_WORDS_AFTERTRANS,
+  OPT_SPLIT_PARAGRAPH_PUNCTUATION,
+  OPT_SPLIT_PARAGRAPH_DISABLE,
+  OPT_SPLIT_PARAGRAPH_TEXTLENGTH,
 } from "../config";
 import interpreter from "./interpreter";
 import { ShadowRootMonitor } from "./shadowroot";
@@ -164,6 +169,8 @@ export class Translator {
     warpper: `${APP_LCNAME}-wrapper notranslate`,
     inner: `${APP_LCNAME}-inner`,
     term: `${APP_LCNAME}-term`,
+    br: `${APP_LCNAME}-br`,
+    highlight: `${APP_LCNAME}-highlight`,
   };
 
   // 内置跳过翻译文本
@@ -279,6 +286,7 @@ export class Translator {
   #textClass = {}; // 译文样式class
   #textSheet = ""; // 译文样式字典
   #apisMap = new Map(); // 用于接口快速查找
+  #favWords = []; // 收藏词汇
 
   #isUserscript = false;
   #transboxManager = null; // 划词翻译
@@ -289,6 +297,7 @@ export class Translator {
   #viewNodes = new Set(); // 当前在可视范围内的单元
   #processedNodes = new WeakMap(); // 已处理（已执行翻译DOM操作）的单元
   #rootNodes = new Set(); // 已监控的根节点
+  #skipMoNodes = new WeakSet(); // 忽略变化的节点
 
   #removeKeydownHandler; // 快捷键清理函数
   #hoveredNode = null; // 存储当前悬停的可翻译节点
@@ -330,9 +339,15 @@ export class Translator {
     };
   }
 
-  constructor(rule = {}, setting = {}, isUserscript = false) {
+  constructor({
+    rule = {},
+    setting = {},
+    favWords = [],
+    isUserscript = false,
+  }) {
     this.#setting = { ...Translator.DEFAULT_OPTIONS, ...setting };
     this.#rule = { ...Translator.DEFAULT_RULE, ...rule };
+    this.#favWords = favWords;
     this.#apisMap = new Map(
       this.#setting.transApis.map((api) => [api.apiSlug, api])
     );
@@ -585,6 +600,8 @@ export class Translator {
   #createMutationObserver() {
     return new MutationObserver((mutations) => {
       for (const mutation of mutations) {
+        if (this.#skipMoNodes.has(mutation.target)) return;
+
         if (
           mutation.type === "characterData" &&
           mutation.oldValue !== mutation.target.nodeValue
@@ -599,6 +616,8 @@ export class Translator {
           let nodes = new Set();
           let hasText = false;
           mutation.addedNodes.forEach((node) => {
+            if (this.#skipMoNodes.has(node)) return;
+
             if (/\S/.test(node.nodeValue)) {
               if (node.nodeType === Node.TEXT_NODE) {
                 hasText = true;
@@ -780,6 +799,10 @@ export class Translator {
 
   // 开始/重新监控节点
   #startObserveNode(node) {
+    if (this.#rule.highlightWords === OPT_HIGHLIGHT_WORDS_BEFORETRANS) {
+      this.#highlightWordsDeeply(node);
+    }
+
     if (
       !this.#observedNodes.has(node) &&
       this.#enabled &&
@@ -861,7 +884,12 @@ export class Translator {
 
     // 提前进行语言检测
     let deLang = "";
-    const { fromLang = "auto", toLang } = this.#rule;
+    const {
+      fromLang = "auto",
+      toLang,
+      splitParagraph = OPT_SPLIT_PARAGRAPH_DISABLE,
+      splitLength = 100,
+    } = this.#rule;
     const { langDetector, skipLangs = [] } = this.#setting;
     if (fromLang === "auto") {
       deLang = await tryDetectLang(node.textContent, langDetector);
@@ -876,6 +904,11 @@ export class Translator {
       }
     }
 
+    // 切分长段落
+    if (splitParagraph !== OPT_SPLIT_PARAGRAPH_DISABLE) {
+      this.#splitTextNodesBySentence(node, splitParagraph, splitLength);
+    }
+
     let nodeGroup = [];
     [...node.childNodes].forEach((child) => {
       const shouldBreak = this.#shouldBreak(child);
@@ -895,6 +928,162 @@ export class Translator {
     }
   }
 
+  // 高亮词汇
+  #highlightTextNode(textNode, wordRegex) {
+    if (textNode.parentNode?.nodeName.toLowerCase() === "b") {
+      return;
+    }
+
+    if (!wordRegex.test(textNode.textContent)) {
+      return;
+    }
+
+    wordRegex.lastIndex = 0;
+    const fragments = textNode.textContent.split(wordRegex);
+    const newNodes = [];
+
+    fragments.forEach((fragment, i) => {
+      if (!fragment) return;
+
+      if (i % 2 === 1) {
+        // 奇数索引是匹配到的关键词
+        const bTag = document.createElement("b");
+        bTag.className = Translator.KISS_CLASS.highlight;
+        bTag.style.cssText = this.#rule.highlightStyle || "";
+        bTag.textContent = fragment;
+        this.#skipMoNodes.add(bTag);
+        newNodes.push(bTag);
+      } else {
+        // 偶数索引是普通文本
+        const newTextNode = document.createTextNode(fragment);
+        this.#skipMoNodes.add(newTextNode);
+        newNodes.push(newTextNode);
+      }
+    });
+
+    if (newNodes.length > 0) {
+      textNode.replaceWith(...newNodes);
+    }
+  }
+
+  // 高亮词汇
+  #highlightWordsDeeply(parentNode) {
+    if (!parentNode || this.#favWords.length === 0) {
+      return;
+    }
+
+    const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const escapedWords = this.#favWords.map(escapeRegex);
+    const wordRegex = new RegExp(`\\b(${escapedWords.join("|")})\\b`, "gi");
+
+    if (parentNode.nodeType === Node.ELEMENT_NODE) {
+      const walker = document.createTreeWalker(
+        parentNode,
+        NodeFilter.SHOW_TEXT,
+        null,
+        false
+      );
+
+      const nodesToProcess = [];
+      let node;
+      while ((node = walker.nextNode())) {
+        nodesToProcess.push(node);
+      }
+
+      nodesToProcess.forEach((textNode) => {
+        this.#highlightTextNode(textNode, wordRegex);
+      });
+    } else if (parentNode.nodeType === Node.TEXT_NODE) {
+      this.#highlightTextNode(parentNode, wordRegex);
+    }
+  }
+
+  // 切分文本段落
+  #splitTextNodesBySentence(parentNode, splitParagraph, splitLength) {
+    const sentenceEndRegexForSplit = /[。！？]+|[.?!]+(?=\s+|$)/g;
+
+    [...parentNode.childNodes].forEach((node) => {
+      if (node.nodeType !== Node.TEXT_NODE || node.textContent.trim() === "") {
+        return;
+      }
+
+      const text = node.textContent;
+      const parts = [];
+      let lastIndex = 0;
+      let match;
+
+      while ((match = sentenceEndRegexForSplit.exec(text)) !== null) {
+        let realEndIndex = match.index + match[0].length;
+        while (realEndIndex < text.length && /\s/.test(text[realEndIndex])) {
+          realEndIndex++;
+        }
+        parts.push(text.substring(lastIndex, realEndIndex));
+        lastIndex = realEndIndex;
+        sentenceEndRegexForSplit.lastIndex = realEndIndex;
+      }
+      if (lastIndex < text.length) {
+        parts.push(text.substring(lastIndex));
+      }
+
+      const validParts = parts.filter((part) => part.trim().length > 0);
+      if (validParts.length <= 1) {
+        return;
+      }
+
+      const newNodes = validParts.map((part) => {
+        const newNode = document.createTextNode(part);
+        this.#skipMoNodes.add(newNode);
+        return newNode;
+      });
+
+      node.replaceWith(...newNodes);
+    });
+
+    const sentenceEndRegexForTest = /(?:[。！？?!]+|(?<!\d)\.)\s*$/;
+    let textLength = 0;
+
+    [...parentNode.childNodes].forEach((node) => {
+      textLength += node.textContent.length;
+
+      const isSentenceEnd = sentenceEndRegexForTest.test(node.textContent);
+      if (!isSentenceEnd || node.nextSibling?.nodeName === "BR") {
+        return;
+      }
+
+      if (
+        splitParagraph === OPT_SPLIT_PARAGRAPH_PUNCTUATION ||
+        (splitParagraph === OPT_SPLIT_PARAGRAPH_TEXTLENGTH &&
+          textLength >= splitLength)
+      ) {
+        textLength = 0;
+
+        const br = document.createElement("br");
+        br.className = Translator.KISS_CLASS.br;
+        this.#skipMoNodes.add(br);
+
+        node.after(br);
+      }
+    });
+  }
+
+  // 清除高亮
+  #removeHighlights(parentNode) {
+    if (!parentNode) {
+      return;
+    }
+
+    const highlightedElements = parentNode.querySelectorAll(
+      `.${Translator.KISS_CLASS.highlight}`
+    );
+
+    highlightedElements.forEach((element) => {
+      const textNode = document.createTextNode(element.textContent);
+      element.replaceWith(textNode);
+    });
+
+    parentNode.normalize();
+  }
+
   // 判断是否需要换行
   #shouldBreak(node) {
     if (!Translator.isElementOrFragment(node)) return false;
@@ -971,6 +1160,7 @@ export class Translator {
       // detectRemote,
       // toLang,
       // skipLangs = [],
+      highlightWords,
     } = this.#rule;
     const {
       newlineLength,
@@ -1062,6 +1252,11 @@ export class Translator {
         parentNode.parentElement.style.cssText += grandStyle;
       }
 
+      // 高亮词汇
+      if (highlightWords === OPT_HIGHLIGHT_WORDS_AFTERTRANS) {
+        nodes.forEach((node) => this.#highlightWordsDeeply(node));
+      }
+
       // 翻译完成钩子函数
       if (transEndHook?.trim()) {
         try {
@@ -1226,6 +1421,10 @@ export class Translator {
     root
       .querySelectorAll(APP_LCNAME)
       .forEach((el) => this.#removeTranslationElement(el));
+
+    root
+      .querySelectorAll(Translator.KISS_CLASS.br)
+      .forEach((br) => br.remove());
   }
 
   // 清理子节点译文dom
@@ -1237,7 +1436,8 @@ export class Translator {
 
   // 清理译文
   #removeTranslationElement(el) {
-    this.#processedNodes.delete(el.parentElement);
+    const parentElement = el.parentElement;
+    this.#processedNodes.delete(parentElement);
 
     // 如果是仅显示译文模式，先恢复原文
     const { nodes, isHide } = this.#translationNodes.get(el) || {};
@@ -1247,6 +1447,11 @@ export class Translator {
 
     this.#translationNodes.delete(el);
     el.remove();
+
+    // 清除高亮
+    if (this.#rule.highlightWords === OPT_HIGHLIGHT_WORDS_AFTERTRANS) {
+      this.#removeHighlights(parentElement);
+    }
   }
 
   // 恢复原文

src/views/Options/Rules.js

@@ -16,6 +16,10 @@ import {
   URL_KISS_RULES_NEW_ISSUE,
   OPT_SYNCTYPE_WORKER,
   DEFAULT_TRANS_TAG,
+  OPT_SPLIT_PARAGRAPH_DISABLE,
+  OPT_HIGHLIGHT_WORDS_DISABLE,
+  OPT_SPLIT_PARAGRAPH_ALL,
+  OPT_HIGHLIGHT_WORDS_ALL,
 } from "../../config";
 import { useState, useEffect, useMemo } from "react";
 import { useI18n } from "../../hooks/I18n";
@@ -59,6 +63,7 @@ import AddIcon from "@mui/icons-material/Add";
 import EditIcon from "@mui/icons-material/Edit";
 import CancelIcon from "@mui/icons-material/Cancel";
 import SaveIcon from "@mui/icons-material/Save";
+import ValidationInput from "../../hooks/ValidationInput";
 import { kissLog } from "../../libs/log";
 import { useApiList } from "../../hooks/Api";
 import ShowMoreButton from "./ShowMoreButton";
@@ -98,6 +103,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
     terms = "",
     aiTerms = "",
     termsStyle = "",
+    highlightStyle = "color: red;",
     selectStyle = "",
     parentStyle = "",
     grandStyle = "",
@@ -124,6 +130,9 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
     transStartHook = "",
     transEndHook = "",
     // transRemoveHook = "",
+    splitParagraph = OPT_SPLIT_PARAGRAPH_DISABLE,
+    splitLength = 0,
+    highlightWords = OPT_HIGHLIGHT_WORDS_DISABLE,
   } = formValues;
 
   const isModified = useMemo(() => {
@@ -423,6 +432,58 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               </TextField>
             </Grid>
 
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="splitParagraph"
+                value={splitParagraph}
+                label={i18n("split_paragraph")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                {OPT_SPLIT_PARAGRAPH_ALL.map((item) => (
+                  <MenuItem key={item} value={item}>
+                    {i18n(item)}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <ValidationInput
+                fullWidth
+                size="small"
+                label={i18n("split_length")}
+                type="number"
+                name="splitLength"
+                value={splitLength}
+                onChange={handleChange}
+                min={0}
+                max={1000}
+              />
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="highlightWords"
+                value={highlightWords}
+                label={i18n("highlight_words")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                {OPT_HIGHLIGHT_WORDS_ALL.map((item) => (
+                  <MenuItem key={item} value={item}>
+                    {i18n(item)}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+
             <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
                 select
@@ -558,6 +619,16 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               maxRows={10}
               multiline
             />
+            <TextField
+              size="small"
+              label={i18n("highlight_style")}
+              name="highlightStyle"
+              value={highlightStyle}
+              disabled={disabled}
+              onChange={handleChange}
+              maxRows={10}
+              multiline
+            />
             <TextField
               size="small"
               label={i18n("selector_style")}