render PresentationWithReveal

packages/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -84,13 +84,11 @@ const PageOperationMenuItems = (props: PageOperationMenuItemsProps): JSX.Element
   const { open: openPresentationModal } = usePagePresentationModal();
   const { open: openAccessoriesModal } = usePageAccessoriesModal();
 
-  const hrefForPresentationModal = `${pageId}/?presentation=1`;
-
   return (
     <>
       {/* Presentation */}
       <DropdownItem
-        onClick={() => openPresentationModal(hrefForPresentationModal)}
+        onClick={() => openPresentationModal()}
         data-testid="open-presentation-modal-btn"
         className="grw-page-control-dropdown-item"
       >

packages/app/src/components/PagePresentationModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Presentation } from '@growi/presentation';
-import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
+import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
 import {
   Modal, ModalBody,
 } from 'reactstrap';
@@ -19,7 +19,7 @@ const PagePresentationModal = (): JSX.Element => {
   const { data: presentationModalData, close: closePresentationModal } = usePagePresentationModal();
 
   const { data: currentPage } = useSWRxCurrentPage();
-  // const { data: rendererOptions } = usePresentationViewOptions();
+  const { data: rendererOptions } = usePresentationViewOptions();
 
   const isOpen = presentationModalData?.isOpened ?? false;
 
@@ -43,7 +43,9 @@ const PagePresentationModal = (): JSX.Element => {
             {markdown}
           </ReactMarkdown>
         )} */}
-        <Presentation>{markdown}</Presentation>
+        { rendererOptions != null && (
+          <Presentation rendererOptions={rendererOptions as ReactMarkdownOptions}>{markdown}</Presentation>
+        ) }
       </ModalBody>
     </Modal>
   );

packages/app/src/stores/modal.tsx

@@ -245,11 +245,10 @@ export const usePutBackPageModal = (status?: PutBackPageModalStatus): SWRRespons
 */
 type PresentationModalStatus = {
   isOpened: boolean,
-  href?: string
 }
 
 type PresentationModalStatusUtils = {
-  open(href: string): Promise<PresentationModalStatus | undefined>
+  open(): Promise<PresentationModalStatus | undefined>
   close(): Promise<PresentationModalStatus | undefined>
 }
 
@@ -257,13 +256,13 @@ export const usePagePresentationModal = (
     status?: PresentationModalStatus,
 ): SWRResponse<PresentationModalStatus, Error> & PresentationModalStatusUtils => {
   const initialData: PresentationModalStatus = {
-    isOpened: false, href: '?presentation=1',
+    isOpened: false,
   };
   const swrResponse = useStaticSWR<PresentationModalStatus, Error>('presentationModalStatus', status, { fallbackData: initialData });
 
   return {
     ...swrResponse,
-    open: (href: string) => swrResponse.mutate({ isOpened: true, href }),
+    open: () => swrResponse.mutate({ isOpened: true }, { revalidate: true }),
     close: () => swrResponse.mutate({ isOpened: false }),
   };
 };

packages/presentation/src/services/renderer/index.ts

@@ -1 +1,2 @@
-export * from './presentation';
+// export * from './presentation';
+export * from './hr-splitter';