GrowiSlides.tsx 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import { Marp } from '@marp-team/marp-core';
  2. import Head from 'next/head';
  3. import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
  4. import type { PresentationOptions } from '../consts';
  5. import * as extractSections from '../services/renderer/extract-sections';
  6. import './Slides.global.scss';
  7. import { PresentationRichSlideSection, RichSlideSection } from './RichSlideSection';
  8. type Props = {
  9. options: PresentationOptions,
  10. children?: string,
  11. marpit: Marp,
  12. presentation?: boolean,
  13. }
  14. export const GrowiSlides = (props: Props): JSX.Element => {
  15. const {
  16. options, children, marpit, presentation,
  17. } = props;
  18. const {
  19. rendererOptions, isDarkMode, disableSeparationByHeader,
  20. } = options;
  21. if (rendererOptions?.remarkPlugins != null) {
  22. rendererOptions.remarkPlugins.push([
  23. extractSections.remarkPlugin,
  24. {
  25. isDarkMode,
  26. disableSeparationByHeader,
  27. },
  28. ]);
  29. }
  30. if (rendererOptions?.components != null) {
  31. rendererOptions.components.section = presentation ? PresentationRichSlideSection : RichSlideSection;
  32. }
  33. const { css } = marpit.render('', { htmlAsArray: true });
  34. return (
  35. <>
  36. <Head>
  37. <style>{css}</style>
  38. </Head>
  39. <ReactMarkdown {...rendererOptions}>
  40. { children ?? '## No Contents' }
  41. </ReactMarkdown>
  42. </>
  43. );
  44. };