presentation slide has no shadow

packages/presentation/src/components/GrowiSlides.tsx

@@ -5,23 +5,26 @@ import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import type { PresentationOptions } from '../consts';
 import * as extractSections from '../services/renderer/extract-sections';
 
-import { RichSlideSection } from './RichSlideSection';
 
 import './Slides.global.scss';
+import { PresentationRichSlideSection, RichSlideSection } from './RichSlideSection';
 
 type Props = {
   options: PresentationOptions,
   children?: string,
   marpit: Marp,
+  presentation?: boolean,
 }
 
 export const GrowiSlides = (props: Props): JSX.Element => {
-  const { options, children, marpit } = props;
+  const {
+    options, children, marpit, presentation,
+  } = props;
   const {
     rendererOptions, isDarkMode, disableSeparationByHeader,
   } = options;
 
-  if (rendererOptions.remarkPlugins != null) {
+  if (rendererOptions?.remarkPlugins != null) {
     rendererOptions.remarkPlugins.push([
       extractSections.remarkPlugin,
       {
@@ -31,8 +34,8 @@ export const GrowiSlides = (props: Props): JSX.Element => {
     ]);
   }
 
-  if (rendererOptions.components != null) {
-    rendererOptions.components.section = RichSlideSection;
+  if (rendererOptions?.components != null) {
+    rendererOptions.components.section = presentation ? PresentationRichSlideSection : RichSlideSection;
   }
 
   const { css } = marpit.render('', { htmlAsArray: true });

packages/presentation/src/components/Presentation.tsx

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

@@ -23,21 +23,37 @@ const marpit = new Marp({
   math: false,
 });
 
+const presentationMarpit = new Marp({
+  container: [
+    new Element('div', { class: `slides ${MARP_CONTAINER_CLASS_NAME}` }),
+  ],
+  slideContainer: [
+    new Element('section', { class: 'm-2' }),
+  ],
+  inlineSVG: true,
+  emoji: undefined,
+  html: false,
+  math: false,
+});
+
 type Props = {
   options: PresentationOptions,
   children?: string,
   hasMarpFlag?: boolean,
+  presentation?: boolean,
 }
 
 export const Slides = (props: Props): JSX.Element => {
-  const { options, children, hasMarpFlag } = props;
+  const {
+    options, children, hasMarpFlag, presentation,
+  } = props;
 
   if (hasMarpFlag) {
-    return <MarpSlides marpit={marpit}>{children}</MarpSlides>;
+    return <MarpSlides marpit={presentation ? presentationMarpit : marpit}>{children}</MarpSlides>;
   }
   return (
     <div className={`slides ${MARP_CONTAINER_CLASS_NAME}`}>
-      <GrowiSlides options={options} marpit={marpit}>{children}</GrowiSlides>
+      <GrowiSlides options={options} marpit={presentation ? presentationMarpit : marpit} presentation={presentation}>{children}</GrowiSlides>
     </div>
   );
 };