add slideview component

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

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

packages/presentation/src/components/SlideViewer.tsx

@@ -11,11 +11,13 @@ type SlideViewerProps = {
   children: string,
 }
 
-export const SldieViewer = React.memo((props: SlideViewerProps): JSX.Element => {
+export const SldieViewer: React.FC<SlideViewerProps> = React.memo((props: SlideViewerProps): JSX.Element => {
   const {
     hasMarpFlag, children,
   } = props;
 
+  console.log(children);
+
   const options: PresentationOptions = {
     rendererOptions: {
       children: '',

packages/presentation/src/components/Slides.tsx

@@ -49,6 +49,8 @@ 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/index.ts

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

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

@@ -1,6 +1,7 @@
 import type { Schema as SanitizeOption } from 'hast-util-sanitize';
 import type { Root } from 'mdast';
 import { frontmatterToMarkdown } from 'mdast-util-frontmatter';
+import { gfmToMarkdown } from 'mdast-util-gfm';
 import { toMarkdown } from 'mdast-util-to-markdown';
 import type { Plugin } from 'unified';
 import type { Node } from 'unist';
@@ -28,23 +29,26 @@ const rewriteNode = (tree: Node, node: Node) => {
   const data = tree.data ?? (tree.data = {});
 
   if (marp) {
-    data.dName = 'slide';
+    // 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
         ],
       }),
     };
   }
   else if (slide) {
-    data.dName = 'slide';
+    // data.hName = 'slide';
     data.hProperties = {
       hasMarpFlag: false,
       children: toMarkdown(tree as Root, {
         extensions: [
           frontmatterToMarkdown(['yaml']),
+          gfmToMarkdown(),
         ],
       }),
     };
@@ -53,8 +57,8 @@ const rewriteNode = (tree: Node, node: Node) => {
 
 export const remarkPlugin: Plugin = function() {
   return (tree) => {
+    console.log(tree);
     visit(tree, (node) => {
-      console.log(tree);
       if (node.type === 'yaml' && node.value != null) {
         rewriteNode(tree, node);
       }