Merge pull request #8330 from weseek/imprv/136640-unable-to-use-drawio-modal-when-receive-editor-as-null

imprv: Unable to push Diagram Button when receive  editorKey as null

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

@@ -50,12 +50,12 @@ export const DrawioModal = (): JSX.Element => {
   });
 
   const { data: drawioModalData, close: closeDrawioModal } = useDrawioModal();
-  const { data: drawioModalDataInEditor } = useDrawioModalForEditor();
-  const isOpened = drawioModalData?.isOpened ?? false;
-  const isOpendInEditor = drawioModalDataInEditor?.isOpened ?? false;
+  const { data: drawioModalDataInEditor, close: closeDrawioModalInEditor } = useDrawioModalForEditor();
   const editorKey = drawioModalDataInEditor?.editorKey ?? null;
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
   const editor = codeMirrorEditor?.view;
+  const isOpenedInEditor = (drawioModalDataInEditor?.isOpened ?? false) && (editor != null);
+  const isOpened = drawioModalData?.isOpened ?? false;
 
   const drawioUriWithParams = useMemo(() => {
     if (rendererConfig == null) {
@@ -93,9 +93,9 @@ export const DrawioModal = (): JSX.Element => {
     return new DrawioCommunicationHelper(
       rendererConfig.drawioUri,
       drawioConfig,
-      { onClose: closeDrawioModal, onSave: save },
+      { onClose: isOpened ? closeDrawioModal : closeDrawioModalInEditor, onSave: save },
     );
-  }, [closeDrawioModal, drawioModalData?.onSave, editor, rendererConfig]);
+  }, [closeDrawioModal, closeDrawioModalInEditor, drawioModalData?.onSave, editor, isOpened, rendererConfig]);
 
   const receiveMessageHandler = useCallback((event: MessageEvent) => {
     if (drawioModalData == null) {
@@ -107,7 +107,7 @@ export const DrawioModal = (): JSX.Element => {
   }, [drawioCommunicationHelper, drawioModalData, editor]);
 
   useEffect(() => {
-    if (isOpened) {
+    if (isOpened || isOpenedInEditor) {
       window.addEventListener('message', receiveMessageHandler);
     }
     else {
@@ -118,12 +118,12 @@ export const DrawioModal = (): JSX.Element => {
     return function() {
       window.removeEventListener('message', receiveMessageHandler);
     };
-  }, [isOpened, receiveMessageHandler]);
+  }, [isOpened, isOpenedInEditor, receiveMessageHandler]);
 
   return (
     <Modal
-      isOpen={isOpened || isOpendInEditor}
-      toggle={() => closeDrawioModal()}
+      isOpen={isOpened || isOpenedInEditor}
+      toggle={() => (isOpened ? closeDrawioModal() : closeDrawioModalInEditor())}
       backdrop="static"
       className="drawio-modal grw-body-only-modal-expanded"
       size="xl"
@@ -139,7 +139,7 @@ export const DrawioModal = (): JSX.Element => {
         {/* iframe */}
         { drawioUriWithParams != null && (
           <div className="w-100 h-100 position-absolute d-flex">
-            { isOpened && (
+            { (isOpened || isOpenedInEditor) && (
               <iframe
                 src={drawioUriWithParams.href}
                 className="border-0 flex-grow-1"

packages/editor/src/stores/use-drawio.ts

@@ -3,18 +3,14 @@ import { useCallback } from 'react';
 import { useSWRStatic } from '@growi/core/dist/swr';
 import type { SWRResponse } from 'swr';
 
-type DrawioModalSaveHandler = () => void;
-
 type DrawioModalStatus = {
   isOpened: boolean,
-  editorKey: string,
-  onSave?: DrawioModalSaveHandler,
+  editorKey: string | undefined,
 }
 
 type DrawioModalStatusUtils = {
   open(
     editorKey: string,
-    onSave?: DrawioModalSaveHandler,
   ): void,
   close(): void,
 }
@@ -22,18 +18,18 @@ type DrawioModalStatusUtils = {
 export const useDrawioModalForEditor = (status?: DrawioModalStatus): SWRResponse<DrawioModalStatus, Error> & DrawioModalStatusUtils => {
   const initialData: DrawioModalStatus = {
     isOpened: false,
-    editorKey: '',
+    editorKey: undefined,
   };
-  const swrResponse = useSWRStatic<DrawioModalStatus, Error>('drawioModalStatus', status, { fallbackData: initialData });
+  const swrResponse = useSWRStatic<DrawioModalStatus, Error>('drawioModalStatusForEditor', status, { fallbackData: initialData });
 
   const { mutate } = swrResponse;
 
-  const open = useCallback((editorKey: string, onSave?: DrawioModalSaveHandler): void => {
-    mutate({ isOpened: true, editorKey, onSave });
+  const open = useCallback((editorKey: string | undefined): void => {
+    mutate({ isOpened: true, editorKey });
   }, [mutate]);
 
   const close = useCallback((): void => {
-    mutate({ isOpened: false, editorKey: '', onSave: undefined });
+    mutate({ isOpened: false, editorKey: undefined });
   }, [mutate]);
 
   return {