Feature/highlight

package.json

@@ -1,7 +1,7 @@
 {
   "name": "TechTerm",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.2.1",
   "workspaces": [
     "packages/core",
     "packages/vscode",

packages/browser/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "TechTerm",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "プログラミング用語にホバーすると、意味を簡潔に表示します。",
   "content_scripts": [
     {

packages/browser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techword/browser",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "private": true,
   "typescript": "^6.0.3",
   "scripts": {

packages/browser/src/content.ts

@@ -2,6 +2,16 @@ import { Dictionary, builtinTerms, type Match } from '@techword/core';
 
 const dictionary = new Dictionary(builtinTerms);
 
+installHighlightStyle();
+highlight();
+const observer = new MutationObserver(highlight);
+const config = { 
+  childList: true, // 子要素の追加・削除を監視
+  subtree: true,    // 子孫要素（さらに下の階層）まで含めて監視する場合に true
+  characterData: true, // テキストノードの変更を監視
+};
+observer.observe(document.body, config);
+
 /** ホバーしてから出すまでの待ち時間。すぐ出すとポインタを動かすたびに点滅する。 */
 const HOVER_DELAY_MS = 250;
 
@@ -17,6 +27,7 @@ document.addEventListener('scroll', hide, { passive: true, capture: true });
 window.addEventListener('blur', hide);
 
 function handleHover(event: MouseEvent): void {
+  if (tooltip.host.style.display === 'block' && tooltip.host.matches(':hover')) return; // ツールチップ上にマウスがあるときはツールチップを消さないようにする
   const caret = caretFromPoint(event.clientX, event.clientY);
   if (!caret || caret.node.nodeType !== Node.TEXT_NODE) return hide();
 
@@ -140,3 +151,34 @@ function caretFromPoint(x: number, y: number): { node: Node; offset: number } |
 
   return undefined;
 }
+
+function highlight(): void {
+  let ranges: Range[] = [];
+  const walker = document.createTreeWalker(
+    document.body, // body以下のノードを走査する
+    NodeFilter.SHOW_TEXT, //テキストノードのみを対象
+  );
+
+  while (walker.nextNode() !== null) {
+    const nodeTagName = walker.currentNode.parentElement?.tagName;
+    if (nodeTagName === 'SCRIPT' || nodeTagName === 'STYLE') continue; //　負荷軽減のためにスクリプトとスタイルの中身は無視する
+    const textNodes = dictionary.findAll(walker.currentNode.textContent ?? '');
+    for (const {start, end} of textNodes) {
+      const range = new Range();
+      range.setStart(walker.currentNode, start);
+      range.setEnd(walker.currentNode, end);
+      ranges.push(range);
+    }
+  }
+  const highlightRange = new Highlight(...ranges); //スプレッド構文でranges配列を展開し引数として渡す
+  CSS.highlights.set("tw-highlight", highlightRange);
+}
+
+function installHighlightStyle(): void {
+  const style = document.createElement("style");
+  style.textContent = `
+    ::highlight(tw-highlight) {
+      background-color: #ffff00;
+    }`;
+  document.head.append(style);
+}

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techword/core",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "private": true,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

packages/core/src/dictionary.ts

@@ -74,6 +74,27 @@ export class Dictionary {
     }
     return undefined;
   }
+
+  findAll(text: string, options: LookupOptions = {}): Match[] {
+    const tokens = tokenize(text);
+    const matches: Match[] = [];
+    for (let start = 0; start < tokens.length; start++) {
+      for (let len = MAX_PHRASE_TOKENS; len >= 1; len--) {
+        if (start + len > tokens.length) continue;
+        const window = tokens.slice(start, start + len);
+        if (!isContiguous(text, window)) continue;
+
+        const phrase = window.map((t) => t.text).join(' ');
+        const entry = this.lookup(phrase, options);
+        if (entry) {
+          matches.push({ entry, start: window[0].start, end: window[window.length - 1].end });
+          start += len - 1; //forループでstartが++されることを考慮する
+          break;
+        }
+      }
+    }
+    return matches;
+  }
 }
 
 /** 窓内のトークンが空白・ハイフン程度でしか隔てられていないか。 */

packages/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "techword-vscode",
   "displayName": "TechWord",
   "description": "プログラミング用語にホバーすると、意味を簡潔に表示します。",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "private": true,
   "publisher": "techword",
   "engines": {