render presentation with spectacle

packages/app/src/components/PagePresentationModal.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 
+import { Presentation } from '@growi/presentation';
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import {
   Modal, ModalBody,
 } from 'reactstrap';
 
+
 import { usePagePresentationModal } from '~/stores/modal';
 import { useSWRxCurrentPage } from '~/stores/page';
 import { usePresentationViewOptions } from '~/stores/renderer';
 
+
 import styles from './PagePresentationModal.module.scss';
 
 const PagePresentationModal = (): JSX.Element => {
@@ -16,7 +19,7 @@ const PagePresentationModal = (): JSX.Element => {
   const { data: presentationModalData, close: closePresentationModal } = usePagePresentationModal();
 
   const { data: currentPage } = useSWRxCurrentPage();
-  const { data: rendererOptions } = usePresentationViewOptions();
+  // const { data: rendererOptions } = usePresentationViewOptions();
 
   const isOpen = presentationModalData?.isOpened ?? false;
 
@@ -36,9 +39,10 @@ const PagePresentationModal = (): JSX.Element => {
     >
       <ModalBody className="modal-body">
         { markdown != null && (
-          <ReactMarkdown {...rendererOptions}>
-            {markdown}
-          </ReactMarkdown>
+          // <ReactMarkdown {...rendererOptions}>
+          //   {markdown}
+          // </ReactMarkdown>
+          <Presentation markdown={markdown} />
         )}
       </ModalBody>
     </Modal>

packages/app/src/services/renderer/renderer.tsx

@@ -2,7 +2,6 @@
 import type { ComponentType } from 'react';
 
 import { isClient } from '@growi/core';
-import * as presentation from '@growi/presentation';
 import * as drawioPlugin from '@growi/remark-drawio';
 import growiDirective from '@growi/remark-growi-directive';
 import { Lsx, LsxImmutable } from '@growi/remark-lsx/components';
@@ -301,28 +300,6 @@ export const generatePresentationViewOptions = (
   // based on simple view options
   const options = generateSimpleViewOptions(config, pagePath);
 
-  const { remarkPlugins, rehypePlugins, components } = options;
-
-  remarkPlugins.push(
-    presentation.remarkPlugin,
-  );
-
-  // add sanitize option for presentation
-  const sanitizePlugin = rehypePlugins.find(rehypePlugin => isSanitizePlugin(rehypePlugin)) as SanitizePlugin | undefined;
-  if (sanitizePlugin != null) {
-    const sanitizeOptions = sanitizePlugin[1];
-    sanitizePlugin[1] = deepmerge(
-      sanitizeOptions,
-      presentation.sanitizeOption,
-    );
-  }
-
-  // add presentation components
-  if (components != null) {
-    components.slides = presentation.Slides;
-    components.slide = presentation.Slide;
-  }
-
   if (config.isEnabledXssPrevention) {
     verifySanitizePlugin(options, false);
   }

packages/presentation/package.json

@@ -26,6 +26,7 @@
     "@marp-team/marp-core": "^3.4.2",
     "eslint-plugin-regex": "^1.8.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "spectacle": "^9.6.0"
   }
 }

packages/presentation/src/components/Presentation.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Deck, MarkdownSlideSet } from 'spectacle';
+
+type PresentationProps = {
+  markdown: string,
+}
+
+const theme = {
+  colors: {
+    tertiary: 'var(--bgcolor-global)',
+    primary: 'var(--primary)',
+    secondary: 'var(--secondary)',
+  },
+};
+
+export const Presentation = (props: PresentationProps): JSX.Element => {
+  const { markdown } = props;
+  return (
+    <Deck theme={theme}>
+      <MarkdownSlideSet>{markdown}</MarkdownSlideSet>
+    </Deck>
+  );
+};

packages/presentation/src/components/index.ts

@@ -1 +1,2 @@
+export * from './Presentation';
 export * from './Slide';