wip slide viewr

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

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

packages/presentation/src/components/SlideViewer.tsx

@@ -0,0 +1,28 @@
+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 });
+
+type SlideViewerProps = {
+  hasMarpFlag: boolean,
+  children: string,
+}
+
+export const SldieViewer = React.memo((props: SlideViewerProps): JSX.Element => {
+  const {
+    hasMarpFlag, children,
+  } = props;
+
+  const options: PresentationOptions = {
+    rendererOptions: {
+      children: '',
+    },
+  };
+
+  return (
+    <Slides options={options} hasMarpFlag={hasMarpFlag}>{children}</Slides>
+  );
+});

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

@@ -1,10 +1,14 @@
 import type { Schema as SanitizeOption } from 'hast-util-sanitize';
+import type { Root } from 'mdast';
+import { toMarkdown } from 'mdast-util-to-markdown';
+import { handleClientScriptLoad } from 'next/script';
 import type { Plugin } from 'unified';
 import type { Node } from 'unist';
 import { visit } from 'unist-util-visit';
 
-function rewriteNode(node: Node) {
+const SUPPORTED_ATTRIBUTES = ['hasMarpFlag', 'chidren'];
 
+const rewriteNode = (tree: Node, node: Node) => {
   let slide = false;
   let marp = false;
 
@@ -20,24 +24,45 @@ function rewriteNode(node: Node) {
       marp = true;
     }
   });
+
+  const data = tree.data ?? (tree.data = {});
+
   if (marp) {
-    node.type = 'marp';
+    data.dName = 'slide';
+    data.hProperties = {
+      hasMarpFlag: true,
+      children: toMarkdown(tree as Root, {
+        handlers: {
+          yaml: (node: string, parent: Node, state: State: info: Info ) => {
+
+          }
+        },
+      }),
+    };
   }
   else if (slide) {
-    node.type = 'slide';
+    data.dName = 'slide';
+    data.hProperties = {
+      hasMarpFlag: false,
+      children: toMarkdown(tree as Root),
+    };
   }
-}
+};
 
 export const remarkPlugin: Plugin = function() {
   return (tree) => {
     visit(tree, (node) => {
+      console.log(tree);
       if (node.type === 'yaml' && node.value != null) {
-        rewriteNode(node);
+        rewriteNode(tree, node);
       }
     });
   };
 };
 
 export const sanitizeOption: SanitizeOption = {
-  tagNames: ['slides'],
+  tagNames: ['slide'],
+  attributes: {
+    slide: SUPPORTED_ATTRIBUTES,
+  },
 };