From 004fa936794ed82f29c0768e4eff47a2165dac38 Mon Sep 17 00:00:00 2001
From: Yuki Takei <yuki@weseek.co.jp>
Date: Mon, 17 Apr 2023 10:20:00 +0000
Subject: [PATCH 1/3] omit useDrawioUri and inject data into RendererConfig

---
 .../src/components/PageEditor/DrawioModal.tsx | 16 +++++++-------
 .../components/Script/DrawioViewerScript.tsx  | 22 ++++++++++++-------
 apps/app/src/interfaces/services/renderer.ts  |  1 +
 apps/app/src/pages/[[...path]].page.tsx       |  4 ++--
 .../src/pages/_private-legacy-pages.page.tsx  |  9 ++------
 apps/app/src/pages/_search.page.tsx           |  9 ++------
 apps/app/src/pages/share/[[...path]].page.tsx |  4 ++--
 apps/app/src/server/service/config-loader.ts  |  2 +-
 apps/app/src/stores/context.tsx               |  4 ----
 9 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/apps/app/src/components/PageEditor/DrawioModal.tsx b/apps/app/src/components/PageEditor/DrawioModal.tsx
index 3770cf64429..0494663a7aa 100644
--- a/apps/app/src/components/PageEditor/DrawioModal.tsx
+++ b/apps/app/src/components/PageEditor/DrawioModal.tsx
@@ -10,7 +10,7 @@ import {
 } from 'reactstrap';
 
 import { getDiagramsNetLangCode } from '~/client/util/locale-utils';
-import { useDrawioUri } from '~/stores/context';
+import { useRendererConfig } from '~/stores/context';
 import { useDrawioModal } from '~/stores/modal';
 import { usePersonalSettings } from '~/stores/personal-settings';
 import loggerFactory from '~/utils/logger';
