fix conflict

packages/app/src/components/PageComment.tsx

@@ -2,12 +2,11 @@ import React, {
   FC, useEffect, useState, useMemo, memo, useCallback,
 } from 'react';
 
-import { Nullable } from '@growi/core';
 import { Button } from 'reactstrap';
 
 import { toastError } from '~/client/util/apiNotification';
 import { apiPost } from '~/client/util/apiv1-client';
-import { useCurrentPagePath } from '~/stores/context';
+import { useCurrentPageId, useCurrentPagePath } from '~/stores/context';
 import { useSWRxCurrentPage } from '~/stores/page';
 import { useCommentPreviewOptions } from '~/stores/renderer';
 
@@ -20,7 +19,6 @@ import DeleteCommentModal from './PageComment/DeleteCommentModal';
 import { ReplayComments } from './PageComment/ReplayComments';
 
 type Props = {
-  pageId?: Nullable<string>, // TODO: check pageId type
   isReadOnly : boolean,
   titleAlign?: 'center' | 'left' | 'right',
   highlightKeywords?:string[],
@@ -30,9 +28,10 @@ type Props = {
 export const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
 
   const {
-    pageId, highlightKeywords, isReadOnly, titleAlign, hideIfEmpty,
+    highlightKeywords, isReadOnly, titleAlign, hideIfEmpty,
   } = props;
 
+  const { data: pageId } = useCurrentPageId();
   const { data: comments, mutate } = useSWRxPageComment(pageId);
   const { data: rendererOptions } = useCommentPreviewOptions();
   const { data: currentPage } = useSWRxCurrentPage();
@@ -110,16 +109,6 @@ export const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
     }
   }, [commentToBeDeleted, onDeleteCommentAfterOperation]);
 
