diff --git a/src/config/i18n.js b/src/config/i18n.js
index 6163727..1d8c4f8 100644
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -861,4 +861,8 @@ export const I18N = {
zh: `打开设置`,
en: `Open Setting`,
},
+ follow_selection: {
+ zh: `翻译框跟随选中文本`,
+ en: `Transbox Follow Selection`,
+ },
};
diff --git a/src/config/index.js b/src/config/index.js
index fc4a312..1001af6 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -434,6 +434,7 @@ export const DEFAULT_TRANBOX_SETTING = {
hideTranBtn: false, // 是否隐藏翻译按钮
hideClickAway: false, // 是否点击外部关闭弹窗
simpleStyle: false, // 是否简洁界面
+ followSelection: false, // 翻译框是否跟随选中文本
triggerMode: OPT_TRANBOX_TRIGGER_CLICK, // 触发翻译方式
extStyles: "", // 附加样式
};
diff --git a/src/views/Options/Tranbox.js b/src/views/Options/Tranbox.js
index dacdf0d..f627b40 100644
--- a/src/views/Options/Tranbox.js
+++ b/src/views/Options/Tranbox.js
@@ -58,6 +58,7 @@ export default function Tranbox() {
hideTranBtn = false,
hideClickAway = false,
simpleStyle = false,
+ followSelection = false,
triggerMode = OPT_TRANBOX_TRIGGER_CLICK,
extStyles = "",
} = tranboxSetting;
@@ -194,6 +195,18 @@ export default function Tranbox() {
+
+
+
+
+
{
- onChangeSize && onChangeSize(size);
- }, [size, onChangeSize]);
-
- useEffect(() => {
- onChangePosition && onChangePosition(position);
- }, [position, onChangePosition]);
-
return (
{hideClickAway ? (
+
+ ) : (
+
+ )}
+
+ {
+ setFollowSelection((pre) => !pre);
+ }}
+ >
+ {followSelection ? (
) : (
@@ -243,14 +259,18 @@ export default function TranBox({
setSimpleStyle,
hideClickAway,
setHideClickAway,
+ followSelection,
+ setFollowSelection,
extStyles,
}) {
return (
}
- onChangeSize={setBoxSize}
- onChangePosition={setBoxPosition}
onClick={(e) => e.stopPropagation()}
>
{
@@ -68,16 +70,25 @@ export default function Slection({
const handleTranbox = useCallback(() => {
setShowBtn(false);
- const selectedText = window.getSelection()?.toString()?.trim() || "";
+ const selection = window.getSelection();
+ const selectedText = selection?.toString()?.trim() || "";
if (!selectedText) {
setShowBox((pre) => !pre);
return;
}
+ const rect = selection?.getRangeAt(0)?.getBoundingClientRect();
+ if (rect && followSelection) {
+ setBoxPosition({
+ x: limitNumber(rect.right, 0, window.innerWidth - 300),
+ y: limitNumber(rect.bottom, 0, window.innerHeight - 200),
+ });
+ }
+
setSelText(selectedText);
setText(selectedText);
setShowBox(true);
- }, []);
+ }, [followSelection]);
const btnEvent = useMemo(() => {
if (isMobile) {
@@ -93,13 +104,22 @@ export default function Slection({
e.stopPropagation();
await sleep(200);
- const selectedText = window.getSelection()?.toString()?.trim() || "";
+ const selection = window.getSelection();
+ const selectedText = selection?.toString()?.trim() || "";
setSelText(selectedText);
if (!selectedText) {
setShowBtn(false);
return;
}
+ const rect = selection?.getRangeAt(0)?.getBoundingClientRect();
+ if (rect && followSelection) {
+ setBoxPosition({
+ x: limitNumber(rect.right, 0, window.innerWidth - 300),
+ y: limitNumber(rect.bottom, 0, window.innerHeight - 200),
+ });
+ }
+
if (triggerMode === OPT_TRANBOX_TRIGGER_SELECT) {
handleTrigger(selectedText);
return;
@@ -119,7 +139,7 @@ export default function Slection({
handleMouseup
);
};
- }, [hideTranBtn, triggerMode, handleTrigger]);
+ }, [hideTranBtn, triggerMode, followSelection, handleTrigger]);
useEffect(() => {
if (isExt) {
@@ -196,6 +216,8 @@ export default function Slection({
setSimpleStyle={setSimpleStyle}
hideClickAway={hideClickAway}
setHideClickAway={setHideClickAway}
+ followSelection={followSelection}
+ setFollowSelection={setFollowSelection}
extStyles={extStyles}
/>
)}