update PageComment.tsx

packages/app/src/components/PageComment.tsx

@@ -2,11 +2,12 @@ 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 { useCurrentPageId, useCurrentPagePath } from '~/stores/context';
+import { useCurrentPagePath } from '~/stores/context';
 import { useSWRxCurrentPage } from '~/stores/page';
 import { useCommentPreviewOptions } from '~/stores/renderer';
 
@@ -15,10 +16,12 @@ import { useSWRxPageComment } from '../stores/comment';
 
 import { Comment } from './PageComment/Comment';
 import { CommentEditor } from './PageComment/CommentEditor';
+import { CommentEditorLazyRenderer } from './PageComment/CommentEditorLazyRenderer';
 import DeleteCommentModal from './PageComment/DeleteCommentModal';
 import { ReplayComments } from './PageComment/ReplayComments';
 
 type Props = {
+  pageId?: Nullable<string>
   isReadOnly: boolean,
   titleAlign?: 'center' | 'left' | 'right',
   highlightKeywords?: string[],
@@ -28,10 +31,9 @@ type Props = {
 export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
 
   const {
-    highlightKeywords, isReadOnly, titleAlign, hideIfEmpty,
+    pageId, highlightKeywords, isReadOnly, titleAlign, hideIfEmpty,
   } = props;
 
-  const { data: pageId } = useCurrentPageId();
   const { data: comments, mutate } = useSWRxPageComment(pageId);
   const { data: rendererOptions } = useCommentPreviewOptions();
   const { data: currentPage } = useSWRxCurrentPage();
@@ -138,7 +140,7 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
   );
 
   const generateAllRepliesElement = (replyComments: ICommentHasIdList) => (
-    <ReplayComments
+    <ReplyComments
       isReadOnly={isReadOnly}
       replyList={replyComments}
       deleteBtnClicked={onClickDeleteButton}
@@ -209,6 +211,8 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
 
               })}
             </div>
+            {/* TODO: Check if identical-page */}
+            <CommentEditorLazyRenderer pageId={pageId} rendererOptions={rendererOptions}/>
           </div>
         </div>
       </div>