refactor TableOfContents

packages/app/src/components/Page/PageContents.tsx

@@ -1,6 +1,4 @@
-import React, {
-  useCallback, useEffect, useRef,
-} from 'react';
+import React, { useEffect } from 'react';
 
 import { pagePathUtils } from '@growi/core';
 import { useTranslation } from 'next-i18next';
@@ -32,14 +30,6 @@ const logger = loggerFactory('growi:Page');
 export const PageContents = (): JSX.Element => {
   const { t } = useTranslation();
 
-  // Pass tocRef to generateViewOptions (=> rehypePlugin => customizeTOC) to call mutateCurrentPageTocNode when tocRef.current changes.
-  // The toc node passed by customizeTOC is assigned to tocRef.current.
-  const tocRef = useRef<HtmlElementNode>();
-
-  const storeTocNodeHandler = useCallback((toc: HtmlElementNode) => {
-    tocRef.current = toc;
-  }, []);
-
   const { data: currentPathname } = useCurrentPathname();
   const isSharedPage = pagePathUtils.isSharedPage(currentPathname ?? '');
 
@@ -47,9 +37,11 @@ export const PageContents = (): JSX.Element => {
   const { mutate: mutateEditingMarkdown } = useEditingMarkdown();
   const { data: isGuestUser } = useIsGuestUser();
   const { data: isMobile } = useIsMobile();
-  const { data: rendererOptions, mutate: mutateRendererOptions } = useViewOptions(storeTocNodeHandler);
   const { mutate: mutateCurrentPageTocNode } = useCurrentPageTocNode();
 
+  const { data: rendererOptions, mutate: mutateRendererOptions } = useViewOptions((toc: HtmlElementNode) => {
+    mutateCurrentPageTocNode(toc);
+  });
 
   // register to facade
   useEffect(() => {
@@ -62,12 +54,6 @@ export const PageContents = (): JSX.Element => {
     });
   }, [mutateRendererOptions]);
 
-  useEffect(() => {
-    mutateCurrentPageTocNode(tocRef.current);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mutateCurrentPageTocNode, tocRef.current]); // include tocRef.current to call mutateCurrentPageTocNode when tocRef.current changes
-
-
   useHandsontableModalLauncherForView({
     onSaveSuccess: (newMarkdown) => {
       toastSuccess(t('toaster.save_succeeded'));

packages/app/src/components/TableOfContents.tsx

@@ -21,8 +21,6 @@ const TableOfContents = (): JSX.Element => {
 
   const isUserPage = currentPagePath != null && _isUserPage(currentPagePath);
 
-  // const [tocHtml, setTocHtml] = useState('');
-
   const { data: rendererOptions } = useTocOptions();
 
   const calcViewHeight = useCallback(() => {

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

@@ -220,6 +220,7 @@ export const generateTocOptions = (config: RendererConfig, tocNode: HtmlElementN
   if (config.isEnabledXssPrevention) {
     verifySanitizePlugin(options);
   }
+
   return options;
 };
 

packages/app/src/stores/renderer.tsx

@@ -45,7 +45,7 @@ export const useTocOptions = (): SWRResponse<RendererOptions, Error> => {
   const { data: rendererConfig } = useRendererConfig();
   const { data: tocNode } = useCurrentPageTocNode();
 
-  const isAllDataValid = rendererConfig != null;
+  const isAllDataValid = currentPagePath != null && rendererConfig != null && tocNode != null;
 
   const key = isAllDataValid
     ? ['tocOptions', currentPagePath, tocNode, rendererConfig]
@@ -54,6 +54,9 @@ export const useTocOptions = (): SWRResponse<RendererOptions, Error> => {
   return useSWRImmutable<RendererOptions, Error>(
     key,
     (rendererId, path, tocNode, rendererConfig) => generateTocOptions(rendererConfig, tocNode),
+    {
+      fallbackData: isAllDataValid ? generateTocOptions(rendererConfig, tocNode) : undefined,
+    },
   );
 };