feat(collection/presentation): make cross-slide links work

This commit is contained in:
Elian Doran 2025-10-18 19:02:52 +03:00
parent bfa1c2a2dd
commit 27cc858b67
No known key found for this signature in database
2 changed files with 26 additions and 2 deletions

View File

@ -140,6 +140,10 @@ function Presentation({ presentation, setApi } : { presentation: PresentationMod
api.initialize().then(() => {
setRevealApi(api);
setApi(api);
if (containerRef.current) {
rewireLinks(containerRef.current, api);
}
});
return () => {
@ -177,7 +181,7 @@ function Presentation({ presentation, setApi } : { presentation: PresentationMod
function Slide({ slide }: { slide: PresentationSlideBaseModel }) {
return (
<section
id={slide.noteId}
id={`slide-${slide.noteId}`}
data-note-id={slide.noteId}
data-background-color={slide.backgroundColor}
data-background-gradient={slide.backgroundGradient}
@ -190,3 +194,23 @@ function getNoteIdFromSlide(slide: HTMLElement | undefined) {
if (!slide) return;
return slide.dataset.noteId;
}
function rewireLinks(container: HTMLElement, api: Reveal.Api) {
const links = container.querySelectorAll<HTMLLinkElement>("a.reference-link");
for (const link of links) {
link.addEventListener("click", () => {
/**
* Reveal.js has built-in navigation by either index or ID. However, the ID-based navigation doesn't work because it tries to look
* outside the shadom DOM (via document.getElementById).
*/
const url = new URL(link.href);
if (!url.hash.startsWith("#/slide-")) return;
const targetId = url.hash.substring(8);
const slide = container.querySelector<HTMLElement>(`#slide-${targetId}`);
if (!slide) return;
const { h, v, f } = api.getIndices(slide);
api.slide(h, v, f);
});
}
}

View File

@ -65,7 +65,7 @@ async function processContent(note: FNote): Promise<DangerouslySetInnerHTML> {
async function postProcessSlides(slides: (PresentationSlideModel | PresentationSlideBaseModel)[]) {
for (const slide of slides) {
if (slide.type !== "text") continue;
slide.content.__html = slide.content.__html.replaceAll(/href="[^"]*#root[a-zA-Z0-9_\/]*\/([a-zA-Z0-9_]+)[^"]*"/g, `href="#/$1"`);
slide.content.__html = slide.content.__html.replaceAll(/href="[^"]*#root[a-zA-Z0-9_\/]*\/([a-zA-Z0-9_]+)[^"]*"/g, `href="#/slide-$1"`);
if ("verticalSlides" in slide && slide.verticalSlides) {
postProcessSlides(slide.verticalSlides);
}