Merge branch 'support/apply-nextjs-2' into imprv/100507-refactor-Draft.jsx

packages/app/src/client/app.jsx

@@ -10,7 +10,7 @@ import { Provider } from 'unstated';
 import ContextExtractor from '~/client/services/ContextExtractor';
 import EditorContainer from '~/client/services/EditorContainer';
 import PageContainer from '~/client/services/PageContainer';
-import IdenticalPathPage from '~/components/IdenticalPathPage';
+import { IdenticalPathPage } from '~/components/IdenticalPathPage';
 import PrivateLegacyPages from '~/components/PrivateLegacyPages';
 import loggerFactory from '~/utils/logger';
 import { swrGlobalConfiguration } from '~/utils/swr-utils';
@@ -26,7 +26,7 @@ import MyDraftList from '../components/MyDraftList/MyDraftList';
 import GrowiContextualSubNavigation from '../components/Navbar/GrowiContextualSubNavigation';
 import GrowiSubNavigationSwitcher from '../components/Navbar/GrowiSubNavigationSwitcher';
 import NotFoundPage from '../components/NotFoundPage';
-import Page from '../components/Page';
+import { Page } from '../components/Page';
 import DisplaySwitcher from '../components/Page/DisplaySwitcher';
 import RedirectedAlert from '../components/Page/RedirectedAlert';
 import ShareLinkAlert from '../components/Page/ShareLinkAlert';

packages/app/src/client/base.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import EventEmitter from 'events';
 
 import AppContainer from '~/client/services/AppContainer';
-import SocketIoContainer from '~/client/services/SocketIoContainer';
 import { DescendantsPageListModal } from '~/components/DescendantsPageListModal';
 import PutbackPageModal from '~/components/PutbackPageModal';
 import ShortcutsModal from '~/components/ShortcutsModal';
@@ -14,8 +13,8 @@ import loggerFactory from '~/utils/logger';
 
 import EmptyTrashModal from '../components/EmptyTrashModal';
 import HotkeysManager from '../components/Hotkeys/HotkeysManager';
-import GrowiNavbar from '../components/Navbar/GrowiNavbar';
-import GrowiNavbarBottom from '../components/Navbar/GrowiNavbarBottom';
+import { GrowiNavbar } from '../components/Navbar/GrowiNavbar';
+import { GrowiNavbarBottom } from '../components/Navbar/GrowiNavbarBottom';
 import PageAccessoriesModal from '../components/PageAccessoriesModal';
 import PageCreateModal from '../components/PageCreateModal';
 import PageDeleteModal from '../components/PageDeleteModal';
@@ -40,8 +39,6 @@ window.interceptorManager = new InterceptorManager();
 
 // create unstated container instance
 const appContainer = new AppContainer();
-// eslint-disable-next-line no-unused-vars
-const socketIoContainer = new SocketIoContainer(appContainer);
 
 appContainer.initApp();
 

packages/app/src/client/legacy/crowi.js

@@ -1,8 +1,6 @@
 /* eslint-disable react/jsx-filename-extension */
 require('jquery.cookie');
 
