Merge pull request #10521 from growilabs/fix.174434-cannot-launch-drawio-modal-from-the-toolbar

fix: Cannot launch drawio modal from the toolbar

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

@@ -4,6 +4,7 @@ import React, {
 
 import { Lang } from '@growi/core';
 import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
+import { useDrawioModalForEditorStatus, useDrawioModalForEditorActions } from '@growi/editor/dist/states/modal/drawio-for-editor';
 import { LoadingSpinner } from '@growi/ui/dist/components';
 import {
   Modal,
@@ -13,7 +14,6 @@ import {
 import { replaceFocusedDrawioWithEditor, getMarkdownDrawioMxfile } from '~/client/components/PageEditor/markdown-drawio-util-for-editor';
 import { useRendererConfig } from '~/states/server-configurations';
 import { useDrawioModalActions, useDrawioModalStatus } from '~/states/ui/modal/drawio';
-import { useDrawioModalForEditorStatus, useDrawioModalForEditorActions } from '~/states/ui/modal/drawio-for-editor';
 import { useSWRxPersonalSettings } from '~/stores/personal-settings';
 import loggerFactory from '~/utils/logger';
 

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

@@ -1,17 +1,24 @@
 import type { JSX } from 'react';
 
+import { useDrawioModalForEditorStatus } from '@growi/editor/dist/states/modal/drawio-for-editor';
+
 import { useLazyLoader } from '~/components/utils/use-lazy-loader';
 import { useDrawioModalStatus } from '~/states/ui/modal/drawio';
 
+
 type DrawioModalProps = Record<string, unknown>;
 
 export const DrawioModalLazyLoaded = (): JSX.Element => {
   const status = useDrawioModalStatus();
+  const statusForEditor = useDrawioModalForEditorStatus();
+
+  const isOpened = status?.isOpened ?? false;
+  const isOpenedInEditor = statusForEditor?.isOpened ?? false;
 
   const DrawioModal = useLazyLoader<DrawioModalProps>(
     'drawio-modal',
     () => import('./DrawioModal').then(mod => ({ default: mod.DrawioModal })),
-    status?.isOpened ?? false,
+    isOpened || isOpenedInEditor,
   );
 
   return DrawioModal ? <DrawioModal /> : <></>;

apps/app/src/states/ui/modal/drawio-for-editor.ts

@@ -1,28 +0,0 @@
-import { atom, useAtomValue, useSetAtom } from 'jotai';
-
-type DrawioModalForEditorState = {
-  isOpened: boolean;
-  editorKey?: string;
-};
-
-const drawioModalForEditorAtom = atom<DrawioModalForEditorState>({
-  isOpened: false,
-  editorKey: undefined,
-});
-
-export const useDrawioModalForEditorStatus = () => {
-  return useAtomValue(drawioModalForEditorAtom);
-};
-
-export const useDrawioModalForEditorActions = () => {
-  const setModalState = useSetAtom(drawioModalForEditorAtom);
-
-  return {
-    open: (editorKey: string) => {
-      setModalState({ isOpened: true, editorKey });
-    },
-    close: () => {
-      setModalState({ isOpened: false, editorKey: undefined });
-    },
-  };
-};