transplant IGraphViewer

packages/app/src/interfaces/global.ts

@@ -1,8 +1,5 @@
 import EventEmitter from 'events';
 
-import { IGraphViewer } from './graph-viewer';
-
 export type CustomWindow = Window
                          & typeof globalThis
-                         & { globalEmitter: EventEmitter }
-                         & { GraphViewer: IGraphViewer };
+                         & { globalEmitter: EventEmitter };

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

@@ -1,12 +0,0 @@
-export interface IGraphViewer {
-  processElements: () => void,
-  createViewerForElement: (Element) => void,
-}
-
-export const isGraphViewer = (val: any): val is IGraphViewer => {
-  if (typeof val === 'function' && typeof val.createViewerForElement === 'function') {
-    return true;
-  }
-
-  return false;
-};

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

@@ -4,15 +4,24 @@ import React, {
 
 import { debounce } from 'throttle-debounce';
 
+import type { IGraphViewer } from '../interfaces/graph-viewer';
 import { generateMxgraphData } from '../utils/embed';
+import { isGraphViewer } from '../utils/global';
+
 
 import styles from './DrawioViewer.module.scss';
 
+
+declare global {
+  interface Window {
+    GraphViewer: IGraphViewer,
+  }
+}
+
 type Props = {
   diagramIndex: number,
   bol?: number,
   eol?: number,
-  drawioEmbedUri?: string,
   children?: ReactNode,
 }
 
@@ -24,18 +33,21 @@ export const DrawioViewer = (props: Props): JSX.Element => {
   const drawioContainerRef = useRef<HTMLDivElement>(null);
 
   const renderDrawio = useCallback(() => {
+    if (!isGraphViewer(window.GraphViewer)) {
+      return;
+    }
     if (drawioContainerRef.current == null) {
       return;
     }
 
     const mxgraphs = drawioContainerRef.current.getElementsByClassName('mxgraph');
     if (mxgraphs.length > 0) {
-      // GROWI では、mxgraph element は最初のものをレンダリングする前提とする
+      // This component should have only one '.mxgraph' element
       const div = mxgraphs[0];
 
       if (div != null) {
         div.innerHTML = '';
-        (window as any).GraphViewer.createViewerForElement(div);
+        window.GraphViewer.createViewerForElement(div);
       }
     }
   }, [drawioContainerRef]);

packages/remark-drawio-plugin/src/interfaces/graph-viewer.ts

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

packages/remark-drawio-plugin/src/utils/global.ts

@@ -0,0 +1,5 @@
+import { IGraphViewer } from '~/interfaces/graph-viewer';
+
+export const isGraphViewer = (val: unknown): val is IGraphViewer => {
+  return (typeof val === 'function' && 'createViewerForElement' in val && 'processElements' in val);
+};