Merge pull request #8304 from weseek/feat/135845-able-to-edit-drawio-in-modal

feat: Able to edit drawio in modal

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,
@@ -11,6 +12,7 @@ import {
 } from 'reactstrap';
 
 import { getDiagramsNetLangCode } from '~/client/util/locale-utils';
+import mdu from '~/components/PageEditor/MarkdownDrawioUtil';
 import { useRendererConfig } from '~/stores/context';
 import { useDrawioModal } from '~/stores/modal';
 import { usePersonalSettings } from '~/stores/personal-settings';
@@ -51,6 +53,9 @@ export const DrawioModal = (): JSX.Element => {
   const { data: drawioModalDataInEditor } = useDrawioModalForEditor();
   const isOpened = drawioModalData?.isOpened ?? false;
   const isOpendInEditor = drawioModalDataInEditor?.isOpened ?? false;
+  const editorKey = drawioModalDataInEditor?.editorKey ?? null;
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
+  const editor = codeMirrorEditor?.view;
 
   const drawioUriWithParams = useMemo(() => {
     if (rendererConfig == null) {
@@ -81,20 +86,25 @@ export const DrawioModal = (): JSX.Element => {
       return undefined;
     }
 
+    const save = editor != null ? (drawioMxFile: string) => {
+      mdu.replaceFocusedDrawioWithEditor(editor, drawioMxFile);
+    } : drawioModalData?.onSave;
+
     return new DrawioCommunicationHelper(
       rendererConfig.drawioUri,
       drawioConfig,
-      { onClose: closeDrawioModal, onSave: drawioModalData?.onSave },
+      { onClose: closeDrawioModal, onSave: save },
     );
-  }, [closeDrawioModal, drawioModalData?.onSave, rendererConfig]);
+  }, [closeDrawioModal, drawioModalData?.onSave, editor, rendererConfig]);
 
   const receiveMessageHandler = useCallback((event: MessageEvent) => {
     if (drawioModalData == null) {
       return;
     }
 
-    drawioCommunicationHelper?.onReceiveMessage(event, drawioModalData.drawioMxFile);
-  }, [drawioCommunicationHelper, drawioModalData]);
+    const drawioMxFile = editor != null ? mdu.getMarkdownDrawioMxfile(editor) : drawioModalData.drawioMxFile;
+    drawioCommunicationHelper?.onReceiveMessage(event, drawioMxFile);
+  }, [drawioCommunicationHelper, drawioModalData, editor]);
 
   useEffect(() => {
     if (isOpened) {

apps/app/src/server/service/page.ts

@@ -29,7 +29,6 @@ import {
   type CreateMethod, type PageCreateOptions, type PageModel, type PageDocument, pushRevision, PageQueryBuilder,
 } from '~/server/models/page';
 import { createBatchStream } from '~/server/util/batch-stream';
-import { getModelSafely } from '~/server/util/mongoose-utils';
 import loggerFactory from '~/utils/logger';
 import { prepareDeleteConfigValuesForCalc } from '~/utils/page-delete-config';
 
@@ -46,6 +45,9 @@ import UserGroupRelation from '../models/user-group-relation';
 import { V5ConversionError } from '../models/vo/v5-conversion-error';
 import { divideByType } from '../util/granted-group';
 
+import { configManager } from './config-manager';
+import { preNotifyService } from './pre-notify';
+
 const debug = require('debug')('growi:services:page');
 
 const logger = loggerFactory('growi:services:page');

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

@@ -2,11 +2,16 @@ import { useCallback } from 'react';
 
 import { useDrawioModalForEditor } from '../../../stores/use-drawio';
 
-export const DiagramButton = (): JSX.Element => {
+type Props = {
+  editorKey: string,
+}
+
+export const DiagramButton = (props: Props): JSX.Element => {
+  const { editorKey } = props;
   const { open: openDrawioModal } = useDrawioModalForEditor();
   const onClickDiagramButton = useCallback(() => {
-    openDrawioModal();
-  }, [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/components/CodeMirrorEditor/Toolbar/Toolbar.tsx

@@ -28,7 +28,7 @@ export const Toolbar = memo((props: Props): JSX.Element => {
         editorKey={editorKey}
       />
       <TableButton editorKey={editorKey} />
-      <DiagramButton />
+      <DiagramButton editorKey={editorKey} />
       <TemplateButton />
     </div>
   );

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

@@ -7,11 +7,13 @@ type DrawioModalSaveHandler = () => void;
 
 type DrawioModalStatus = {
   isOpened: boolean,
+  editorKey: string,
   onSave?: DrawioModalSaveHandler,
 }
 
 type DrawioModalStatusUtils = {
   open(
+    editorKey: string,
     onSave?: DrawioModalSaveHandler,
   ): void,
   close(): void,
@@ -20,17 +22,18 @@ type DrawioModalStatusUtils = {
 export const useDrawioModalForEditor = (status?: DrawioModalStatus): SWRResponse<DrawioModalStatus, Error> & DrawioModalStatusUtils => {
   const initialData: DrawioModalStatus = {
     isOpened: false,
+    editorKey: '',
   };
   const swrResponse = useSWRStatic<DrawioModalStatus, Error>('drawioModalStatus', status, { fallbackData: initialData });
 
   const { mutate } = swrResponse;
 
-  const open = useCallback((onSave?: DrawioModalSaveHandler): void => {
-    mutate({ isOpened: true, onSave });
+  const open = useCallback((editorKey: string, onSave?: DrawioModalSaveHandler): void => {
+    mutate({ isOpened: true, editorKey, onSave });
   }, [mutate]);
 
   const close = useCallback((): void => {
-    mutate({ isOpened: false, drawioMxFile: '', onSave: undefined });
+    mutate({ isOpened: false, editorKey: '', onSave: undefined });
   }, [mutate]);
 
   return {