activate reveal

apps/app/src/components/PagePresentationModal.tsx

@@ -17,7 +17,7 @@ import { useNextThemes } from '~/stores/use-next-themes';
 import styles from './PagePresentationModal.module.scss';
 
 
-const Presentation = dynamic<PresentationProps>(() => import('@growi/presentation').then(mod => mod.Presentation), {
+const Presentation = dynamic<PresentationProps>(() => import('./Presentation/Presentation').then(mod => mod.Presentation), {
   ssr: false,
   loading: () => (
     <i className="fa fa-4x fa-spinner fa-pulse text-muted"></i>

apps/app/src/components/Presentation/Presentation.tsx

@@ -0,0 +1,7 @@
+import { Presentation as PresentationSubstance, type PresentationProps } from '@growi/presentation';
+
+import '@growi/presentation/dist/style.css';
+
+export const Presentation = (props: PresentationProps): JSX.Element => {
+  return <PresentationSubstance {...props} />;
+};

packages/presentation/src/components/Presentation.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 
-// import Reveal from 'reveal.js';
+import Reveal from 'reveal.js';
 
 import type { PresentationOptions } from '../consts';
 
 import { MARP_CONTAINER_CLASS_NAME, Slides } from './Slides';
 
-// import 'reveal.js/dist/reveal.css';
+import 'reveal.js/dist/reveal.css';
 import './Presentation.global.scss';
 
 import styles from './Presentation.module.scss';
@@ -40,20 +40,20 @@ export const Presentation = (props: PresentationProps): JSX.Element => {
   const { revealOptions } = options;
 
   useEffect(() => {
-    // let deck: Reveal.Api;
-    // if (children != null) {
-    //   deck = new Reveal({ ...baseRevealOptions, ...revealOptions });
-    //   deck.initialize()
-    //     .then(() => deck.slide(0)); // navigate to the first slide
+    let deck: Reveal.Api;
+    if (children != null) {
+      deck = new Reveal({ ...baseRevealOptions, ...revealOptions });
+      deck.initialize()
+        .then(() => deck.slide(0)); // navigate to the first slide
 
-    //   deck.on('ready', removeAllHiddenElements);
-    //   deck.on('slidechanged', removeAllHiddenElements);
-    // }
+      deck.on('ready', removeAllHiddenElements);
+      deck.on('slidechanged', removeAllHiddenElements);
+    }
 
-    // return function cleanup() {
-    //   deck?.off('ready', removeAllHiddenElements);
-    //   deck?.off('slidechanged', removeAllHiddenElements);
-    // };
+    return function cleanup() {
+      deck?.off('ready', removeAllHiddenElements);
+      deck?.off('slidechanged', removeAllHiddenElements);
+    };
   }, [children, revealOptions]);
 
   return (