fix: add a close button to comment input

packages/shared/src/components/comments/CommentInputOrModal.tsx

@@ -42,7 +42,11 @@ export default function CommentInputOrModal({
     <WriteCommentContext.Provider
       value={{ mutateComment: mutateCommentResult }}
     >
-      <CommentMarkdownInput {...props} className={className.input} />
+      <CommentMarkdownInput
+        {...props}
+        className={className.input}
+        onClose={onClose}
+      />
     </WriteCommentContext.Provider>
   );
 }

packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx

@@ -40,6 +40,7 @@ export interface CommentMarkdownInputProps {
   showUserAvatar?: boolean;
   onChange?: (value: string) => void;
   formProps?: FormHTMLAttributes<HTMLFormElement>;
+  onClose?: () => void;
 }
 
 export function CommentMarkdownInputComponent(
@@ -54,6 +55,7 @@ export function CommentMarkdownInputComponent(
     showSubmit = true,
     showUserAvatar = true,
     formProps = {},
+    onClose,
   }: CommentMarkdownInputProps,
   ref: MutableRefObject<HTMLFormElement>,
 ): ReactElement {
@@ -131,6 +133,7 @@ export function CommentMarkdownInputComponent(
           ) : null
         }
         onValueUpdate={onChange}
+        onClose={onClose}
       />
     </form>
   );

packages/shared/src/components/fields/MarkdownInput/index.tsx

@@ -40,6 +40,7 @@ import { Loader } from '../../Loader';
 import { Divider } from '../../utilities';
 import { usePopupSelector } from '../../../hooks/usePopupSelector';
 import { focusInput } from '../../../lib/textarea';
+import CloseButton from '../../CloseButton';
 
 interface ClassName {
   container?: string;
@@ -65,6 +66,7 @@ interface MarkdownInputProps
   isLoading?: boolean;
   disabledSubmit?: boolean;
   maxInputLength?: number;
+  onClose?: () => void;
 }
 
 enum CommentTab {
@@ -97,6 +99,7 @@ function MarkdownInput(
     isLoading,
     disabledSubmit,
     maxInputLength,
+    onClose,
   }: MarkdownInputProps,
   ref: MutableRefObject<MarkdownRef>,
 ): ReactElement {
@@ -181,6 +184,13 @@ function MarkdownInput(
           isUptoDate={initialContent === input}
         />
       )}
+      {onClose && (
+        <CloseButton
+          size={ButtonSize.XSmall}
+          className="absolute right-3 top-3"
+          onClick={onClose}
+        />
+      )}
       <ConditionalWrapper
         condition={allowPreview}
         wrapper={(children) => (