declear useDrawioModal

packages/app/src/components/Layout/BasicLayout.tsx

@@ -3,9 +3,11 @@ import React, { ReactNode } from 'react';
 import dynamic from 'next/dynamic';
 
 import { GrowiNavbar } from '../Navbar/GrowiNavbar';
+import { DrawioModal } from '../PageEditor/DrawioModal';
 import Sidebar from '../Sidebar';
 
 import { RawLayout } from './RawLayout';
+// const DrawioModal = dynamic(() => import('../PageEditor/DrawioModal').then(mod => mod.DrawioModal), { ssr: false });
 
 // const HotkeysManager = dynamic(() => import('../client/js/components/Hotkeys/HotkeysManager'), { ssr: false });
 // const PageCreateModal = dynamic(() => import('../client/js/components/PageCreateModal'), { ssr: false });
@@ -16,6 +18,7 @@ const SystemVersion = dynamic(() => import('../SystemVersion'), { ssr: false });
 const PageCreateModal = dynamic(() => import('../PageCreateModal'), { ssr: false });
 const PageDuplicateModal = dynamic(() => import('../PageDuplicateModal'), { ssr: false });
 const PageDeleteModal = dynamic(() => import('../PageDeleteModal'), { ssr: false });
+
 const PageRenameModal = dynamic(() => import('../PageRenameModal'), { ssr: false });
 const PagePresentationModal = dynamic(() => import('../PagePresentationModal'), { ssr: false });
 const PageAccessoriesModal = dynamic(() => import('../PageAccessoriesModal'), { ssr: false });
@@ -59,6 +62,7 @@ export const BasicLayout = ({
       <PagePresentationModal />
       <PageAccessoriesModal />
       {/* <HotkeysManager /> */}
+      <DrawioModal />
 
       <Fab />
 

packages/app/src/components/Page.tsx

@@ -187,10 +187,10 @@ class PageSubstance extends React.Component<PageSubstanceProps> {
             <GridEditModal ref={this.gridEditModal} />
             <LinkEditModal ref={this.linkEditModal} />
             {/* <HandsontableModal ref={this.handsontableModal} onSave={this.saveHandlerForHandsontableModal} /> */}
-            <DrawioModal
+            {/* <DrawioModal
               ref={this.drawioModal}
               onSave={this.saveHandlerForDrawioModal}
-            />
+            /> */}
           </>
         )}
       </div>

packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -1057,10 +1057,10 @@ class CodeMirrorEditor extends AbstractEditor {
           onSave={(table) => { return mtu.replaceFocusedMarkdownTableWithEditor(this.getCodeMirror(), table) }}
           autoFormatMarkdownTable={this.props.editorSettings.autoFormatMarkdownTable}
         /> */}
-        <DrawioModal
+        {/* <DrawioModal
           ref={this.drawioModal}
           onSave={this.onSaveForDrawio}
-        />
+        /> */}
       </div>
     );
   }

packages/app/src/components/PageEditor/DrawioModal.tsx

@@ -8,37 +8,44 @@ import {
   ModalBody,
 } from 'reactstrap';
 
+
 import { getDiagramsNetLangCode } from '~/client/util/locale-utils';
 import { useGrowiHydratedEnv } from '~/stores/context';
