|
|
@@ -1,46 +1,22 @@
|
|
|
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';
|
|
|
+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 = {
|
|
|
options: PresentationOptions,
|
|
|
children?: string,
|
|
|
+ marpit: Marp,
|
|
|
}
|
|
|
|
|
|
export const GrowiSlides = (props: Props): JSX.Element => {
|
|
|
- const { options, children } = props;
|
|
|
+ const { options, children, marpit } = props;
|
|
|
const {
|
|
|
rendererOptions, isDarkMode, disableSeparationByHeader,
|
|
|
} = 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 (
|
|
|
<>
|
|
|
<Head>
|
reiji-h