From 9281cc9290c73a502fd586cbfd2237fad6ae4406 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 15 Oct 2025 20:18:53 +0300
Subject: [PATCH] fix(collection/presentation): DOM buttons are not visible
 after shadow DOM

---
 .../src/widgets/collections/presentation/index.tsx    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

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