refactor to use RendererOptions

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

@@ -1,12 +1,11 @@
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 import { Waypoint } from 'react-waypoint';
 
 import { apiv3Get } from '~/client/util/apiv3-client';
-import GrowiRenderer from '~/services/renderer/growi-renderer';
-import { useViewRenderer } from '~/stores/renderer';
+import { RendererOptions } from '~/services/renderer/renderer';
 import loggerFactory from '~/utils/logger';
 
 import RevisionRenderer from './RevisionRenderer';
@@ -110,7 +109,7 @@ class RevisionLoader extends React.Component {
 
     return (
       <RevisionRenderer
-        growiRenderer={this.props.growiRenderer}
+        rendererOptions={this.props.rendererOptions}
         markdown={markdown}
         pagePath={this.props.pagePath}
         highlightKeywords={this.props.highlightKeywords}
@@ -124,7 +123,7 @@ class RevisionLoader extends React.Component {
 RevisionLoader.propTypes = {
   t: PropTypes.func.isRequired,
 
-  growiRenderer: PropTypes.instanceOf(GrowiRenderer).isRequired,
+  rendererOptions: PropTypes.instanceOf(RendererOptions).isRequired,
   pageId: PropTypes.string.isRequired,
   pagePath: PropTypes.string.isRequired,
   revisionId: PropTypes.string.isRequired,
@@ -135,12 +134,8 @@ RevisionLoader.propTypes = {
 
 const RevisionLoaderWrapperFC = (props) => {
   const { t } = useTranslation();
-  const { data: growiRenderer } = useViewRenderer();
-  if (growiRenderer == null) {
-    return <></>;
-  }
 
-  return <RevisionLoader t={t} growiRenderer={growiRenderer} {...props} />;
+  return <RevisionLoader t={t} {...props} />;
 };
 
 export default RevisionLoaderWrapperFC;

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

@@ -5,8 +5,7 @@ import ReactMarkdown from 'react-markdown';
 import { blinkElem } from '~/client/util/blink-section-header';
 import { addSmoothScrollEvent } from '~/client/util/smooth-scroll';
 import { CustomWindow } from '~/interfaces/global';
-// import GrowiRenderer from '~/services/renderer/growi-renderer';
-import { RendererOptions } from '~/services/renderer/growi-renderer';
+import { RendererOptions } from '~/services/renderer/renderer';
 import { useCurrentPathname, useInterceptorManager } from '~/stores/context';
 import { useEditorSettings } from '~/stores/editor';
 import { useViewOptions } from '~/stores/renderer';

packages/app/src/components/SearchPage/SearchResultContent.tsx

@@ -15,7 +15,7 @@ import {
   usePageDuplicateModal, usePageRenameModal, usePageDeleteModal,
 } from '~/stores/modal';
 import { useDescendantsPageListForCurrentPathTermManager, usePageTreeTermManager } from '~/stores/page-listing';
-import { useSearchResultRenderer } from '~/stores/renderer';
+import { useSearchResultOptions } from '~/stores/renderer';
 import { useFullTextSearchTermManager } from '~/stores/search';
 
 
@@ -120,7 +120,7 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
   const { open: openRenameModal } = usePageRenameModal();
   const { open: openDeleteModal } = usePageDeleteModal();
 
-  const { data: growiRenderer } = useSearchResultRenderer();
+  const { data: rendererOptions } = useSearchResultOptions();
 
   const duplicateItemClickedHandler = useCallback(async(pageToDuplicate) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -194,7 +194,7 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
   }, [page, showPageControlDropdown, forceHideMenuItems, duplicateItemClickedHandler, renameItemClickedHandler, deleteItemClickedHandler]);
 
   // return if page or growiRenderer is null
-  if (page == null || growiRenderer == null) return <></>;
+  if (page == null || rendererOptions == null) return <></>;
 
   return (
     <div key={page._id} data-testid="search-result-content" className="search-result-content grw-page-path-text-muted-container d-flex flex-column">
@@ -208,7 +208,7 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
       </div>
       <div className="search-result-content-body-container" ref={scrollElementRef}>
         <RevisionLoader
-          growiRenderer={growiRenderer}
+          rendererOptions={rendererOptions}
           pageId={page._id}
           pagePath={page.path}
           revisionId={page.revision}

packages/app/src/components/Sidebar/CustomSidebar.tsx

@@ -7,7 +7,7 @@ import { useSWRxPageByPath } from '~/stores/page';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import RevisionRenderer from '../Page/RevisionRenderer';
 import { IRevision } from '~/interfaces/revision';
-import { useCustomSidebarRenderer } from '~/stores/renderer';
+import { useCustomSidebarOptions } from '~/stores/renderer';
 
 const logger = loggerFactory('growi:cli:CustomSidebar');
 
@@ -28,13 +28,11 @@ type Props = {
 
 const CustomSidebar: FC<Props> = (props: Props) => {
 
-  const { appContainer } = props;
-
-  const { data: renderer } = useCustomSidebarRenderer();
+  const { data: rendererOptions } = useCustomSidebarOptions();
 
   const { data: page, error, mutate } = useSWRxPageByPath('/Sidebar');
 
-  if (renderer == null) {
+  if (rendererOptions == null) {
     return <></>;
   }
 
@@ -65,7 +63,7 @@ const CustomSidebar: FC<Props> = (props: Props) => {
         (!isLoading && markdown != null) && (
           <div className="p-3">
             <RevisionRenderer
-              growiRenderer={renderer}
+              rendererOptions={rendererOptions}
               markdown={markdown}
               pagePath="/Sidebar"
               additionalClassName="grw-custom-sidebar-content"
@@ -83,9 +81,4 @@ const CustomSidebar: FC<Props> = (props: Props) => {
   );
 };
 
-/**
- * Wrapper component for using unstated
- */
-const CustomSidebarWrapper = withUnstatedContainers(CustomSidebar, [AppContainer]);
-
-export default CustomSidebarWrapper;
+export default CustomSidebar;