-  const generateAllRepliesElement = (replyComments: ICommentHasIdList) => (
-    // TODO: need page props path
-    <ReplayComments
-      replyList={replyComments}
-      deleteBtnClicked={onClickDeleteButton}
-      rendererOptions={rendererOptions}
-      isReadOnly={isReadOnly}
-    />
-  );
-
   const removeShowEditorId = useCallback((commentId: string) => {
     setShowEditorIds((previousState) => {
       const previousShowEditorIds = new Set(...previousState);
@@ -134,7 +123,7 @@ export const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
   if (hideIfEmpty && comments?.length === 0) {
     return <></>;
   }
-  if (rendererOptions == null || currentPagePath == null) {
+  if (rendererOptions == null || currentPagePath == null || currentPage == null) {
     return <></>;
   }
 
@@ -145,7 +134,9 @@ export const PageComment:FC<Props> = memo((props:Props):JSX.Element => {
       comment={comment}
       onComment={mutate}
       isReadOnly={isReadOnly}
-    />
+      currentPagePath={currentPagePath}
+      currentRevisionId={currentPage.revision._id}
+      currentRevisionCreatedAt={currentPage.revision.createdAt} />
   );
 
   const generateAllRepliesElement = (replyComments: ICommentHasIdList) => (

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

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-
 import { UserPicture } from '@growi/ui';
-import { ConsoleFormattedStream } from 'browser-bunyan';
 import { format } from 'date-fns';
 import { useTranslation } from 'next-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
@@ -32,7 +30,8 @@ type CommentProps = {
 
 export const Comment = (props: CommentProps): JSX.Element => {
   const {
-    comment, isReadOnly, deleteBtnClicked, onComment, rendererOptions, currentPagePath, currentRevisionId, currentRevisionCreatedAt,
+    comment, isReadOnly, deleteBtnClicked, onComment, rendererOptions,
+    currentPagePath, currentRevisionId, currentRevisionCreatedAt,
   } = props;
   const { t } = useTranslation();
   const { data: currentUser } = useCurrentUser();
@@ -94,11 +93,6 @@ export const Comment = (props: CommentProps): JSX.Element => {
     return <span style={{ whiteSpace: 'pre-wrap' }}>{comment}</span>;
   };
 
-  // TODO: Remove when update ReplayComments.jsx
-  if (currentPagePath == null) {
-    return <></>;
-  }
-
   const renderRevisionBody = () => {
     return (
       <RevisionRenderer

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

@@ -10,6 +10,7 @@ import {
 import * as toastr from 'toastr';
 
 import { apiPostForm } from '~/client/util/apiv1-client';
+import { RendererOptions } from '~/services/renderer/renderer';
 import { useSWRxPageComment } from '~/stores/comment';
 import {
   useCurrentPagePath, useCurrentPageId, useCurrentUser, useRevisionId, useIsSlackConfigured,
@@ -39,6 +40,7 @@ const navTabMapping = {
 };
 
 type PropsType = {
+  rendererOptions: RendererOptions,
   isForNewComment?: boolean,
   replyTo?: string,
   currentCommentId?: string,
@@ -56,7 +58,7 @@ type EditorRef = {
 export const CommentEditor = (props: PropsType): JSX.Element => {
 
   const {
-    isForNewComment, replyTo,
+    rendererOptions, isForNewComment, replyTo,
     currentCommentId, commentBody, onCancelButtonClicked, onCommentButtonClicked,
   } = props;
   const { data: currentUser } = useCurrentUser();
@@ -209,6 +211,7 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
 
     return (
       <CommentPreview
+        rendererOptions={rendererOptions}
         markdown={markdown}
         path={currentPagePath}
       />
@@ -252,15 +255,15 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
       </Button>
     );
 
-    // const Editor = dynamic(() => import('../PageEditor/Editor'), { ssr: false });
+    const Editor = dynamic(() => import('../PageEditor/Editor'), { ssr: false });
     // TODO: typescriptize Editor
-    // const AnyEditor = Editor as any;
+    const AnyEditor = Editor as any;
 
-    // if (editorConfig === undefined) {
-    //   return <></>;
-    // }
-    // const isUploadable = editorConfig.upload.isImageUploaded || editorConfig.upload.isFileUploaded;
-    // const isUploadableFile = editorConfig.upload.isFileUploaded;
+    if (editorConfig === undefined) {
+      return <></>;
+    }
+    const isUploadable = editorConfig.upload.isImageUploaded || editorConfig.upload.isFileUploaded;
+    const isUploadableFile = editorConfig.upload.isFileUploaded;
 
     return (
       <>
@@ -298,7 +301,7 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
             <span className="flex-grow-1" />
             <span className="d-none d-sm-inline">{ errorMessage && errorMessage }</span>
 
-            {/* { isSlackConfigured
+            { isSlackConfigured
               && (
                 <div className="form-inline align-self-center mr-md-2">
                   <SlackNotification
@@ -310,7 +313,7 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
                   />
                 </div>
               )
-            } */}
+            }
             <div className="d-none d-sm-block">
               <span className="mr-2">{cancelButton}</span><span>{submitButton}</span>
             </div>

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

@@ -1,25 +1,20 @@
-import { useCommentPreviewOptions } from '~/stores/renderer';
+import { RendererOptions } from '~/services/renderer/renderer';
 
 import RevisionRenderer from '../Page/RevisionRenderer';
 
 type CommentPreviewPorps = {
+  rendererOptions: RendererOptions,
   markdown: string,
   path: string,
 }
 
 export const CommentPreview = (props: CommentPreviewPorps): JSX.Element => {
-  const { markdown, path } = props;
-
-  const { data: commentPreviewOptions } = useCommentPreviewOptions();
-
-  if (commentPreviewOptions == null) {
-    return <></>;
-  }
+  const { markdown, path, rendererOptions } = props;
 
   return (
     <div className="page-comment-preview-body">
       <RevisionRenderer
-        rendererOptions={commentPreviewOptions}
+        rendererOptions={rendererOptions}
         markdown={markdown}
         additionalClassName="comment"
         pagePath={path}

packages/app/src/pages/[[...path]].page.tsx

@@ -56,7 +56,6 @@ import DisplaySwitcher from '../components/Page/DisplaySwitcher';
 // import { serializeUserSecurely } from '../server/models/serializers/user-serializer';
 // import PageStatusAlert from '../client/js/components/PageStatusAlert';
 
-import { CommentEditorLazyRenderer } from '../components/PageComment/CommentEditorLazyRenderer';
 import {
   useCurrentUser, useCurrentPagePath,
   useIsLatestRevision,
@@ -328,7 +327,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
         </div>
         <footer>
           {/* <PageComments /> */}
-          <PageComment pageId={useCurrentPageId().data} isReadOnly={false} titleAlign="left" />
+          <PageComment isReadOnly={false} titleAlign="left" />
           <CommentEditorLazyRenderer />
           <PageContentFooter />
         </footer>