gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Elian Doran 2025-08-30 18:48:34 +03:00
parent f92948d65c
commit 68dff71512
No known key found for this signature in database
8 changed files with 96 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/services/utils.ts
View File

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

15
apps/client/src/widgets/collections/NoteList.tsx
View File

@ -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) {
const { note } = useNoteContext();
export default function NoteList({ note: providedNote, highlightedTokens }: NoteListProps) {
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) {
const props: ViewModeProps = { note, noteIds };
function getComponentByViewType(note: FNote, noteIds: string[], viewType: ViewTypeOptions, highlightedTokens: string[] | null | undefined) {
const props: ViewModeProps = { note, noteIds, highlightedTokens };
switch (viewType) {
case "list":

1
apps/client/src/widgets/collections/interface.ts
View File

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

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

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

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

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

10
apps/client/src/widgets/react/RawHtml.tsx
View File

@ -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) {
return <span {...getProps(props)} />;
export default function RawHtml({containerRef, ...props}: RawHtmlProps & { containerRef?: RefObject<HTMLSpanElement>}) {
return <span ref={containerRef} {...getProps(props)} />;
}
export function RawHtmlBlock(props: RawHtmlProps) {
return <div {...getProps(props)} />
export function RawHtmlBlock({containerRef, ...props}: RawHtmlProps & { containerRef?: RefObject<HTMLDivElement>}) {
return <div ref={containerRef} {...getProps(props)} />
}
function getProps({ className, html, style, onClick }: RawHtmlProps) {

27
apps/client/src/widgets/react/hooks.tsx
View File

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

24
apps/client/src/widgets/search_result.tsx
View File

@ -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);
// TODO: Fix me.
// const noteListRenderer = new NoteListRenderer({
// $parent: $(searchContainerRef.current),
// parentNote: note,
// showNotePath: true
// });
// noteListRenderer.renderList();
setHighlightedTokens(note.highlightedTokens);
}
}
@ -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>
);
}