add slide component

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

@@ -298,14 +298,17 @@ export const generatePresentationViewOptions = (
     config: RendererConfig,
     pagePath: string,
 ): RendererOptions => {
+  // based on simple view options
   const options = generateSimpleViewOptions(config, pagePath);
 
-  options.remarkPlugins.push(
+  const { remarkPlugins, rehypePlugins, components } = options;
+
+  remarkPlugins.push(
     presentation.remarkPlugin,
   );
 
   // add sanitize option for presentation
-  const sanitizePlugin = options.rehypePlugins.find(rehypePlugin => isSanitizePlugin(rehypePlugin)) as SanitizePlugin | undefined;
+  const sanitizePlugin = rehypePlugins.find(rehypePlugin => isSanitizePlugin(rehypePlugin)) as SanitizePlugin | undefined;
   if (sanitizePlugin != null) {
     const sanitizeOptions = sanitizePlugin[1];
     sanitizePlugin[1] = deepmerge(
@@ -314,6 +317,12 @@ export const generatePresentationViewOptions = (
     );
   }
 
+  // add presentation components
+  if (components != null) {
+    components.slides = presentation.Slides;
+    components.slide = presentation.Slide;
+  }
+
   if (config.isEnabledXssPrevention) {
     verifySanitizePlugin(options, false);
   }

packages/remark-presentation/src/components/Slide.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+
+import { Splide, SplideSlide } from '@splidejs/react-splide';
+import '@splidejs/splide/css';
+
+
+type SlidesProps = {
+  children?: ReactNode,
+}
+
+export const Slides = (props: SlidesProps): JSX.Element => {
+  return <Splide>{props.children}</Splide>;
+};
+
+type SlideProps = {
+  children?: ReactNode,
+}
+
+export const Slide = (props: SlideProps): JSX.Element => {
+  return <SplideSlide>{props.children}</SplideSlide>;
+};

packages/remark-presentation/src/components/index.ts

@@ -1 +1 @@
-// export {  } from './Splide';
+export * from './Slide';

packages/remark-presentation/src/index.ts

@@ -1,2 +1,2 @@
-// export * from './components';
+export * from './components';
 export * from './services/renderer';