Inicio Explorar Ayuda
Iniciar sesión
wiki
/
weseek__growi
espejo de https://github.com/weseek/growi
2
0
Fork 0
Archivos Incidencias 0 Wiki
Explorar el Código

Merge branch 'imprv/115672-presentation-preview' into imprv/115673-126792-use-marp-in-presentation

reiji-h hace 2 años
padre
3dba52b33a cbf2328d0b
commit
911b61dea0
Se han modificado 3 ficheros con 120 adiciones y 82 borrados
Unificar vista Mostrar estadísticas de diff
  1. 68 0
      packages/presentation/src/components/GrowiSlides.tsx
  2. 45 0
      packages/presentation/src/components/MarpSlides.tsx
  3. 7 82
      packages/presentation/src/components/Slides.tsx

+ 68 - 0
packages/presentation/src/components/GrowiSlides.tsx
Ver fichero 

@@ -0,0 +1,68 @@
 
+import { Marp } from '@marp-team/marp-core';
 
+import { Element } from '@marp-team/marpit';
 
+import Head from 'next/head';
 
+import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 
+
 
+import type { PresentationOptions } from '../consts';
 
+import * as extractSections from '../services/renderer/extract-sections';
 
+
 
+import './Slides.global.scss';
 
+
 
+const MARP_CONTAINER_CLASS_NAME = 'marpit';
 
+
 
+// ----------------------------------------------------
 
+// 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;
 
+// ----------------------------------------------------
 
+
 
+type Props = {
 
+  options: PresentationOptions,
 
+  children?: string,
 
+}
 
+
 
+export const GrowiSlides = (props: Props): JSX.Element => {
 
+  const { options, children } = props;
 
+  const {
 
+    rendererOptions, isDarkMode, disableSeparationByHeader,
 
+  } = options;
 
+
 
+  rendererOptions.remarkPlugins?.push([
 
+    extractSections.remarkPlugin,
 
+    {
 
+      isDarkMode,
 
+      disableSeparationByHeader,
 
+    },
 
+  ]);
 
+
 
+  const { css } = marp.render('', { htmlAsArray: true });
 
+  return (
 
+    <>
 
+      <Head>
 
+        <style>{css}</style>
 
+      </Head>
 
+      <ReactMarkdown {...rendererOptions}>
 
+        { children ?? '## No Contents' }
 
+      </ReactMarkdown>
 
+    </>
 
+  );
 
+
 
+};

+ 45 - 0
packages/presentation/src/components/MarpSlides.tsx
Ver fichero 

@@ -0,0 +1,45 @@
 
+import { Marp } from '@marp-team/marp-core';
 
+import { Element } from '@marp-team/marpit';
 
+import Head from 'next/head';
 
+
 
+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 = {
 
+  children?: string,
 
+}
 
+
 
+export const MarpSlides = (props: Props): JSX.Element => {
 
+  const { children } = props;
 
+
 
+  const { html, css } = marpit.render(children ?? '');
 
+  return (
 
+    <>
 
+      <Head>
 
+        <style>{css}</style>
 
+      </Head>
 
+      <div
 
+        // eslint-disable-next-line react/no-danger
 
+        dangerouslySetInnerHTML={{
 
+          // DOMpurify.sanitize delete elements in <svg> so sanitize is not used here.
 
+          __html: html,
 
+        }}
 
+      />
 
+    </>
 
+  );
 
+};

+ 7 - 82
packages/presentation/src/components/Slides.tsx
Ver fichero 

@@ -1,54 +1,13 @@
 
-import React from 'react';
 
-
 
-import { Marp } from '@marp-team/marp-core';
 
-import { Element } from '@marp-team/marpit';
 
-import Head from 'next/head';
 
-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 './Slides.global.scss';
 
-
 
-export const MARP_CONTAINER_CLASS_NAME = 'marpit';
 
+import { GrowiSlides } from './GrowiSlides';
 
+import { MarpSlides } from './MarpSlides';
 
 
 
+import './Slides.global.scss';
 
 
 
-const marpSlide = new Marp({
 
-  container: [
 
-    new Element('div', { class: MARP_CONTAINER_CLASS_NAME }),
 
-    new Element('div', { class: 'slides' }),
 
-  ],
 
-  slideContainer: [
 
-    new Element('div', { class: 'shadow rounded', style: 'margin: 20px' }),
 
-  ],
 
-  inlineSVG: true,
 
-  emoji: undefined,
 
-  html: false,
 
-  math: false,
 
-});
 
-
 
-// TODO: to change better slide style
 
+// TODO: to remove MARP_CONTAINER_CLASS_NAME
 
 // https://redmine.weseek.co.jp/issues/125680
 
 // 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;
 
-
 
+export const MARP_CONTAINER_CLASS_NAME = 'marpit';
 
 
 
 type Props = {
 
 type Props = {
 
   options: PresentationOptions,
 
   options: PresentationOptions,
 
@@ -58,45 +17,11 @@ type Props = {
 
 
 
 export const Slides = (props: Props): JSX.Element => {
 
 export const Slides = (props: Props): JSX.Element => {
 
   const { options, children, hasMarpFlag } = props;
 
   const { options, children, hasMarpFlag } = props;
 
-  const {
 
-    rendererOptions, isDarkMode, disableSeparationByHeader,
 
-  } = options;
 
 
 
   if (hasMarpFlag) {
 
   if (hasMarpFlag) {
 
-    const { html, css } = marpSlide.render(children ?? '');
 
-    return (
 
-      <>
 
-        <Head>
 
-          <style>{css}</style>
 
-        </Head>
 
-        <div
 
-          // eslint-disable-next-line react/no-danger
 
-          dangerouslySetInnerHTML={{
 
-            // DOMpurify.sanitize delete elements in <svg> so sanitize is not used here.
 
-            __html: html,
 
-          }}
 
-        />
 
-      </>
 
-    );
 
+    return <MarpSlides>{children}</MarpSlides>;
 
   }
 
   }
 
 
 
-  rendererOptions.remarkPlugins?.push([
 
-    extractSections.remarkPlugin,
 
-    {
 
-      isDarkMode,
 
-      disableSeparationByHeader,
 
-    },
 
-  ]);
 
+  return <GrowiSlides options={options}>{children}</GrowiSlides>;
 
 
 
-  const { css } = marp.render('', { htmlAsArray: true });
 
-  return (
 
-    <>
 
-      <Head>
 
-        <style>{css}</style>
 
-      </Head>
 
-      <ReactMarkdown {...rendererOptions}>
 
-        { children ?? '## No Contents' }
 
-      </ReactMarkdown>
 
-    </>
 
-  );
 
 };
 
 };