diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 629d612d..ef973da2 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -215,6 +215,12 @@
"optionsChangeLog": {
"message": "Change log"
},
+ "optionsAutoTranslateAfterInput": {
+ "message": "Auto translate after input in input box"
+ },
+ "optionsAutoTranslateAfterInputDescription": {
+ "message": "Extension will send a translate request automatically with the text you input in input box in 0.6s. If you disable it, you will need to use \"Ctrl + Enter\" keyboard shortcut to trigger the translate request."
+ },
"themePreset": {
"message": "Preset"
},
diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
index 86570ea9..2d1ab7de 100644
--- a/public/_locales/ja/messages.json
+++ b/public/_locales/ja/messages.json
@@ -215,6 +215,12 @@
"optionsChangeLog": {
"message": "更新ログ"
},
+ "optionsAutoTranslateAfterInput": {
+ "message": "入力ボックスに入力した後に自動翻訳する"
+ },
+ "optionsAutoTranslateAfterInputDescription": {
+ "message": "あなたが入力ボックスに入力した0.6秒後に拡張機能が自動的に翻訳リクエストを送ります。無効にする場合は「Ctrl + Enter」キーボードショートカットを使って翻訳リクエストを送ります。"
+ },
"themePreset": {
"message": "プリセット"
},
diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
index c4cd551e..de56b1e5 100644
--- a/public/_locales/zh_CN/messages.json
+++ b/public/_locales/zh_CN/messages.json
@@ -215,6 +215,12 @@
"optionsChangeLog": {
"message": "更新日志"
},
+ "optionsAutoTranslateAfterInput": {
+ "message": "在输入框输入后自动翻译"
+ },
+ "optionsAutoTranslateAfterInputDescription": {
+ "message": "当你在输入框输入后,经过0.6秒,扩展会自动发送翻译请求。当不启用时,需要使用“Ctrl + Enter”快捷键来发送翻译请求。"
+ },
"themePreset": {
"message": "预设"
},
diff --git a/public/_locales/zh_TW/messages.json b/public/_locales/zh_TW/messages.json
index 561f8942..d691b600 100644
--- a/public/_locales/zh_TW/messages.json
+++ b/public/_locales/zh_TW/messages.json
@@ -215,6 +215,12 @@
"optionsChangeLog": {
"message": "更新日誌"
},
+ "optionsAutoTranslateAfterInput": {
+ "message": "在輸入框輸入後自動翻譯"
+ },
+ "optionsAutoTranslateAfterInputDescription": {
+ "message": "當你在輸入框輸入后,經過0.6秒,擴充功能會自動發送翻譯請求。當不啟用時,需要使用「Ctrl + Enter」快速鍵來發送翻譯請求。鍵盤快速鍵"
+ },
"themePreset": {
"message": "預設"
},
diff --git a/src/components/RawText/index.js b/src/components/RawText/index.js
index b6b286e7..91db1c90 100644
--- a/src/components/RawText/index.js
+++ b/src/components/RawText/index.js
@@ -1,9 +1,9 @@
-import React, { useRef, useCallback, useState, useEffect } from 'react';
+import React, { useRef, useCallback, useState, useEffect, useLayoutEffect } from 'react';
import { getMessage } from '../../public/i18n';
import useDebounce from '../../public/react-use/useDebounce';
import './style.css';
-const RawText = ({ defaultValue, rawTextTranslate, focusDependency }) => {
+const RawText = ({ defaultValue, rawTextTranslate, focusDependency, autoTranslateAfterInput }) => {
const [debounceDependency, setDebounceDependency] = useState(0);
const lastTextRef = useRef('');
@@ -32,12 +32,12 @@ const RawText = ({ defaultValue, rawTextTranslate, focusDependency }) => {
const onCompositionEnd = useCallback(() => {
compositionStatus.current = false;
- rawTextChanged();
- }, [rawTextChanged]);
+ autoTranslateAfterInput && rawTextChanged();
+ }, [rawTextChanged, autoTranslateAfterInput]);
const onChange = useCallback(() => {
- !compositionStatus.current && rawTextChanged();
- }, [rawTextChanged]);
+ autoTranslateAfterInput && !compositionStatus.current && rawTextChanged();
+ }, [rawTextChanged, autoTranslateAfterInput]);
useEffect(() => {
if (defaultValue) {
@@ -51,6 +51,21 @@ const RawText = ({ defaultValue, rawTextTranslate, focusDependency }) => {
textareaEl.current.select();
}, [focusDependency]);
+ useLayoutEffect(() => {
+ const tempRef = textareaEl.current;
+
+ const onRawTextKeyDown = (e) => {
+ if (e.ctrlKey && e.keyCode === 13) {
+ e.preventDefault();
+ handleRawTextChanged();
+ }
+ };
+
+ !autoTranslateAfterInput && tempRef.addEventListener('keydown', onRawTextKeyDown);
+
+ return () => !autoTranslateAfterInput && tempRef.removeEventListener('keydown', onRawTextKeyDown);
+ }, [handleRawTextChanged, autoTranslateAfterInput]);
+
return (
diff --git a/src/entry/content/SingleTranslateResult/index.js b/src/entry/content/SingleTranslateResult/index.js
index d778250c..5d61e7fd 100644
--- a/src/entry/content/SingleTranslateResult/index.js
+++ b/src/entry/content/SingleTranslateResult/index.js
@@ -19,7 +19,7 @@ import { addHistory, updateHistoryError, updateHistoryFinish } from '../../../re
import { useIsEnable } from '../../../public/react-use';
import './style.css';
-const SingleTranslateResult = ({ showRtAndLs, maxHeightGap }) => {
+const SingleTranslateResult = ({ showRtAndLs, maxHeightGap, autoTranslateAfterInput }) => {
const [resultMaxHeight, setResultMaxHeight] = useState(500);
const { text, source, from, to, status, result, translateId } = useSelector(state => state.singleTranslateState);
@@ -97,6 +97,7 @@ const SingleTranslateResult = ({ showRtAndLs, maxHeightGap }) => {
defaultValue={text}
rawTextTranslate={handleRawTextChange}
focusDependency={focusRawText}
+ autoTranslateAfterInput={autoTranslateAfterInput}
/>
{
translatePanelFontSize,
rememberHistoryPanelStatus,
translateDirectlyWhilePinning,
- doNotRespondInTextBox
+ doNotRespondInTextBox,
+ autoTranslateAfterInput
} = useOptions(useOptionsDependency);
const updateStorage = useCallback((key, value) => (setLocalStorage({[key]: value})), []);
@@ -100,6 +101,7 @@ const Options = () => {
translatePanelMaxHeight={translatePanelMaxHeight}
translatePanelWidth={translatePanelWidth}
translatePanelFontSize={translatePanelFontSize}
+ autoTranslateAfterInput={autoTranslateAfterInput}
/>
{getMessage('optionsDefaultTranslateOptions')}
`${v}px`
-const TranslatePanel = ({ updateStorage, pinThePanelWhileOpeningIt, rememberPositionOfPinnedPanel, translatePanelMaxHeight, translatePanelWidth, translatePanelFontSize }) => {
+const TranslatePanel = ({
+ updateStorage,
+ pinThePanelWhileOpeningIt,
+ rememberPositionOfPinnedPanel,
+ translatePanelMaxHeight,
+ translatePanelWidth,
+ translatePanelFontSize,
+ autoTranslateAfterInput
+}) => {
const { percentage: hPercentage, px: hPx, percent: hPercent } = translatePanelMaxHeight;
const { percentage: wPercentage, px: wPx, percent: wPercent } = translatePanelWidth;
@@ -132,6 +140,15 @@ const TranslatePanel = ({ updateStorage, pinThePanelWhileOpeningIt, rememberPosi
/>
{getMessage('optionsRememberPositionOfPinnedPanelDescription')}
+
+
updateStorage('autoTranslateAfterInput', !autoTranslateAfterInput)}
+ />
+ {getMessage('optionsAutoTranslateAfterInputDescription')}
+
);
};
diff --git a/src/entry/popup/MultipleTranslateResult/index.js b/src/entry/popup/MultipleTranslateResult/index.js
index 355a1bf3..bbc7b93d 100644
--- a/src/entry/popup/MultipleTranslateResult/index.js
+++ b/src/entry/popup/MultipleTranslateResult/index.js
@@ -10,7 +10,7 @@ import MtResult from '../../../components/MtResult';
import { mtLangCode } from '../../../constants/langCode';
import { getMessage } from '../../../public/i18n';
-const MultipleTranslateResult = () => {
+const MultipleTranslateResult = ({ autoTranslateAfterInput }) => {
const { focusRawText } = useSelector(state => state.resultBoxState);
const { text, from, to, translations, translateId } = useSelector(state => state.multipleTranslateState);
@@ -67,6 +67,7 @@ const MultipleTranslateResult = () => {
defaultValue={text}
rawTextTranslate={handleRawTextTranslate}
focusDependency={focusRawText}
+ autoTranslateAfterInput={autoTranslateAfterInput}
/>
{
+ const { autoTranslateAfterInput } = useOptions(useOptionsDependency);
+
return (
- {multipleTranslateMode ? : }
+ {multipleTranslateMode ? : }
)
diff --git a/src/entry/popup/SingleTranslateResult/index.js b/src/entry/popup/SingleTranslateResult/index.js
index f5d7d4ad..855c6486 100644
--- a/src/entry/popup/SingleTranslateResult/index.js
+++ b/src/entry/popup/SingleTranslateResult/index.js
@@ -9,7 +9,7 @@ import { stRequestFinish, stRequestStart, stRequestError, stSetFromAndTo, stSetT
import TsVia from '../../../components/TsVia';
import { switchTranslateSource } from '../../../public/switch-translate-source';
-const SingleTranslateResult = () => {
+const SingleTranslateResult = ({ autoTranslateAfterInput }) => {
const { focusRawText } = useSelector(state => state.resultBoxState);
const { status, result, source, from, to, text, translateId } = useSelector(state => state.singleTranslateState);
@@ -66,6 +66,7 @@ const SingleTranslateResult = () => {
defaultValue={text}
rawTextTranslate={handleRawTextTranslate}
focusDependency={focusRawText}
+ autoTranslateAfterInput={autoTranslateAfterInput}
/>
{
const { text, from, to, translations, translateId } = useSelector(state => state.multipleTranslateState);
@@ -66,7 +66,7 @@ const Separate = () => {
oldTranslateIdRef.current = translateId;
}, [translateId, text, handleTranslate, translations, dispatch]);
- const { styleVarsList, styleVarsIndex, rememberStwSizeAndPosition } = useOptions(useOptionsDependency);
+ const { styleVarsList, styleVarsIndex, rememberStwSizeAndPosition, autoTranslateAfterInput } = useOptions(useOptionsDependency);
const handleThemeToggle = useCallback(() => {
setLocalStorage({'styleVarsIndex': styleVarsIndex >= styleVarsList.length - 1 ? 0 : styleVarsIndex + 1});
@@ -120,6 +120,7 @@ const Separate = () => {
defaultValue={text}
rawTextTranslate={handleRawTextTranslate}
focusDependency={focusRawText}
+ autoTranslateAfterInput={autoTranslateAfterInput}
/>