fix(collection/presentation): DOM buttons are not visible after shadow DOM

This commit is contained in:
Elian Doran 2025-10-15 20:18:53 +03:00
parent 1a000fdb33
commit 9281cc9290
No known key found for this signature in database

View File

@ -1,8 +1,8 @@
import { ViewModeProps } from "../interface"; import { ViewModeProps } from "../interface";
import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks"; import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
import Reveal from "reveal.js"; import Reveal from "reveal.js";
import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw"; import slideBaseStylesheetUrl from "reveal.js/dist/reveal.css?url";
import slideThemeStylesheet from "reveal.js/dist/theme/black.css?raw"; import slideThemeStylesheetUrl from "reveal.js/dist/theme/black.css?url";
import { buildPresentationModel, PresentationModel, PresentationSlideModel } from "./model"; import { buildPresentationModel, PresentationModel, PresentationSlideModel } from "./model";
import ShadowDom from "../../react/ShadowDom"; import ShadowDom from "../../react/ShadowDom";
@ -15,8 +15,8 @@ export default function PresentationView({ note }: ViewModeProps<{}>) {
return presentation && ( return presentation && (
<ShadowDom className="presentation-container" style={{ width: "100%", height: "100%" }}> <ShadowDom className="presentation-container" style={{ width: "100%", height: "100%" }}>
<style>{slideBaseStylesheet}</style> <link rel="stylesheet" href={slideBaseStylesheetUrl} />
<style>{slideThemeStylesheet}</style> <link rel="stylesheet" href={slideThemeStylesheetUrl} />
<Presentation presentation={presentation} /> <Presentation presentation={presentation} />
</ShadowDom> </ShadowDom>
) )
@ -30,7 +30,8 @@ function Presentation({ presentation } : { presentation: PresentationModel }) {
if (apiRef.current || !containerRef.current) return; if (apiRef.current || !containerRef.current) return;
apiRef.current = new Reveal(containerRef.current, { apiRef.current = new Reveal(containerRef.current, {
transition: "slide" transition: "slide",
embedded: true
}); });
apiRef.current.initialize().then(() => { apiRef.current.initialize().then(() => {
console.log("Slide.js initialized."); console.log("Slide.js initialized.");