add viewer script

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

@@ -17,6 +17,7 @@ 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';
@@ -289,7 +290,11 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
         {renderHighlightJsStyleTag(props.highlightJsStyle)}
         */}
       </Head>
+
+      <Script type="text/javascript" src="https://www.draw.io/js/viewer.min.js"></Script>
+
       <BasicLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')} expandContainer={isContainerFluid}>
+
         <div className="h-100 d-flex flex-column justify-content-between">
           <header className="py-0 position-relative">
             <div id="grw-subnav-container">

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

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

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

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

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

@@ -7,6 +7,7 @@ import {
 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';
@@ -63,86 +64,90 @@ const SharedPage: NextPage<Props> = (props: Props) => {
   const shareLink = props.shareLink;
 
   return (
-    <ShareLinkLayout title={useCustomTitle(props, 'GROWI')} expandContainer={props.isContainerFluid}>
-      <div className="h-100 d-flex flex-column justify-content-between">
-        <header className="py-0 position-relative">
-          {isShowSharedPage && <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />}
-        </header>
-
-        <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
-
-        <div className="flex-grow-1">
-          <div id="content-main" className="content-main">
-            <div className="grw-container-convertible">
-              { props.disableLinkSharing && (
-                <div className="mt-4">
-                  <ForbiddenPage isLinkSharingDisabled={props.disableLinkSharing} />
-                </div>
-              )}
-
-              { (isNotFound && !props.disableLinkSharing) && (
-                <div className="container-lg">
-                  <h2 className="text-muted mt-4">
-                    <i className="icon-ban" aria-hidden="true" />
-                    <span> Page is not found</span>
-                  </h2>
-                </div>
-              )}
-
-              { (props.isExpired && !props.disableLinkSharing && shareLink != null) && (
-                <div className="container-lg">
-                  <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
-                  <h2 className="text-muted mt-4">
-                    <i className="icon-ban" aria-hidden="true" />
-                    <span> Page is expired</span>
-                  </h2>
-                </div>
-              )}
-
-              {(isShowSharedPage && shareLink != null) && (
-                <>
-                  <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
-                  <div className="d-flex flex-column flex-lg-row-reverse">
-
-                    <div className="grw-side-contents-container">
-                      <div className="grw-side-contents-sticky-container">
-
-                        {/* Page list */}
-                        <div className={`grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
-                          { shareLink.relatedPage.path != null && (
-                            <button
-                              type="button"
-                              className="btn btn-block btn-outline-secondary grw-btn-page-accessories
-                              rounded-pill d-flex justify-content-between align-items-center"
-                              onClick={() => openDescendantPageListModal(shareLink.relatedPage.path)}
-                              data-testid="pageListButton"
-                            >
-                              <div className="grw-page-accessories-control-icon">
-                                <PageListIcon />
-                              </div>
-                              {t('page_list')}
-                              <CountBadge count={shareLink.relatedPage.descendantCount} offset={1} />
-                            </button>
-                          ) }
-                        </div>
-
-                        <div className="d-none d-lg-block">
-                          <TableOfContents />
+    <>
+      <Script type="text/javascript" src="https://www.draw.io/js/viewer.min.js"></Script>
+
+      <ShareLinkLayout title={useCustomTitle(props, 'GROWI')} expandContainer={props.isContainerFluid}>
+        <div className="h-100 d-flex flex-column justify-content-between">
+          <header className="py-0 position-relative">
+            {isShowSharedPage && <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />}
+          </header>
+
+          <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
+
+          <div className="flex-grow-1">
+            <div id="content-main" className="content-main">
+              <div className="grw-container-convertible">
+                { props.disableLinkSharing && (
+                  <div className="mt-4">
+                    <ForbiddenPage isLinkSharingDisabled={props.disableLinkSharing} />
+                  </div>
+                )}
+
+                { (isNotFound && !props.disableLinkSharing) && (
+                  <div className="container-lg">
+                    <h2 className="text-muted mt-4">
+                      <i className="icon-ban" aria-hidden="true" />
+                      <span> Page is not found</span>
+                    </h2>
+                  </div>
+                )}
+
+                { (props.isExpired && !props.disableLinkSharing && shareLink != null) && (
+                  <div className="container-lg">
+                    <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
+                    <h2 className="text-muted mt-4">
+                      <i className="icon-ban" aria-hidden="true" />
+                      <span> Page is expired</span>
+                    </h2>
+                  </div>
+                )}
+
+                {(isShowSharedPage && shareLink != null) && (
+                  <>
+                    <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
+                    <div className="d-flex flex-column flex-lg-row-reverse">
+
+                      <div className="grw-side-contents-container">
+                        <div className="grw-side-contents-sticky-container">
+
+                          {/* Page list */}
+                          <div className={`grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
+                            { shareLink.relatedPage.path != null && (
+                              <button
+                                type="button"
+                                className="btn btn-block btn-outline-secondary grw-btn-page-accessories
+                                rounded-pill d-flex justify-content-between align-items-center"
+                                onClick={() => openDescendantPageListModal(shareLink.relatedPage.path)}
+                                data-testid="pageListButton"
+                              >
+                                <div className="grw-page-accessories-control-icon">
+                                  <PageListIcon />
+                                </div>
+                                {t('page_list')}
+                                <CountBadge count={shareLink.relatedPage.descendantCount} offset={1} />
+                              </button>
+                            ) }
+                          </div>
+
+                          <div className="d-none d-lg-block">
+                            <TableOfContents />
+                          </div>
                         </div>
                       </div>
-                    </div>
 
-                    <div className="flex-grow-1 flex-basis-0 mw-0">
-                      <Page />
+                      <div className="flex-grow-1 flex-basis-0 mw-0">
+                        <Page />
+                      </div>
                     </div>
-                  </div>
-                </>
-              )}
+                  </>
+                )}
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </ShareLinkLayout>
+      </ShareLinkLayout>
+    </>
   );
 };