[WEB-2233] fix: intake issue comment (#5368)

* fix: intake issue comment

* chore: issue comment improvement

packages/editor/src/core/extensions/enter-key-extension.tsx

@@ -1,6 +1,6 @@
 import { Extension } from "@tiptap/core";
 
-export const EnterKeyExtension = (onEnterKeyPress?: (descriptionHTML: string) => void) =>
+export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
   Extension.create({
     name: "enterKey",
 
@@ -8,7 +8,9 @@ export const EnterKeyExtension = (onEnterKeyPress?: (descriptionHTML: string) =>
       return {
         Enter: () => {
           if (!this.editor.storage.mentionsOpen) {
-            onEnterKeyPress?.(this.editor.getHTML());
+            if (onEnterKeyPress) {
+              onEnterKeyPress();
+            }
             return true;
           }
           return false;

packages/editor/src/core/types/editor.ts

@@ -35,7 +35,7 @@ export interface IEditorProps {
     suggestions?: () => Promise<IMentionSuggestion[]>;
   };
   onChange?: (json: object, html: string) => void;
-  onEnterKeyPress?: (descriptionHTML: string) => void;
+  onEnterKeyPress?: (e?: any) => void;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
   value?: string | null;

space/core/components/editor/lite-text-editor.tsx

@@ -64,11 +64,7 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
         }}
         isSubmitting={isSubmitting}
         showSubmitButton={showSubmitButton}
-        handleSubmit={() => {
+        handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
-          if (isMutableRefObject<EditorRefApi>(ref)) {
-            rest.onEnterKeyPress?.(ref.current?.getHTML() ?? "");
-          }
-        }}
         isCommentEmpty={isEmpty}
         editorRef={isMutableRefObject<EditorRefApi>(ref) ? ref : null}
       />

space/core/components/editor/toolbar.tsx

@@ -12,7 +12,7 @@ import { cn } from "@/helpers/common.helper";
 
 type Props = {
   executeCommand: (commandKey: TEditorCommands) => void;
-  handleSubmit: () => void;
+  handleSubmit: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   isCommentEmpty: boolean;
   isSubmitting: boolean;
   showSubmitButton: boolean;

space/core/components/issues/peek-overview/comment/add-comment.tsx

@@ -66,8 +66,8 @@ export const AddComment: React.FC<Props> = observer((props) => {
           control={control}
           render={({ field: { value, onChange } }) => (
             <LiteTextEditor
-              onEnterKeyPress={() => {
+              onEnterKeyPress={(e) => {
-                if (currentUser) handleSubmit(onSubmit)();
+                if (currentUser) handleSubmit(onSubmit)(e);
               }}
               workspaceId={workspaceID?.toString() ?? ""}
               workspaceSlug={workspaceSlug?.toString() ?? ""}

space/core/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -103,7 +103,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                   <LiteTextEditor
                     workspaceId={workspaceID?.toString() ?? ""}
                     workspaceSlug={workspaceSlug?.toString() ?? ""}
-                    onEnterKeyPress={() => handleSubmit(handleCommentUpdate)()}
+                    onEnterKeyPress={handleSubmit(handleCommentUpdate)}
                     ref={editorRef}
                     id={comment.id}
                     initialValue={value}

web/core/components/editor/lite-text-editor/lite-text-editor.tsx

@@ -94,11 +94,7 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
           }
         }}
         handleAccessChange={handleAccessChange}
-        handleSubmit={() => {
+        handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
-          if (isMutableRefObject<EditorRefApi>(ref)) {
-            rest.onEnterKeyPress?.(ref.current?.getHTML() ?? "");
-          }
-        }}
         isCommentEmpty={isEmpty}
         isSubmitting={isSubmitting}
         showAccessSpecifier={showAccessSpecifier}

web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx

@@ -137,7 +137,11 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
     >
       <>
         <form className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}>
-          <div>
+          <div
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey && !isEmpty) handleSubmit(onEnter)(e);
+            }}
+          >
             <LiteTextEditor
               workspaceId={workspaceId}
               projectId={projectId}
@@ -147,13 +151,9 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
               initialValue={watch("comment_html") ?? ""}
               value={null}
               onChange={(comment_json, comment_html) => setValue("comment_html", comment_html)}
-              onEnterKeyPress={(commentHTML) => {
+              onEnterKeyPress={(e) => {
-                const isCommentEmpty =
+                if (!isEmpty && !isSubmitting) {
-                  commentHTML?.trim() === "" ||
+                  handleSubmit(onEnter)(e);
-                  commentHTML === "<p></p>" ||
-                  (isEmptyHtmlString(commentHTML ?? "") && !commentHTML?.includes("mention-component"));
-                if (!isCommentEmpty && !isSubmitting) {
-                  handleSubmit(onEnter)();
                 }
               }}
               showSubmitButton={false}

web/core/components/issues/issue-detail/issue-activity/comments/comment-create.tsx

@@ -33,6 +33,7 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
   const {
     handleSubmit,
     control,
+    watch,
     formState: { isSubmitting },
     reset,
   } = useForm<Partial<TIssueComment>>({
@@ -49,8 +50,19 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
       editorRef.current?.clearEditor();
     });
 
+  const commentHTML = watch("comment_html");
+  const isEmpty =
+    commentHTML?.trim() === "" ||
+    commentHTML === "<p></p>" ||
+    (isEmptyHtmlString(commentHTML ?? "") && !commentHTML?.includes("mention-component"));
+
   return (
-    <div>
+    <div
+      onKeyDown={(e) => {
+        if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey && !isEmpty && !isSubmitting)
+          handleSubmit(onSubmit)(e);
+      }}
+    >
       <Controller
         name="access"
         control={control}
@@ -65,13 +77,9 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
                 value={"<p></p>"}
                 projectId={projectId}
                 workspaceSlug={workspaceSlug}
-                onEnterKeyPress={(commentHTML) => {
+                onEnterKeyPress={(e) => {
-                  const isEmpty =
-                    commentHTML?.trim() === "" ||
-                    commentHTML === "<p></p>" ||
-                    (isEmptyHtmlString(commentHTML ?? "") && !commentHTML?.includes("mention-component"));
                   if (!isEmpty && !isSubmitting) {
-                    handleSubmit(onSubmit)();
+                    handleSubmit(onSubmit)(e);
                   }
                 }}
                 ref={editorRef}