Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-20 15:19:56 +01:00
Code Issues Packages Projects Releases Activity

chore(react/collections): content highlighting in list

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/client/src/widgets/react/NoteLink.tsx
View File

@@ -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} />
}