fix comment editor issue (#20362)

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/ActivityFeedcardNew.component.tsx

@@ -14,7 +14,7 @@ import { Card, Col, Input, Space, Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
 import { isUndefined } from 'lodash';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ASSET_CARD_STYLES } from '../../../constants/Feeds.constants';
@@ -75,6 +75,10 @@ const ActivityFeedCardNew = ({
   const [isEditPost, setIsEditPost] = useState<boolean>(false);
   const { updateFeed } = useActivityFeedProvider();
 
+  useEffect(() => {
+    setShowFeedEditor(false);
+  }, [feed.id]);
+
   const onSave = (message: string) => {
     postFeed(message, selectedThread?.id ?? '').catch(() => {
       // ignore since error is displayed in toast in the parent promise.
@@ -194,6 +198,10 @@ const ActivityFeedCardNew = ({
     </Tooltip>
   ) : null;
 
+  const closeFeedEditor = () => {
+    setShowFeedEditor(false);
+  };
+
   return (
     <Card
       className={classNames(
@@ -331,6 +339,7 @@ const ActivityFeedCardNew = ({
                 .sort((a, b) => (b.postTs as number) - (a.postTs as number))
                 .map((reply, index, arr) => (
                   <CommentCard
+                    closeFeedEditor={closeFeedEditor}
                     feed={feed}
                     isLastReply={index === arr.length - 1}
                     key={reply.id}

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/CommentCard.component.tsx

@@ -13,7 +13,13 @@
 import { Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Link } from 'react-router-dom';
 import { Thread } from '../../../generated/entity/feed/thread';
 import {
@@ -37,16 +43,42 @@ interface CommentCardInterface {
   feed: Thread;
   post: any;
   isLastReply: boolean;
+  closeFeedEditor: () => void;
 }
 
-const CommentCard = ({ feed, post, isLastReply }: CommentCardInterface) => {
+const CommentCard = ({
+  feed,
+  post,
+  isLastReply,
+  closeFeedEditor,
+}: CommentCardInterface) => {
   const { updateFeed } = useActivityFeedProvider();
   const [isHovered, setIsHovered] = useState(false);
   const [isEditPost, setIsEditPost] = useState<boolean>(false);
   const [postMessage, setPostMessage] = useState<string>('');
   const seperator = '.';
+  const editorRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        isEditPost &&
+        editorRef.current &&
+        !editorRef.current.contains(event.target as Node)
+      ) {
+        setIsEditPost(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isEditPost]);
 
   const onEditPost = () => {
+    closeFeedEditor();
     setIsEditPost(!isEditPost);
   };
 
@@ -69,6 +101,7 @@ const CommentCard = ({ feed, post, isLastReply }: CommentCardInterface) => {
   const feedBodyRender = useMemo(() => {
     if (isEditPost) {
       return (
+        <div ref={editorRef}>
           <ActivityFeedEditor
             focused
             className="mb-8 reply-feed-editor"
@@ -77,6 +110,7 @@ const CommentCard = ({ feed, post, isLastReply }: CommentCardInterface) => {
             onSave={handleSave}
             onTextChange={(message) => setPostMessage(message)}
           />
+        </div>
       );
     }
 

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab.less

@@ -240,19 +240,26 @@
 }
 .activity-feed-editor-container-new {
   background-color: @grey-9;
-  border: none;
+  border: 0.5px solid @blue-15;
   border-radius: 10px;
   width: 100%;
   .ql-container {
     background-color: @grey-9;
-    border: none;
+    border: 1px solid @blue-15;
     width: 100%;
+
+    &:focus-within {
+      border: 0.5px solid @blue-15;
+    }
   }
   .ql-toolbar {
     background-color: @grey-9;
-    border: none;
+    border: 1px solid @blue-15;
-    border-bottom: 1px solid #d9d9d9;
     flex-wrap: wrap;
+
+    &:focus-within {
+      border: 0.5px solid @blue-15;
+    }
   }
   .ql-toolbar button {
     color: #292929;

openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTabNew.component.tsx

@@ -994,6 +994,15 @@ export const TaskTabNew = ({
     );
   };
 
+  const closeFeedEditor = () => {
+    setShowFeedEditor(false);
+    setComment('');
+  };
+
+  useEffect(() => {
+    closeFeedEditor();
+  }, [taskThread.id]);
+
   return (
     <Row
       className="relative task-details-panel"
@@ -1088,6 +1097,7 @@ export const TaskTabNew = ({
                   .sort((a, b) => (b.postTs as number) - (a.postTs as number))
                   .map((reply, index, arr) => (
                     <CommentCard
+                      closeFeedEditor={closeFeedEditor}
                       feed={taskThread}
                       isLastReply={index === arr.length - 1}
                       key={reply.id}