chore(react/collections): content highlighting in list

This commit is contained in:
Elian Doran
2025-08-30 19:03:18 +03:00
parent 68dff71512
commit 1cee01a22a
3 changed files with 29 additions and 22 deletions

View File

@@ -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();
});
};
}