chore(react/collections): title highlighting in list title

apps/client/src/services/utils.ts

@@ -448,7 +448,7 @@ function sleep(time_ms: number) {
     });
 }
 
-function escapeRegExp(str: string) {
+export function escapeRegExp(str: string) {
     return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
 }
 

apps/client/src/widgets/collections/NoteList.tsx

@@ -6,30 +6,31 @@ import { ListView, GridView } from "./legacy/ListView";
 import { useEffect, useState } from "preact/hooks";
 
 interface NoteListProps {
+    note?: FNote | null;
     displayOnlyCollections?: boolean;
+    highlightedTokens?: string[] | null;
 }
 
-export default function NoteList({ }: NoteListProps) {
+export default function NoteList({ note: providedNote, highlightedTokens }: NoteListProps) {
-    const { note } = useNoteContext();
+    const { note: contextNote } = useNoteContext();
+    const note = providedNote ?? contextNote;
     const viewType = useNoteViewType(note);
     const noteIds = useNoteIds(note, viewType);
     const isEnabled = (note && !!viewType);
 
-    // Refresh note Ids
-
     return (
         <div className="note-list-widget">
             {isEnabled && (
                 <div className="note-list-widget-content">
-                    {getComponentByViewType(note, noteIds, viewType)}
+                    {getComponentByViewType(note, noteIds, viewType, highlightedTokens)}
                 </div>
             )}
         </div>
     );
 }
 
-function getComponentByViewType(note: FNote, noteIds: string[], viewType: ViewTypeOptions) {
+function getComponentByViewType(note: FNote, noteIds: string[], viewType: ViewTypeOptions, highlightedTokens: string[] | null | undefined) {
-    const props: ViewModeProps = { note, noteIds };
+    const props: ViewModeProps = { note, noteIds, highlightedTokens };
 
     switch (viewType) {
         case "list":

apps/client/src/widgets/collections/interface.ts

@@ -11,4 +11,5 @@ export interface ViewModeProps {
      * We're using noteIds so that it's not necessary to load all notes at once when paging.
      */
     noteIds: string[];
+    highlightedTokens: string[] | null | undefined;
 }

apps/client/src/widgets/collections/legacy/ListView.tsx

@@ -12,7 +12,7 @@ import link from "../../../services/link";
 import { t } from "../../../services/i18n";
 import attribute_renderer from "../../../services/attribute_renderer";
 
-export function ListView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
+export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps) {
     const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
     const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
     const { pageNotes, ...pagination } = usePagination(note, noteIds);
@@ -24,7 +24,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
 
                 <div class="note-list-container use-tn-links">
                     {pageNotes?.map(childNote => (
-                        <ListNoteCard note={childNote} parentNote={note} expand={isExpanded} />
+                        <ListNoteCard note={childNote} parentNote={note} expand={isExpanded} highlightedTokens={highlightedTokens} />
                     ))}
                 </div>
 
@@ -34,7 +34,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
     );
 }
 
-export function GridView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
+export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps) {
     const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
     const { pageNotes, ...pagination } = usePagination(note, noteIds);
 
@@ -45,7 +45,7 @@ export function GridView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
 
                 <div class="note-list-container use-tn-links">
                     {pageNotes?.map(childNote => (
-                        <GridNoteCard note={childNote} parentNote={note} />
+                        <GridNoteCard note={childNote} parentNote={note} highlightedTokens={highlightedTokens} />
                     ))}
                 </div>
 
@@ -55,7 +55,7 @@ export function GridView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
     );
 }
 
-function ListNoteCard({ note, parentNote, expand }: { note: FNote, parentNote: FNote, expand?: boolean }) {
+function ListNoteCard({ note, parentNote, expand, highlightedTokens }: { note: FNote, parentNote: FNote, expand?: boolean, highlightedTokens: string[] | null | undefined }) {
     const [ isExpanded, setExpanded ] = useState(expand);
     const notePath = getNotePath(parentNote, note);
 
@@ -71,7 +71,7 @@ function ListNoteCard({ note, parentNote, expand }: { note: FNote, parentNote: F
                 />
 
                 <Icon className="note-icon" icon={note.getIcon()} />
-                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={note.type === "search"} />
+                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={note.type === "search"} highlightedTokens={highlightedTokens} />
                 <NoteAttributes note={note} />
 
                 {isExpanded && <>
@@ -83,7 +83,8 @@ function ListNoteCard({ note, parentNote, expand }: { note: FNote, parentNote: F
     )
 }
 
-function GridNoteCard({ note, parentNote }: { note: FNote, parentNote: FNote }) {
+function GridNoteCard({ note, parentNote, highlightedTokens }: { note: FNote, parentNote: FNote, highlightedTokens: string[] | null | undefined }) {
+    const titleRef = useRef<HTMLSpanElement>(null);
     const [ noteTitle, setNoteTitle ] = useState<string>();
     const notePath = getNotePath(parentNote, note);
 
@@ -100,7 +101,7 @@ function GridNoteCard({ note, parentNote }: { note: FNote, parentNote: FNote })
         >
             <h5 className="note-book-header">
                 <Icon className="note-icon" icon={note.getIcon()} />
-                <span className="note-book-title">{noteTitle}</span>
+                <span ref={titleRef} className="note-book-title">{noteTitle}</span>
                 <NoteAttributes note={note} />
             </h5>
             <NoteContent note={note} trim />
@@ -149,7 +150,7 @@ function NoteChildren({ note, parentNote }: { note: FNote, parentNote: FNote })
         });
     }, [ note ]);
 
-    return childNotes?.map(childNote => <ListNoteCard note={childNote} parentNote={parentNote} />)
+    return childNotes?.map(childNote => <ListNoteCard note={childNote} parentNote={parentNote} highlightedTokens={null} />)
 }
 
 /**

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

@@ -1,6 +1,7 @@
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import link from "../../services/link";
 import RawHtml from "./RawHtml";
+import { useSearchHighlighlighting } from "./hooks";
 
 interface NoteLinkOpts {
     className?: string;
@@ -10,11 +11,14 @@ interface NoteLinkOpts {
     style?: Record<string, string | number>;
     noPreview?: boolean;
     noTnLink?: boolean;
+    highlightedTokens?: string[] | null | undefined;
 }
 
-export default function NoteLink({ className, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink }: NoteLinkOpts) {
+export default function NoteLink({ className, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink, highlightedTokens }: NoteLinkOpts) {
     const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath;
     const [ jqueryEl, setJqueryEl ] = useState<JQuery<HTMLElement>>();
+    const containerRef = useRef<HTMLDivElement>(null);
+    useSearchHighlighlighting(containerRef, highlightedTokens);
 
     useEffect(() => {
         link.createLink(stringifiedNotePath, { showNotePath, showNoteIcon })
@@ -38,6 +42,6 @@ export default function NoteLink({ className, notePath, showNotePath, showNoteIc
         $linkEl?.addClass(className);
     }
 
-    return <RawHtml html={jqueryEl} />
+    return <RawHtml containerRef={containerRef} html={jqueryEl} />
 
 }

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

@@ -1,4 +1,4 @@
-import type { CSSProperties } from "preact/compat";
+import type { CSSProperties, RefObject } from "preact/compat";
 
 type HTMLElementLike = string | HTMLElement | JQuery<HTMLElement>;
 
@@ -9,12 +9,12 @@ interface RawHtmlProps {
     onClick?: (e: MouseEvent) => void;
 }
 
-export default function RawHtml(props: RawHtmlProps) {
+export default function RawHtml({containerRef, ...props}: RawHtmlProps & { containerRef?: RefObject<HTMLSpanElement>}) {
-    return <span {...getProps(props)} />;
+    return <span ref={containerRef} {...getProps(props)} />;
 }
 
-export function RawHtmlBlock(props: RawHtmlProps) {
+export function RawHtmlBlock({containerRef, ...props}: RawHtmlProps & { containerRef?: RefObject<HTMLDivElement>}) {
-    return <div {...getProps(props)} />
+    return <div ref={containerRef} {...getProps(props)} />
 }
 
 function getProps({ className, html, style, onClick }: RawHtmlProps) {

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

@@ -4,7 +4,7 @@ import { ParentComponent } from "./react_utils";
 import SpacedUpdate from "../../services/spaced_update";
 import { KeyboardActionNames, OptionNames } from "@triliumnext/commons";
 import options, { type OptionValue } from "../../services/options";
-import utils, { reloadFrontendApp } from "../../services/utils";
+import utils, { escapeRegExp, reloadFrontendApp } from "../../services/utils";
 import NoteContext from "../../components/note_context";
 import BasicWidget, { ReactWrappedWidget } from "../basic_widget";
 import FNote from "../../entities/fnote";
@@ -15,6 +15,7 @@ import { RefObject, VNode } from "preact";
 import { Tooltip } from "bootstrap";
 import { CSSProperties } from "preact/compat";
 import keyboard_actions from "../../services/keyboard_actions";
+import Mark from "mark.js";
 
 export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
     const parentComponent = useContext(ParentComponent);
@@ -548,3 +549,27 @@ export function useSyncedRef<T>(externalRef?: RefObject<T>, initialValue: T | nu
 
     return ref;
 }
+
+export function useSearchHighlighlighting(ref: RefObject<HTMLElement>, highlightedTokens: string[] | null | undefined) {
+    const mark = useRef<Mark>();
+    const highlightRegex = useMemo(() => {
+        if (!highlightedTokens?.length) return null;
+        const regex = highlightedTokens.map((token) => escapeRegExp(token)).join("|");
+        return new RegExp(regex, "gi")
+    }, [ highlightedTokens ]);
+
+    useEffect(() => {
+        if (!ref.current || !highlightRegex) return;
+
+        if (!mark.current) {
+            mark.current = new Mark(ref.current);
+        }
+
+        mark.current.markRegExp(highlightRegex, {
+            element: "span",
+            className: "ck-find-result"
+        });
+
+        return () => mark.current?.unmark();
+    });
+}

apps/client/src/widgets/search_result.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { t } from "../services/i18n";
 import Alert from "./react/Alert";
-import { useNoteContext, useNoteProperty, useTriliumEvent } from "./react/hooks";
+import { useNoteContext,  useTriliumEvent } from "./react/hooks";
 import "./search_result.css";
+import NoteList from "./collections/NoteList";
 // import NoteListRenderer from "../services/note_list_renderer";
 
 enum SearchResultState {
@@ -14,27 +15,18 @@ enum SearchResultState {
 export default function SearchResult() {
     const { note, ntxId } = useNoteContext();
     const [ state, setState ] = useState<SearchResultState>();
-    const searchContainerRef = useRef<HTMLDivElement>(null);
+    const [ highlightedTokens, setHighlightedTokens ] = useState<string[]>();
 
     function refresh() {
-        searchContainerRef.current?.replaceChildren();
-
         if (note?.type !== "search") {
             setState(undefined);
         } else if (!note?.searchResultsLoaded) {
             setState(SearchResultState.NOT_EXECUTED);
         } else if (note.getChildNoteIds().length === 0) {
             setState(SearchResultState.NO_RESULTS);
-        } else if (searchContainerRef.current) {
+        } else {
             setState(SearchResultState.GOT_RESULTS);
-
+            setHighlightedTokens(note.highlightedTokens);
-            // TODO: Fix me.
-            // const noteListRenderer = new NoteListRenderer({
-            //     $parent: $(searchContainerRef.current),
-            //     parentNote: note,
-            //     showNotePath: true
-            // });
-            // noteListRenderer.renderList();
         }
     }
 
@@ -60,7 +52,9 @@ export default function SearchResult() {
                 <Alert type="info" className="search-no-results">{t("search_result.no_notes_found")}</Alert>
             )}
 
-            <div ref={searchContainerRef} className="search-result-widget-content" />
+            {state === SearchResultState.GOT_RESULTS && (
+                <NoteList note={note} highlightedTokens={highlightedTokens} />
+            )}
         </div>
     );
 }