Close modal if unmount editor

apps/app/src/client/components/PageEditor/PageEditor.tsx

@@ -331,8 +331,14 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
     }
   }, [editorMode, mutateReservedNextCaretLine]);
 
-  const { data: editorGuideModalStatus, close: closeEditorGuideModal } = useEditorGuideModal();
+  const { close: closeEditorGuideModal } = useEditorGuideModal();
 
+  // close modal if unmount page editor
+  useEffect(() => {
+    return () => {
+      closeEditorGuideModal();
+    };
+  }, [closeEditorGuideModal]);
 
   // TODO: Check the reproduction conditions that made this code necessary and confirm reproduction
   // // when transitioning to a different page, if the initialValue is the same,
@@ -397,8 +403,6 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
           pagePath={currentPagePath}
           expandContentWidth={shouldExpandContent}
           style={pastEndStyle}
-          isEditorGuideModalOpen={editorGuideModalStatus?.isOpened ?? false}
-          onCloseEditorGuideModal={closeEditorGuideModal}
         />
       </div>
     </div>

apps/app/src/client/components/PageEditor/Preview.tsx

@@ -1,5 +1,6 @@
 import type { CSSProperties, JSX } from 'react';
 
+import { useEditorGuideModal } from '@growi/editor/dist/client/stores/use-editor-guide-modal';
 import { useSlidesByFrontmatter } from '@growi/presentation/dist/services';
 
 import RevisionRenderer from '~/components/PageView/RevisionRenderer';
@@ -22,8 +23,6 @@ type Props = {
   expandContentWidth?: boolean,
   style?: CSSProperties,
   onScroll?: (scrollTop: number) => void,
-  isEditorGuideModalOpen?: boolean,
-  onCloseEditorGuideModal?: () => void,
 }
 
 const Preview = (props: Props): JSX.Element => {
@@ -32,8 +31,6 @@ const Preview = (props: Props): JSX.Element => {
     rendererOptions,
     markdown, pagePath, style,
     expandContentWidth,
-    isEditorGuideModalOpen,
-    onCloseEditorGuideModal,
   } = props;
 
   const { data: isEnabledMarp } = useIsEnabledMarp();
@@ -41,6 +38,8 @@ const Preview = (props: Props): JSX.Element => {
 
   const fluidLayoutClass = expandContentWidth ? 'fluid-layout' : '';
 
+  const { data: editorGuideModalStatus, close: closeEditorGuideModal } = useEditorGuideModal();
+
   return (
     <div
       data-testid="page-editor-preview-body"
@@ -48,8 +47,8 @@ const Preview = (props: Props): JSX.Element => {
       style={style}
     >
       <EditorGuideModal
-        isOpen={isEditorGuideModalOpen ?? false}
-        onClose={onCloseEditorGuideModal ?? (() => {})}
+        isOpen={editorGuideModalStatus?.isOpened ?? false}
+        onClose={closeEditorGuideModal}
       />
 
       { markdown != null