From d60fd97e1752efc88526db2f10edb5c53d44982e Mon Sep 17 00:00:00 2001
From: Shrushti Polekar <shrushtipolekar@gmail.com>
Date: Fri, 21 Mar 2025 22:52:40 +0530
Subject: [PATCH] fix comment editor issue (#20362)

---
 .../ActivityFeedcardNew.component.tsx         | 11 +++-
 .../CommentCard.component.tsx                 | 54 +++++++++++++++----
 .../ActivityFeedTab/activity-feed-tab.less    | 15 ++++--
 .../Task/TaskTab/TaskTabNew.component.tsx     | 10 ++++
 4 files changed, 75 insertions(+), 15 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/ActivityFeedcardNew.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/ActivityFeedcardNew.component.tsx
index 6ad23a1653b..ba37ac84175 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/ActivityFeedcardNew.component.tsx
+++ b/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}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/CommentCard.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/CommentCard.component.tsx
index b4ff5bb4bd1..9e703f9124b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/CommentCard.component.tsx
+++ b/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,14 +101,16 @@ const CommentCard = ({ feed, post, isLastReply }: CommentCardInterface) => {
   const feedBodyRender = useMemo(() => {
     if (isEditPost) {
       return (
-        <ActivityFeedEditor
-          focused
-          className="mb-8 reply-feed-editor"
-          defaultValue={defaultValue}
-          editorClass="is_edit_post"
-          onSave={handleSave}
-          onTextChange={(message) => setPostMessage(message)}
-        />
+        <div ref={editorRef}>
+          <ActivityFeedEditor
+            focused
+            className="mb-8 reply-feed-editor"
+            defaultValue={defaultValue}
+            editorClass="is_edit_post"
+            onSave={handleSave}
+            onTextChange={(message) => setPostMessage(message)}
+          />
+        </div>
       );
     }
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab.less b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab.less
index 31b7e4d886c..8b3afe60ed8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab.less
+++ b/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-bottom: 1px solid #d9d9d9;
+    border: 1px solid @blue-15;
     flex-wrap: wrap;
+
+    &:focus-within {
+      border: 0.5px solid @blue-15;
+    }
   }
   .ql-toolbar button {
     color: #292929;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTabNew.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTabNew.component.tsx
index a7a8aec1045..4bed664da97 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTabNew.component.tsx
+++ b/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}