gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 07:38:53 +02:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

chore(react/collections): bring back attribute rendering

Browse Source
This commit is contained in:
Elian Doran 2025-08-30 17:39:09 +03:00
parent c4d771f2c6
commit f92948d65c
No known key found for this signature in database
3 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/collections/legacy/ListOrGridView.css
View File

@ -50,7 +50,7 @@
} }
.note-book-header .rendered-note-attributes:before { .note-book-header .rendered-note-attributes:before {
content: "\\00a0\\00a0"; content: "\00a0\00a0";
} }
.note-book-header .note-icon { .note-book-header .note-icon {

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

@ -10,6 +10,7 @@ import { Pager, usePagination } from "../Pagination";
import tree from "../../../services/tree"; import tree from "../../../services/tree";
import link from "../../../services/link"; import link from "../../../services/link";
import { t } from "../../../services/i18n"; 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 }: ViewModeProps) {
const [ isExpanded ] = useNoteLabelBoolean(note, "expanded"); const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
@ -18,7 +19,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
return ( return (
<div class="note-list list-view"> <div class="note-list list-view">
<div class="note-list-wrapper"> { noteIds.length > 0 && <div class="note-list-wrapper">
<Pager {...pagination} /> <Pager {...pagination} />
<div class="note-list-container use-tn-links"> <div class="note-list-container use-tn-links">
@ -28,7 +29,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
</div> </div>
<Pager {...pagination} /> <Pager {...pagination} />
</div> </div>}
</div> </div>
); );
} }
@ -71,6 +72,8 @@ function ListNoteCard({ note, parentNote, expand }: { note: FNote, parentNote: F
<Icon className="note-icon" icon={note.getIcon()} /> <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"} />
<NoteAttributes note={note} />
{isExpanded && <> {isExpanded && <>
<NoteContent note={note} /> <NoteContent note={note} />
<NoteChildren note={note} parentNote={parentNote} /> <NoteChildren note={note} parentNote={parentNote} />
@ -98,12 +101,24 @@ function GridNoteCard({ note, parentNote }: { note: FNote, parentNote: FNote })
<h5 className="note-book-header"> <h5 className="note-book-header">
<Icon className="note-icon" icon={note.getIcon()} /> <Icon className="note-icon" icon={note.getIcon()} />
<span className="note-book-title">{noteTitle}</span> <span className="note-book-title">{noteTitle}</span>
<NoteAttributes note={note} />
</h5> </h5>
<NoteContent note={note} trim /> <NoteContent note={note} trim />
</div> </div>
) )
} }
function NoteAttributes({ note }: { note: FNote }) {
const ref = useRef<HTMLSpanElement>(null);
useEffect(() => {
attribute_renderer.renderNormalAttributes(note).then(({$renderedAttributes}) => {
ref.current?.replaceChildren(...$renderedAttributes);
});
}, [ note ]);
return <span className="note-list-attributes" ref={ref} />
}
function NoteContent({ note, trim }: { note: FNote, trim?: boolean }) { function NoteContent({ note, trim }: { note: FNote, trim?: boolean }) {
const contentRef = useRef<HTMLDivElement>(null); const contentRef = useRef<HTMLDivElement>(null);

12
apps/client/src/widgets/view_widgets/list_or_grid_view.ts
View File

@ -15,12 +15,6 @@ class ListOrGridView extends ViewMode<{}> {
private pageSize?: number; private pageSize?: number;
private highlightRegex?: RegExp | null; private highlightRegex?: RegExp | null;
constructor(viewType: ViewTypeOptions, args: ViewModeArgs) {
super(args, viewType);
this.$noteList = $(TPL);
this.$noteList.addClass(`${this.viewType}-view`);
}
async renderList() { async renderList() {
if (this.filteredNoteIds.length === 0 || !this.page || !this.pageSize) { if (this.filteredNoteIds.length === 0 || !this.page || !this.pageSize) {
this.$noteList.hide(); this.$noteList.hide();
@ -42,8 +36,6 @@ class ListOrGridView extends ViewMode<{}> {
} }
async renderNote(note: FNote, expand: boolean = false) { async renderNote(note: FNote, expand: boolean = false) {
const { $renderedAttributes } = await attributeRenderer.renderNormalAttributes(note);
if (this.highlightRegex) { if (this.highlightRegex) {
const Mark = new (await import("mark.js")).default($card.find(".note-book-title")[0]); const Mark = new (await import("mark.js")).default($card.find(".note-book-title")[0]);
Mark.markRegExp(this.highlightRegex, { Mark.markRegExp(this.highlightRegex, {
@ -55,10 +47,6 @@ class ListOrGridView extends ViewMode<{}> {
async renderNoteContent(note: FNote) { async renderNoteContent(note: FNote) {
try { try {
const { $renderedContent, type } = await contentRenderer.getRenderedContent(note, {
trim: this.viewType === "grid"
});
if (this.highlightRegex) { if (this.highlightRegex) {
const Mark = new (await import("mark.js")).default($renderedContent[0]); const Mark = new (await import("mark.js")).default($renderedContent[0]);
Mark.markRegExp(this.highlightRegex, { Mark.markRegExp(this.highlightRegex, {