chore(react/collections): bring back attribute rendering

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

View File

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

View File

@ -10,6 +10,7 @@ import { Pager, usePagination } from "../Pagination";
import tree from "../../../services/tree";
import link from "../../../services/link";
import { t } from "../../../services/i18n";
import attribute_renderer from "../../../services/attribute_renderer";
export function ListView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
@ -18,7 +19,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
return (
<div class="note-list list-view">
<div class="note-list-wrapper">
{ noteIds.length > 0 && <div class="note-list-wrapper">
<Pager {...pagination} />
<div class="note-list-container use-tn-links">
@ -28,7 +29,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
</div>
<Pager {...pagination} />
</div>
</div>}
</div>
);
}
@ -71,6 +72,8 @@ 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"} />
<NoteAttributes note={note} />
{isExpanded && <>
<NoteContent note={note} />
<NoteChildren note={note} parentNote={parentNote} />
@ -98,12 +101,24 @@ 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>
<NoteAttributes note={note} />
</h5>
<NoteContent note={note} trim />
</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 }) {
const contentRef = useRef<HTMLDivElement>(null);

View File

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