move customize method

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

@@ -1,5 +1,6 @@
 import { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
 import slug from 'rehype-slug';
+import toc, { HtmlElementNode } from 'rehype-toc';
 import breaks from 'remark-breaks';
 import emoji from 'remark-emoji';
 import footnotes from 'remark-footnotes';
@@ -264,6 +265,20 @@ export const generateViewOptions: ReactMarkdownOptionsGenerator = (config: Rende
   return options;
 };
 
+// customize wrapper
+export const customizeViewOptions = (config: RendererConfig, storeTocNode: (noder: HtmlElementNode) => void): RendererOptions => {
+  const options = generateViewOptions(config);
+  const { rehypePlugins } = options;
+  // store toc node
+  if (rehypePlugins != null) {
+    rehypePlugins.push([toc, {
+      headings: ['h1', 'h2', 'h3'],
+      customizeTOC: storeTocNode,
+    }]);
+  }
+  return options;
+};
+
 export const generateTocOptions: ReactMarkdownOptionsGenerator = (config: RendererConfig): RendererOptions => {
 
   const options = generateCommonOptions(config);
@@ -281,6 +296,20 @@ export const generateTocOptions: ReactMarkdownOptionsGenerator = (config: Render
   return options;
 };
 
+// customize wrapper
+export const customizeTocOptions = (config: RendererConfig, tocNode: HtmlElementNode | undefined): RendererOptions => {
+  const options = generateTocOptions(config);
+  const { rehypePlugins } = options;
+  // set toc node
+  if (rehypePlugins != null) {
+    rehypePlugins.push([toc, {
+      headings: ['h1', 'h2', 'h3'],
+      customizeTOC: () => tocNode,
+    }]);
+  }
+  return options;
+};
+
 export const generatePreviewOptions: ReactMarkdownOptionsGenerator = (config: RendererConfig): RendererOptions => {
   const options = generateCommonOptions(config);
 

packages/app/src/stores/renderer.tsx

@@ -1,11 +1,10 @@
-import toc, { HtmlElementNode } from 'rehype-toc';
 import { Key, SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
-import { RendererConfig } from '~/interfaces/services/renderer';
 import {
   ReactMarkdownOptionsGenerator, RendererOptions,
-  generateViewOptions, generatePreviewOptions, generateCommentPreviewOptions, generateOthersOptions, generateTocOptions,
+  generatePreviewOptions, generateCommentPreviewOptions, generateOthersOptions,
+  customizeViewOptions, customizeTocOptions,
 } from '~/services/renderer/renderer';
 
 
@@ -38,21 +37,7 @@ export const useViewOptions = (): SWRResponse<RendererOptions, Error> => {
 
   const { mutate: storeTocNode } = useCurrentPageTocNode();
 
-  // customize wrapper
-  const customizeViewOptions = (config: RendererConfig) => {
-    const options = generateViewOptions(config);
-    const { rehypePlugins } = options;
-    // store toc node
-    if (rehypePlugins != null) {
-      rehypePlugins.push([toc, {
-        headings: ['h1', 'h2', 'h3'],
-        customizeTOC: storeTocNode,
-      }]);
-    }
-    return options;
-  };
-
-  return _useOptionsBase(key, customizeViewOptions);
+  return _useOptionsBase(key, config => customizeViewOptions(config, storeTocNode));
 };
 
 export const useTocOptions = (): SWRResponse<RendererOptions, Error> => {
@@ -60,21 +45,7 @@ export const useTocOptions = (): SWRResponse<RendererOptions, Error> => {
 
   const { data: tocNode } = useCurrentPageTocNode();
 
-  // customize wrapper
-  const customizeTocOptions = (config: RendererConfig) => {
-    const options = generateTocOptions(config);
-    const { rehypePlugins } = options;
-    // set toc node
-    if (rehypePlugins != null) {
-      rehypePlugins.push([toc, {
-        headings: ['h1', 'h2', 'h3'],
-        customizeTOC: () => tocNode,
-      }]);
-    }
-    return options;
-  };
-
-  return _useOptionsBase(key, customizeTocOptions);
+  return _useOptionsBase(key, config => customizeTocOptions(config, tocNode));
 };
 
 export const usePreviewOptions = (): SWRResponse<RendererOptions, Error> => {