slide preview from reactmarkdown

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

@@ -116,7 +116,7 @@ export const generateViewOptions = (
     components.table = TableWithEditButton;
     components.mermaid = mermaid.MermaidViewer;
     components.attachment = RichAttachment;
-    components.root = slides.SlideViewer;
+    components.slide = slides.SlideViewer;
   }
 
   if (config.isEnabledXssPrevention) {
@@ -301,7 +301,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     components.drawio = drawio.DrawioViewer;
     components.mermaid = mermaid.MermaidViewer;
     components.attachment = RichAttachment;
-    components.root = slides.SlideViewer;
+    components.slide = slides.SlideViewer;
   }
 
   if (config.isEnabledXssPrevention) {

packages/presentation/src/components/SlideViewer.tsx

@@ -2,29 +2,27 @@ import React from 'react';
 
 import dynamic from 'next/dynamic';
 
-import { PresentationOptions } from 'src/consts';
-
-const Slides = dynamic(() => import('@growi/presentation').then(mod => mod.Slides), { ssr: false });
+const Slides = dynamic(() => import('./Slides').then(mod => mod.Slides), { ssr: false });
 
 type SlideViewerProps = {
-  hasMarpFlag: boolean,
+  marp: string,
   children: string,
 }
 
-export const SldieViewer: React.FC<SlideViewerProps> = React.memo((props: SlideViewerProps): JSX.Element => {
+export const SlideViewer: React.FC<SlideViewerProps> = React.memo((props: SlideViewerProps) => {
   const {
-    hasMarpFlag, children,
+    marp, children,
   } = props;
 
-  console.log(children);
-
-  const options: PresentationOptions = {
+  const options = {
     rendererOptions: {
       children: '',
     },
   };
 
   return (
-    <Slides options={options} hasMarpFlag={hasMarpFlag}>{children}</Slides>
+    <Slides options={options} hasMarpFlag={marp === 'marp'}>{children}</Slides>
   );
 });
+
+SlideViewer.displayName = 'SlideViewer';

packages/presentation/src/components/Slides.tsx

@@ -49,8 +49,6 @@ export const Slides = (props: Props): JSX.Element => {
     rendererOptions, isDarkMode, disableSeparationByHeader,
   } = options;
 
-  console.log('Slides');
-
 
   // TODO: can Marp rendering
   // https://redmine.weseek.co.jp/issues/115673

packages/presentation/src/services/renderer/remark-slides.ts

@@ -7,7 +7,7 @@ import type { Plugin } from 'unified';
 import type { Node } from 'unist';
 import { visit } from 'unist-util-visit';
 
-const SUPPORTED_ATTRIBUTES = ['hasMarpFlag', 'chidren'];
+const SUPPORTED_ATTRIBUTES = ['children', 'marp'];
 
 const rewriteNode = (tree: Node, node: Node) => {
   let slide = false;
@@ -26,29 +26,25 @@ const rewriteNode = (tree: Node, node: Node) => {
     }
   });
 
-  const data = tree.data ?? (tree.data = {});
+  if (marp || slide) {
 
-  if (marp) {
-    // data.hName = 'slide';
-    data.hProperties = {
-      hasMarpFlag: true,
-      children: toMarkdown(tree as Root, {
-        extensions: [
-          frontmatterToMarkdown(['yaml']),
-          gfmToMarkdown(),
-          // TODO: add new extension remark-growi-directive to markdown
-        ],
-      }),
+    const newNode: Node = {
+      type: 'root',
+      data: {},
+      position: tree.position,
+      children: tree.children,
     };
-  }
-  else if (slide) {
-    // data.hName = 'slide';
+
+    const data = newNode.data ?? (newNode.data = {});
+    tree.children = [newNode];
+    data.hName = 'slide';
     data.hProperties = {
-      hasMarpFlag: false,
+      marp: marp ? 'marp' : '',
       children: toMarkdown(tree as Root, {
         extensions: [
           frontmatterToMarkdown(['yaml']),
           gfmToMarkdown(),
+          // TODO: add new extension remark-growi-directive to markdown
         ],
       }),
     };
@@ -57,7 +53,6 @@ const rewriteNode = (tree: Node, node: Node) => {
 
 export const remarkPlugin: Plugin = function() {
   return (tree) => {
-    console.log(tree);
     visit(tree, (node) => {
       if (node.type === 'yaml' && node.value != null) {
         rewriteNode(tree, node);