create customize wrapper

packages/app/src/services/renderer/renderer.tsx

@@ -206,12 +206,8 @@ const logger = loggerFactory('growi:util:GrowiRenderer');
 
 export type RendererOptions = Partial<ReactMarkdownOptions>;
 
-export interface RendererOptionsCustomizer {
-  (options: RendererOptions): void
-}
-
 export interface ReactMarkdownOptionsGenerator {
-  (config: RendererConfig, customizer?: RendererOptionsCustomizer): RendererOptions
+  (config: RendererConfig): RendererOptions
 }
 
 const generateCommonOptions: ReactMarkdownOptionsGenerator = (config: RendererConfig): RendererOptions => {
@@ -224,7 +220,7 @@ const generateCommonOptions: ReactMarkdownOptionsGenerator = (config: RendererCo
   };
 };
 
-export const generateViewOptions: ReactMarkdownOptionsGenerator = (config: RendererConfig, customizer?: RendererOptionsCustomizer): RendererOptions => {
+export const generateViewOptions: ReactMarkdownOptionsGenerator = (config: RendererConfig): RendererOptions => {
 
   const options = generateCommonOptions(config);
 
@@ -238,11 +234,6 @@ export const generateViewOptions: ReactMarkdownOptionsGenerator = (config: Rende
       remarkPlugins.push(breaks);
     }
   }
-
-  if (customizer != null) {
-    // use rehype-toc and get toc node
-    customizer(options);
-  }
   // rehypePlugins.push([toc, {
   //   headings: ['h1', 'h2', 'h3'],
   //   customizeTOC: storeTocNode,
@@ -273,7 +264,7 @@ export const generateViewOptions: ReactMarkdownOptionsGenerator = (config: Rende
   return options;
 };
 
-export const generateTocOptions: ReactMarkdownOptionsGenerator = (config: RendererConfig, customizer?: RendererOptionsCustomizer): RendererOptions => {
+export const generateTocOptions: ReactMarkdownOptionsGenerator = (config: RendererConfig): RendererOptions => {
 
   const options = generateCommonOptions(config);
 
@@ -283,11 +274,6 @@ export const generateTocOptions: ReactMarkdownOptionsGenerator = (config: Render
   if (remarkPlugins != null) {
     remarkPlugins.push(emoji);
   }
-
-  if (customizer != null) {
-    // use rehype-toc and set toc node
-    customizer(options);
-  }
   // renderer.rehypePlugins.push([autoLinkHeadings, {
   //   behavior: 'append',
   // }]);

packages/app/src/stores/renderer.tsx

@@ -2,8 +2,8 @@ import toc, { HtmlElementNode } from 'rehype-toc';
 import { Key, SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
+import { RendererConfig } from '~/interfaces/services/renderer';
 import {
-  RendererOptionsCustomizer,
   ReactMarkdownOptionsGenerator, RendererOptions,
   generateViewOptions, generatePreviewOptions, generateCommentPreviewOptions, generateOthersOptions, generateTocOptions,
 } from '~/services/renderer/renderer';
@@ -13,7 +13,7 @@ import { useCurrentPageTocNode, useRendererConfig } from './context';
 
 // The base hook with common processes
 const _useOptionsBase = (
-    rendererId: string, generator: ReactMarkdownOptionsGenerator, customizer?: RendererOptionsCustomizer,
+    rendererId: string, generator: ReactMarkdownOptionsGenerator,
 ): SWRResponse<RendererOptions, Error> => {
   const { data: rendererConfig } = useRendererConfig();
 
@@ -26,7 +26,7 @@ const _useOptionsBase = (
   const swrResult = useSWRImmutable<RendererOptions, Error>(key);
 
   if (isAllDataValid && swrResult.data == null) {
-    swrResult.mutate(generator(rendererConfig, customizer));
+    swrResult.mutate(generator(rendererConfig));
   }
 
   // call useSWRImmutable again to foce to update cache
@@ -38,18 +38,21 @@ export const useViewOptions = (): SWRResponse<RendererOptions, Error> => {
 
   const { mutate: storeTocNode } = useCurrentPageTocNode();
 
-  const customizer = (options: RendererOptions) => {
+  // customize wrapper
+  const customizeViewOptions = (config: RendererConfig) => {
+    const options = generateViewOptions(config);
     const { rehypePlugins } = options;
-    // store toc node in global state
+    // store toc node
     if (rehypePlugins != null) {
       rehypePlugins.push([toc, {
         headings: ['h1', 'h2', 'h3'],
         customizeTOC: storeTocNode,
       }]);
     }
+    return options;
   };
 
-  return _useOptionsBase(key, generateViewOptions, customizer);
+  return _useOptionsBase(key, customizeViewOptions);
 };
 
 export const useTocOptions = (): SWRResponse<RendererOptions, Error> => {
@@ -57,7 +60,9 @@ export const useTocOptions = (): SWRResponse<RendererOptions, Error> => {
 
   const { data: tocNode } = useCurrentPageTocNode();
 
-  const customizer = (options: RendererOptions) => {
+  // customize wrapper
+  const customizeTocOptions = (config: RendererConfig) => {
+    const options = generateTocOptions(config);
     const { rehypePlugins } = options;
     // set toc node
     if (rehypePlugins != null) {
@@ -66,9 +71,10 @@ export const useTocOptions = (): SWRResponse<RendererOptions, Error> => {
         customizeTOC: () => tocNode,
       }]);
     }
+    return options;
   };
 
-  return _useOptionsBase(key, generateTocOptions, customizer);
+  return _useOptionsBase(key, customizeTocOptions);
 };
 
 export const usePreviewOptions = (): SWRResponse<RendererOptions, Error> => {