gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 23:29:02 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki 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
No known key found for this signature in database
3 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/client/src/widgets/collections/legacy/ListView.tsx
View File

@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import FNote from "../../../entities/fnote";
import Icon from "../../react/Icon";
import { ViewModeProps } from "../interface";
import { useNoteLabelBoolean, useNoteProperty } from "../../react/hooks";
import { useNoteLabelBoolean, useImperativeSearchHighlighlighting } from "../../react/hooks";
import NoteLink from "../../react/NoteLink";
import "./ListOrGridView.css";
import content_renderer from "../../../services/content_renderer";
@ -75,8 +75,8 @@ function ListNoteCard({ note, parentNote, expand, highlightedTokens }: { note: F
<NoteAttributes note={note} />
{isExpanded && <>
<NoteContent note={note} />
<NoteChildren note={note} parentNote={parentNote} />
<NoteContent note={note} highlightedTokens={highlightedTokens} />
<NoteChildren note={note} parentNote={parentNote} highlightedTokens={highlightedTokens} />
</>}
</h5>
</div>
@ -104,7 +104,7 @@ function GridNoteCard({ note, parentNote, highlightedTokens }: { note: FNote, pa
<span ref={titleRef} className="note-book-title">{noteTitle}</span>
<NoteAttributes note={note} />
</h5>
<NoteContent note={note} trim />
<NoteContent note={note} trim highlightedTokens={highlightedTokens} />
</div>
)
}
@ -120,26 +120,29 @@ function NoteAttributes({ note }: { note: FNote }) {
return <span className="note-list-attributes" ref={ref} />
}
function NoteContent({ note, trim }: { note: FNote, trim?: boolean }) {
function NoteContent({ note, trim, highlightedTokens }: { note: FNote, trim?: boolean, highlightedTokens }) {
const contentRef = useRef<HTMLDivElement>(null);
const highlightSearch = useImperativeSearchHighlighlighting(highlightedTokens);
useEffect(() => {
content_renderer.getRenderedContent(note, { trim })
.then(({ $renderedContent, type }) => {
contentRef.current?.replaceChildren(...$renderedContent);
contentRef.current?.classList.add(`type-${type}`);
if (!contentRef.current) return;
contentRef.current.replaceChildren(...$renderedContent);
contentRef.current.classList.add(`type-${type}`);
highlightSearch(contentRef.current);
})
.catch(e => {
console.warn(`Caught error while rendering note '${note.noteId}' of type '${note.type}'`);
console.error(e);
contentRef.current?.replaceChildren(t("collections.rendering_error"));
})
}, [ note ]);
}, [ note, highlightedTokens ]);
return <div ref={contentRef} className="note-book-content" />;
}
function NoteChildren({ note, parentNote }: { note: FNote, parentNote: FNote }) {
function NoteChildren({ note, parentNote, highlightedTokens }: { note: FNote, parentNote: FNote, highlightedTokens: string[] | null | undefined }) {
const imageLinks = note.getRelations("imageLink");
const [ childNotes, setChildNotes ] = useState<FNote[]>();
@ -150,7 +153,7 @@ function NoteChildren({ note, parentNote }: { note: FNote, parentNote: FNote })
});
}, [ note ]);
return childNotes?.map(childNote => <ListNoteCard note={childNote} parentNote={parentNote} highlightedTokens={null} />)
return childNotes?.map(childNote => <ListNoteCard note={childNote} parentNote={parentNote} highlightedTokens={highlightedTokens} />)
}
/**

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

13
apps/client/src/widgets/react/hooks.tsx
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();
});
};
}