+import { useDrawioModal } from '~/stores/modal';
 
 const headerColor = '#334455';
 const fontFamily = "Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif";
 
 
 type Props = {
-  onSave: (drawioData) => void,
-  drawioUri?: string,
+  // onSave: (drawioData) => void,
 };
 
 export const DrawioModal = React.forwardRef((props: Props, ref: React.LegacyRef<Modal>): JSX.Element => {
   const { data: growiHydratedEnv } = useGrowiHydratedEnv();
-  const [isShown, setIsShown] = useState(false);
-  const [drawioMxFile, setDrawioMxFile] = useState('');
+  // const [isShown, setIsShown] = useState(false);
 
-  const init = (drawioMxFile) => {
-    const initDrawioMxFile = drawioMxFile;
-    setDrawioMxFile(initDrawioMxFile);
-  };
+  const { data: drawioModalData, close: closeDrawioModal } = useDrawioModal();
+  const isOpened = drawioModalData?.isOpened ?? false;
+  const drawioMxFile = drawioModalData?.drawioMxFile ?? '';
+  // const { isOpened, drawioMxFile } = drawioModalData;
+  // const [drawioMxFile, setDrawioMxFile] = useState('');
 
-  const show = (drawioMxFile) => {
-    init(drawioMxFile);
+  // const init = (drawioMxFile) => {
+  //   const initDrawioMxFile = drawioMxFile;
+  //   setDrawioMxFile(initDrawioMxFile);
+  // };
 
-    window.addEventListener('message', receiveFromDrawio);
-    setIsShown(true);
-  };
+  // const show = (drawioMxFile) => {
+  //   init(drawioMxFile);
+
+  //   window.addEventListener('message', receiveFromDrawio);
+  //   setIsShown(true);
+  // };
 
   const hide = () => {
-    setIsShown(false);
+    // setIsShown(false);
+    closeDrawioModal();
   };
 
   const cancel = () => {
@@ -85,9 +92,9 @@ export const DrawioModal = React.forwardRef((props: Props, ref: React.LegacyRef<
         const dom = parser.parseFromString(event.data, 'text/xml');
         const drawioData = dom.getElementsByTagName('diagram')[0].innerHTML;
 
-        if (props.onSave != null) {
-          props.onSave(drawioData);
-        }
+        // if (props.onSave != null) {
+        //   props.onSave(drawioData);
+        // }
       }
 
       window.removeEventListener('message', receiveFromDrawio);
@@ -123,7 +130,7 @@ export const DrawioModal = React.forwardRef((props: Props, ref: React.LegacyRef<
   return (
     <Modal
       ref={ref}
-      isOpen={isShown}
+      isOpen={isOpened}
       toggle={cancel}
       backdrop="static"
       className="drawio-modal grw-body-only-modal-expanded"
@@ -139,7 +146,7 @@ export const DrawioModal = React.forwardRef((props: Props, ref: React.LegacyRef<
         </div>
         {/* iframe */}
         <div className="w-100 h-100 position-absolute d-flex">
-          { isShown && (
+          { isOpened && (
             <iframe
               src={drawioUrl}
               className="border-0 flex-grow-1"

packages/app/src/stores/modal.tsx

@@ -438,3 +438,50 @@ export const useShortcutsModal = (): SWRResponse<ShortcutsModalStatus, Error> &
     },
   };
 };
+
+
+/*
+* DrawioModal
+*/
+
+type DrawioModalStatus = {
+  isOpened: boolean,
+  drawioMxFile: string,
+}
+
+type DrawioModalStatusUtils = {
+  open(drawioMxFile: string): void,
+  close(): void,
+}
+
+export const useDrawioModal = (status?: DrawioModalStatus): SWRResponse<DrawioModalStatus, Error> & DrawioModalStatusUtils => {
+  const initialData: DrawioModalStatus = {
+    isOpened: false,
+    drawioMxFile: '',
+  };
+  const swrResponse = useStaticSWR<DrawioModalStatus, Error>('drawioModalStatus', status, { fallbackData: initialData });
+
+
+  // const init = (drawioMxFile) => {
+  //   const initDrawioMxFile = drawioMxFile;
+  //   // setDrawioMxFile(initDrawioMxFile);
+  //   swrResponse.mutate({ isOpened: false, drawioMxFile: initDrawioMxFile });
+  // };
+
+  const open = (drawioMxFile: string): void => {
+    // init(drawioMxFile);
+    // window.addEventListener('message', receiveFromDrawio);
+    // setIsShown(true);
+    swrResponse.mutate({ isOpened: true, drawioMxFile });
+  };
+
+  const close = (): void => {
+    swrResponse.mutate({ isOpened: false, drawioMxFile: '' });
+  };
+
+  return {
+    ...swrResponse,
+    open,
+    close,
+  };
+};