show drawio

packages/app/src/components/Layout/BasicLayout.tsx

@@ -3,7 +3,6 @@ import React, { ReactNode } from 'react';
 import dynamic from 'next/dynamic';
 
 import { GrowiNavbar } from '../Navbar/GrowiNavbar';
-import { DrawioModal } from '../PageEditor/DrawioModal';
 import Sidebar from '../Sidebar';
 
 import { RawLayout } from './RawLayout';
@@ -22,6 +21,7 @@ const PageDeleteModal = dynamic(() => import('../PageDeleteModal'), { ssr: false
 const PageRenameModal = dynamic(() => import('../PageRenameModal'), { ssr: false });
 const PagePresentationModal = dynamic(() => import('../PagePresentationModal'), { ssr: false });
 const PageAccessoriesModal = dynamic(() => import('../PageAccessoriesModal'), { ssr: false });
+const DrawioModal = dynamic(() => import('../PageEditor/DrawioModal').then(mod => mod.DrawioModal), { ssr: false });
 // Fab
 const Fab = dynamic(() => import('../Fab'), { ssr: false });
 

packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -143,7 +143,7 @@ class CodeMirrorEditor extends AbstractEditor {
     this.showGridEditorHandler = this.showGridEditorHandler.bind(this);
     this.showLinkEditHandler = this.showLinkEditHandler.bind(this);
     this.showHandsonTableHandler = this.showHandsonTableHandler.bind(this);
-    this.clickDrawioHandler = this.clickDrawioHandler.bind(this);
+    // this.clickDrawioHandler = this.clickDrawioHandler.bind(this);
 
     this.foldDrawioSection = this.foldDrawioSection.bind(this);
     this.onSaveForDrawio = this.onSaveForDrawio.bind(this);
@@ -793,10 +793,10 @@ class CodeMirrorEditor extends AbstractEditor {
     // this.handsontableModal.current.show(mtu.getMarkdownTable(this.getCodeMirror()));
   }
 
-  clickDrawioHandler() {
-    this.props.onClickDrawioBtn(mdu.getMarkdownDrawioMxfile(this.getCodeMirror()));
-    // this.drawioModal.current.show(mdu.getMarkdownDrawioMxfile(this.getCodeMirror()));
-  }
+  // clickDrawioHandler() {
+  //   this.props.onClickDrawioBtn(mdu.getMarkdownDrawioMxfile(this.getCodeMirror()));
+  //   // this.drawioModal.current.show(mdu.getMarkdownDrawioMxfile(this.getCodeMirror()));
+  // }
 
 
   // fold draw.io section (::: drawio ~ :::)
@@ -949,7 +949,8 @@ class CodeMirrorEditor extends AbstractEditor {
         color={null}
         bssize="small"
         title="draw.io"
-        onClick={this.clickDrawioHandler}
+        // onClick={this.clickDrawioHandler}
+        onClick={this.props.onClickDrawioBtn(mdu.getMarkdownDrawioMxfile(this.getCodeMirror()))}
       >
         <EditorIcon icon="Drawio" />
       </Button>,

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

@@ -23,11 +23,15 @@ type Props = {
 
 export const DrawioModal = React.forwardRef((props: Props, ref: React.LegacyRef<Modal>): JSX.Element => {
   const { data: growiHydratedEnv } = useGrowiHydratedEnv();
+
+  console.log({ growiHydratedEnv });
   // const [isShown, setIsShown] = useState(false);
 
   const { data: drawioModalData, close: closeDrawioModal } = useDrawioModal();
+  console.log({ drawioModalData });
   const isOpened = drawioModalData?.isOpened ?? false;
   const drawioMxFile = drawioModalData?.drawioMxFile ?? '';
+  console.log({ drawioMxFile });
   // const { isOpened, drawioMxFile } = drawioModalData;
   // const [drawioMxFile, setDrawioMxFile] = useState('');
 
@@ -118,15 +122,18 @@ export const DrawioModal = React.forwardRef((props: Props, ref: React.LegacyRef<
     const url = new URL(drawioUri);
 
     // refs: https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported-
-    url.searchParams.append('spin', '1');
-    url.searchParams.append('embed', '1');
+    url.searchParams.append('spin', 1);
+    url.searchParams.append('embed', 1);
     url.searchParams.append('lang', getDiagramsNetLangCode(i18next.language));
     url.searchParams.append('ui', 'atlas');
-    url.searchParams.append('configure', '1');
+    url.searchParams.append('configure', 1);
 
     return url.toString();
   }, [growiHydratedEnv?.DRAWIO_URI]);
 
+
+  console.log({ drawioUrl });
+
   return (
     <Modal
       ref={ref}
@@ -139,11 +146,11 @@ export const DrawioModal = React.forwardRef((props: Props, ref: React.LegacyRef<
     >
       <ModalBody className="p-0">
         {/* Loading spinner */}
-        <div className="w-100 h-100 position-absolute d-flex">
+        {/* <div className="w-100 h-100 position-absolute d-flex">
           <div className="mx-auto my-auto">
             <i className="fa fa-3x fa-spinner fa-pulse mx-auto text-muted"></i>
           </div>
-        </div>
+        </div> */}
         {/* iframe */}
         <div className="w-100 h-100 position-absolute d-flex">
           { isOpened && (
@@ -152,6 +159,7 @@ export const DrawioModal = React.forwardRef((props: Props, ref: React.LegacyRef<
               className="border-0 flex-grow-1"
             >
             </iframe>
+            // <>hoge</>
           ) }
         </div>
       </ModalBody>