diff --git a/packages/shared/src/components/comments/CommentInputOrModal.tsx b/packages/shared/src/components/comments/CommentInputOrModal.tsx index 6982f782be..8a8abdfaa0 100644 --- a/packages/shared/src/components/comments/CommentInputOrModal.tsx +++ b/packages/shared/src/components/comments/CommentInputOrModal.tsx @@ -42,7 +42,11 @@ export default function CommentInputOrModal({ - + ); } diff --git a/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx b/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx index cdb71e4024..1ef7dc6f52 100644 --- a/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx @@ -40,6 +40,7 @@ export interface CommentMarkdownInputProps { showUserAvatar?: boolean; onChange?: (value: string) => void; formProps?: FormHTMLAttributes; + onClose?: () => void; } export function CommentMarkdownInputComponent( @@ -54,6 +55,7 @@ export function CommentMarkdownInputComponent( showSubmit = true, showUserAvatar = true, formProps = {}, + onClose, }: CommentMarkdownInputProps, ref: MutableRefObject, ): ReactElement { @@ -131,6 +133,7 @@ export function CommentMarkdownInputComponent( ) : null } onValueUpdate={onChange} + onClose={onClose} /> ); diff --git a/packages/shared/src/components/fields/MarkdownInput/index.tsx b/packages/shared/src/components/fields/MarkdownInput/index.tsx index cfd61a8d50..2da6b58901 100644 --- a/packages/shared/src/components/fields/MarkdownInput/index.tsx +++ b/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, ): ReactElement { @@ -181,6 +184,13 @@ function MarkdownInput( isUptoDate={initialContent === input} /> )} + {onClose && ( + + )} (