@@ -100,9 +107,14 @@ export function DictLookupResult({
-
+
);
}
@@ -110,17 +122,38 @@ export function DictLookupResult({
export const DictLookupResultInner = ({
text,
onJump,
+ onResize,
+ autoHeight,
}: {
text: string;
- onJump: (v: string) => void;
+ autoHeight: boolean;
+ onJump?: (v: string) => void;
+ onResize?: (v: number) => void;
}) => {
const { EnjoyApp } = useContext(AppSettingsProviderContext);
const { currentDict } = useContext(DictProviderContext);
const { document: innerDocument } = useFrame();
const [html, setHtml] = useState("");
+ const [hash, setHash] = useState("");
+
+ useEffect(() => {
+ if (autoHeight) {
+ const resizeObserver = new ResizeObserver(() => {
+ const html = innerDocument.getElementsByTagName("html")[0];
+ onResize(html.scrollHeight);
+ });
+
+ resizeObserver.observe(innerDocument.getElementById("inner-dict"));
+ }
+ }, []);
useEffect(() => {
- normalize();
+ normalize().then(() => {
+ if (hash) {
+ handleScroll();
+ setHash("");
+ }
+ });
return () => {
normalizer.revoke();
@@ -166,7 +199,18 @@ export const DictLookupResultInner = ({
function handleJump(el: Element) {
const word = el.getAttribute("data-word");
- onJump(word);
+ const hash = el.getAttribute("data-hash");
+ onJump?.(word);
+ setHash(hash);
+ }
+
+ function handleScroll() {
+ setTimeout(() => {
+ const el = innerDocument.querySelector(`a[name='${hash}']`);
+ if (el) {
+ el.scrollIntoView();
+ }
+ }, 200);
}
const registerAudioHandler = () => {
@@ -199,5 +243,5 @@ export const DictLookupResultInner = ({
};
};
- return
;
+ return
;
};
diff --git a/enjoy/src/renderer/components/widgets/lookup/lookup-widget.tsx b/enjoy/src/renderer/components/widgets/lookup/lookup-widget.tsx
index 4b1e4f41b..b8b733ef4 100644
--- a/enjoy/src/renderer/components/widgets/lookup/lookup-widget.tsx
+++ b/enjoy/src/renderer/components/widgets/lookup/lookup-widget.tsx
@@ -14,6 +14,7 @@ import {
DictLookupResult,
DictSelect,
AiLookupResult,
+ CamdictLookupResult,
} from "@renderer/components";
import { ChevronLeft, ChevronFirst } from "lucide-react";
@@ -41,12 +42,12 @@ export const LookupWidget = () => {
) => {
let word = _word;
let context = _context;
+ let sourceType;
+ let sourceId;
- if (word) {
- if (word.indexOf(" ") > -1) return;
- setSelected({ word, context, position });
- } else {
- const selection = document.getSelection();
+ const selection = document.getSelection();
+
+ if (!word) {
if (!selection?.anchorNode?.parentElement) return;
word = selection
@@ -54,24 +55,23 @@ export const LookupWidget = () => {
.trim()
.replace(/[.,/#!$%^&*;:{}=\-_`~()]+$/, "");
- if (!word) return;
// can only lookup single word
- if (word.indexOf(" ") > -1) return;
+ if (!word || word.indexOf(" ") > -1) return;
+ }
+ if (!context) {
context = selection?.anchorNode.parentElement
.closest(".sentence, h2, p, div")
?.textContent?.trim();
-
- const sourceType = selection?.anchorNode.parentElement
+ sourceType = selection?.anchorNode.parentElement
.closest("[data-source-type]")
?.getAttribute("data-source-type");
- const sourceId = selection?.anchorNode.parentElement
+ sourceId = selection?.anchorNode.parentElement
.closest("[data-source-id]")
?.getAttribute("data-source-id");
-
- setSelected({ word, context, position, sourceType, sourceId });
}
+ setSelected({ word, context, position, sourceType, sourceId });
handleLookup(word);
setOpen(true);
};
@@ -102,7 +102,7 @@ export const LookupWidget = () => {
return (
{
sourceId={selected?.sourceId}
sourceType={selected?.sourceType}
/>
+ ) : currentDictValue === "cambridge" ? (
+
) : (
)}
diff --git a/enjoy/src/renderer/components/widgets/vocabulary.tsx b/enjoy/src/renderer/components/widgets/vocabulary.tsx
index ec95e60b2..a51c1e632 100644
--- a/enjoy/src/renderer/components/widgets/vocabulary.tsx
+++ b/enjoy/src/renderer/components/widgets/vocabulary.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
import { AppSettingsProviderContext } from "@renderer/context";
export const Vocabulary = ({
@@ -10,18 +10,28 @@ export const Vocabulary = ({
context?: string;
children?: React.ReactNode;
}) => {
- let timeout: ReturnType;
-
+ let [timer, setTimer] = useState>();
const { vocabularyConfig, EnjoyApp } = useContext(AppSettingsProviderContext);
- const handleMouseEnter = (e: React.MouseEvent) => {
- timeout = setTimeout(() => {
- EnjoyApp.lookup(word, context, { x: e.clientX, y: e.clientY });
- }, 500);
+ const handleMouseEnter = (e: any) => {
+ let _timer = setTimeout(() => {
+ if (!context) {
+ context = e.target?.parentElement
+ .closest(".sentence, h2, p, div")
+ ?.textContent?.trim();
+ }
+
+ const { x, bottom: y } = e.target.getBoundingClientRect();
+ const _word = word.replace(/[^\w\s]|_/g, "");
+
+ EnjoyApp.lookup(_word, context, { x, y });
+ }, 1000);
+
+ setTimer(_timer);
};
const handleMouseLeave = () => {
- clearTimeout(timeout);
+ clearTimeout(timer);
};
return vocabularyConfig.lookupOnMouseOver ? (
@@ -30,7 +40,7 @@ export const Vocabulary = ({
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
- {word || children}
+ {word || children}
) : (
{word || children}
diff --git a/enjoy/src/renderer/context/dict-provider.tsx b/enjoy/src/renderer/context/dict-provider.tsx
index a2f1ce9a2..cd692be99 100644
--- a/enjoy/src/renderer/context/dict-provider.tsx
+++ b/enjoy/src/renderer/context/dict-provider.tsx
@@ -23,6 +23,11 @@ const AIDict = {
value: "ai",
};
+const CamDict = {
+ text: t("cambridgeDictionary"),
+ value: "cambridge",
+};
+
const initialState: DictProviderState = {
dicts: [],
downloadingDicts: [],
@@ -39,7 +44,7 @@ export const DictProviderContext =
createContext(initialState);
export const DictProvider = ({ children }: { children: React.ReactNode }) => {
- const { EnjoyApp } = useContext(AppSettingsProviderContext);
+ const { EnjoyApp, learningLanguage } = useContext(AppSettingsProviderContext);
const [dicts, setDicts] = useState([]);
const [settings, setSettings] = useState({
default: "",
@@ -60,14 +65,18 @@ export const DictProvider = ({ children }: { children: React.ReactNode }) => {
);
const dictSelectItems = useMemo(() => {
+ const presets = learningLanguage.startsWith("en")
+ ? [CamDict, AIDict]
+ : [AIDict];
+
return [
- AIDict,
+ ...presets,
...availableDicts.map((item) => ({
text: item.title,
value: item.name,
})),
];
- }, [availableDicts]);
+ }, [availableDicts, learningLanguage]);
const downloadingDicts = useMemo(() => {
return dicts.filter(
@@ -84,18 +93,16 @@ export const DictProvider = ({ children }: { children: React.ReactNode }) => {
}, [dicts]);
useEffect(() => {
- if (availableDicts.length) {
- const _currentDict = availableDicts.find(
- (dict) => dict.name === settings.default
- );
+ const defaultDict = availableDicts.find(
+ (dict) => dict.name === settings.default
+ );
- if (_currentDict) {
- handleSetCurrentDict(_currentDict.name);
- } else {
- setDefault(availableDicts[0]);
- }
+ if (defaultDict) {
+ handleSetCurrentDict(defaultDict.name);
} else {
- setCurrentDictValue(AIDict.value);
+ setCurrentDictValue(
+ learningLanguage.startsWith("en") ? CamDict.value : AIDict.value
+ );
}
}, [availableDicts, settings]);
@@ -123,7 +130,7 @@ export const DictProvider = ({ children }: { children: React.ReactNode }) => {
if (dict) setCurrentDict(dict);
};
- const setDefault = async (dict: Dict) => {
+ const setDefault = async (dict: Dict | null) => {
const _settings = { ...settings, default: dict?.name ?? "" };
EnjoyApp.settings
diff --git a/enjoy/src/renderer/lib/dict.ts b/enjoy/src/renderer/lib/dict.ts
index 48e752ea0..8cb32356c 100644
--- a/enjoy/src/renderer/lib/dict.ts
+++ b/enjoy/src/renderer/lib/dict.ts
@@ -104,9 +104,16 @@ export class DictDefinitionNormalizer {
...this.$('a[href^="bword://"]').toArray(),
].map((link) => {
const $link = this.$(link);
- const word = $link.attr("_href") || $link.attr("href").substring(8);
- $link.attr("data-type", "jump").attr("data-word", word);
+ const href = $link.attr("_href") || $link.attr("href").substring(8);
+ const [word, hash] = href.split("#");
+
+ if (word) {
+ $link
+ .attr("data-type", "jump")
+ .attr("data-word", word)
+ .attr("data-hash", hash);
+ }
})
);
}