change style to enable slide overview

apps/app/src/components/Page/RevisionRenderer.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 
-import { presentationSlideStyle } from '@growi/presentation';
 import dynamic from 'next/dynamic';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import ReactMarkdown from 'react-markdown';
@@ -47,13 +46,15 @@ const RevisionRenderer = React.memo((props: Props): JSX.Element => {
     rendererOptions, markdown, additionalClassName, isSlidesOverviewEnabled,
   } = props;
 
-  const [slideStyle, setSlideStyle] = useState<presentationSlideStyle | null>();
+  const [hasSlideFlag, setHasSlideFlag] = useState<boolean>();
+  const [hasMarpFlag, setHasMarpFlag] = useState<boolean>();
 
   // useEffect avoid ssr
   useEffect(() => {
     if (isSlidesOverviewEnabled) {
       const processMarkdown = () => (tree) => {
-        setSlideStyle(null);
+        setHasSlideFlag(false);
+        setHasMarpFlag(false);
         visit(tree, 'yaml', (node) => {
           if (node.value != null) {
             const lines = node.value.split('\n');
@@ -61,11 +62,11 @@ const RevisionRenderer = React.memo((props: Props): JSX.Element => {
             lines.forEach((line) => {
               const [key, value] = line.split(':').map(part => part.trim());
 
-              if (key === 'presentation') {
-                setSlideStyle(value === 'marp' || value === 'true' ? value : null);
+              if (key === 'slide' && value === 'true') {
+                setHasSlideFlag(true);
               }
               else if (key === 'marp' && value === 'true') {
-                setSlideStyle('marp');
+                setHasMarpFlag(true);
               }
             });
           }
@@ -79,9 +80,9 @@ const RevisionRenderer = React.memo((props: Props): JSX.Element => {
         .use(processMarkdown)
         .process(markdown);
     }
-  }, [markdown, setSlideStyle, isSlidesOverviewEnabled]);
+  }, [markdown, setHasSlideFlag, setHasMarpFlag, isSlidesOverviewEnabled]);
 
-  if (isSlidesOverviewEnabled && slideStyle != null) {
+  if (isSlidesOverviewEnabled && (hasSlideFlag || hasMarpFlag)) {
     const options = {
       rendererOptions: rendererOptions as ReactMarkdownOptions,
       isDarkMode: false,
@@ -90,7 +91,7 @@ const RevisionRenderer = React.memo((props: Props): JSX.Element => {
     return (
       <Slides
         options={options}
-        slideStyle={slideStyle}
+        hasMarpFlag={hasMarpFlag}
       >{markdown}</Slides>
     );
   }

packages/presentation/src/components/Slides.tsx

@@ -6,7 +6,6 @@ import Head from 'next/head';
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 
 import type { PresentationOptions } from '../consts';
-import { SLIDE_STYLE, presentationSlideStyle } from '../interfaces';
 import * as extractSections from '../services/renderer/extract-sections';
 
 import './Slides.global.scss';
@@ -27,7 +26,6 @@ const marp = new Marp({
 
 // TODO: to change better slide style
 // https://redmine.weseek.co.jp/issues/125680
-const marpDefaultTheme = marp.themeSet.default;
 const marpSlideTheme = marp.themeSet.add(`
     /*!
      * @theme slide_preview
@@ -36,74 +34,51 @@ const marpSlideTheme = marp.themeSet.add(`
       max-width: 90%;
     }
 `);
+marp.themeSet.default = marpSlideTheme;
 
 
 type Props = {
   options: PresentationOptions,
   children?: string,
-  slideStyle?: presentationSlideStyle,
+  hasMarpFlag?: boolean,
 }
 
 export const Slides = (props: Props): JSX.Element => {
-  const { options, children, slideStyle } = props;
+  const { options, children, hasMarpFlag } = props;
   const {
     rendererOptions, isDarkMode, disableSeparationByHeader,
   } = options;
 
-  rendererOptions.remarkPlugins?.push([
-    extractSections.remarkPlugin,
-    {
-      isDarkMode,
-      disableSeparationByHeader,
-    },
-  ]);
-
-
-  if (slideStyle === SLIDE_STYLE.true) {
-    // TODO: to change better slide style
-    // https://redmine.weseek.co.jp/issues/125680
-    // classname = "marpit" cannot be used in SSR.
-    // And RevisionRenderer.tsx is used in SSR.
-    // so use classname = "marpit" in Slides.tsx is dynamic imported.
-    marp.themeSet.default = marpSlideTheme;
-    const { css } = marp.render('', { htmlAsArray: true });
-    return (
-      <>
-        <Head>
-          <style>{css}</style>
-        </Head>
-        <div className={`${MARP_CONTAINER_CLASS_NAME}`}>
-          <div className="slides">
-            <ReactMarkdown {...rendererOptions}>
-              { children ?? '## No Contents' }
-            </ReactMarkdown>
-          </div>
-        </div>
-      </>
-    );
-  }
 
   // TODO: can Marp rendering
   // https://redmine.weseek.co.jp/issues/115673
-  if (slideStyle === SLIDE_STYLE.marp) {
+  if (hasMarpFlag) {
     return (
       <></>
     );
   }
 
+  rendererOptions.remarkPlugins?.push([
+    extractSections.remarkPlugin,
+    {
+      isDarkMode,
+      disableSeparationByHeader,
+    },
+  ]);
 
-  marp.themeSet.default = marpDefaultTheme;
   const { css } = marp.render('', { htmlAsArray: true });
   return (
     <>
       <Head>
         <style>{css}</style>
       </Head>
-      <ReactMarkdown {...rendererOptions}>
-        { children ?? '## No Contents' }
-      </ReactMarkdown>
+      <div className={`${MARP_CONTAINER_CLASS_NAME}`}>
+        <div className="slides">
+          <ReactMarkdown {...rendererOptions}>
+            { children ?? '## No Contents' }
+          </ReactMarkdown>
+        </div>
+      </div>
     </>
   );
-
-
 };

packages/presentation/src/interfaces/index.ts

@@ -1,2 +0,0 @@
-export const SLIDE_STYLE = { true: 'true', marp: 'marp' } as const;
-export type presentationSlideStyle = typeof SLIDE_STYLE[keyof typeof SLIDE_STYLE];