Главная Обзор Помощь
Вход
wiki
/
weseek__growi
зеркало из https://github.com/weseek/growi
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

remove marpit from Slides.tsx

reiji-h 2 лет назад
Родитель
0d1b05cfbb
Сommit
bd52b1cdb4
4 измененных файлов с 46 добавлено и 45 удалено
Единый вид Показать статистику Diff
  1. 9 6
      packages/presentation/src/components/GrowiSlides.tsx
  2. 4 3
      packages/presentation/src/components/MarpSlides.tsx
  3. 3 36
      packages/presentation/src/components/Slides.tsx
  4. 30 0
      packages/presentation/src/services/growi-marpit.ts

+ 9 - 6
packages/presentation/src/components/GrowiSlides.tsx
Просмотреть файл 

@@ -1,24 +1,24 @@
 
-import { Marp } from '@marp-team/marp-core';
 
 import Head from 'next/head';
 
 import Head from 'next/head';
 
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 
 
 
 import type { PresentationOptions } from '../consts';
 
 import type { PresentationOptions } from '../consts';
 
+import { MARP_CONTAINER_CLASS_NAME, presentationMarpit, slideMarpit } from '../services/growi-marpit';
 
 import * as extractSections from '../services/renderer/extract-sections';
 
 import * as extractSections from '../services/renderer/extract-sections';
 
 
 
 
 
 import './Slides.global.scss';
 
 import './Slides.global.scss';
 
 import { PresentationRichSlideSection, RichSlideSection } from './RichSlideSection';
 
 import { PresentationRichSlideSection, RichSlideSection } from './RichSlideSection';
 
 
 
