switch slide or reactmarkdown

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

@@ -4,12 +4,14 @@ import React, {
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 import { isUsersHomepage } from '@growi/core/dist/utils/page-path-utils';
+import { parseSlideFrontmatterInMarkdown } from '@growi/presentation';
 import dynamic from 'next/dynamic';
 
 import { useShouldExpandContent } from '~/client/services/layout';
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import { generateSSRViewOptions } from '~/services/renderer/renderer';
 import {
+  useIsEnabledMarp,
   useIsForbidden, useIsIdenticalPath, useIsNotCreatable,
 } from '~/stores/context';
 import { useSWRxCurrentPage, useIsNotFound } from '~/stores/page';
@@ -23,6 +25,7 @@ import { PageViewLayout } from '../Common/PageViewLayout';
 import { PageAlerts } from '../PageAlert/PageAlerts';
 import { PageContentFooter } from '../PageContentFooter';
 import type { PageSideContentsProps } from '../PageSideContents';
+import { SlideViewer } from '../ReactMarkdownComponents/SlideViewer';
 import { UserInfo } from '../User/UserInfo';
 import type { UsersHomepageFooterProps } from '../UsersHomepageFooter';
 
@@ -73,6 +76,8 @@ export const PageView = (props: Props): JSX.Element => {
 
   const shouldExpandContent = useShouldExpandContent(page);
 
+  const { data: enabledMarp } = useIsEnabledMarp();
+
 
   // ***************************  Auto Scroll  ***************************
   useEffect(() => {
@@ -131,12 +136,19 @@ export const PageView = (props: Props): JSX.Element => {
     const rendererOptions = viewOptions ?? generateSSRViewOptions(rendererConfig, pagePath);
     const markdown = page.revision.body;
 
+    const [marp, useSlide] = parseSlideFrontmatterInMarkdown(markdown);
+    const useMarp = enabledMarp && marp;
+
     return (
       <>
         <PageContentsUtilities />
 
         <div className="flex-expand-vert justify-content-between">
-          <RevisionRenderer rendererOptions={rendererOptions} markdown={markdown} />
+          {
+            (viewOptions && (useMarp || useSlide))
+              ? (<SlideViewer marp={useMarp}>{markdown}</SlideViewer>)
+              : (<RevisionRenderer rendererOptions={rendererOptions} markdown={markdown} />)
+          }
 
           { !isIdenticalPathPage && !isNotFound && (
             <div id="comments-container" ref={commentsContainerRef}>

apps/app/src/components/PageEditor/Preview.tsx

@@ -1,12 +1,13 @@
 import type { CSSProperties } from 'react';
 import React from 'react';
 
-import { parseSlideFrontmatter } from '@growi/presentation';
+import { parseSlideFrontmatterInMarkdown } from '@growi/presentation';
 
 import type { RendererOptions } from '~/interfaces/renderer-options';
+import { useIsEnabledMarp } from '~/stores/context';
 
 import RevisionRenderer from '../Page/RevisionRenderer';
-
+import { SlideViewer } from '../ReactMarkdownComponents/SlideViewer';
 
 import styles from './Preview.module.scss';
 
@@ -32,15 +33,23 @@ const Preview = (props: Props): JSX.Element => {
 
   const fluidLayoutClass = expandContentWidth ? 'fluid-layout' : '';
 
+  const { data: enabledMarp } = useIsEnabledMarp();
+  const [marp, useSlide] = parseSlideFrontmatterInMarkdown(markdown);
+  const useMarp = enabledMarp && marp;
+
   return (
     <div
       data-testid="page-editor-preview-body"
       className={`${moduleClass} ${fluidLayoutClass} ${pagePath === '/Sidebar' ? 'preview-sidebar' : ''}`}
       style={style}
     >
-      { markdown != null && (
-        <RevisionRenderer rendererOptions={rendererOptions} markdown={markdown}></RevisionRenderer>
-      ) }
+      { markdown != null
+        && (
+          (useMarp || useSlide)
+            ? (<SlideViewer marp={useMarp}>{markdown}</SlideViewer>)
+            : (<RevisionRenderer rendererOptions={rendererOptions} markdown={markdown}></RevisionRenderer>)
+        )
+      }
     </div>
   );
 

apps/app/src/components/ShareLinkPageView.tsx

@@ -1,12 +1,14 @@
 import React, { useMemo } from 'react';
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
+import { parseSlideFrontmatterInMarkdown } from '@growi/presentation';
 import dynamic from 'next/dynamic';
 
 import { useShouldExpandContent } from '~/client/services/layout';
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import type { IShareLinkHasId } from '~/interfaces/share-link';
 import { generateSSRViewOptions } from '~/services/renderer/renderer';
+import { useIsEnabledMarp } from '~/stores/context';
 import { useIsNotFound } from '~/stores/page';
 import { useViewOptions } from '~/stores/renderer';
 import loggerFactory from '~/utils/logger';
@@ -16,6 +18,7 @@ import { PageViewLayout } from './Common/PageViewLayout';
 import RevisionRenderer from './Page/RevisionRenderer';
 import ShareLinkAlert from './Page/ShareLinkAlert';
 import type { PageSideContentsProps } from './PageSideContents';
+import { SlideViewer } from './ReactMarkdownComponents/SlideViewer';
 
 
 const logger = loggerFactory('growi:Page');
@@ -44,6 +47,7 @@ export const ShareLinkPageView = (props: Props): JSX.Element => {
   const { data: isNotFoundMeta } = useIsNotFound();
 
   const { data: viewOptions } = useViewOptions();
+  const { data: enabledMarp } = useIsEnabledMarp();
 
   const shouldExpandContent = useShouldExpandContent(page);
 
@@ -85,9 +89,16 @@ export const ShareLinkPageView = (props: Props): JSX.Element => {
     const rendererOptions = viewOptions ?? generateSSRViewOptions(rendererConfig, pagePath);
     const markdown = page.revision.body;
 
+    const [marp, useSlide] = parseSlideFrontmatterInMarkdown(markdown);
+    const useMarp = enabledMarp && marp;
+
     return (
       <>
-        <RevisionRenderer rendererOptions={rendererOptions} markdown={markdown} />
+        {
+          (viewOptions && (useMarp || useSlide))
+            ? (<SlideViewer marp={useMarp}>{markdown}</SlideViewer>)
+            : (<RevisionRenderer rendererOptions={rendererOptions} markdown={markdown} />)
+        }
       </>
     );
   };