feat: enhanced hook function functionality

src/config/i18n.js

@@ -1184,9 +1184,9 @@ export const I18N = {
     zh_TW: `翻譯開始 Hook`,
   },
   translate_start_hook_helper: {
-    zh: `翻译开始时运行，入参为： 翻译节点，原文文本。`,
+    zh: `翻译开始时运行，入参为： 翻译节点，原文文本，返回：待译文本。`,
-    en: `Run when translation starts, the input parameters are: translation node, original text.`,
+    en: `Run when translation starts, the input parameters are: translation node, original text, and returns: text to be translated.`,
-    zh_TW: `翻譯開始時執行，入參為：翻譯節點、原文文字。`,
+    zh_TW: `翻譯開始時執行，入參為：翻譯節點、原文文字，回傳：待譯文本。`,
   },
   translate_end_hook: {
     zh: `翻译完成钩子函数`,
@@ -1194,9 +1194,9 @@ export const I18N = {
     zh_TW: `翻譯完成 Hook`,
   },
   translate_end_hook_helper: {
-    zh: `翻译完成时运行，入参为： 翻译节点，原文文本，译文文本，保留元素。`,
+    zh: `翻译完成时运行，入参为： 翻译节点，原文文本，译文文本，保留元素、术语列表，返回：译文文本。`,
-    en: `Run when the translation is completed, the input parameters are: translation node, original text, translation text, retained elements.`,
+    en: `Run when the translation is completed, the input parameters are: translation node, original text, translation text, retained elements, and returns: translation text.`,
-    zh_TW: `翻譯完成時執行，入參為：翻譯節點、原文文字、譯文文字、保留元素。`,
+    zh_TW: `翻譯完成時執行，入參為：翻譯節點、原文文字、譯文文字、保留元素，返回：譯文文本。`,
   },
   translate_remove_hook: {
     zh: `翻译移除钩子函数`,

src/hooks/Translate.js

@@ -14,7 +14,7 @@ import { kissLog } from "../libs/log";
  */
 export function useTranslate(q, rule, setting) {
   const [text, setText] = useState("");
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [sameLang, setSamelang] = useState(false);
 
   const { translator, fromLang, toLang, detectRemote, skipLangs = [] } = rule;
@@ -22,8 +22,6 @@ export function useTranslate(q, rule, setting) {
   useEffect(() => {
     (async () => {
       try {
-        setLoading(true);
-
         if (!q.replace(/\[(\d+)\]/g, "").trim()) {
           setText(q);
           setSamelang(false);

src/libs/translator.js

@@ -495,13 +495,6 @@ export class Translator {
     let q = el.innerText.trim();
     const keeps = [];
 
-    // 翻译开始钩子函数
-    const { transStartHook } = this._rule;
-    if (transStartHook?.trim()) {
-      interpreter.run(`exports.transStartHook = ${transStartHook}`);
-      interpreter.exports.transStartHook(el, q);
-    }
-
     // 保留元素
     const keepSelector = this._keepSelector.trim();
     if (keepSelector) {
@@ -540,17 +533,22 @@ export class Translator {
         const re = new RegExp(term[0], "g");
         q = q.replace(re, (t) => {
           const text = `[${keeps.length}]`;
-          keeps.push(`<i class="kiss-trem">${term[1] || t}</i>`);
+          keeps.push(`<i class="kiss-term">${term[1] || t}</i>`);
           return text;
         });
       }
     }
 
-    // 附加样式
+    // 翻译开始钩子函数
-    const { selectStyle, parentStyle } = this._rule;
+    const { transStartHook } = this._rule;
-    el.style.cssText += selectStyle;
+    if (transStartHook?.trim()) {
-    if (el.parentElement) {
+      interpreter.run(`exports.transStartHook = ${transStartHook}`);
-      el.parentElement.style.cssText += parentStyle;
+      q = interpreter.exports.transStartHook(el, q);
+    }
+
+    // 终止翻译
+    if (!q) {
+      return;
     }
 
     // 插入译文节点
@@ -564,5 +562,12 @@ export class Translator {
     // 渲染译文节点
     const root = createRoot(traEl);
     root.render(<Content q={q} keeps={keeps} translator={this} $el={el} />);
+
+    // 附加样式
+    const { selectStyle, parentStyle } = this._rule;
+    el.style.cssText += selectStyle;
+    if (el.parentElement) {
+      el.parentElement.style.cssText += parentStyle;
+    }
   };
 }

src/views/Content/index.js

@@ -129,14 +129,6 @@ export default function Content({ q, keeps, translator, $el }) {
     };
   }, [translator.eventName]);
 
-  useEffect(() => {
-    // 运行钩子函数
-    if (text && transEndHook?.trim()) {
-      interpreter.run(`exports.transEndHook = ${transEndHook}`);
-      interpreter.exports.transEndHook($el, q, text, keeps);
-    }
-  }, [$el, q, text, keeps, transEndHook]);
-
   const gap = useMemo(() => {
     if (transOnly === "true") {
       return "";
@@ -154,6 +146,16 @@ export default function Content({ q, keeps, translator, $el }) {
     [textStyle, textDiyStyle, bgColor, transTag]
   );
 
+  const trText = useMemo(() => {
+    if (loading || !transEndHook?.trim()) {
+      return text;
+    }
+
+    // 翻译完成钩子函数
+    interpreter.run(`exports.transEndHook = ${transEndHook}`);
+    return interpreter.exports.transEndHook($el, q, text, keeps);
+  }, [loading, $el, q, text, keeps, transEndHook]);
+
   if (loading) {
     return (
       <>
@@ -163,7 +165,7 @@ export default function Content({ q, keeps, translator, $el }) {
     );
   }
 
-  if (!text || sameLang) {
+  if (!trText || sameLang) {
     return;
   }
 
@@ -186,7 +188,7 @@ export default function Content({ q, keeps, translator, $el }) {
         <StyledSpan
           {...styles}
           dangerouslySetInnerHTML={{
-            __html: text.replace(/\[(\d+)\]/g, (_, p) => keeps[parseInt(p)]),
+            __html: trText.replace(/\[(\d+)\]/g, (_, p) => keeps[parseInt(p)]),
           }}
         />
       </>
@@ -196,7 +198,7 @@ export default function Content({ q, keeps, translator, $el }) {
   return (
     <>
       {gap}
-      <StyledSpan {...styles}>{text}</StyledSpan>
+      <StyledSpan {...styles}>{trText}</StyledSpan>
     </>
   );
 }