135366 able to open drawio modal from edtior

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

@@ -4,6 +4,7 @@ import React, {
   useMemo,
 } from 'react';
 
+import { useDrawioModalForEditor } from '@growi/editor/src/stores/use-drawio';
 import {
   Modal,
   ModalBody,
@@ -47,7 +48,9 @@ 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 drawioUriWithParams = useMemo(() => {
     if (rendererConfig == null) {
@@ -109,7 +112,7 @@ export const DrawioModal = (): JSX.Element => {
 
   return (
     <Modal
-      isOpen={isOpened}
+      isOpen={isOpened || isOpendInEditor}
       toggle={() => closeDrawioModal()}
       backdrop="static"
       className="drawio-modal grw-body-only-modal-expanded"

packages/editor/src/components/CodeMirrorEditor/Toolbar/DiagramButton.tsx

@@ -1,6 +1,14 @@
+import { useCallback } from 'react';
+
+import { useDrawioModalForEditor } from '../../../stores/use-drawio';
+
 export const DiagramButton = (): JSX.Element => {
+  const { open: openDrawioModal } = useDrawioModalForEditor();
+  const openDrawioModalHandler = useCallback(() => {
+    openDrawioModal();
+  }, []);
   return (
-    <button type="button" className="btn btn-toolbar-button">
+    <button type="button" className="btn btn-toolbar-button" onClick={openDrawioModalHandler}>
       <span className="material-symbols-outlined fs-5">lan</span>
     </button>
   );

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

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