feat: keep unchanged elements

src/views/Content/index.js

@@ -112,7 +112,7 @@ function StyledSpan({ textStyle, textDiyStyle, bgColor, children }) {
   }
 }
 
-export default function Content({ q, translator }) {
+export default function Content({ q, keeps, translator }) {
   const [rule, setRule] = useState(translator.rule);
   const { text, sameLang, loading } = useTranslate(q, rule, translator.setting);
   const { textStyle, bgColor = "", textDiyStyle = "" } = rule;
@@ -145,18 +145,28 @@ export default function Content({ q, translator }) {
     );
   }
 
-  if (text && !sameLang) {
-    return (
-      <>
-        {q.length >= newlineLength ? <br /> : " "}
-        <StyledSpan
-          textStyle={textStyle}
-          textDiyStyle={textDiyStyle}
-          bgColor={bgColor}
-        >
-          {text}
-        </StyledSpan>
-      </>
-    );
+  if (!text || sameLang) {
+    return;
   }
+
+  return (
+    <>
+      {q.length >= newlineLength ? <br /> : " "}
+      <StyledSpan
+        textStyle={textStyle}
+        textDiyStyle={textDiyStyle}
+        bgColor={bgColor}
+      >
+        {keeps.length > 0 ? (
+          <span
+            dangerouslySetInnerHTML={{
+              __html: text.replace(/#(\d+)#/g, (_, p) => keeps[parseInt(p)]),
+            }}
+          />
+        ) : (
+          text
+        )}
+      </StyledSpan>
+    </>
+  );
 }

src/views/Options/Rules.js

@@ -65,6 +65,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
   const {
     pattern,
     selector,
+    keepSelector = "",
     translator,
     fromLang,
     toLang,
@@ -179,6 +180,16 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
           onFocus={handleFocus}
           multiline
         />
+        <TextField
+          size="small"
+          label={i18n("keep_selector")}
+          helperText={i18n("keep_selector_helper")}
+          name="keepSelector"
+          value={keepSelector}
+          disabled={disabled}
+          onChange={handleChange}
+          multiline
+        />
 
         <Box>
           <Grid container spacing={2} columns={12}>