feat(collection/presentation): get slidejs to render

apps/client/package.json

@@ -72,6 +72,7 @@
     "@types/leaflet": "1.9.21",
     "@types/leaflet-gpx": "1.3.8",
     "@types/mark.js": "8.11.12",
+    "@types/reveal.js": "5.2.1",
     "@types/tabulator-tables": "6.2.11",
     "copy-webpack-plugin": "13.0.1",
     "happy-dom": "20.0.1",

apps/client/src/widgets/collections/presentation/index.tsx

@@ -1,6 +1,9 @@
 import { ViewModeProps } from "../interface";
 import FNote from "../../../entities/fnote";
-import { useLayoutEffect, useState } from "preact/hooks";
+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";
 
 export default function PresentationView({ note }: ViewModeProps<{}>) {
     return note && (
@@ -10,13 +13,33 @@ export default function PresentationView({ note }: ViewModeProps<{}>) {
 
 function Presentation({ note }: { note: FNote }) {
     const [ slides, setSlides ] = useState<FNote[]>();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const apiRef = useRef<Reveal.Api | null>(null);
 
     useLayoutEffect(() => {
         note.getChildNotes().then(setSlides);
     }, [ note ]);
 
+    useEffect(() => {
+        if (apiRef.current || !containerRef.current) return;
+
+        apiRef.current = new Reveal(containerRef.current, {
+            transition: "slide"
+        });
+        apiRef.current.initialize().then(() => {
+            console.log("Slide.js initialized.");
+        });
+
+        return () => {
+            if (apiRef.current) {
+                apiRef.current.destroy();
+                apiRef.current = null;
+            }
+        }
+    }, []);
+
     return (
-        <div className="reveal">
+        <div ref={containerRef} className="reveal">
             <div className="slides">
                 {slides && slides?.map(slide => (
                     <Slide note={slide} />