chore(react/collections): content highlighting in list

apps/client/src/widgets/react/NoteLink.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from "preact/hooks";
 import link from "../../services/link";
-import RawHtml from "./RawHtml";
-import { useSearchHighlighlighting } from "./hooks";
+import { useImperativeSearchHighlighlighting } from "./hooks";
 
 interface NoteLinkOpts {
     className?: string;
@@ -16,15 +15,21 @@ interface NoteLinkOpts {
 
 export default function NoteLink({ className, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink, highlightedTokens }: NoteLinkOpts) {
     const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath;
+    const ref = useRef<HTMLSpanElement>(null);
     const [ jqueryEl, setJqueryEl ] = useState<JQuery<HTMLElement>>();
-    const containerRef = useRef<HTMLDivElement>(null);
-    useSearchHighlighlighting(containerRef, highlightedTokens);
+    const highlightSearch = useImperativeSearchHighlighlighting(highlightedTokens);
 
     useEffect(() => {
         link.createLink(stringifiedNotePath, { showNotePath, showNoteIcon })
             .then(setJqueryEl);
     }, [ stringifiedNotePath, showNotePath ]);
 
+    useEffect(() => {
+        if (!ref.current || !jqueryEl) return;
+        ref.current.replaceChildren(jqueryEl[0]);
+        highlightSearch(ref.current);
+    }, [ jqueryEl ]);
+
     if (style) {
         jqueryEl?.css(style);
     }
@@ -42,6 +47,6 @@ export default function NoteLink({ className, notePath, showNotePath, showNoteIc
         $linkEl?.addClass(className);
     }
 
-    return <RawHtml containerRef={containerRef} html={jqueryEl} />
+    return <span ref={ref} />
 
 }

apps/client/src/widgets/react/hooks.tsx

@@ -550,7 +550,7 @@ export function useSyncedRef<T>(externalRef?: RefObject<T>, initialValue: T | nu
     return ref;
 }
 
-export function useSearchHighlighlighting(ref: RefObject<HTMLElement>, highlightedTokens: string[] | null | undefined) {
+export function useImperativeSearchHighlighlighting(highlightedTokens: string[] | null | undefined) {
     const mark = useRef<Mark>();
     const highlightRegex = useMemo(() => {
         if (!highlightedTokens?.length) return null;
@@ -558,18 +558,17 @@ export function useSearchHighlighlighting(ref: RefObject<HTMLElement>, highlight
         return new RegExp(regex, "gi")
     }, [ highlightedTokens ]);
 
-    useEffect(() => {
-        if (!ref.current || !highlightRegex) return;
+    return (el: HTMLElement) => {
+        if (!el || !highlightRegex) return;
 
         if (!mark.current) {
-            mark.current = new Mark(ref.current);
+            mark.current = new Mark(el);
         }
 
+        mark.current.unmark();
         mark.current.markRegExp(highlightRegex, {
             element: "span",
             className: "ck-find-result"
         });
-
-        return () => mark.current?.unmark();
-    });
+    };
 }