refactor renderer config interface

packages/app/src/interfaces/services/renderer.ts

@@ -1,12 +1,5 @@
 import { XssOptionConfig } from '~/services/xss/xssOption';
 
-export type RendererSettings = {
-  isEnabledLinebreaks: boolean,
-  isEnabledLinebreaksInComments: boolean,
-  adminPreferredIndentSize: number,
-  isIndentSizeForced: boolean,
-};
-
 // export type GrowiHydratedEnv = {
 //   DRAWIO_URI: string | null,
 //   HACKMD_URI: string | null,
@@ -15,8 +8,13 @@ export type RendererSettings = {
 //   GROWI_APP_ID_FOR_GROWI_CLOUD: string | null,
 // }
 
-export type GrowiRendererConfig = {
+export type RendererConfig = {
+  isEnabledLinebreaks: boolean,
+  isEnabledLinebreaksInComments: boolean,
+  adminPreferredIndentSize: number,
+  isIndentSizeForced: boolean,
   highlightJsStyleBorder: boolean
+
   plantumlUri: string | null,
   blockdiagUri: string | null,
 } & XssOptionConfig;

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

@@ -22,13 +22,12 @@ import { CrowiRequest } from '~/interfaces/crowi-request';
 // import { EditorMode, useEditorMode, useIsMobile } from '~/stores/ui';
 import { CustomWindow } from '~/interfaces/global';
 import { IPageWithMeta } from '~/interfaces/page';
-import { GrowiRendererConfig, RendererSettings } from '~/interfaces/services/renderer';
+import { RendererConfig } from '~/interfaces/services/renderer';
 import { ISidebarConfig } from '~/interfaces/sidebar-config';
 import { PageModel, PageDocument } from '~/server/models/page';
 import UserUISettings, { UserUISettingsDocument } from '~/server/models/user-ui-settings';
 import Xss from '~/services/xss';
 import { useSWRxCurrentPage, useSWRxPageInfo, useSWRxPage } from '~/stores/page';
-import { useRendererSettings } from '~/stores/renderer';
 import {
   usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed, useCurrentSidebarContents, useCurrentProductNavWidth,
 } from '~/stores/ui';
@@ -55,7 +54,7 @@ import {
   useIsSearchServiceConfigured, useIsSearchServiceReachable, useIsMailerSetup, useDisableLinkSharing,
   useAclEnabled, useIsAclEnabled, useHasSlackConfig, useDrawioUri, useHackmdUri, useIsUserPage, useIsNotCreatable,
   useNoCdn, useEditorConfig, useCsrfToken, useIsSearchScopeChildrenAsDefault, useCurrentPageId, useCurrentPathname,
-  useIsSlackConfigured, useGrowiRendererConfig, useIsBlinkedHeaderAtBoot,
+  useIsSlackConfigured, useGrowiRendererConfig, useIsBlinkedHeaderAtBoot, useRendererConfig,
 } from '../stores/context';
 import { useXss } from '../stores/xss';
 
@@ -118,8 +117,7 @@ type Props = CommonProps & {
   // isIndentSizeForced: boolean,
   disableLinkSharing: boolean,
 
-  rendererSettings: RendererSettings,
-  growiRendererConfig: GrowiRendererConfig,
+  rendererConfig: RendererConfig,
 
   // UI
   userUISettings: UserUISettingsDocument | null
@@ -187,8 +185,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   // useIndentSize(props.adminPreferredIndentSize);
   useDisableLinkSharing(props.disableLinkSharing);
 
-  useRendererSettings(props.rendererSettings);
-  useGrowiRendererConfig(props.growiRendererConfig);
+  useRendererConfig(props.rendererConfig);
   // useRendererSettings(props.rendererSettingsStr != null ? JSON.parse(props.rendererSettingsStr) : undefined);
   // useGrowiRendererConfig(props.growiRendererConfigStr != null ? JSON.parse(props.growiRendererConfigStr) : undefined);
 
@@ -438,19 +435,20 @@ async function injectServerConfigurations(context: GetServerSidePropsContext, pr
   // props.adminPreferredIndentSize = configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize');
   // props.isIndentSizeForced = configManager.getConfig('markdown', 'markdown:isIndentSizeForced');
 
-  props.rendererSettings = {
+  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'),
-  };
-  props.growiRendererConfig = {
+
+    plantumlUri: process.env.PLANTUML_URI ?? null,
+    blockdiagUri: process.env.BLOCKDIAG_URI ?? null,
+
+    // XSS Options
     isEnabledXssPrevention: configManager.getConfig('markdown', 'markdown:xss:isEnabledPrevention'),
     attrWhiteList: crowi.xssService.getAttrWhiteList(),
     tagWhiteList: crowi.xssService.getTagWhiteList(),
     highlightJsStyleBorder: crowi.configManager.getConfig('crowi', 'customize:highlightJsStyleBorder'),
-    plantumlUri: process.env.PLANTUML_URI ?? null,
-    blockdiagUri: process.env.BLOCKDIAG_URI ?? null,
   };
 
   props.sidebarConfig = {

packages/app/src/services/renderer/markdown-it/blockdiag.ts

@@ -1,11 +1,11 @@
-import { GrowiRendererConfig } from '~/interfaces/services/renderer';
+import { RendererConfig } from '~/interfaces/services/renderer';
 
 export default class BlockdiagConfigurer {
 
   generateSourceUrl: string;
 
-  constructor(growiConfig: GrowiRendererConfig) {
-    this.generateSourceUrl = growiConfig.blockdiagUri || 'https://blockdiag-api.com/';
+  constructor(config: RendererConfig) {
+    this.generateSourceUrl = config.blockdiagUri || 'https://blockdiag-api.com/';
   }
 
   configure(md) {

packages/app/src/services/renderer/markdown-it/plantuml.ts

@@ -1,15 +1,15 @@
 import plantumlEncoder from 'plantuml-encoder';
 import urljoin from 'url-join';
 
-import { GrowiRendererConfig } from '~/interfaces/services/renderer';
+import { RendererConfig } from '~/interfaces/services/renderer';
 
 export default class PlantUMLConfigurer {
 
   serverUrl: string;
 
-  constructor(growiConfig: GrowiRendererConfig) {
+  constructor(config: RendererConfig) {
     // Do NOT use HTTPS URL because plantuml.com refuse request except from members
-    this.serverUrl = growiConfig.plantumlUri || 'http://plantuml.com/plantuml';
+    this.serverUrl = config.plantumlUri || 'http://plantuml.com/plantuml';
 
     this.generateSource = this.generateSource.bind(this);
   }

packages/app/src/services/renderer/growi-renderer.tsx → packages/app/src/services/renderer/renderer.tsx

@@ -8,7 +8,7 @@ import gfm from 'remark-gfm';
 
 import { Header } from '~/components/ReactMarkdownComponents/Header';
 import { NextLink } from '~/components/ReactMarkdownComponents/NextLink';
-import { GrowiRendererConfig, RendererSettings } from '~/interfaces/services/renderer';
+import { RendererConfig } from '~/interfaces/services/renderer';
 import loggerFactory from '~/utils/logger';
 
 // import CsvToTable from './PreProcessor/CsvToTable';
@@ -41,10 +41,10 @@ const logger = loggerFactory('growi:util:GrowiRenderer');
 
 // export default class GrowiRenderer {
 
-//   growiRendererConfig: GrowiRendererConfig;
+//   RendererConfig: RendererConfig;
 
-//   constructor(growiRendererConfig: GrowiRendererConfig, pagePath?: Nullable<string>) {
-//     this.growiRendererConfig = growiRendererConfig;
+//   constructor(RendererConfig: RendererConfig, pagePath?: Nullable<string>) {
+//     this.RendererConfig = RendererConfig;
 //     this.pagePath = pagePath;
 
 //     if (isClient() && (window as CustomWindow).growiRenderer != null) {
@@ -57,9 +57,9 @@ const logger = loggerFactory('growi:util:GrowiRenderer');
 //         new Linker(),
 //         new CsvToTable(),
 //         new XssFilter({
-//           isEnabledXssPrevention: this.growiRendererConfig.isEnabledXssPrevention,
-//           tagWhiteList: this.growiRendererConfig.tagWhiteList,
-//           attrWhiteList: this.growiRendererConfig.attrWhiteList,
+//           isEnabledXssPrevention: this.RendererConfig.isEnabledXssPrevention,
+//           tagWhiteList: this.RendererConfig.tagWhiteList,
+//           attrWhiteList: this.RendererConfig.attrWhiteList,
 //         }),
 //       ];
 //       this.postProcessors = [
@@ -109,8 +109,8 @@ const logger = loggerFactory('growi:util:GrowiRenderer');
 //       new EmojiConfigurer(),
 //       new MathJaxConfigurer(),
 //       new DrawioViewerConfigurer(),
-//       new PlantUMLConfigurer(this.growiRendererConfig),
-//       new BlockdiagConfigurer(this.growiRendererConfig),
+//       new PlantUMLConfigurer(this.RendererConfig),
+//       new BlockdiagConfigurer(this.RendererConfig),
 //     ];
 
 //     if (this.pagePath != null) {
@@ -165,7 +165,7 @@ const logger = loggerFactory('growi:util:GrowiRenderer');
 //   }
 
 //   codeRenderer(code, langExt) {
-//     const noborder = (!this.growiRendererConfig.highlightJsStyleBorder) ? 'hljs-no-border' : '';
+//     const noborder = (!this.RendererConfig.highlightJsStyleBorder) ? 'hljs-no-border' : '';
 
 //     let citeTag = '';
 //     let hljsLang = 'plaintext';
@@ -208,12 +208,10 @@ const logger = loggerFactory('growi:util:GrowiRenderer');
 export type RendererOptions = Partial<ReactMarkdownOptions>;
 
 export interface ReactMarkdownOptionsGenerator {
-  (growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings): RendererOptions
+  (config: RendererConfig): RendererOptions
 }
 
-const generateCommonOptions: ReactMarkdownOptionsGenerator = (
-    growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings,
-): RendererOptions => {
+const generateCommonOptions: ReactMarkdownOptionsGenerator = (config: RendererConfig): RendererOptions => {
   return {
     remarkPlugins: [gfm],
     rehypePlugins: [slug],
@@ -223,11 +221,9 @@ const generateCommonOptions: ReactMarkdownOptionsGenerator = (
   };
 };
 
-export const generateViewOptions: ReactMarkdownOptionsGenerator = (
-    growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings,
-): RendererOptions => {
+export const generateViewOptions: ReactMarkdownOptionsGenerator = (config: RendererConfig): RendererOptions => {
 
-  const options = generateCommonOptions(growiRendererConfig, rendererSettings);
+  const options = generateCommonOptions(config);
 
   const { remarkPlugins, rehypePlugins, components } = options;
 
@@ -235,7 +231,7 @@ export const generateViewOptions: ReactMarkdownOptionsGenerator = (
   if (remarkPlugins != null) {
     remarkPlugins.push(footnotes);
     remarkPlugins.push(emoji);
-    if (rendererSettings.isEnabledLinebreaks) {
+    if (config.isEnabledLinebreaks) {
       remarkPlugins.push(breaks);
     }
   }
@@ -271,10 +267,8 @@ export const generateViewOptions: ReactMarkdownOptionsGenerator = (
   return options;
 };
 
-export const generatePreviewOptions: ReactMarkdownOptionsGenerator = (
-    growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings,
-): RendererOptions => {
-  const options = generateCommonOptions(growiRendererConfig, rendererSettings);
+export const generatePreviewOptions: ReactMarkdownOptionsGenerator = (config: RendererConfig): RendererOptions => {
+  const options = generateCommonOptions(config);
 
   // // Add configurers for preview
   // renderer.addConfigurers([
@@ -289,10 +283,8 @@ export const generatePreviewOptions: ReactMarkdownOptionsGenerator = (
   return options;
 };
 
-export const generateCommentPreviewOptions: ReactMarkdownOptionsGenerator = (
-    growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings,
-): RendererOptions => {
-  const options = generateCommonOptions(growiRendererConfig, rendererSettings);
+export const generateCommentPreviewOptions: ReactMarkdownOptionsGenerator = (config: RendererConfig): RendererOptions => {
+  const options = generateCommonOptions(config);
 
   // renderer.addConfigurers([
   //   new TableConfigurer(),
@@ -304,10 +296,8 @@ export const generateCommentPreviewOptions: ReactMarkdownOptionsGenerator = (
   return options;
 };
 
-export const generateOthersOptions: ReactMarkdownOptionsGenerator = (
-    growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings,
-): RendererOptions => {
-  const options = generateCommonOptions(growiRendererConfig, rendererSettings);
+export const generateOthersOptions: ReactMarkdownOptionsGenerator = (config: RendererConfig): RendererOptions => {
+  const options = generateCommonOptions(config);
 
   // renderer.addConfigurers([
   //   new TableConfigurer(),

packages/app/src/stores/context.tsx

@@ -6,7 +6,7 @@ import useSWRImmutable from 'swr/immutable';
 
 import { SupportedActionType } from '~/interfaces/activity';
 // import { CustomWindow } from '~/interfaces/global';
-import { GrowiRendererConfig } from '~/interfaces/services/renderer';
+import { RendererConfig } from '~/interfaces/services/renderer';
 import InterceptorManager from '~/services/interceptor-manager';
 
 import { TargetAndAncestors } from '../interfaces/page-listing-results';
@@ -214,7 +214,7 @@ export const useIsLatestRevision = (initialData?: boolean): SWRResponse<boolean,
   return useStaticSWR('isLatestRevision', initialData);
 };
 
-export const useGrowiRendererConfig = (initialData?: GrowiRendererConfig): SWRResponse<GrowiRendererConfig, any> => {
+export const useRendererConfig = (initialData?: RendererConfig): SWRResponse<RendererConfig, any> => {
   return useStaticSWR('growiRendererConfig', initialData);
 };
 

packages/app/src/stores/renderer.tsx

@@ -1,34 +1,27 @@
 import { Key, SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
-import { RendererSettings } from '~/interfaces/services/renderer';
 import {
   ReactMarkdownOptionsGenerator, RendererOptions,
   generateViewOptions, generatePreviewOptions, generateCommentPreviewOptions, generateOthersOptions,
-} from '~/services/renderer/growi-renderer';
-import { useStaticSWR } from '~/stores/use-static-swr';
+} from '~/services/renderer/renderer';
 
-import { useCurrentPagePath, useGrowiRendererConfig } from './context';
-
-export const useRendererSettings = (initialData?: RendererSettings): SWRResponse<RendererSettings, Error> => {
-  return useStaticSWR('rendererSettings', initialData);
-};
+import { useRendererConfig } from './context';
 
 // The base hook with common processes
 const _useOptionsBase = (rendererId: string, generator: ReactMarkdownOptionsGenerator): SWRResponse<RendererOptions, Error> => {
-  const { data: rendererSettings } = useRendererSettings();
-  const { data: growiRendererConfig } = useGrowiRendererConfig();
+  const { data: rendererConfig } = useRendererConfig();
 
-  const isAllDataValid = rendererSettings != null && growiRendererConfig != null;
+  const isAllDataValid = rendererConfig != null;
 
   const key = isAllDataValid
-    ? [rendererId, rendererSettings, growiRendererConfig]
+    ? [rendererId, rendererConfig]
     : null;
 
   const swrResult = useSWRImmutable<RendererOptions, Error>(key);
 
   if (isAllDataValid && swrResult.data == null) {
-    swrResult.mutate(generator(growiRendererConfig, rendererSettings));
+    swrResult.mutate(generator(rendererConfig));
   }
 
   // call useSWRImmutable again to foce to update cache