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

integrate marpit

reiji-h 2 лет назад
Родитель
3db669700d
Сommit
8fb4720fba
3 измененных файлов с 30 добавлено и 50 удалено
Единый вид Показать статистику Diff
  1. 9 29
      packages/presentation/src/components/GrowiSlides.tsx
  2. 2 18
      packages/presentation/src/components/MarpSlides.tsx
  3. 19 3
      packages/presentation/src/components/Slides.tsx

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

@@ -1,46 +1,22 @@
 
 import { Marp } from '@marp-team/marp-core';
 
 import { Marp } from '@marp-team/marp-core';
 
-import { Element } from '@marp-team/marpit';
 
 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 * as extractSections from '../services/renderer/extract-sections';
 
 import * as extractSections from '../services/renderer/extract-sections';
 
 
 
-import './Slides.global.scss';
 
-
 
-const MARP_CONTAINER_CLASS_NAME = 'marpit';
 
+import { RichSlideSection } from './RichSlideSection';
 
 
 
-// ----------------------------------------------------
 
-// TODO: to change better slide style
 
-// https://redmine.weseek.co.jp/issues/125680
 
-const marp = new Marp({
 
-  container: [
 
-    new Element('div', { class: MARP_CONTAINER_CLASS_NAME }),
 
-    new Element('div', { class: 'slides' }),
 
-  ],
 
-  inlineSVG: false,
 
-  emoji: undefined,
 
-  html: false,
 
-  math: false,
 
-});
 
-const marpSlideTheme = marp.themeSet.add(`
 
-    /*!
 
-     * @theme slide_preview
 
-     */
 
-    section {
 
-      max-width: 90%;
 
-    }
 
-`);
 
-marp.themeSet.default = marpSlideTheme;
 
-// ----------------------------------------------------
 
+import './Slides.global.scss';
 
 
 
 type Props = {
 
 type Props = {
 
   options: PresentationOptions,
 
   options: PresentationOptions,
 
   children?: string,
 
   children?: string,
 
+  marpit: Marp,
 
 }
 
 }
 
 
 
 export const GrowiSlides = (props: Props): JSX.Element => {
 
 export const GrowiSlides = (props: Props): JSX.Element => {
 
-  const { options, children } = props;
 
+  const { options, children, marpit } = props;
 
   const {
 
   const {
 
     rendererOptions, isDarkMode, disableSeparationByHeader,
 
     rendererOptions, isDarkMode, disableSeparationByHeader,
 
   } = options;
 
   } = options;
 
@@ -53,7 +29,11 @@ export const GrowiSlides = (props: Props): JSX.Element => {
 
     },
 
     },
 
   ]);
 
   ]);
 
 
 
-  const { css } = marp.render('', { htmlAsArray: true });
 
+  if (rendererOptions.components != null) {
 
+    rendererOptions.components.section = RichSlideSection;
 
+  }
 
+
 
+  const { css } = marpit.render('', { htmlAsArray: true });
 
   return (
 
   return (
 
     <>
 
     <>
 
       <Head>
 
       <Head>

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

@@ -1,31 +1,15 @@
 
 import { Marp } from '@marp-team/marp-core';
 
 import { Marp } from '@marp-team/marp-core';
 
-import { Element } from '@marp-team/marpit';
 
 import Head from 'next/head';
 
 import Head from 'next/head';
 
 
 
 import './Slides.global.scss';
 
 import './Slides.global.scss';
 
 
 
-const MARP_CONTAINER_CLASS_NAME = 'marpit';
 
-
 
-const marpit = new Marp({
 
-  container: [
 
-    new Element('div', { class: MARP_CONTAINER_CLASS_NAME }),
 
-    new Element('div', { class: 'slides' }),
 
-  ],
 
-  slideContainer: [
 
-    new Element('div', { class: 'shadow rounded m-2' }),
 
-  ],
 
-  inlineSVG: true,
 
-  emoji: undefined,
 
-  html: false,
 
-  math: false,
 
-});
 
-
 
 type Props = {
 
 type Props = {
 
   children?: string,
 
   children?: string,
 
+  marpit: Marp,
 
 }
 
 }
 
 
 
 export const MarpSlides = (props: Props): JSX.Element => {
 
 export const MarpSlides = (props: Props): JSX.Element => {
 
-  const { children } = props;
 
+  const { children, marpit } = props;
 
 
 
   const { html, css } = marpit.render(children ?? '');
 
   const { html, css } = marpit.render(children ?? '');
 
   return (
 
   return (

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

@@ -1,8 +1,10 @@
 
+import { Marp } from '@marp-team/marp-core';
 
+import { Element } from '@marp-team/marpit';
 
+
 
 import type { PresentationOptions } from '../consts';
 
 import type { PresentationOptions } from '../consts';
 
 
 
 import { GrowiSlides } from './GrowiSlides';
 
 import { GrowiSlides } from './GrowiSlides';
 
 import { MarpSlides } from './MarpSlides';
 
 import { MarpSlides } from './MarpSlides';
 
-import { RichSlideSection } from './RichSlideSection';
 
 
 
 import './Slides.global.scss';
 
 import './Slides.global.scss';
 
 
 
@@ -10,6 +12,20 @@ import './Slides.global.scss';
 
 // https://redmine.weseek.co.jp/issues/125680
 
 // https://redmine.weseek.co.jp/issues/125680
 
 export const MARP_CONTAINER_CLASS_NAME = 'marpit';
 
 export const MARP_CONTAINER_CLASS_NAME = 'marpit';
 
 
 
+const marpit = new Marp({
 
+  container: [
 
+    new Element('div', { class: MARP_CONTAINER_CLASS_NAME }),
 
+    new Element('div', { class: 'slides' }),
 
+  ],
 
+  slideContainer: [
 
+    new Element('section', { class: 'shadow rounded m-2' }),
 
+  ],
 
+  inlineSVG: true,
 
+  emoji: undefined,
 
+  html: false,
 
+  math: false,
 
+});
 
+
 
 type Props = {
 
 type Props = {
 
   options: PresentationOptions,
 
   options: PresentationOptions,
 
   children?: string,
 
   children?: string,
 
@@ -20,9 +36,9 @@ export const Slides = (props: Props): JSX.Element => {
 
   const { options, children, hasMarpFlag } = props;
 
   const { options, children, hasMarpFlag } = props;
 
 
 
   if (hasMarpFlag) {
 
   if (hasMarpFlag) {
 
-    return <MarpSlides>{children}</MarpSlides>;
 
+    return <MarpSlides marpit={marpit}>{children}</MarpSlides>;
 
   }
 
   }
 
 
 
-  return <GrowiSlides options={options}>{children}</GrowiSlides>;
 
+  return <GrowiSlides options={options} marpit={marpit}>{children}</GrowiSlides>;
 
 
 
 };
 
 };