feat: click on a word to search for it

README.md

@@ -57,11 +57,12 @@ The dark theme is not built in, but rendered with the [Dark Reader Firefox exten
 - [X] Improve the performance of suggestions matching
 - [X] Make the suggestion size customisable
 - [X] Allow configure suggestion matching mode, listening address, running mode, etc. via a configuration file, without modifying code
+- [ ] Use a linter
 
 ### Client-side
 
 - [X] Allow zooming in/out of the definition area
-- [ ] Click to search words in the definition
+- [X] Click to search for words in the definition
 - [ ] Make the strings translatable
 - [ ] Beautify the dialogues (help wanted!)
 - [X] GoldenDict-like dictionary group support
@@ -153,6 +154,7 @@ I would also express my gratitude to Jiang Qian for his suggestions, encourageme
 ## Similar projects
 
 - [flask-mdict](https://github.com/liuyug/flask-mdict)
+- [GoldenDict-ng's proposed HTTP server](https://github.com/xiaoyifang/goldendict-ng/issues/229)
 
 ---
 

client/src/DesktopApp.js

@@ -206,6 +206,7 @@ export default function DesktopApp() {
 			</div>
 			<Article
 				article={article}
+				setQuery={setQuery}
 				isMobile={false}
 			/>
 			<div className='right-pane'>

client/src/MobileApp.js

@@ -236,6 +236,7 @@ export default function MobileApp() {
 			) : (
 				<Article
 					article={article}
+					setQuery={setQuery}
 					isMobile={true}
 					handleGoBack={handleGoBack}
 				/>

client/src/components/Article.js

@@ -1,12 +1,58 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 export function Article(props) {
-	const { article, isMobile, handleGoBack } = props;
+	const { article, setQuery, isMobile, handleGoBack } = props;
 	const [fontSize, setFontSize] = useState(1); // in rem
 
+	useEffect(function () {
+		const articleElement = document.querySelector('.inner-article');
+		articleElement.addEventListener('click', function (event) {
+			let targetElement = event.target;
+
+			while (targetElement !== articleElement) {
+				if (typeof targetElement.onclick === 'function' || targetElement.tagName === 'A') {
+					// The element has an onClick listener, so do not capture it.
+					return;
+				}
+				targetElement = targetElement.parentNode;
+			}
+
+			const selection = window.getSelection();
+			let range = selection.getRangeAt(0);
+			const node = selection.anchorNode;
+			const wordPattern = /^\p{L}*$/u;
+
+			// Extend the range backward until it matches word beginning
+			while ((range.startOffset > 0) && range.toString().match(wordPattern)) {
+				range.setStart(node, (range.startOffset - 1));
+			}
+			// Restore the valid word match after overshooting
+			if (!range.toString().match(wordPattern)) {
+				range.setStart(node, range.startOffset + 1);
+			}
+
+			// Extend the range forward until it matches word ending
+			while ((range.endOffset < node.length) && range.toString().match(wordPattern)) {
+				range.setEnd(node, range.endOffset + 1);
+			}
+			// Restore the valid word match after overshooting
+			if (!range.toString().match(wordPattern)) {
+				range.setEnd(node, range.endOffset - 1);
+			}
+
+			const word = range.toString();
+			setQuery(word);
+			if (isMobile) {
+				const input = document.querySelector('input');
+				input.focus();
+			}
+		});
+	}, []);
+
 	return (
 		<div className='article'>
 			<div
+				className='inner-article'
 				style={{ fontSize: `${fontSize}rem` }}
 				dangerouslySetInnerHTML={{ __html: article }} />
 			<button
@@ -23,7 +69,7 @@ export function Article(props) {
 			</button>
 			{isMobile && (
 				<button
-					onClick={() => {handleGoBack();}}
+					onClick={() => { handleGoBack(); }}
 					id='back-button'
 				>
 					←