diff --git a/apps/client/src/widgets/collections/presentation/index.tsx b/apps/client/src/widgets/collections/presentation/index.tsx index b3d96d69d..e3329970e 100644 --- a/apps/client/src/widgets/collections/presentation/index.tsx +++ b/apps/client/src/widgets/collections/presentation/index.tsx @@ -1,10 +1,10 @@ import { ViewModeProps } from "../interface"; -import FNote from "../../../entities/fnote"; import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks"; import Reveal from "reveal.js"; -import "reveal.js/dist/reveal.css"; -import "reveal.js/dist/theme/black.css"; +import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw"; +import slideThemeStylesheet from "reveal.js/dist/theme/black.css?raw"; import { buildPresentationModel, PresentationModel, PresentationSlideModel } from "./model"; +import ShadowDom from "../../react/ShadowDom"; export default function PresentationView({ note }: ViewModeProps<{}>) { const [ presentation, setPresentation ] = useState(); @@ -14,7 +14,11 @@ export default function PresentationView({ note }: ViewModeProps<{}>) { }, [ note ]); return presentation && ( - + + + + + ) } diff --git a/apps/client/src/widgets/react/ShadowDom.tsx b/apps/client/src/widgets/react/ShadowDom.tsx new file mode 100644 index 000000000..6f7a889db --- /dev/null +++ b/apps/client/src/widgets/react/ShadowDom.tsx @@ -0,0 +1,26 @@ +import { ComponentChildren, HTMLAttributes, JSX, render } from "preact"; +import { useEffect, useRef, useState } from "preact/hooks"; + +interface ShadowDomProps extends HTMLAttributes { + children: ComponentChildren; +} + +export default function ShadowDom({ children, ...containerProps }: ShadowDomProps) { + const containerRef = useRef(null); + const [ shadowRoot, setShadowRoot ] = useState(null); + + // Create the shadow root. + useEffect(() => { + if (!containerRef.current || shadowRoot) return; + const shadow = containerRef.current.attachShadow({ mode: "open" }); + setShadowRoot(shadow); + }, [ shadowRoot ]); + + // Render the child elements. + useEffect(() => { + if (!shadowRoot) return; + render(<>{children}, shadowRoot); + }, [ shadowRoot, children ]); + + return
+}