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 (