gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-20 22:34:23 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

chore(toc): reintroduce navigation in readonly text notes

Browse Source
This commit is contained in:
Elian Doran 2025-12-18 12:09:05 +02:00
parent bf5c56a61a
commit b0e1751dc7
No known key found for this signature in database
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/client/src/widgets/sidebar/TableOfContents.tsx
View File

@ -33,9 +33,9 @@ export default function TableOfContents() {
);
}
function AbstractTableOfContents({ headings, scrollToHeading }: {
headings: RawHeading[];
scrollToHeading(heading: RawHeading): void;
function AbstractTableOfContents<T extends RawHeading>({ headings, scrollToHeading }: {
headings: T[];
scrollToHeading(heading: T): void;
}) {
const nestedHeadings = buildHeadingTree(headings);
return (
@ -51,7 +51,6 @@ function TableOfContentsHeading({ heading, scrollToHeading }: {
heading: HeadingsWithNesting;
scrollToHeading(heading: RawHeading): void;
}) {
console.log("Got ", scrollToHeading);
const [ collapsed, setCollapsed ] = useState(false);
return (
<>
@ -181,24 +180,35 @@ function extractTocFromTextEditor(editor: CKTextEditor) {
return headings;
}
//#endregion
interface DomHeading extends RawHeading {
element: HTMLHeadingElement;
}
function ReadOnlyTextTableOfContents() {
const { noteContext } = useActiveNoteContext();
const contentEl = useContentElement(noteContext);
const headings = extractTocFromStaticHtml(contentEl);
return <AbstractTableOfContents headings={headings} />;
const scrollToHeading = useCallback((heading: DomHeading) => {
heading.element.scrollIntoView();
}, []);
return <AbstractTableOfContents
headings={headings}
scrollToHeading={scrollToHeading}
/>;
}
function extractTocFromStaticHtml(el: HTMLElement | null) {
if (!el) return [];
const headings: RawHeading[] = [];
for (const headingEl of el.querySelectorAll("h1,h2,h3,h4,h5,h6")) {
const headings: DomHeading[] = [];
for (const headingEl of el.querySelectorAll<HTMLHeadingElement>("h1,h2,h3,h4,h5,h6")) {
headings.push({
id: crypto.randomUUID(),
level: parseInt(headingEl.tagName.substring(1), 10),
text: headingEl.textContent
text: headingEl.textContent,
element: headingEl
});
}