-require('./thirdparty-js/waves');
-
 const Crowi = {};
 
 if (!window) {

packages/app/src/client/services/AdminSocketIoContainer.js

@@ -1,25 +1,2 @@
-import SocketIoContainer from './SocketIoContainer';
-import { toastError } from '../util/apiNotification';
 
-/**
- * A subclass of SocketIoContainer for /admin namespace
- */
-export default class AdminSocketIoContainer extends SocketIoContainer {
-
-  constructor(appContainer) {
-    super(appContainer, '/admin');
-
-    // show toastr
-    this.socket.on('error', (error) => {
-      toastError(new Error(error));
-    });
-  }
-
-  /**
-   * Workaround for the mangling in production build to break constructor.name
-   */
-  static getClassName() {
-    return 'AdminSocketIoContainer';
-  }
-
-}
+export default class AdminSocketIoContainer {}

packages/app/src/client/services/AppContainer.js

@@ -1,8 +1,5 @@
 import { Container } from 'unstated';
 
-
-import GrowiRenderer, { generatePreviewRenderer } from '~/services/renderer/growi-renderer';
-
 import { i18nFactory } from '../util/i18n';
 
 /**
@@ -59,17 +56,19 @@ export default class AppContainer extends Container {
   }
 
   injectToWindow() {
-    window.appContainer = this;
+    // for fix lint error
+
+    // window.appContainer = this;
 
-    const growiRenderer = new GrowiRenderer(this.getConfig());
-    growiRenderer.init();
+    // const growiRenderer = new GrowiRenderer(this.getConfig());
+    // growiRenderer.init();
 
-    window.growiRenderer = growiRenderer;
+    // window.growiRenderer = growiRenderer;
 
-    // backward compatibility
-    window.crowi = this;
-    window.crowiRenderer = window.growiRenderer;
-    window.crowiPlugin = window.growiPlugin;
+    // // backward compatibility
+    // window.crowi = this;
+    // window.crowiRenderer = window.growiRenderer;
+    // window.crowiPlugin = window.growiPlugin;
   }
 
   getConfig() {

packages/app/src/components/Page/RevisionLoader.jsx

@@ -134,7 +134,6 @@ RevisionLoader.propTypes = {
 
 const RevisionLoaderWrapperFC = (props) => {
   const { t } = useTranslation();
-
   return <RevisionLoader t={t} {...props} />;
 };
 

packages/app/src/components/PageAlert/PageGrantAlert.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
 import { useSWRxCurrentPage } from '~/stores/page';
 import { useXss } from '~/stores/xss';
-import { useTranslation } from 'react-i18next';
 
 
 export const PageGrantAlert = (): JSX.Element => {
@@ -9,32 +11,32 @@ export const PageGrantAlert = (): JSX.Element => {
   const { data: pageData } = useSWRxCurrentPage();
   const { data: xss } = useXss();
 
-  if ( pageData == null || pageData.grant == null || pageData.grant == 1 || xss == null) {
-    return <></>
+  if (pageData == null || pageData.grant == null || pageData.grant === 1 || xss == null) {
+    return <></>;
   }
 
   const renderAlertContent = () => {
     const getGrantLabel = () => {
-      if (pageData.grant == 2) {
+      if (pageData.grant === 2) {
         return (
           <>
             <i className="icon-fw icon-link"></i><strong>{t('Anyone with the link')} only</strong>
           </>
-        )
+        );
       }
-      if (pageData.grant == 4) {
+      if (pageData.grant === 4) {
         return (
           <>
             <i className="icon-fw icon-lock"></i><strong>{t('Only me')} only</strong>
           </>
-        )
+        );
       }
-      if (pageData.grant == 5) {
+      if (pageData.grant === 5) {
         return (
           <>
             <i className="icon-fw icon-organization"></i><strong>{xss.process(pageData.grantedGroup.name)} only</strong>
           </>
-        )
+        );
       }
     };
     return (
@@ -50,4 +52,4 @@ export const PageGrantAlert = (): JSX.Element => {
       {renderAlertContent()}
     </p>
   );
-}
+};

packages/app/src/components/PageAlert/PageStaleAlert.tsx

@@ -1,9 +1,10 @@
-import { useIsEnabledStaleNotification } from '../../stores/context'
-import { useSWRxCurrentPage, useSWRxPageInfo } from '../../stores/page'
 import { useTranslation } from 'react-i18next';
 
+import { useIsEnabledStaleNotification } from '../../stores/context';
+import { useSWRxCurrentPage, useSWRxPageInfo } from '../../stores/page';
+
 export const PageStaleAlert = ():JSX.Element => {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   const { data: isEnabledStaleNotification } = useIsEnabledStaleNotification();
 
   // Todo: determine if it should fetch or not like useSWRxPageInfo below after https://redmine.weseek.co.jp/issues/96788
@@ -13,23 +14,23 @@ export const PageStaleAlert = ():JSX.Element => {
   const contentAge = pageInfo?.contentAge;
 
   if (!isEnabledStaleNotification) {
-    return <></>
+    return <></>;
   }
 
-  if( pageInfo == null || contentAge == null || contentAge === 0) {
-    return <></>
+  if (pageInfo == null || contentAge == null || contentAge === 0) {
+    return <></>;
   }
 
   let alertClass;
   switch (contentAge) {
     case 1:
-      alertClass = "alert-info";
+      alertClass = 'alert-info';
       break;
     case 2:
-      alertClass = "alert-warning";
+      alertClass = 'alert-warning';
       break;
     default:
-      alertClass = "alert-danger";
+      alertClass = 'alert-danger';
   }
 
   return (
@@ -37,5 +38,5 @@ export const PageStaleAlert = ():JSX.Element => {
       <i className="icon-fw icon-hourglass"></i>
       <strong>{ t('page_page.notice.stale', { count: pageInfo.contentAge }) }</strong>
     </div>
-  )
-}
+  );
+};

packages/app/src/components/PageComment.tsx

@@ -8,7 +8,7 @@ import { Button } from 'reactstrap';
 import AppContainer from '~/client/services/AppContainer';
 import { toastError } from '~/client/util/apiNotification';
 import { apiPost } from '~/client/util/apiv1-client';
-import { useCommentPreviewRenderer } from '~/stores/renderer';
+import { useCommentPreviewOptions } from '~/stores/renderer';
 
 import { ICommentHasId, ICommentHasIdList } from '../interfaces/comment';
 import { useSWRxPageComment } from '../stores/comment';
@@ -36,7 +36,7 @@ const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
   } = props;
 
   const { data: comments, mutate } = useSWRxPageComment(pageId);
-  const { data: growiRenderer } = useCommentPreviewRenderer();
+  const { data: rendererOptions } = useCommentPreviewOptions();
 
   const [commentToBeDeleted, setCommentToBeDeleted] = useState<ICommentHasId | null>(null);
   const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState<boolean>(false);
@@ -112,7 +112,7 @@ const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
 
   const generateCommentInnerElement = (comment: ICommentHasId) => (
     <Comment
-      growiRenderer={growiRenderer}
+      rendererOptions={rendererOptions}
       deleteBtnClicked={onClickDeleteButton}
       comment={comment}
       onComment={mutate}
@@ -124,7 +124,7 @@ const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
     <ReplayComments
       replyList={replyComments}
       deleteBtnClicked={onClickDeleteButton}
-      growiRenderer={growiRenderer}
+      rendererOptions={rendererOptions}
       isReadOnly={isReadOnly}
     />
   );
@@ -144,7 +144,7 @@ const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
     return <></>;
   }
 
-  if (growiRenderer == null) {
+  if (rendererOptions == null) {
     return <></>;
   }
 
@@ -191,7 +191,7 @@ const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
                     {/* display reply editor */}
                     {(!isReadOnly && showEditorIds.has(comment._id)) && (
                       <CommentEditor
-                        growiRenderer={growiRenderer}
+                        rendererOptions={rendererOptions}
                         replyTo={comment._id}
                         onCancelButtonClicked={() => {
                           removeShowEditorId(comment._id);

packages/app/src/components/PageComment/Comment.jsx

@@ -19,6 +19,7 @@ import Username from '../User/Username';
 import CommentControl from './CommentControl';
 import CommentEditor from './CommentEditor';
 
+import { RendererOptions } from '~/services/renderer/renderer';
 
 /**
  *
@@ -132,17 +133,17 @@ class Comment extends React.PureComponent {
 
   async renderHtml() {
 
-    const { growiRenderer, appContainer } = this.props;
+    const { rendererOptions, appContainer } = this.props;
     const { interceptorManager } = window;
     const context = this.currentRenderingContext;
 
     await interceptorManager.process('preRenderComment', context);
     await interceptorManager.process('prePreProcess', context);
-    context.markdown = await growiRenderer.preProcess(context.markdown, context);
+    context.markdown = await rendererOptions.preProcess(context.markdown, context);
     await interceptorManager.process('postPreProcess', context);
-    context.parsedHTML = await growiRenderer.process(context.markdown, context);
+    context.parsedHTML = await rendererOptions.process(context.markdown, context);
     await interceptorManager.process('prePostProcess', context);
-    context.parsedHTML = await growiRenderer.postProcess(context.parsedHTML, context);
+    context.parsedHTML = await rendererOptions.postProcess(context.parsedHTML, context);
     await interceptorManager.process('postPostProcess', context);
     await interceptorManager.process('preRenderCommentHtml', context);
     this.setState({ html: context.parsedHTML });
@@ -173,7 +174,7 @@ class Comment extends React.PureComponent {
       <React.Fragment>
         {(this.state.isReEdit && !isReadOnly) ? (
           <CommentEditor
-            growiRenderer={this.props.growiRenderer}
+            rendererOptions={this.props.rendererOptions}
             currentCommentId={commentId}
             commentBody={comment.comment}
             replyTo={undefined}
@@ -236,7 +237,7 @@ Comment.propTypes = {
 
   comment: PropTypes.object.isRequired,
   isReadOnly: PropTypes.bool.isRequired,
-  growiRenderer: PropTypes.object.isRequired,
+  rendererOptions: PropTypes.instanceOf(RendererOptions).isRequired,
   deleteBtnClicked: PropTypes.func.isRequired,
   currentUser: PropTypes.object,
   onComment: PropTypes.func,

packages/app/src/components/PageComment/CommentEditor.tsx

@@ -15,7 +15,7 @@ import PageContainer from '~/client/services/PageContainer';
 import { apiPostForm } from '~/client/util/apiv1-client';
 import { CustomWindow } from '~/interfaces/global';
 import { IInterceptorManager } from '~/interfaces/interceptor-manager';
-import GrowiRenderer from '~/services/renderer/growi-renderer';
+import { RendererOptions } from '~/services/renderer/renderer';
 import { useSWRxPageComment } from '~/stores/comment';
 import {
   useCurrentPagePath, useCurrentPageId, useCurrentUser, useRevisionId,
@@ -49,7 +49,7 @@ const navTabMapping = {
 type PropsType = {
   appContainer: AppContainer,
 
-  growiRenderer: GrowiRenderer,
+  rendererOptions: RendererOptions,
   isForNewComment?: boolean,
   replyTo?: string,
   currentCommentId?: string,
@@ -68,7 +68,7 @@ type EditorRef = {
 const CommentEditor = (props: PropsType): JSX.Element => {
 
   const {
-    appContainer, growiRenderer, isForNewComment, replyTo,
+    appContainer, rendererOptions, isForNewComment, replyTo,
     currentCommentId, commentBody, commentCreator, onCancelButtonClicked, onCommentButtonClicked,
   } = props;
   const { data: currentUser } = useCurrentUser();
@@ -104,16 +104,16 @@ const CommentEditor = (props: PropsType): JSX.Element => {
     interceptorManager.process('preRenderCommnetPreview', context)
       .then(() => { return interceptorManager.process('prePreProcess', context) })
       .then(() => {
-        context.markdown = growiRenderer.preProcess(context.markdown, context);
+        context.markdown = rendererOptions.preProcess(context.markdown, context);
       })
       .then(() => { return interceptorManager.process('postPreProcess', context) })
       .then(() => {
-        const parsedHTML = growiRenderer.process(context.markdown, context);
+        const parsedHTML = rendererOptions.process(context.markdown, context);
         context.parsedHTML = parsedHTML;
       })
       .then(() => { return interceptorManager.process('prePostProcess', context) })
       .then(() => {
-        context.parsedHTML = growiRenderer.postProcess(context.parsedHTML, context);
+        context.parsedHTML = rendererOptions.postProcess(context.parsedHTML, context);
       })
       .then(() => { return interceptorManager.process('postPostProcess', context) })
       .then(() => { return interceptorManager.process('preRenderCommentPreviewHtml', context) })
@@ -122,7 +122,7 @@ const CommentEditor = (props: PropsType): JSX.Element => {
       })
       // process interceptors for post rendering
       .then(() => { return interceptorManager.process('postRenderCommentPreviewHtml', context) });
-  }, [growiRenderer]);
+  }, [rendererOptions]);
 
   const handleSelect = useCallback((activeTab: string) => {
     setActiveTab(activeTab);

packages/app/src/components/PageComment/CommentEditorLazyRenderer.tsx

@@ -5,7 +5,7 @@ import { useSWRxPageComment } from '../../stores/comment';
 import AppContainer from '~/client/services/AppContainer';
 
 import CommentEditor from './CommentEditor';
-import { useCommentPreviewRenderer } from '~/stores/renderer';
+import { useCommentPreviewOptions } from '~/stores/renderer';
 
 type Props = {
   appContainer: AppContainer,
@@ -16,9 +16,9 @@ const CommentEditorLazyRenderer:FC<Props> = (props:Props):JSX.Element => {
 
   const { pageId } = props;
   const { mutate } = useSWRxPageComment(pageId);
-  const { data: growiRenderer } = useCommentPreviewRenderer();
+  const { data: rendererOptions } = useCommentPreviewOptions();
 
-  if (growiRenderer == null) {
+  if (rendererOptions == null) {
     return <></>;
   }
 
@@ -27,7 +27,7 @@ const CommentEditorLazyRenderer:FC<Props> = (props:Props):JSX.Element => {
   return (
     <CommentEditor
       appContainer={appContainer}
-      growiRenderer={growiRenderer}
+      rendererOptions={rendererOptions}
       replyTo={undefined}
       onCommentButtonClicked={mutate}
       isForNewComment

packages/app/src/components/PageComment/ReplayComments.jsx

@@ -10,6 +10,8 @@ import Comment from './Comment';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
 
+import { RendererOptions } from '~/services/renderer/renderer';
+
 class ReplayComments extends React.PureComponent {
 
   constructor() {
@@ -32,7 +34,7 @@ class ReplayComments extends React.PureComponent {
         <Comment
           comment={reply}
           deleteBtnClicked={this.props.deleteBtnClicked}
-          growiRenderer={this.props.growiRenderer}
+          rendererOptions={this.props.rendererOptions}
           isReadOnly={this.props.isReadOnly}
         />
       </div>
@@ -107,7 +109,7 @@ ReplayComments.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 
-  growiRenderer: PropTypes.object.isRequired,
+  rendererOptions: PropTypes.instanceOf(RendererOptions).isRequired,
   deleteBtnClicked: PropTypes.func.isRequired,
   isReadOnly: PropTypes.bool.isRequired,
   replyList: PropTypes.array,

packages/app/src/components/PageEditor.tsx

@@ -20,7 +20,7 @@ import {
   useCurrentIndentSize, useSWRxSlackChannels, useIsSlackEnabled, useIsTextlintEnabled, usePageTagsForEditors,
   useIsEnabledUnsavedWarning,
 } from '~/stores/editor';
-import { usePreviewRenderer } from '~/stores/renderer';
+import { usePreviewOptions } from '~/stores/renderer';
 import {
   EditorMode,
   useEditorMode, useIsMobile, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
@@ -100,7 +100,7 @@ const PageEditor = (props: Props): JSX.Element => {
   const { data: indentSize, mutate: mutateCurrentIndentSize } = useCurrentIndentSize();
   const { mutate: mutateIsEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
 
-  const { data: growiRenderer } = usePreviewRenderer();
+  const { data: rendererOptions } = usePreviewOptions();
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const [markdown, setMarkdown] = useState<string>(pageContainer.state.markdown!);
@@ -392,7 +392,7 @@ const PageEditor = (props: Props): JSX.Element => {
     return <></>;
   }
 
-  if (growiRenderer == null) {
+  if (rendererOptions == null) {
     return <></>;
   }
 
@@ -432,9 +432,9 @@ const PageEditor = (props: Props): JSX.Element => {
       <div className="d-none d-lg-block page-editor-preview-container flex-grow-1 flex-basis-0 mw-0">
         <Preview
           markdown={markdown}
-          growiRenderer={growiRenderer}
+          rendererOptions={rendererOptions}
           ref={previewRef}
-          isMathJaxEnabled={isMathJaxEnabled}
+          // isMathJaxEnabled={isMathJaxEnabled}
           renderMathJaxOnInit={false}
           onScroll={offset => scrollEditorByPreviewScrollWithThrottle(offset)}
         />

packages/app/src/components/PageEditor/Preview.tsx

@@ -5,7 +5,7 @@ import React, {
 
 import AppContainer from '~/client/services/AppContainer';
 import InterceptorManager from '~/services/interceptor-manager';
-import GrowiRenderer from '~/services/renderer/growi-renderer';
+import { RendererOptions } from '~/services/renderer/renderer';
 import { useEditorSettings } from '~/stores/editor';
 
 import RevisionBody from '../Page/RevisionBody';
@@ -16,7 +16,7 @@ declare const interceptorManager: InterceptorManager;
 
 
 type Props = {
-  growiRenderer: GrowiRenderer,
+  rendererOptions: RendererOptions,
   markdown?: string,
   pagePath?: string,
   renderMathJaxOnInit?: boolean,
@@ -28,7 +28,7 @@ type UnstatedProps = Props & { appContainer: AppContainer };
 const Preview = React.forwardRef((props: UnstatedProps, ref: RefObject<HTMLDivElement>): JSX.Element => {
 
   const {
-    growiRenderer,
+    rendererOptions,
     markdown, pagePath,
   } = props;
 
@@ -50,17 +50,17 @@ const Preview = React.forwardRef((props: UnstatedProps, ref: RefObject<HTMLDivEl
     if (interceptorManager != null) {
       await interceptorManager.process('preRenderPreview', context);
       await interceptorManager.process('prePreProcess', context);
-      context.markdown = growiRenderer.preProcess(context.markdown, context);
+      context.markdown = rendererOptions.preProcess(context.markdown, context);
       await interceptorManager.process('postPreProcess', context);
-      context.parsedHTML = growiRenderer.process(context.markdown, context);
+      context.parsedHTML = rendererOptions.process(context.markdown, context);
       await interceptorManager.process('prePostProcess', context);
-      context.parsedHTML = growiRenderer.postProcess(context.parsedHTML, context);
+      context.parsedHTML = rendererOptions.postProcess(context.parsedHTML, context);
       await interceptorManager.process('postPostProcess', context);
       await interceptorManager.process('preRenderPreviewHtml', context);
     }
 
     setHtml(context.parsedHTML ?? '');
-  }, [context, growiRenderer]);
+  }, [context, rendererOptions]);
 
   useEffect(() => {
     if (markdown == null) {

packages/app/src/components/PageTimeline.jsx

@@ -6,8 +6,8 @@ import { useTranslation } from 'next-i18next';
 import AppContainer from '~/client/services/AppContainer';
 import PageContainer from '~/client/services/PageContainer';
 import { apiv3Get } from '~/client/util/apiv3-client';
-import GrowiRenderer from '~/services/renderer/growi-renderer';
-import { useTimelineRenderer } from '~/stores/renderer';
+import { RendererOptions } from '~/services/renderer/renderer';
+import { useTimelineOptions } from '~/stores/renderer';
 
 import RevisionLoader from './Page/RevisionLoader';
 import PaginationWrapper from './PaginationWrapper';
@@ -50,9 +50,9 @@ class PageTimeline extends React.Component {
   }
 
   UNSAFE_componentWillMount() {
-    const { growiRenderer } = this.props;
+    const { rendererOptions } = this.props;
     // initialize GrowiRenderer
-    this.growiRenderer = growiRenderer;
+    this.rendererOptions = rendererOptions;
   }
 
   async componentDidMount() {
@@ -85,7 +85,7 @@ class PageTimeline extends React.Component {
                 <div className="card-body">
                   <RevisionLoader
                     lazy
-                    growiRenderer={this.growiRenderer}
+                    rendererOptions={this.rendererOptions}
                     pageId={page._id}
                     pagePath={page.path}
                     revisionId={page.revision}
@@ -112,20 +112,20 @@ class PageTimeline extends React.Component {
 PageTimeline.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  growiRenderer: PropTypes.instanceOf(GrowiRenderer).isRequired,
+  rendererOptions: PropTypes.instanceOf(RendererOptions).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   pages: PropTypes.arrayOf(PropTypes.object),
 };
 
 const PageTimelineWrapperFC = (props) => {
   const { t } = useTranslation();
-  const { data: growiRenderer } = useTimelineRenderer();
+  const { data: rendererOptions } = useTimelineOptions();
 
-  if (growiRenderer == null) {
+  if (rendererOptions == null) {
     return <></>;
   }
 
-  return <PageTimeline t={t} growiRenderer={growiRenderer} {...props} />;
+  return <PageTimeline t={t} rendererOptions={rendererOptions} {...props} />;
 };
 
 /**