gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-20 14:24:27 +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 }: { function AbstractTableOfContents<T extends RawHeading>({ headings, scrollToHeading }: {
headings: RawHeading[]; headings: T[];
scrollToHeading(heading: RawHeading): void; scrollToHeading(heading: T): void;
}) { }) {
const nestedHeadings = buildHeadingTree(headings); const nestedHeadings = buildHeadingTree(headings);
return ( return (
@ -51,7 +51,6 @@ function TableOfContentsHeading({ heading, scrollToHeading }: {
heading: HeadingsWithNesting; heading: HeadingsWithNesting;
scrollToHeading(heading: RawHeading): void; scrollToHeading(heading: RawHeading): void;
}) { }) {
console.log("Got ", scrollToHeading);
const [ collapsed, setCollapsed ] = useState(false); const [ collapsed, setCollapsed ] = useState(false);
return ( return (
<> <>
@ -181,24 +180,35 @@ function extractTocFromTextEditor(editor: CKTextEditor) {
return headings; return headings;
} }
//#endregion //#endregion
interface DomHeading extends RawHeading {
element: HTMLHeadingElement;
}
function ReadOnlyTextTableOfContents() { function ReadOnlyTextTableOfContents() {
const { noteContext } = useActiveNoteContext(); const { noteContext } = useActiveNoteContext();
const contentEl = useContentElement(noteContext); const contentEl = useContentElement(noteContext);
const headings = extractTocFromStaticHtml(contentEl); 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) { function extractTocFromStaticHtml(el: HTMLElement | null) {
if (!el) return []; if (!el) return [];
const headings: RawHeading[] = []; const headings: DomHeading[] = [];
for (const headingEl of el.querySelectorAll("h1,h2,h3,h4,h5,h6")) { for (const headingEl of el.querySelectorAll<HTMLHeadingElement>("h1,h2,h3,h4,h5,h6")) {
headings.push({ headings.push({
id: crypto.randomUUID(), id: crypto.randomUUID(),
level: parseInt(headingEl.tagName.substring(1), 10), level: parseInt(headingEl.tagName.substring(1), 10),
text: headingEl.textContent text: headingEl.textContent,
element: headingEl
}); });
} }