WIP: render with ReactMarkdown

packages/app/src/components/PagePresentationModal.module.scss

@@ -1,11 +1,4 @@
 .grw-presentation-modal :global {
   .modal-body {
-    background: black;
-
-    iframe {
-      width: 100%;
-      height: 100%;
-      border: 0;
-    }
   }
 }

packages/app/src/components/PagePresentationModal.tsx

@@ -1,27 +1,45 @@
 import React from 'react';
 
+import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import {
   Modal, ModalBody,
 } from 'reactstrap';
 
 import { usePagePresentationModal } from '~/stores/modal';
+import { useSWRxCurrentPage } from '~/stores/page';
+import { usePresentationViewOptions } from '~/stores/renderer';
 
 import styles from './PagePresentationModal.module.scss';
 
 const PagePresentationModal = (): JSX.Element => {
 
-  const { data, close: closePresentationModal } = usePagePresentationModal();
+  const { data: presentationModalData, close: closePresentationModal } = usePagePresentationModal();
+
+  const { data: currentPage } = useSWRxCurrentPage();
+  const { data: rendererOptions } = usePresentationViewOptions();
+
+  const isOpen = presentationModalData?.isOpened ?? false;
+
+  if (!isOpen) {
+    return <></>;
+  }
+
+  const markdown = currentPage?.revision.body;
 
   return (
     <Modal
-      isOpen={data?.isOpened}
+      isOpen={isOpen}
       toggle={closePresentationModal}
       data-testid="page-presentation-modal"
       className={`grw-presentation-modal ${styles['grw-presentation-modal']} grw-body-only-modal-expanded`}
       unmountOnClose={false}
     >
       <ModalBody className="modal-body">
-        (TBD)
+        { markdown != null && (
+          <ReactMarkdown {...rendererOptions}>
+            {markdown}
+          </ReactMarkdown>
+        )}
       </ModalBody>
     </Modal>
   );

packages/app/src/stores/renderer.tsx

@@ -6,7 +6,7 @@ import useSWR, { type SWRResponse } from 'swr';
 import {
   type RendererOptions,
   generateSimpleViewOptions, generatePreviewOptions,
-  generateViewOptions, generateTocOptions,
+  generateViewOptions, generateTocOptions, generatePresentationViewOptions,
 } from '~/services/renderer/renderer';
 import { getGrowiFacade } from '~/utils/growi-facade';
 
@@ -162,3 +162,22 @@ export const useCustomSidebarOptions = (): SWRResponse<RendererOptions, Error> =
     },
   );
 };
+
+export const usePresentationViewOptions = (): SWRResponse<RendererOptions, Error> => {
+  const { data: currentPagePath } = useCurrentPagePath();
+  const { data: rendererConfig } = useRendererConfig();
+
+  const isAllDataValid = currentPagePath != null && rendererConfig != null;
+
+  return useSWR(
+    isAllDataValid
+      ? ['presentationViewOptions', currentPagePath, rendererConfig]
+      : null,
+    ([, currentPagePath, rendererConfig]) => generatePresentationViewOptions(rendererConfig, currentPagePath),
+    {
+      fallbackData: isAllDataValid ? generatePresentationViewOptions(rendererConfig, currentPagePath) : undefined,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    },
+  );
+};

packages/remark-presentation/package.json

@@ -15,8 +15,7 @@
     "test": ""
   },
   "dependencies": {
-    "@growi/core": "^6.0.6-RC.0",
-    "swr": "^1.3.0"
+    "@growi/core": "^6.0.6-RC.0"
   },
   "devDependencies": {
     "eslint-plugin-regex": "^1.8.0",

packages/remark-presentation/src/index.ts

@@ -1,2 +1,2 @@
-export * from './components';
+// export * from './components';
 export * from './services/renderer';