commonize Script for drawio viewer

packages/app/src/components/Script/DrawioViewerScript.tsx

@@ -0,0 +1,15 @@
+import { IGraphViewer } from '@growi/remark-drawio-plugin';
+import Script from 'next/script';
+
+interface Window {
+  GraphViewer: IGraphViewer
+}
+declare const window: Window;
+
+export const DrawioViewerScript = (): JSX.Element => {
+  return (
+    <Script
+      type="text/javascript" src="https://www.draw.io/js/viewer.min.js" onLoad={() => window.GraphViewer.processElements() }
+    />
+  );
+};

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

@@ -17,13 +17,13 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import Script from 'next/script';
 import superjson from 'superjson';
 
 import { Comments } from '~/components/Comments';
 import { PageAlerts } from '~/components/PageAlert/PageAlerts';
 // import { useTranslation } from '~/i18n';
 import { CurrentPageContentFooter } from '~/components/PageContentFooter';
+import { DrawioViewerScript } from '~/components/Script/DrawioViewerScript';
 import { UsersHomePageFooterProps } from '~/components/UsersHomePageFooter';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
 // import { renderScriptTagByName, renderHighlightJsStyleTag } from '~/service/cdn-resources-loader';
@@ -291,7 +291,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
         */}
       </Head>
 
-      <Script type="text/javascript" src="https://www.draw.io/js/viewer.min.js" onLoad={() => (window as CustomWindow).GraphViewer.processElements() }></Script>
+      <DrawioViewerScript />
 
       <BasicLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')} expandContainer={isContainerFluid}>
 

packages/app/src/pages/_private-legacy-pages.page.tsx

@@ -4,8 +4,8 @@ import {
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import Script from 'next/script';
 
+import { DrawioViewerScript } from '~/components/Script/DrawioViewerScript';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import type { ISidebarConfig } from '~/interfaces/sidebar-config';
@@ -79,7 +79,7 @@ const PrivateLegacyPage: NextPage<Props> = (props: Props) => {
         */}
       </Head>
 
-      <Script type="text/javascript" src="https://www.draw.io/js/viewer.min.js"></Script>
+      <DrawioViewerScript />
 
       <SearchResultLayout title={useCustomTitle(props, 'GROWI')}>
         <div id="private-regacy-pages">

packages/app/src/pages/_search.page.tsx

@@ -4,8 +4,8 @@ import {
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import Script from 'next/script';
 
+import { DrawioViewerScript } from '~/components/Script/DrawioViewerScript';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import type { ISidebarConfig } from '~/interfaces/sidebar-config';
@@ -97,7 +97,7 @@ const SearchResultPage: NextPage<Props> = (props: Props) => {
         */}
       </Head>
 
-      <Script type="text/javascript" src="https://www.draw.io/js/viewer.min.js"></Script>
+      <DrawioViewerScript />
 
       <SearchResultLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
         <div id="search-page">

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

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import { IUser, IUserHasId } from '@growi/core';
+import { IUserHasId } from '@growi/core';
 import {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
-import Script from 'next/script';
 
 import CountBadge from '~/components/Common/CountBadge';
 import PageListIcon from '~/components/Icons/PageListIcon';
@@ -15,6 +14,7 @@ import { ShareLinkLayout } from '~/components/Layout/ShareLinkLayout';
 import GrowiContextualSubNavigation from '~/components/Navbar/GrowiContextualSubNavigation';
 import { Page } from '~/components/Page';
 import styles from '~/components/Page/DisplaySwitcher.module.scss'; // for PageList toc style
+import { DrawioViewerScript } from '~/components/Script/DrawioViewerScript';
 import TableOfContents from '~/components/TableOfContents';
 import { SupportedAction, SupportedActionType } from '~/interfaces/activity';
 import { CrowiRequest } from '~/interfaces/crowi-request';
@@ -65,7 +65,7 @@ const SharedPage: NextPage<Props> = (props: Props) => {
 
   return (
     <>
-      <Script type="text/javascript" src="https://www.draw.io/js/viewer.min.js"></Script>
+      <DrawioViewerScript />
 
       <ShareLinkLayout title={useCustomTitle(props, 'GROWI')} expandContainer={props.isContainerFluid}>
         <div className="h-100 d-flex flex-column justify-content-between">

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

@@ -4,7 +4,7 @@ import React, {
 
 import { debounce } from 'throttle-debounce';
 
-import type { IGraphViewer } from '../interfaces/graph-viewer';
+import { IGraphViewer } from '..';
 import { generateMxgraphData } from '../utils/embed';
 import { isGraphViewer } from '../utils/global';
 
@@ -12,11 +12,13 @@ import { isGraphViewer } from '../utils/global';
 import styles from './DrawioViewer.module.scss';
 
 
-declare global {
-  interface Window {
-    GraphViewer: IGraphViewer,
-  }
+interface Window {
+  // declare as an optional property
+  //  because this might be undefined if before load.
+  GraphViewer?: IGraphViewer,
 }
+declare const window: Window;
+
 
 type Props = {
   diagramIndex: number,
@@ -33,10 +35,14 @@ export const DrawioViewer = (props: Props): JSX.Element => {
   const drawioContainerRef = useRef<HTMLDivElement>(null);
 
   const renderDrawio = useCallback(() => {
-    if (!isGraphViewer(window.GraphViewer)) {
+    if (drawioContainerRef.current == null) {
       return;
     }
-    if (drawioContainerRef.current == null) {
+
+    if (!isGraphViewer(window.GraphViewer)) {
+      // Do nothing if loading has not been terminated.
+      // Alternatively, GraphViewer.processElements() will be called in Script.onLoad.
+      // see DrawioViewerScript.tsx
       return;
     }
 

packages/remark-drawio-plugin/src/index.ts

@@ -1,3 +1,4 @@
+export * from './interfaces/graph-viewer';
 export * from './components/DrawioViewer';
 export * from './services/renderer/remark-drawio-plugin';
 export * from './utils/embed';