render on load

packages/app/src/interfaces/graph-viewer.ts

@@ -1,4 +1,5 @@
 export interface IGraphViewer {
+  processElements: () => void,
   createViewerForElement: (Element) => void,
 }
 

packages/app/src/pages/[[...path]].page.tsx

@@ -291,7 +291,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
         */}
       </Head>
 
-      <Script type="text/javascript" src="https://www.draw.io/js/viewer.min.js"></Script>
+      <Script type="text/javascript" src="https://www.draw.io/js/viewer.min.js" onLoad={() => (window as CustomWindow).GraphViewer.processElements() }></Script>
 
       <BasicLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')} expandContainer={isContainerFluid}>
 

packages/remark-drawio-plugin/src/components/DrawioViewer.tsx

@@ -1,10 +1,13 @@
-import React, { ReactNode } from 'react';
+import React, {
+  ReactNode, useCallback, useEffect, useMemo, useRef,
+} from 'react';
+
+import { debounce } from 'throttle-debounce';
 
 import { generateMxgraphData } from '../utils/embed';
 
 import styles from './DrawioViewer.module.scss';
 
-
 type Props = {
   diagramIndex: number,
   bol?: number,
@@ -19,6 +22,32 @@ export const DrawioViewer = (props: Props): JSX.Element => {
   } = props;
   const drawioEmbedUri = props.drawioEmbedUri ?? 'https://embed.diagrams.net/';
 
+  const drawioContainerRef = useRef<HTMLDivElement>(null);
+
+  const renderDrawio = useCallback(() => {
+    if (drawioContainerRef.current == null) {
+      return;
+    }
+
+    const mxgraphs = drawioContainerRef.current.getElementsByClassName('mxgraph');
+    if (mxgraphs.length > 0) {
+      // GROWI では、mxgraph element は最初のものをレンダリングする前提とする
+      const div = mxgraphs[0];
+
+      if (div != null) {
+        div.innerHTML = '';
+        (window as any).GraphViewer.createViewerForElement(div);
+      }
+    }
+  }, [drawioContainerRef]);
+
+  const renderDrawioWithDebounce = useMemo(() => debounce(200, renderDrawio), [renderDrawio]);
+
+  useEffect(() => {
+    renderDrawioWithDebounce();
+  }, [renderDrawioWithDebounce]);
+
+
   if (children == null) {
     return <></>;
   }
@@ -34,6 +63,7 @@ export const DrawioViewer = (props: Props): JSX.Element => {
   return (
     <div
       key={`drawio-viewer-${diagramIndex}`}
+      ref={drawioContainerRef}
       className={`drawio-viewer ${styles['drawio-viewer']}`}
       data-begin-line-number-of-markdown={bol}
       data-end-line-number-of-markdown={eol}