Highlight the searched terms in the thread page

src/lib/pageHighlight.ts

@@ -0,0 +1,49 @@
+const HIGHLIGHT_NAME = "search-terms";
+
+function supported(): boolean {
+  return typeof CSS !== "undefined" && "highlights" in CSS;
+}
+
+// Highlight every occurrence of the terms inside the given roots using the
+// CSS Custom Highlight API, which paints ranges without touching the DOM, so
+// it never conflicts with Svelte re-renders. Returns the first match in
+// document order (for scrolling), or null. No-op on unsupported browsers.
+export function applyHighlights(
+  roots: Iterable<Element>,
+  terms: string[],
+): Range | null {
+  if (!supported()) return null;
+  CSS.highlights.delete(HIGHLIGHT_NAME);
+  const lowers = [...new Set(terms.map((t) => t.toLowerCase()))].filter(
+    (t) => t.length >= 2,
+  );
+  if (lowers.length === 0) return null;
+
+  const ranges: Range[] = [];
+  for (const root of roots) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let node: Node | null;
+    while ((node = walker.nextNode())) {
+      const lower = (node.textContent ?? "").toLowerCase();
+      for (const term of lowers) {
+        let i = 0;
+        while ((i = lower.indexOf(term, i)) !== -1) {
+          const range = new Range();
+          range.setStart(node, i);
+          range.setEnd(node, i + term.length);
+          ranges.push(range);
+          i += term.length;
+        }
+      }
+    }
+  }
+  if (ranges.length === 0) return null;
+
+  CSS.highlights.set(HIGHLIGHT_NAME, new Highlight(...ranges));
+  ranges.sort((a, b) => a.compareBoundaryPoints(Range.START_TO_START, b));
+  return ranges[0];
+}
+
+export function clearHighlights() {
+  if (supported()) CSS.highlights.delete(HIGHLIGHT_NAME);
+}