gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-21 08:04:24 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

refactor(print/list): use separate file

Browse Source
This commit is contained in:
Elian Doran 2025-11-20 20:56:55 +02:00
parent bbcc2f4be4
commit c17df24a19
No known key found for this signature in database
4 changed files with 100 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import { allViewTypes, ViewModeMedia, ViewModeProps, ViewTypeOptions } from "./i
import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumEvent } from "../react/hooks";
import FNote from "../../entities/fnote";
import "./NoteList.css";
import { ListView, GridView, ListPrintView } from "./legacy/ListOrGridView";
import { ListView, GridView } from "./legacy/ListOrGridView";
import { useEffect, useRef, useState } from "preact/hooks";
import GeoView from "./geomap";
import ViewModeStorage from "./view_mode_storage";
@ -13,6 +13,7 @@ import { subscribeToMessages, unsubscribeToMessage as unsubscribeFromMessage } f
import { WebSocketMessage } from "@triliumnext/commons";
import froca from "../../services/froca";
import PresentationView from "./presentation";
import { ListPrintView } from "./legacy/ListPrintView";
interface NoteListProps {
note: FNote | null | undefined;

93
apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
import { useEffect, useRef, useState } from "preact/hooks";
import FNote from "../../../entities/fnote";
import Icon from "../../react/Icon";
import { ViewModeProps } from "../interface";
@ -11,9 +11,7 @@ import tree from "../../../services/tree";
import link from "../../../services/link";
import { t } from "../../../services/i18n";
import attribute_renderer from "../../../services/attribute_renderer";
import froca from "../../../services/froca";
import { RawHtmlBlock } from "../../react/RawHtml";
import { escapeHtml } from "../../../services/utils";
import { useFilteredNoteIds } from "./utils";
export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
@ -37,82 +35,6 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
);
}
interface NotesWithContent {
note: FNote;
content: string;
}
export function ListPrintView({ note, noteIds: unfilteredNoteIds, onReady }: ViewModeProps<{}>) {
const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
const [ notesWithContent, setNotesWithContent ] = useState<NotesWithContent[]>();
useLayoutEffect(() => {
froca.getNotes(noteIds).then(async (notes) => {
const notesWithContent: NotesWithContent[] = [];
async function processNote(note: FNote, depth: number) {
const content = await content_renderer.getRenderedContent(note, {
trim: false,
noChildrenList: true
});
const contentEl = content.$renderedContent[0];
// Create page title element
const pageTitleEl = document.createElement("h1");
pageTitleEl.textContent = note.title;
contentEl.prepend(pageTitleEl);
// Rewrite heading tags to ensure proper hierarchy in print view.
const headings = contentEl.querySelectorAll("h1, h2, h3, h4, h5, h6")
for (const headingEl of headings) {
const currentLevel = parseInt(headingEl.tagName.substring(1), 10);
const newLevel = Math.min(currentLevel + depth, 6);
const newHeadingEl = document.createElement(`h${newLevel}`);
newHeadingEl.innerHTML = headingEl.innerHTML;
headingEl.replaceWith(newHeadingEl);
}
notesWithContent.push({ note, content: contentEl.innerHTML });
if (note.hasChildren()) {
const imageLinks = note.getRelations("imageLink");
const childNotes = await note.getChildNotes();
const filteredChildNotes = childNotes.filter((childNote) => !imageLinks.find((rel) => rel.value === childNote.noteId));
for (const childNote of filteredChildNotes) {
await processNote(childNote, depth + 1);
}
}
}
for (const note of notes) {
await processNote(note, 1);
}
setNotesWithContent(notesWithContent);
});
}, [noteIds]);
useEffect(() => {
if (notesWithContent && onReady) {
onReady();
}
}, [ notesWithContent, onReady ]);
return (
<div class="note-list list-print-view">
<div class="note-list-container use-tn-links">
<h1>{note.title}</h1>
{notesWithContent?.map(({ note: childNote, content }) => (
<section id={`note-${childNote.noteId}`} class="note">
<RawHtmlBlock html={content} />
</section>
))}
</div>
</div>
);
}
export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
const { pageNotes, ...pagination } = usePagination(note, noteIds);
@ -252,17 +174,6 @@ function NoteChildren({ note, parentNote, highlightedTokens }: { note: FNote, pa
return childNotes?.map(childNote => <ListNoteCard note={childNote} parentNote={parentNote} highlightedTokens={highlightedTokens} />)
}
/**
* Filters the note IDs for the legacy view to filter out subnotes that are already included in the note content such as images, included notes.
*/
function useFilteredNoteIds(note: FNote, noteIds: string[]) {
return useMemo(() => {
const includedLinks = note ? note.getRelations().filter((rel) => rel.name === "imageLink" || rel.name === "includeNoteLink") : [];
const includedNoteIds = new Set(includedLinks.map((rel) => rel.value));
return noteIds.filter((noteId) => !includedNoteIds.has(noteId) && noteId !== "_hidden");
}, noteIds);
}
function getNotePath(parentNote: FNote, childNote: FNote) {
if (parentNote.type === "search") {
// for search note parent, we want to display a non-search path

83
apps/client/src/widgets/collections/legacy/ListPrintView.tsx Normal file
View File

@ -0,0 +1,83 @@
import { useEffect, useLayoutEffect, useState } from "preact/hooks";
import { RawHtmlBlock } from "../../react/RawHtml";
import froca from "../../../services/froca";
import type FNote from "../../../entities/fnote";
import content_renderer from "../../../services/content_renderer";
import type { ViewModeProps } from "../interface";
import { useFilteredNoteIds } from "./utils";
interface NotesWithContent {
note: FNote;
content: string;
}
export function ListPrintView({ note, noteIds: unfilteredNoteIds, onReady }: ViewModeProps<{}>) {
const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
const [ notesWithContent, setNotesWithContent ] = useState<NotesWithContent[]>();
useLayoutEffect(() => {
froca.getNotes(noteIds).then(async (notes) => {
const notesWithContent: NotesWithContent[] = [];
async function processNote(note: FNote, depth: number) {
const content = await content_renderer.getRenderedContent(note, {
trim: false,
noChildrenList: true
});
const contentEl = content.$renderedContent[0];
// Create page title element
const pageTitleEl = document.createElement("h1");
pageTitleEl.textContent = note.title;
contentEl.prepend(pageTitleEl);
// Rewrite heading tags to ensure proper hierarchy in print view.
const headings = contentEl.querySelectorAll("h1, h2, h3, h4, h5, h6")
for (const headingEl of headings) {
const currentLevel = parseInt(headingEl.tagName.substring(1), 10);
const newLevel = Math.min(currentLevel + depth, 6);
const newHeadingEl = document.createElement(`h${newLevel}`);
newHeadingEl.innerHTML = headingEl.innerHTML;
headingEl.replaceWith(newHeadingEl);
}
notesWithContent.push({ note, content: contentEl.innerHTML });
if (note.hasChildren()) {
const imageLinks = note.getRelations("imageLink");
const childNotes = await note.getChildNotes();
const filteredChildNotes = childNotes.filter((childNote) => !imageLinks.find((rel) => rel.value === childNote.noteId));
for (const childNote of filteredChildNotes) {
await processNote(childNote, depth + 1);
}
}
}
for (const note of notes) {
await processNote(note, 1);
}
setNotesWithContent(notesWithContent);
});
}, [noteIds]);
useEffect(() => {
if (notesWithContent && onReady) {
onReady();
}
}, [ notesWithContent, onReady ]);
return (
<div class="note-list list-print-view">
<div class="note-list-container use-tn-links">
<h1>{note.title}</h1>
{notesWithContent?.map(({ note: childNote, content }) => (
<section id={`note-${childNote.noteId}`} class="note">
<RawHtmlBlock html={content} />
</section>
))}
</div>
</div>
);
}

13
apps/client/src/widgets/collections/legacy/utils.ts Normal file
View File

@ -0,0 +1,13 @@
import { useMemo } from "preact/hooks";
import FNote from "../../../entities/fnote";
/**
* Filters the note IDs for the legacy view to filter out subnotes that are already included in the note content such as images, included notes.
*/
export function useFilteredNoteIds(note: FNote, noteIds: string[]) {
return useMemo(() => {
const includedLinks = note ? note.getRelations().filter((rel) => rel.name === "imageLink" || rel.name === "includeNoteLink") : [];
const includedNoteIds = new Set(includedLinks.map((rel) => rel.value));
return noteIds.filter((noteId) => !includedNoteIds.has(noteId) && noteId !== "_hidden");
}, noteIds);
}