mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 15:19:01 +02:00
chore(react/collections): bring back attribute rendering
This commit is contained in:
parent
c4d771f2c6
commit
f92948d65c
@ -50,7 +50,7 @@
|
||||
}
|
||||
|
||||
.note-book-header .rendered-note-attributes:before {
|
||||
content: "\\00a0\\00a0";
|
||||
content: "\00a0\00a0";
|
||||
}
|
||||
|
||||
.note-book-header .note-icon {
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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, {
|
||||
|
Loading…
x
Reference in New Issue
Block a user