Merge remote-tracking branch 'origin/master' into dev/7.0.x

apps/app/src/components/Admin/Customize/CustomizeFunctionSetting.tsx

@@ -152,7 +152,7 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
                   </a>
                   <br></br>
                   <a
-                    href={`${t('admin:customize_settings.function_options.marp_in_gorwi_link')}`}
+                    href={`${t('admin:customize_settings.function_options.marp_in_growi_link')}`}
                     target="_blank"
                     rel="noopener noreferrer"
                   >{`${t('admin:customize_settings.function_options.marp_in_growi')}`}

apps/app/src/components/Presentation/Slides.tsx

@@ -0,0 +1,7 @@
+import { Slides as SlidesSubstance, type SlidesProps } from '@growi/presentation';
+
+import '@growi/presentation/dist/style.css';
+
+export const Slides = (props: SlidesProps): JSX.Element => {
+  return <SlidesSubstance {...props} />;
+};

apps/app/src/components/ReactMarkdownComponents/SlideViewer.tsx

@@ -6,7 +6,7 @@ import { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
 import { usePresentationViewOptions } from '~/stores/slide-viewer-renderer';
 
 
-const Slides = dynamic(() => import('@growi/presentation').then(mod => mod.Slides), { ssr: false });
+const Slides = dynamic(() => import('../Presentation/Slides').then(mod => mod.Slides), { ssr: false });
 
 type SlideViewerProps = {
   marp: string | undefined,

apps/app/src/server/routes/apiv3/users.js

@@ -187,11 +187,12 @@ module.exports = (crowi) => {
   const sendEmailByUser = async(user) => {
     const { appService, mailService } = crowi;
     const appTitle = appService.getAppTitle();
+    const locale = configManager.getConfig('crowi', 'app:globalLang');
 
     await mailService.send({
       to: user.email,
       subject: `New password for ${appTitle}`,
-      template: path.join(crowi.localeDir, 'en_US/admin/userResetPassword.ejs'),
+      template: path.join(crowi.localeDir, `${locale}/admin/userResetPassword.ejs`),
       vars: {
         email: user.email,
         password: user.password,

packages/presentation/package.json

@@ -38,6 +38,8 @@
     "hast-util-sanitize": "^4.1.0",
     "hast-util-select": "^5.0.5",
     "react-markdown": "^8.0.7",
+    "remark-frontmatter": "^4.0.1",
+    "remark-stringify": "^10.0.0",
     "unified": "^10.1.2",
     "unist-util-find-after": "^4.0.0",
     "unist-util-visit": "^4.0.0"

packages/presentation/src/components/GrowiSlides.tsx

@@ -5,8 +5,6 @@ import type { PresentationOptions } from '../consts';
 import { MARP_CONTAINER_CLASS_NAME, presentationMarpit, slideMarpit } from '../services/growi-marpit';
 import * as extractSections from '../services/renderer/extract-sections';
 
-
-import './Slides.global.scss';
 import { PresentationRichSlideSection, RichSlideSection } from './RichSlideSection';
 
 

packages/presentation/src/components/MarpSlides.tsx

@@ -1,6 +1,5 @@
 import Head from 'next/head';
 
-import './Slides.global.scss';
 import { presentationMarpit, slideMarpit } from '../services/growi-marpit';
 
 type Props = {

packages/presentation/src/components/Slides.global.scss

@@ -1,4 +0,0 @@
-div.slides.marpit > section :is(pre, marp-pre) {
-  padding: 0;
-  border: none;
-}

packages/presentation/src/components/Slides.module.scss

@@ -0,0 +1,35 @@
+.slides-styles :global {
+  // Reset _wiki.scss, vendor.scss and other css in <div class=slides marpit>.
+  // This ensures that Marp is rendered currently.
+  .slides {
+    *, *:before, *::after {
+      box-sizing: initial;
+    }
+
+    *::before, *::after {
+      all: initial;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      font-weight: initial;
+      line-height: initial;
+      border: initial;
+    }
+
+    code {
+      color: unset;
+    }
+
+  }
+
+  section {
+    padding: 0;
+    border: none;
+  }
+}

packages/presentation/src/components/Slides.tsx

@@ -4,23 +4,27 @@ import type { PresentationOptions } from '../consts';
 import { GrowiSlides } from './GrowiSlides';
 import { MarpSlides } from './MarpSlides';
 
-import './Slides.global.scss';
+import styles from './Slides.module.scss';
 
-type Props = {
+export type SlidesProps = {
   options: PresentationOptions,
   children?: string,
   hasMarpFlag?: boolean,
   presentation?: boolean,
 }
 
-export const Slides = (props: Props): JSX.Element => {
+export const Slides = (props: SlidesProps): JSX.Element => {
   const {
     options, children, hasMarpFlag, presentation,
   } = props;
 
   return (
-    hasMarpFlag
-      ? <MarpSlides presentation={presentation}>{children}</MarpSlides>
-      : <GrowiSlides options={options} presentation={presentation}>{children}</GrowiSlides>
+    <div className={`${styles['slides-styles']}`}>
+      {
+        hasMarpFlag
+          ? <MarpSlides presentation={presentation}>{children}</MarpSlides>
+          : <GrowiSlides options={options} presentation={presentation}>{children}</GrowiSlides>
+      }
+    </div>
   );
 };

packages/presentation/src/services/growi-marpit.ts

@@ -1,4 +1,4 @@
-import { Marp } from '@marp-team/marp-core';
+import { Marp, MarpOptions } from '@marp-team/marp-core';
 import { Element } from '@marp-team/marpit';
 
 export const MARP_CONTAINER_CLASS_NAME = 'marpit';
@@ -36,28 +36,26 @@ const lineNumber = (md) => {
   });
 };
 
-export const slideMarpit = new Marp({
+const marpitOption: MarpOptions = {
   container: [
     new Element('div', { class: `slides ${MARP_CONTAINER_CLASS_NAME}` }),
   ],
-  slideContainer: [
-    new Element('section', { class: 'shadow rounded m-2' }),
-  ],
   inlineSVG: true,
   emoji: undefined,
   html: false,
   math: false,
-}).use(lineNumber);
+};
 
-export const presentationMarpit = new Marp({
-  container: [
-    new Element('div', { class: `slides ${MARP_CONTAINER_CLASS_NAME}` }),
-  ],
-  slideContainer: [
-    new Element('section', { class: 'm-2' }),
-  ],
-  inlineSVG: true,
-  emoji: undefined,
-  html: false,
-  math: false,
-});
+const slideMarpitOption = marpitOption;
+slideMarpitOption.slideContainer = (
+  [new Element('section', { class: 'shadow rounded m-2' })]
+);
+
+export const slideMarpit = new Marp(slideMarpitOption).use(lineNumber);
+
+const presentationMarpitOption = marpitOption;
+presentationMarpitOption.slideContainer = (
+  [new Element('section', { class: 'm-2' })]
+);
+
+export const presentationMarpit = new Marp(presentationMarpitOption);