presentation stype in preview

apps/app/src/client/services/renderer/renderer.tsx

@@ -1,7 +1,6 @@
 import assert from 'assert';
 
 import { isClient } from '@growi/core/dist/utils/browser-utils';
-import * as slides from '@growi/presentation';
 import * as refsGrowiDirective from '@growi/remark-attachment-refs/dist/client/index.mjs';
 import * as drawio from '@growi/remark-drawio';
 // eslint-disable-next-line import/extensions
@@ -18,6 +17,7 @@ import type { Pluggable } from 'unified';
 import { DrawioViewerWithEditButton } from '~/components/ReactMarkdownComponents/DrawioViewerWithEditButton';
 import { Header } from '~/components/ReactMarkdownComponents/Header';
 import { RichAttachment } from '~/components/ReactMarkdownComponents/RichAttachment';
+import { SlideViewer } from '~/components/ReactMarkdownComponents/SlideViewer';
 import { TableWithEditButton } from '~/components/ReactMarkdownComponents/TableWithEditButton';
 import * as mermaid from '~/features/mermaid';
 import { RehypeSanitizeOption } from '~/interfaces/rehype';
@@ -28,6 +28,7 @@ import * as keywordHighlighter from '~/services/renderer/rehype-plugins/keyword-
 import * as relocateToc from '~/services/renderer/rehype-plugins/relocate-toc';
 import * as attachment from '~/services/renderer/remark-plugins/attachment';
 import * as plantuml from '~/services/renderer/remark-plugins/plantuml';
+import * as slides from '~/services/renderer/remark-plugins/slides';
 import * as xsvToTable from '~/services/renderer/remark-plugins/xsv-to-table';
 import {
   commonSanitizeOption, generateCommonOptions, injectCustomSanitizeOption, verifySanitizePlugin,
@@ -116,7 +117,7 @@ export const generateViewOptions = (
     components.table = TableWithEditButton;
     components.mermaid = mermaid.MermaidViewer;
     components.attachment = RichAttachment;
-    components.slide = slides.SlideViewer;
+    components.slide = SlideViewer;
   }
 
   if (config.isEnabledXssPrevention) {
@@ -301,7 +302,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     components.drawio = drawio.DrawioViewer;
     components.mermaid = mermaid.MermaidViewer;
     components.attachment = RichAttachment;
-    components.slide = slides.SlideViewer;
+    components.slide = SlideViewer;
   }
 
   if (config.isEnabledXssPrevention) {

apps/app/src/components/ReactMarkdownComponents/SlideViewer.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import dynamic from 'next/dynamic';
+import { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
+
+import { usePresentationViewOptions } from '~/stores/renderer';
+
+
+const Slides = dynamic(() => import('@growi/presentation').then(mod => mod.Slides), { ssr: false });
+
+type SlideViewerProps = {
+  marp: string,
+  children: string,
+}
+
+export const SlideViewer: React.FC<SlideViewerProps> = React.memo((props: SlideViewerProps) => {
+  const {
+    marp, children,
+  } = props;
+
+  const { data: rendererOptions } = usePresentationViewOptions();
+
+  return (
+    <Slides hasMarpFlag={marp === 'marp'}
+      options={{
+        rendererOptions: rendererOptions as ReactMarkdownOptions,
+      }}>{children}</Slides>
+  );
+});
+
+SlideViewer.displayName = 'SlideViewer';

packages/presentation/src/components/SlideViewer.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import dynamic from 'next/dynamic';
-
-const Slides = dynamic(() => import('./Slides').then(mod => mod.Slides), { ssr: false });
-
-type SlideViewerProps = {
-  marp: string,
-  children: string,
-}
-
-export const SlideViewer: React.FC<SlideViewerProps> = React.memo((props: SlideViewerProps) => {
-  const {
-    marp, children,
-  } = props;
-
-  const options = {
-    rendererOptions: {
-      children: '',
-    },
-  };
-
-  return (
-    <Slides options={options} hasMarpFlag={marp === 'marp'}>{children}</Slides>
-  );
-});
-
-SlideViewer.displayName = 'SlideViewer';

packages/presentation/src/index.ts

@@ -1,4 +1,2 @@
 export * from './components/Presentation';
 export * from './components/Slides';
-export * from './components/SlideViewer';
-export * from './services/renderer/remark-slides';