slide presentation

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

@@ -8,7 +8,7 @@ import type { RendererOptions } from '~/interfaces/renderer-options';
 const Slides = dynamic(() => import('../Presentation/Slides').then(mod => mod.Slides), { ssr: false });
 
 type SlideViewerProps = {
-  marp: string | undefined,
+  marp: boolean,
   children: string,
   rendererOptions: RendererOptions,
 }
@@ -20,7 +20,7 @@ export const SlideViewer = React.memo((props: SlideViewerProps) => {
 
   return (
     <Slides
-      hasMarpFlag={marp != null}
+      hasMarpFlag={marp}
       options={{ rendererOptions: rendererOptions as ReactMarkdownOptions }}
     >
       {children}

packages/presentation/src/components/Presentation.tsx

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import Reveal from 'reveal.js';
 
 import type { PresentationOptions } from '../consts';
-import { parseSlideFrontmatterInMarkdown } from '../services/parse-slide-frontmatter';
+import { hasEnabledSlideTypes } from '../services/has-enabled-slide-types';
 
 import { Slides } from './Slides';
 
@@ -42,7 +42,7 @@ export const Presentation = (props: PresentationProps): JSX.Element => {
   const { options, isEnabledMarp, children } = props;
   const { revealOptions } = options;
 
-  const [marp] = parseSlideFrontmatterInMarkdown(children);
+  const [, marp] = hasEnabledSlideTypes(children);
   const hasMarpFlag = isEnabledMarp && marp;
 
   useEffect(() => {

packages/presentation/src/services/has-enabled-slide-types.ts

@@ -0,0 +1,25 @@
+export const hasEnabledSlideTypes = (markdown?: string): [boolean, boolean, boolean] => {
+
+  if (markdown == null) {
+    return [false, false, false];
+  }
+
+  const text = markdown.slice(0, 1000);
+
+  const reStartFrontmatter = /^---\n/;
+  const reEndFrontmatter = /\n---\n/;
+
+  if (!reStartFrontmatter.test(text) && !reEndFrontmatter.test(text)) {
+    return [false, false, false];
+  }
+
+  const reEnableMarp = /\nmarp\s*:\s+true\n/;
+  const reEnableSlide = /\nslide\s*:\s+true\n/;
+
+  const marp = reEnableMarp.test(text) && reEnableMarp.lastIndex < reEndFrontmatter.lastIndex;
+  const slide = reEnableSlide.test(text) && reEnableSlide.lastIndex < reEndFrontmatter.lastIndex;
+
+  const enable = marp || slide;
+
+  return [enable, marp, slide];
+};

packages/presentation/src/services/parse-slide-frontmatter.ts

@@ -1,43 +0,0 @@
-import remarkFrontmatter from 'remark-frontmatter';
-import remarkParse from 'remark-parse';
-import remarkStringify from 'remark-stringify';
-import { unified } from 'unified';
-
-
-export const parseSlideFrontmatter = (frontmatter: string): [boolean, boolean] => {
-
-  let marp = false;
-  let slide = false;
-
-  const lines = frontmatter.split('\n');
-  lines.forEach((line) => {
-    const [key, value] = line.split(':').map(part => part.trim());
-    if (key === 'marp' && value === 'true') {
-      marp = true;
-    }
-    if (key === 'slide' && value === 'true') {
-      slide = true;
-    }
-  });
-
-  return [marp, slide];
-};
-
-export const parseSlideFrontmatterInMarkdown = (markdown?: string): [boolean, boolean] => {
-
-  let marp = false;
-  let slide = false;
-
-  unified()
-    .use(remarkParse)
-    .use(remarkStringify)
-    .use(remarkFrontmatter, ['yaml'])
-    .use(() => ((obj) => {
-      if (obj.children[0]?.type === 'yaml') {
-        [marp, slide] = parseSlideFrontmatter(obj.children[0]?.value as string);
-      }
-    }))
-    .process(markdown as string);
-
-  return [marp, slide];
-};