refactor Comments

packages/app/src/components/PageComment.tsx

@@ -9,7 +9,6 @@ import { toastError } from '~/client/util/apiNotification';
 import { apiPost } from '~/client/util/apiv1-client';
 import { useCurrentPagePath } from '~/stores/context';
 import { useSWRxCurrentPage } from '~/stores/page';
-import { useCommentPreviewOptions } from '~/stores/renderer';
 
 import { ICommentHasId, ICommentHasIdList } from '../interfaces/comment';
 import { useSWRxPageComment } from '../stores/comment';
@@ -43,7 +42,6 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
   } = props;
 
   const { data: comments, mutate } = useSWRxPageComment(pageId);
-  const { data: rendererOptions } = useCommentPreviewOptions();
   const { data: currentPage } = useSWRxCurrentPage();
   const { data: currentPagePath } = useCurrentPagePath();
 
@@ -132,7 +130,7 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
   let commentTitleClasses = 'border-bottom py-3 mb-3';
   commentTitleClasses = titleAlign != null ? `${commentTitleClasses} text-${titleAlign}` : `${commentTitleClasses} text-center`;
 
-  if (commentsFromOldest == null || commentsExceptReply == null || rendererOptions == null || currentPagePath == null || currentPage == null) {
+  if (commentsFromOldest == null || commentsExceptReply == null || currentPagePath == null || currentPage == null) {
     if (hideIfEmpty && comments?.length === 0) {
       return <></>;
     }
@@ -151,7 +149,6 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
       isReadOnly={isReadOnly}
       deleteBtnClicked={onClickDeleteButton}
       onComment={mutate}
-      rendererOptions={rendererOptions}
       currentPagePath={currentPagePath}
       currentRevisionId={currentPage.revision._id}
       currentRevisionCreatedAt={currentPage.revision.createdAt}
@@ -164,7 +161,6 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
       replyList={replyComments}
       deleteBtnClicked={onClickDeleteButton}
       onComment={mutate}
-      rendererOptions={rendererOptions}
       currentPagePath={currentPagePath}
       currentRevisionId={currentPage.revision._id}
       currentRevisionCreatedAt={currentPage.revision.createdAt}

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { UserPicture } from '@growi/ui';
 import { format } from 'date-fns';
@@ -6,8 +6,8 @@ import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import { UncontrolledTooltip } from 'reactstrap';
 
-import { RendererOptions } from '~/services/renderer/renderer';
 import { useCurrentUser } from '~/stores/context';
+import { useCommentPreviewOptions } from '~/stores/renderer';
 
 import { ICommentHasId } from '../../interfaces/comment';
 import FormattedDistanceDate from '../FormattedDistanceDate';
@@ -28,7 +28,6 @@ type CommentProps = {
   isReadOnly: boolean,
   deleteBtnClicked: (comment: ICommentHasId) => void,
   onComment: () => void,
-  rendererOptions: RendererOptions,
   currentPagePath: string,
   currentRevisionId: string,
   currentRevisionCreatedAt: Date,
@@ -37,12 +36,13 @@ type CommentProps = {
 export const Comment = (props: CommentProps): JSX.Element => {
 
   const {
-    comment, isReadOnly, deleteBtnClicked, onComment, rendererOptions,
+    comment, isReadOnly, deleteBtnClicked, onComment,
     currentPagePath, currentRevisionId, currentRevisionCreatedAt,
   } = props;
 
   const { t } = useTranslation();
   const { data: currentUser } = useCurrentUser();
+  const { data: rendererOptions } = useCommentPreviewOptions();
 
   const [markdown, setMarkdown] = useState('');
   const [isReEdit, setIsReEdit] = useState(false);
@@ -101,19 +101,24 @@ export const Comment = (props: CommentProps): JSX.Element => {
     return <span style={{ whiteSpace: 'pre-wrap' }}>{comment}</span>;
   };
 
-  const renderRevisionBody = () => {
-    return (
-      <RevisionRenderer
-        rendererOptions={rendererOptions}
-        markdown={markdown}
-        additionalClassName="comment"
-        pagePath={currentPagePath}
-      />
-    );
-  };
+  const commentBody = useMemo(() => {
+    if (rendererOptions == null) {
+      return <></>;
+    }
+
+    return isMarkdown
+      ? (
+        <RevisionRenderer
+          rendererOptions={rendererOptions}
+          markdown={markdown}
+          additionalClassName="comment"
+          pagePath={currentPagePath}
+        />
+      )
+      : renderText(comment.comment);
+  }, [comment, currentPagePath, isMarkdown, markdown, rendererOptions]);
 
   const rootClassName = getRootClassName(comment);
-  const commentBody = isMarkdown ? renderRevisionBody() : renderText(comment.comment);
   const revHref = `?revision=${comment.revision}`;
 
   const editedDateId = `editedDate-${comment._id}`;
@@ -125,7 +130,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
     <div className={`${styles['comment-styles']}`}>
       {(isReEdit && !isReadOnly) ? (
         <CommentEditor
-          rendererOptions={rendererOptions}
+          pageId={comment._id}
           replyTo={undefined}
           currentCommentId={commentId}
           commentBody={comment.comment}

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

@@ -23,11 +23,12 @@ import NotAvailableForGuest from '../NotAvailableForGuest';
 import { Skelton } from '../Skelton';
 
 
+import { CommentPreview } from './CommentPreview';
+
 import styles from './CommentEditor.module.scss';
 
 
 const SlackNotification = dynamic(() => import('../SlackNotification').then(mod => mod.SlackNotification), { ssr: false });
-const CommentPreview = dynamic(() => import('./CommentPreview').then(mod => mod.CommentPreview), { ssr: false });
 const Editor = dynamic(() => import('../PageEditor/Editor'),
   {
     ssr: false,

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

@@ -3,8 +3,6 @@ import React, { useState } from 'react';
 
 import { Collapse } from 'reactstrap';
 
-import { RendererOptions } from '~/services/renderer/renderer';
-
 import { ICommentHasId, ICommentHasIdList } from '../../interfaces/comment';
 import { useIsAllReplyShown } from '../../stores/context';
 
@@ -18,7 +16,6 @@ type ReplycommentsProps = {
   replyList: ICommentHasIdList,
   deleteBtnClicked: (comment: ICommentHasId) => void,
   onComment: () => void,
-  rendererOptions: RendererOptions,
   currentPagePath: string,
   currentRevisionId: string,
   currentRevisionCreatedAt: Date,
@@ -27,7 +24,7 @@ type ReplycommentsProps = {
 export const ReplyComments = (props: ReplycommentsProps): JSX.Element => {
 
   const {
-    isReadOnly, replyList, deleteBtnClicked, onComment, rendererOptions,
+    isReadOnly, replyList, deleteBtnClicked, onComment,
     currentPagePath, currentRevisionId, currentRevisionCreatedAt,
   } = props;
 
@@ -43,7 +40,6 @@ export const ReplyComments = (props: ReplycommentsProps): JSX.Element => {
           isReadOnly={isReadOnly}
           deleteBtnClicked={deleteBtnClicked}
           onComment={onComment}
-          rendererOptions={rendererOptions}
           currentPagePath={currentPagePath}
           currentRevisionId={currentRevisionId}
           currentRevisionCreatedAt={currentRevisionCreatedAt}