+
 
 type Props = {
 
 type Props = {
 
   options: PresentationOptions,
 
   options: PresentationOptions,
 
   children?: string,
 
   children?: string,
 
-  marpit: Marp,
 
   presentation?: boolean,
 
   presentation?: boolean,
 
 }
 
 }
 
 
 
 export const GrowiSlides = (props: Props): JSX.Element => {
 
 export const GrowiSlides = (props: Props): JSX.Element => {
 
   const {
 
   const {
 
-    options, children, marpit, presentation,
 
+    options, children, presentation,
 
   } = props;
 
   } = props;
 
   const {
 
   const {
 
     rendererOptions, isDarkMode, disableSeparationByHeader,
 
     rendererOptions, isDarkMode, disableSeparationByHeader,
 
@@ -38,15 +38,18 @@ export const GrowiSlides = (props: Props): JSX.Element => {
 
     rendererOptions.components.section = presentation ? PresentationRichSlideSection : RichSlideSection;
 
     rendererOptions.components.section = presentation ? PresentationRichSlideSection : RichSlideSection;
 
   }
 
   }
 
 
 
+  const marpit = presentation ? presentationMarpit : slideMarpit;
 
   const { css } = marpit.render('');
 
   const { css } = marpit.render('');
 
   return (
 
   return (
 
     <>
 
     <>
 
       <Head>
 
       <Head>
 
         <style>{css}</style>
 
         <style>{css}</style>
 
       </Head>
 
       </Head>
 
-      <ReactMarkdown {...rendererOptions}>
 
-        { children ?? '## No Contents' }
 
-      </ReactMarkdown>
 
+      <div className={`slides ${MARP_CONTAINER_CLASS_NAME}`}>
 
+        <ReactMarkdown {...rendererOptions}>
 
+          { children ?? '## No Contents' }
 
+        </ReactMarkdown>
 
+      </div>
 
     </>
 
     </>
 
   );
 
   );

+ 4 - 3
packages/presentation/src/components/MarpSlides.tsx
Просмотреть файл 

@@ -1,16 +1,17 @@
 
-import { Marp } from '@marp-team/marp-core';
 
 import Head from 'next/head';
 
 import Head from 'next/head';
 
 
 
 import './Slides.global.scss';
 
 import './Slides.global.scss';
 
+import { presentationMarpit, slideMarpit } from '../services/growi-marpit';
 
 
 
 type Props = {
 
 type Props = {
 
   children?: string,
 
   children?: string,
 
-  marpit: Marp,
 
+  presentation?: boolean,
 
 }
 
 }
 
 
 
 export const MarpSlides = (props: Props): JSX.Element => {
 
 export const MarpSlides = (props: Props): JSX.Element => {
 
-  const { children, marpit } = props;
 
+  const { children, presentation } = props;
 
 
 
+  const marpit = presentation ? presentationMarpit : slideMarpit;
 
   const { html, css } = marpit.render(children ?? '');
 
   const { html, css } = marpit.render(children ?? '');
 
   return (
 
   return (
 
     <>
 
     <>

+ 3 - 36
packages/presentation/src/components/Slides.tsx
Просмотреть файл 

@@ -1,5 +1,3 @@
 
-import { Marp } from '@marp-team/marp-core';
 
-import { Element } from '@marp-team/marpit';
 
 
 
 import type { PresentationOptions } from '../consts';
 
 import type { PresentationOptions } from '../consts';
 
 
 
@@ -8,34 +6,6 @@ import { MarpSlides } from './MarpSlides';
 
 
 
 import './Slides.global.scss';
 
 import './Slides.global.scss';
 
 
 
-const MARP_CONTAINER_CLASS_NAME = 'marpit';
 
-
 
-const marpit = new Marp({
 
-  container: [
 
-    new Element('div', { class: `slides ${MARP_CONTAINER_CLASS_NAME}` }),
 
-  ],
 
-  slideContainer: [
 
-    new Element('section', { class: 'shadow rounded m-2' }),
 
-  ],
 
-  inlineSVG: true,
 
-  emoji: undefined,
 
-  html: false,
 
-  math: false,
 
-});
 
-
 
-const presentationMarpit = new Marp({
 
-  container: [
 
-    new Element('div', { class: `slides ${MARP_CONTAINER_CLASS_NAME}` }),
 
-  ],
 
-  slideContainer: [
 
-    new Element('section', { class: 'm-2' }),
 
-  ],
 
-  inlineSVG: true,
 
-  emoji: undefined,
 
-  html: false,
 
-  math: false,
 
-});
 
-
 
 type Props = {
 
 type Props = {
 
   options: PresentationOptions,
 
   options: PresentationOptions,
 
   children?: string,
 
   children?: string,
 
@@ -48,12 +18,9 @@ export const Slides = (props: Props): JSX.Element => {
 
     options, children, hasMarpFlag, presentation,
 
     options, children, hasMarpFlag, presentation,
 
   } = props;
 
   } = props;
 
 
 
-  if (hasMarpFlag) {
 
-    return <MarpSlides marpit={presentation ? presentationMarpit : marpit}>{children}</MarpSlides>;
 
-  }
 
   return (
 
   return (
 
-    <div className={`slides ${MARP_CONTAINER_CLASS_NAME}`}>
 
-      <GrowiSlides options={options} marpit={presentation ? presentationMarpit : marpit} presentation={presentation}>{children}</GrowiSlides>
 
-    </div>
 
+    hasMarpFlag
 
+      ? <MarpSlides presentation={presentation}>{children}</MarpSlides>
 
+      : <GrowiSlides options={options} presentation={presentation}>{children}</GrowiSlides>
 
   );
 
   );
 
 };
 
 };

+ 30 - 0
packages/presentation/src/services/growi-marpit.ts
Просмотреть файл 

@@ -0,0 +1,30 @@
 
+import { Marp } from '@marp-team/marp-core';
 
+import { Element } from '@marp-team/marpit';
 
+
 
+export const MARP_CONTAINER_CLASS_NAME = 'marpit';
 
+
 
+export const slideMarpit = new Marp({
 
+  container: [
 
+    new Element('div', { class: `slides ${MARP_CONTAINER_CLASS_NAME}` }),
 
+  ],
 
+  slideContainer: [
 
+    new Element('section', { class: 'shadow rounded m-2' }),
 
+  ],
 
+  inlineSVG: true,
 
+  emoji: undefined,
 
+  html: false,
 
+  math: false,
 
+});
 
+
 
+export const presentationMarpit = new Marp({
 
+  container: [
 
+    new Element('div', { class: `slides ${MARP_CONTAINER_CLASS_NAME}` }),
 
+  ],
 
+  slideContainer: [
 
+    new Element('section', { class: 'm-2' }),
 
+  ],
 
+  inlineSVG: true,
 
+  emoji: undefined,
 
+  html: false,
 
+  math: false,
 
+});