MarpSlides.tsx 748 B

123456789101112131415161718192021222324252627282930
  1. import Head from 'next/head';
  2. import './Slides.global.scss';
  3. import { presentationMarpit, slideMarpit } from '../services/growi-marpit';
  4. type Props = {
  5. children?: string,
  6. presentation?: boolean,
  7. }
  8. export const MarpSlides = (props: Props): JSX.Element => {
  9. const { children, presentation } = props;
  10. const marpit = presentation ? presentationMarpit : slideMarpit;
  11. const { html, css } = marpit.render(children ?? '');
  12. return (
  13. <>
  14. <Head>
  15. <style>{css}</style>
  16. </Head>
  17. <div
  18. // eslint-disable-next-line react/no-danger
  19. dangerouslySetInnerHTML={{
  20. // DOMpurify.sanitize delete elements in <svg> so sanitize is not used here.
  21. __html: html,
  22. }}
  23. />
  24. </>
  25. );
  26. };