Refactored Preview.tsx

packages/app/src/components/PageEditor.tsx

@@ -97,6 +97,8 @@ const PageEditor = (props: Props): JSX.Element => {
   const { data: isIndentSizeForced } = useIsIndentSizeForced();
   const { data: indentSize, mutate: mutateCurrentIndentSize } = useCurrentIndentSize();
 
+  const { data: growiRenderer } = usePreviewRenderer();
+
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const [markdown, setMarkdown] = useState<string>(pageContainer.state.markdown!);
 
@@ -375,6 +377,10 @@ const PageEditor = (props: Props): JSX.Element => {
     return <></>;
   }
 
+  if (growiRenderer == null) {
+    return <></>;
+  }
+
   const config = props.appContainer.getConfig();
   const isUploadable = config.upload.image || config.upload.file;
   const isUploadableFile = config.upload.file;
@@ -411,6 +417,7 @@ 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}
           ref={previewRef}
           isMathJaxEnabled={isMathJaxEnabled}
           renderMathJaxOnInit={false}

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

@@ -112,12 +112,7 @@ const PreviewWrapper = withUnstatedContainers(Preview, [AppContainer]);
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const PreviewWrapper2 = React.forwardRef((props: Props, ref: RefObject<HTMLDivElement>): JSX.Element => {
-  const { data: growiRenderer } = usePreviewRenderer();
-  if (growiRenderer == null) {
-    return <></>;
-  }
-
-  return <PreviewWrapper ref={ref} growiRenderer={growiRenderer} {...props} />;
+  return <PreviewWrapper ref={ref} {...props} />;
 });
 
 export default PreviewWrapper2;