@@ -38,7 +38,7 @@ const drawioConfig: DrawioConfig = {
 
 
 export const DrawioModal = (): JSX.Element => {
-  const { data: drawioUri } = useDrawioUri();
+  const { data: rendererConfig } = useRendererConfig();
   const { data: personalSettingsInfo } = usePersonalSettings({
     // make immutable
     revalidateIfStale: false,
@@ -50,13 +50,13 @@ export const DrawioModal = (): JSX.Element => {
   const isOpened = drawioModalData?.isOpened ?? false;
 
   const drawioUriWithParams = useMemo(() => {
-    if (drawioUri == null) {
+    if (rendererConfig == null) {
       return undefined;
     }
 
     let url;
     try {
-      url = new URL(drawioUri);
+      url = new URL(rendererConfig.drawioUri);
     }
     catch (err) {
       logger.debug(err);
@@ -71,19 +71,19 @@ export const DrawioModal = (): JSX.Element => {
     url.searchParams.append('configure', '1');
 
     return url;
-  }, [drawioUri, personalSettingsInfo?.lang]);
+  }, [rendererConfig, personalSettingsInfo?.lang]);
 
   const drawioCommunicationHelper = useMemo(() => {
-    if (drawioUri == null) {
+    if (rendererConfig == null) {
       return undefined;
     }
 
     return new DrawioCommunicationHelper(
-      drawioUri,
+      rendererConfig.drawioUri,
       drawioConfig,
       { onClose: closeDrawioModal, onSave: drawioModalData?.onSave },
     );
-  }, [closeDrawioModal, drawioModalData?.onSave, drawioUri]);
+  }, [closeDrawioModal, drawioModalData?.onSave, rendererConfig]);
 
   const receiveMessageHandler = useCallback((event: MessageEvent) => {
     if (drawioModalData == null) {
diff --git a/apps/app/src/components/Script/DrawioViewerScript.tsx b/apps/app/src/components/Script/DrawioViewerScript.tsx
index 82e95f8a1b1..4cef052cec0 100644
--- a/apps/app/src/components/Script/DrawioViewerScript.tsx
+++ b/apps/app/src/components/Script/DrawioViewerScript.tsx
@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 
 import type { IGraphViewerGlobal } from '@growi/remark-drawio';
-import Script from 'next/script';
+import Head from 'next/head';
 
-import { useDrawioUri } from '~/stores/context';
+import { useRendererConfig } from '~/stores/context';
 
 declare global {
   // eslint-disable-next-line vars-on-top, no-var
@@ -11,7 +11,7 @@ declare global {
 }
 
 export const DrawioViewerScript = (): JSX.Element => {
-  const { data: drawioUri } = useDrawioUri();
+  const { data: rendererConfig } = useRendererConfig();
 
   const loadedHandler = useCallback(() => {
     // disable useResizeSensor and checkVisibleState
@@ -32,11 +32,17 @@ export const DrawioViewerScript = (): JSX.Element => {
     GraphViewer.processElements();
   }, []);
 
+  if (rendererConfig == null) {
+    return <></>;
+  }
+
   return (
-    <Script
-      type="text/javascript"
-      src={(new URL('/js/viewer.min.js', drawioUri)).toString()}
-      onLoad={loadedHandler}
-    />
+    <Head>
+      <script
+        type="text/javascript" async
+        src={(new URL('/js/viewer.min.js', rendererConfig.drawioUri)).toString()}
+        onLoad={loadedHandler}
+      />
+    </Head>
   );
 };
diff --git a/apps/app/src/interfaces/services/renderer.ts b/apps/app/src/interfaces/services/renderer.ts
index 5244e0b9108..eff2c3f5041 100644
--- a/apps/app/src/interfaces/services/renderer.ts
+++ b/apps/app/src/interfaces/services/renderer.ts
@@ -8,6 +8,7 @@ export type RendererConfig = {
   isIndentSizeForced: boolean,
   highlightJsStyleBorder: boolean,
 
+  drawioUri: string,
   plantumlUri: string | null,
   blockdiagUri: string | null,
 } & XssOptionConfig;
diff --git a/apps/app/src/pages/[[...path]].page.tsx b/apps/app/src/pages/[[...path]].page.tsx
index a5f1c2c6071..153cb9e8749 100644
--- a/apps/app/src/pages/[[...path]].page.tsx
+++ b/apps/app/src/pages/[[...path]].page.tsx
@@ -33,7 +33,7 @@ import {
   useIsForbidden, useIsSharedUser,
   useIsEnabledStaleNotification, useIsIdenticalPath,
   useIsSearchServiceConfigured, useIsSearchServiceReachable, useDisableLinkSharing,
-  useDrawioUri, useHackmdUri, useDefaultIndentSize, useIsIndentSizeForced,
+  useHackmdUri, useDefaultIndentSize, useIsIndentSizeForced,
   useIsAclEnabled, useIsSearchPage, useIsEnabledAttachTitleHeader,
   useCsrfToken, useIsSearchScopeChildrenAsDefault, useCurrentPathname,
   useIsSlackConfigured, useRendererConfig,
@@ -211,7 +211,6 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
   // useIsMailerSetup(props.isMailerSetup);
   useIsAclEnabled(props.isAclEnabled);
   // useHasSlackConfig(props.hasSlackConfig);
-  useDrawioUri(props.drawioUri);
   useHackmdUri(props.hackmdUri);
   // useNoCdn(props.noCdn);
   useDefaultIndentSize(props.adminPreferredIndentSize);
@@ -577,6 +576,7 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
     adminPreferredIndentSize: configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize'),
     isIndentSizeForced: configManager.getConfig('markdown', 'markdown:isIndentSizeForced'),
 
+    drawioUri: configManager.getConfig('crowi', 'app:drawioUri'),
     plantumlUri: process.env.PLANTUML_URI ?? null,
     blockdiagUri: process.env.BLOCKDIAG_URI ?? null,
 
diff --git a/apps/app/src/pages/_private-legacy-pages.page.tsx b/apps/app/src/pages/_private-legacy-pages.page.tsx
index 32c284bec40..b8b65d8e3ca 100644
--- a/apps/app/src/pages/_private-legacy-pages.page.tsx
+++ b/apps/app/src/pages/_private-legacy-pages.page.tsx
@@ -11,7 +11,7 @@ import type { CrowiRequest } from '~/interfaces/crowi-request';
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import type { IUser, IUserHasId } from '~/interfaces/user';
 import {
-  useCsrfToken, useCurrentUser, useDrawioUri, useIsSearchPage, useIsSearchScopeChildrenAsDefault,
+  useCsrfToken, useCurrentUser, useIsSearchPage, useIsSearchScopeChildrenAsDefault,
   useIsSearchServiceConfigured, useIsSearchServiceReachable, useRendererConfig,
 } from '~/stores/context';
 
@@ -29,8 +29,6 @@ type Props = CommonProps & {
   isSearchServiceReachable: boolean,
   isSearchScopeChildrenAsDefault: boolean,
 
-  drawioUri: string | null,
-
   // Render config
   rendererConfig: RendererConfig,
 
@@ -52,8 +50,6 @@ const PrivateLegacyPage: NextPage<Props> = (props: Props) => {
   useIsSearchServiceReachable(props.isSearchServiceReachable);
   useIsSearchScopeChildrenAsDefault(props.isSearchScopeChildrenAsDefault);
 
-  useDrawioUri(props.drawioUri);
-
   // init sidebar config with UserUISettings and sidebarConfig
   useInitSidebarConfig(props.sidebarConfig, props.userUISettings);
 
@@ -88,8 +84,6 @@ async function injectServerConfigurations(context: GetServerSidePropsContext, pr
   props.isSearchServiceReachable = searchService.isReachable;
   props.isSearchScopeChildrenAsDefault = configManager.getConfig('crowi', 'customize:isSearchScopeChildrenAsDefault');
 
-  props.drawioUri = configManager.getConfig('crowi', 'app:drawioUri');
-
   props.sidebarConfig = {
     isSidebarDrawerMode: configManager.getConfig('crowi', 'customize:isSidebarDrawerMode'),
     isSidebarClosedAtDockMode: configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
@@ -101,6 +95,7 @@ async function injectServerConfigurations(context: GetServerSidePropsContext, pr
     adminPreferredIndentSize: configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize'),
     isIndentSizeForced: configManager.getConfig('markdown', 'markdown:isIndentSizeForced'),
 
+    drawioUri: configManager.getConfig('crowi', 'app:drawioUri'),
     plantumlUri: process.env.PLANTUML_URI ?? null,
     blockdiagUri: process.env.BLOCKDIAG_URI ?? null,
 
diff --git a/apps/app/src/pages/_search.page.tsx b/apps/app/src/pages/_search.page.tsx
index 5377253944b..50a4db5cba2 100644
--- a/apps/app/src/pages/_search.page.tsx
+++ b/apps/app/src/pages/_search.page.tsx
@@ -12,7 +12,7 @@ import type { CrowiRequest } from '~/interfaces/crowi-request';
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import type { IUser, IUserHasId } from '~/interfaces/user';
 import {
-  useCsrfToken, useCurrentUser, useDrawioUri, useIsContainerFluid, useIsSearchPage, useIsSearchScopeChildrenAsDefault,
+  useCsrfToken, useCurrentUser, useIsContainerFluid, useIsSearchPage, useIsSearchScopeChildrenAsDefault,
   useIsSearchServiceConfigured, useIsSearchServiceReachable, useRendererConfig, useShowPageLimitationL,
 } from '~/stores/context';
 
@@ -32,8 +32,6 @@ type Props = CommonProps & {
   isSearchServiceReachable: boolean,
   isSearchScopeChildrenAsDefault: boolean,
 
-  drawioUri: string | null,
-
   // Render config
   rendererConfig: RendererConfig,
 
@@ -58,8 +56,6 @@ const SearchResultPage: NextPageWithLayout<Props> = (props: Props) => {
   useIsSearchServiceReachable(props.isSearchServiceReachable);
   useIsSearchScopeChildrenAsDefault(props.isSearchScopeChildrenAsDefault);
 
-  useDrawioUri(props.drawioUri);
-
   // init sidebar config with UserUISettings and sidebarConfig
   useInitSidebarConfig(props.sidebarConfig, props.userUISettings);
 
@@ -125,8 +121,6 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
   props.isSearchScopeChildrenAsDefault = configManager.getConfig('crowi', 'customize:isSearchScopeChildrenAsDefault');
   props.isContainerFluid = configManager.getConfig('crowi', 'customize:isContainerFluid');
 
-  props.drawioUri = configManager.getConfig('crowi', 'app:drawioUri');
-
   props.sidebarConfig = {
     isSidebarDrawerMode: configManager.getConfig('crowi', 'customize:isSidebarDrawerMode'),
     isSidebarClosedAtDockMode: configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
@@ -138,6 +132,7 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
     adminPreferredIndentSize: configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize'),
     isIndentSizeForced: configManager.getConfig('markdown', 'markdown:isIndentSizeForced'),
 
+    drawioUri: configManager.getConfig('crowi', 'app:drawioUri'),
     plantumlUri: process.env.PLANTUML_URI ?? null,
     blockdiagUri: process.env.BLOCKDIAG_URI ?? null,
 
diff --git a/apps/app/src/pages/share/[[...path]].page.tsx b/apps/app/src/pages/share/[[...path]].page.tsx
index 53886a435b4..76ba276b705 100644
--- a/apps/app/src/pages/share/[[...path]].page.tsx
+++ b/apps/app/src/pages/share/[[...path]].page.tsx
@@ -20,7 +20,7 @@ import type { IShareLinkHasId } from '~/interfaces/share-link';
 import type { PageDocument } from '~/server/models/page';
 import {
   useCurrentUser, useRendererConfig, useIsSearchPage, useCurrentPathname,
-  useShareLinkId, useIsSearchServiceConfigured, useIsSearchServiceReachable, useIsSearchScopeChildrenAsDefault, useDrawioUri, useIsContainerFluid,
+  useShareLinkId, useIsSearchServiceConfigured, useIsSearchServiceReachable, useIsSearchScopeChildrenAsDefault, useIsContainerFluid,
 } from '~/stores/context';
 import { useCurrentPageId, useIsNotFound } from '~/stores/page';
 import loggerFactory from '~/utils/logger';
@@ -90,7 +90,6 @@ const SharedPage: NextPageWithLayout<Props> = (props: Props) => {
   useIsSearchServiceConfigured(props.isSearchServiceConfigured);
   useIsSearchServiceReachable(props.isSearchServiceReachable);
   useIsSearchScopeChildrenAsDefault(props.isSearchScopeChildrenAsDefault);
-  useDrawioUri(props.drawioUri);
   useIsContainerFluid(props.isContainerFluid);
 
 
@@ -156,6 +155,7 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
     adminPreferredIndentSize: configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize'),
     isIndentSizeForced: configManager.getConfig('markdown', 'markdown:isIndentSizeForced'),
 
+    drawioUri: configManager.getConfig('crowi', 'app:drawioUri'),
     plantumlUri: process.env.PLANTUML_URI ?? null,
     blockdiagUri: process.env.BLOCKDIAG_URI ?? null,
 
diff --git a/apps/app/src/server/service/config-loader.ts b/apps/app/src/server/service/config-loader.ts
index dd6f87024fd..db2d82e3c34 100644
--- a/apps/app/src/server/service/config-loader.ts
+++ b/apps/app/src/server/service/config-loader.ts
@@ -125,7 +125,7 @@ const ENV_VAR_NAME_TO_CONFIG_INFO = {
     ns:      'crowi',
     key:     'app:drawioUri',
     type:    ValueType.STRING,
-    default: null,
+    default: 'https://embed.diagrams.net/',
   },
   NCHAN_URI: {
     ns:      'crowi',
diff --git a/apps/app/src/stores/context.tsx b/apps/app/src/stores/context.tsx
index 565fdcf26d8..3440da28bbb 100644
--- a/apps/app/src/stores/context.tsx
+++ b/apps/app/src/stores/context.tsx
@@ -72,10 +72,6 @@ export const useRegistrationWhiteList = (initialData?: Nullable<string[]>): SWRR
   return useContextSWR<Nullable<string[]>, Error>('registrationWhiteList', initialData);
 };
 
-export const useDrawioUri = (initialData?: Nullable<string>): SWRResponse<string, Error> => {
-  return useContextSWR('drawioUri', initialData ?? undefined, { fallbackData: 'https://embed.diagrams.net/' });
-};
-
 export const useHackmdUri = (initialData?: Nullable<string>): SWRResponse<Nullable<string>, Error> => {
   return useContextSWR<Nullable<string>, Error>('hackmdUri', initialData);
 };

From 24c86d685f3c79fae57170238bb7db1d8f229b23 Mon Sep 17 00:00:00 2001
From: Yuki Takei <yuki@weseek.co.jp>
Date: Mon, 17 Apr 2023 10:27:04 +0000
Subject: [PATCH 2/3] add missed config

---
 apps/app/src/pages/me/[[...path]].page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/app/src/pages/me/[[...path]].page.tsx b/apps/app/src/pages/me/[[...path]].page.tsx
index 03047c0b871..643bd7aa05b 100644
--- a/apps/app/src/pages/me/[[...path]].page.tsx
+++ b/apps/app/src/pages/me/[[...path]].page.tsx
@@ -158,6 +158,7 @@ async function injectServerConfigurations(context: GetServerSidePropsContext, pr
     adminPreferredIndentSize: configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize'),
     isIndentSizeForced: configManager.getConfig('markdown', 'markdown:isIndentSizeForced'),
 
+    drawioUri: configManager.getConfig('crowi', 'app:drawioUri'),
     plantumlUri: process.env.PLANTUML_URI ?? null,
     blockdiagUri: process.env.BLOCKDIAG_URI ?? null,
 

From 1761f556133fec6b12ae5c4c490f721f33e0a57c Mon Sep 17 00:00:00 2001
From: Yuki Takei <yuki@weseek.co.jp>
Date: Mon, 17 Apr 2023 10:40:46 +0000
Subject: [PATCH 3/3] remove unnecessary configurations

---
 apps/app/src/pages/tags.page.tsx  | 20 +-------------------
 apps/app/src/pages/trash.page.tsx | 20 +-------------------
 2 files changed, 2 insertions(+), 38 deletions(-)

diff --git a/apps/app/src/pages/tags.page.tsx b/apps/app/src/pages/tags.page.tsx
index 54ce0a71057..ce42a765c68 100644
--- a/apps/app/src/pages/tags.page.tsx
+++ b/apps/app/src/pages/tags.page.tsx
@@ -16,7 +16,7 @@ import { BasicLayout } from '../components/Layout/BasicLayout';
 import {
   useCurrentUser, useIsSearchPage,
   useIsSearchServiceConfigured, useIsSearchServiceReachable,
-  useIsSearchScopeChildrenAsDefault, useRendererConfig,
+  useIsSearchScopeChildrenAsDefault,
 } from '../stores/context';
 
 import { NextPageWithLayout } from './_app.page';
@@ -64,8 +64,6 @@ const TagPage: NextPageWithLayout<CommonProps> = (props: Props) => {
   // init sidebar config with UserUISettings and sidebarConfig
   useInitSidebarConfig(props.sidebarConfig, props.userUISettings);
 
-  useRendererConfig(props.rendererConfig);
-
   const title = generateCustomTitle(props, t('Tags'));
 
   return (
@@ -139,22 +137,6 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
     isSidebarClosedAtDockMode: configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
   };
 
-  props.rendererConfig = {
-    isEnabledLinebreaks: configManager.getConfig('markdown', 'markdown:isEnabledLinebreaks'),
-    isEnabledLinebreaksInComments: configManager.getConfig('markdown', 'markdown:isEnabledLinebreaksInComments'),
-    adminPreferredIndentSize: configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize'),
-    isIndentSizeForced: configManager.getConfig('markdown', 'markdown:isIndentSizeForced'),
-
-    plantumlUri: process.env.PLANTUML_URI ?? null,
-    blockdiagUri: process.env.BLOCKDIAG_URI ?? null,
-
-    // XSS Options
-    isEnabledXssPrevention: configManager.getConfig('markdown', 'markdown:rehypeSanitize:isEnabledPrevention'),
-    xssOption: configManager.getConfig('markdown', 'markdown:rehypeSanitize:option'),
-    attrWhiteList: JSON.parse(crowi.configManager.getConfig('markdown', 'markdown:rehypeSanitize:attributes')),
-    tagWhiteList: crowi.configManager.getConfig('markdown', 'markdown:rehypeSanitize:tagNames'),
-    highlightJsStyleBorder: crowi.configManager.getConfig('crowi', 'customize:highlightJsStyleBorder'),
-  };
 }
 
 /**
diff --git a/apps/app/src/pages/trash.page.tsx b/apps/app/src/pages/trash.page.tsx
index 24368289251..809b8e2557a 100644
--- a/apps/app/src/pages/trash.page.tsx
+++ b/apps/app/src/pages/trash.page.tsx
@@ -16,7 +16,7 @@ import { BasicLayout } from '../components/Layout/BasicLayout';
 import {
   useCurrentUser, useCurrentPathname,
   useIsSearchServiceConfigured, useIsSearchServiceReachable,
-  useIsSearchScopeChildrenAsDefault, useIsSearchPage, useShowPageLimitationXL, useIsGuestUser, useRendererConfig,
+  useIsSearchScopeChildrenAsDefault, useIsSearchPage, useShowPageLimitationXL, useIsGuestUser,
 } from '../stores/context';
 
 import type { NextPageWithLayout } from './_app.page';
@@ -55,8 +55,6 @@ const TrashPage: NextPageWithLayout<CommonProps> = (props: Props) => {
 
   useShowPageLimitationXL(props.showPageLimitationXL);
 
-  useRendererConfig(props.rendererConfig);
-
   const { data: isDrawerMode } = useDrawerMode();
   const { data: isGuestUser } = useIsGuestUser();
 
@@ -128,22 +126,6 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
     isSidebarClosedAtDockMode: configManager.getConfig('crowi', 'customize:isSidebarClosedAtDockMode'),
   };
 
-  props.rendererConfig = {
-    isEnabledLinebreaks: configManager.getConfig('markdown', 'markdown:isEnabledLinebreaks'),
-    isEnabledLinebreaksInComments: configManager.getConfig('markdown', 'markdown:isEnabledLinebreaksInComments'),
-    adminPreferredIndentSize: configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize'),
-    isIndentSizeForced: configManager.getConfig('markdown', 'markdown:isIndentSizeForced'),
-
-    plantumlUri: process.env.PLANTUML_URI ?? null,
-    blockdiagUri: process.env.BLOCKDIAG_URI ?? null,
-
-    // XSS Options
-    isEnabledXssPrevention: configManager.getConfig('markdown', 'markdown:rehypeSanitize:isEnabledPrevention'),
-    xssOption: configManager.getConfig('markdown', 'markdown:rehypeSanitize:option'),
-    attrWhiteList: JSON.parse(crowi.configManager.getConfig('markdown', 'markdown:rehypeSanitize:attributes')),
-    tagWhiteList: crowi.configManager.getConfig('markdown', 'markdown:rehypeSanitize:tagNames'),
-    highlightJsStyleBorder: crowi.configManager.getConfig('crowi', 'customize:highlightJsStyleBorder'),
-  };
 }
 
 /**