|
@@ -2,7 +2,6 @@ import React from 'react';
|
|
|
|
|
|
|
|
import { Marp } from '@marp-team/marp-core';
|
|
import { Marp } from '@marp-team/marp-core';
|
|
|
import { Element } from '@marp-team/marpit';
|
|
import { Element } from '@marp-team/marpit';
|
|
|
-import dompurify from 'dompurify';
|
|
|
|
|
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';
|
|
|
|
|
|
|
@@ -25,17 +24,31 @@ const marp = new Marp({
|
|
|
math: false,
|
|
math: false,
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
-const marpDefaultTheme = marp.themeSet.default;
|
|
|
|
|
-const marpSlideTheme = marp.themeSet.add(`
|
|
|
|
|
|
|
+const marpSlide = new Marp({
|
|
|
|
|
+ container: [
|
|
|
|
|
+ new Element('div', { class: MARP_CONTAINER_CLASS_NAME }),
|
|
|
|
|
+ new Element('div', { class: 'slides' }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ inlineSVG: true,
|
|
|
|
|
+ emoji: undefined,
|
|
|
|
|
+ html: false,
|
|
|
|
|
+ math: false,
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+marpSlide.themeSet.default = marpSlide.themeSet.add(`
|
|
|
/*!
|
|
/*!
|
|
|
- * @theme slide_preview
|
|
|
|
|
- */
|
|
|
|
|
- section {
|
|
|
|
|
- max-width: 90%;
|
|
|
|
|
|
|
+ * @theme growi_slide_preview
|
|
|
|
|
+ */
|
|
|
|
|
+ svg[data-marpit-svg] {
|
|
|
|
|
+ box-shadow: 0 5px 10px rgb(0 0 0 / 25%);
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ h1 {
|
|
|
|
|
+ color: #7cf;
|
|
|
}
|
|
}
|
|
|
`);
|
|
`);
|
|
|
|
|
|
|
|
-
|
|
|
|
|
type Props = {
|
|
type Props = {
|
|
|
options: PresentationOptions,
|
|
options: PresentationOptions,
|
|
|
children?: string,
|
|
children?: string,
|
|
@@ -58,7 +71,6 @@ export const Slides = (props: Props): JSX.Element => {
|
|
|
|
|
|
|
|
|
|
|
|
|
if (slideStyle === 'true') {
|
|
if (slideStyle === 'true') {
|
|
|
- marp.themeSet.default = marpSlideTheme;
|
|
|
|
|
const { css } = marp.render('', { htmlAsArray: true });
|
|
const { css } = marp.render('', { htmlAsArray: true });
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
|
@@ -77,8 +89,7 @@ export const Slides = (props: Props): JSX.Element => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
if (slideStyle === 'marp') {
|
|
if (slideStyle === 'marp') {
|
|
|
- marp.themeSet.default = marpSlideTheme;
|
|
|
|
|
- const { html, css } = marp.render(children ?? '');
|
|
|
|
|
|
|
+ const { html, css } = marpSlide.render(children ?? '');
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
|
|
<Head>
|
|
<Head>
|
|
@@ -87,7 +98,8 @@ export const Slides = (props: Props): JSX.Element => {
|
|
|
<div
|
|
<div
|
|
|
// eslint-disable-next-line react/no-danger
|
|
// eslint-disable-next-line react/no-danger
|
|
|
dangerouslySetInnerHTML={{
|
|
dangerouslySetInnerHTML={{
|
|
|
- __html: dompurify.sanitize(html),
|
|
|
|
|
|
|
+ // DOMpurify.sanitize delete elements in <svg> so sanitize is not used here.
|
|
|
|
|
+ __html: html,
|
|
|
}}
|
|
}}
|
|
|
/>
|
|
/>
|
|
|
</>
|
|
</>
|
|
@@ -95,7 +107,6 @@ export const Slides = (props: Props): JSX.Element => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
- marp.themeSet.default = marpDefaultTheme;
|
|
|
|
|
const { css } = marp.render('', { htmlAsArray: true });
|
|
const { css } = marp.render('', { htmlAsArray: true });
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
reiji-h