Revert "remove presentation option"

This reverts commit e059cc41baae69f9a4ea87bfcb1206a0706a2961.

packages/presentation/src/components/GrowiSlides.tsx

@@ -2,20 +2,21 @@ import Head from 'next/head';
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 
 import type { PresentationOptions } from '../consts';
-import { MARP_CONTAINER_CLASS_NAME, marpit } from '../services/growi-marpit';
+import { MARP_CONTAINER_CLASS_NAME, presentationMarpit, slideMarpit } from '../services/growi-marpit';
 import * as extractSections from '../services/renderer/extract-sections';
 
-import { RichSlideSection } from './RichSlideSection';
+import { PresentationRichSlideSection, RichSlideSection } from './RichSlideSection';
 
 
 type Props = {
   options: PresentationOptions,
   children?: string,
+  presentation?: boolean,
 }
 
 export const GrowiSlides = (props: Props): JSX.Element => {
   const {
-    options, children,
+    options, children, presentation,
   } = props;
   const {
     rendererOptions, isDarkMode, disableSeparationByHeader,
@@ -32,8 +33,9 @@ export const GrowiSlides = (props: Props): JSX.Element => {
       disableSeparationByHeader,
     },
   ]);
-  rendererOptions.components.section = RichSlideSection;
+  rendererOptions.components.section = presentation ? PresentationRichSlideSection : RichSlideSection;
 
+  const marpit = presentation ? presentationMarpit : slideMarpit;
   const { css } = marpit.render('');
   return (
     <>

packages/presentation/src/components/MarpSlides.tsx

@@ -1,14 +1,16 @@
 import Head from 'next/head';
 
-import { marpit } from '../services/growi-marpit';
+import { presentationMarpit, slideMarpit } from '../services/growi-marpit';
 
 type Props = {
   children?: string,
+  presentation?: boolean,
 }
 
 export const MarpSlides = (props: Props): JSX.Element => {
-  const { children } = props;
+  const { children, presentation } = props;
 
+  const marpit = presentation ? presentationMarpit : slideMarpit;
   const { html, css } = marpit.render(children ?? '');
   return (
     <>

packages/presentation/src/components/Presentation.tsx

@@ -64,7 +64,7 @@ export const Presentation = (props: PresentationProps): JSX.Element => {
 
   return (
     <div className={`grw-presentation ${styles['grw-presentation']} reveal`}>
-      <Slides options={options} hasMarpFlag={hasMarpFlag}>{children}</Slides>
+      <Slides options={options} hasMarpFlag={hasMarpFlag} presentation>{children}</Slides>
     </div>
   );
 };

packages/presentation/src/components/RichSlideSection.tsx

@@ -2,13 +2,14 @@ import React, { ReactNode } from 'react';
 
 type RichSlideSectionProps = {
   children: ReactNode,
+  presentation?: boolean,
 }
 
-export const RichSlideSection = React.memo((props: RichSlideSectionProps): JSX.Element => {
-  const { children } = props;
+const OriginalRichSlideSection = React.memo((props: RichSlideSectionProps): JSX.Element => {
+  const { children, presentation } = props;
 
   return (
-    <section className="shadow rounded m-2">
+    <section className={presentation ? 'm-2' : 'shadow rounded m-2'}>
       <svg data-marpit-svg="" viewBox="0 0 1280 720">
         <foreignObject width="1280" height="720">
           <section>
@@ -19,3 +20,24 @@ export const RichSlideSection = React.memo((props: RichSlideSectionProps): JSX.E
     </section>
   );
 });
+
+export const RichSlideSection = React.memo((props: RichSlideSectionProps): JSX.Element => {
+  const { children } = props;
+
+  return (
+    <OriginalRichSlideSection>
+      {children}
+    </OriginalRichSlideSection>
+  );
+});
+
+
+export const PresentationRichSlideSection = React.memo((props: RichSlideSectionProps): JSX.Element => {
+  const { children } = props;
+
+  return (
+    <OriginalRichSlideSection presentation>
+      {children}
+    </OriginalRichSlideSection>
+  );
+});

packages/presentation/src/components/Slides.tsx

@@ -10,19 +10,20 @@ export type SlidesProps = {
   options: PresentationOptions,
   children?: string,
   hasMarpFlag?: boolean,
+  presentation?: boolean,
 }
 
 export const Slides = (props: SlidesProps): JSX.Element => {
   const {
-    options, children, hasMarpFlag,
+    options, children, hasMarpFlag, presentation,
   } = props;
 
   return (
     <div className={`${styles['slides-styles']}`}>
       {
         hasMarpFlag
-          ? <MarpSlides>{children}</MarpSlides>
-          : <GrowiSlides options={options}>{children}</GrowiSlides>
+          ? <MarpSlides presentation={presentation}>{children}</MarpSlides>
+          : <GrowiSlides options={options} presentation={presentation}>{children}</GrowiSlides>
       }
     </div>
   );

packages/presentation/src/services/growi-marpit.ts

@@ -1,4 +1,4 @@
-import { Marp } from '@marp-team/marp-core';
+import { Marp, MarpOptions } from '@marp-team/marp-core';
 import { Element } from '@marp-team/marpit';
 
 export const MARP_CONTAINER_CLASS_NAME = 'marpit';
@@ -36,17 +36,26 @@ const lineNumber = (md) => {
   });
 };
 
-export const marpit = new Marp(
-  {
-    container: [
-      new Element('div', { class: `slides ${MARP_CONTAINER_CLASS_NAME}` }),
-    ],
-    slideContainer: [
-      new Element('section', { class: 'shadow rounded m-2' }),
-    ],
-    inlineSVG: true,
-    emoji: undefined,
-    html: false,
-    math: false,
-  },
-).use(lineNumber);
+const marpitOption: MarpOptions = {
+  container: [
+    new Element('div', { class: `slides ${MARP_CONTAINER_CLASS_NAME}` }),
+  ],
+  inlineSVG: true,
+  emoji: undefined,
+  html: false,
+  math: false,
+};
+
+const slideMarpitOption = marpitOption;
+slideMarpitOption.slideContainer = (
+  [new Element('section', { class: 'shadow rounded m-2' })]
+);
+
+export const slideMarpit = new Marp(slideMarpitOption).use(lineNumber);
+
+const presentationMarpitOption = marpitOption;
+presentationMarpitOption.slideContainer = (
+  [new Element('section', { class: 'm-2' })]
+);
+
+export const presentationMarpit = new Marp(presentationMarpitOption);