pass editorKey to store

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

@@ -4,6 +4,7 @@ import React, {
   useMemo,
 } from 'react';
 
+import { useCodeMirrorEditorIsolated } from '@growi/editor';
 import { useDrawioModalForEditor } from '@growi/editor/src/stores/use-drawio';
 import {
   Modal,
@@ -52,7 +53,9 @@ export const DrawioModal = (): JSX.Element => {
   const { data: drawioModalDataInEditor } = useDrawioModalForEditor();
   const isOpened = drawioModalData?.isOpened ?? false;
   const isOpendInEditor = drawioModalDataInEditor?.isOpened ?? false;
-  const editor = drawioModalDataInEditor?.editor;
+  const editorKey = drawioModalDataInEditor?.editorKey;
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
+  const editor = codeMirrorEditor?.view;
 
   const drawioUriWithParams = useMemo(() => {
     if (rendererConfig == null) {

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

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 
-import { useCodeMirrorEditorIsolated } from '../../../stores';
 import { useDrawioModalForEditor } from '../../../stores/use-drawio';
 
 type Props = {
@@ -9,12 +8,10 @@ type Props = {
 
 export const DiagramButton = (props: Props): JSX.Element => {
   const { editorKey } = props;
-  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
   const { open: openDrawioModal } = useDrawioModalForEditor();
-  const editor = codeMirrorEditor?.view;
   const onClickDiagramButton = useCallback(() => {
-    openDrawioModal(editor);
-  }, [editor, openDrawioModal]);
+    openDrawioModal(editorKey);
+  }, [editorKey, openDrawioModal]);
   return (
     <button type="button" className="btn btn-toolbar-button" onClick={onClickDiagramButton}>
       <span className="material-symbols-outlined fs-5">lan</span>

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

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 
-import type { EditorView } from '@codemirror/view';
 import { useSWRStatic } from '@growi/core/dist/swr';
 import type { SWRResponse } from 'swr';
 
@@ -8,13 +7,13 @@ type DrawioModalSaveHandler = () => void;
 
 type DrawioModalStatus = {
   isOpened: boolean,
-  editor?: EditorView,
+  editorKey?: string,
   onSave?: DrawioModalSaveHandler,
 }
 
 type DrawioModalStatusUtils = {
   open(
-    editor?: EditorView,
+    editorKey?: string,
     onSave?: DrawioModalSaveHandler,
   ): void,
   close(): void,
@@ -28,12 +27,12 @@ export const useDrawioModalForEditor = (status?: DrawioModalStatus): SWRResponse
 
   const { mutate } = swrResponse;
 
-  const open = useCallback((editor?: EditorView, onSave?: DrawioModalSaveHandler): void => {
-    mutate({ isOpened: true, editor, onSave });
+  const open = useCallback((editorKey?: string, onSave?: DrawioModalSaveHandler): void => {
+    mutate({ isOpened: true, editorKey, onSave });
   }, [mutate]);
 
   const close = useCallback((): void => {
-    mutate({ isOpened: false, editor: undefined, onSave: undefined });
+    mutate({ isOpened: false, editorKey: undefined, onSave: undefined });
   }, [mutate]);
 
   return {