Enter key behaviour added for Comments

packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx

@@ -1,12 +1,14 @@
 import { Extension } from '@tiptap/core';
 
-export const EnterKeyExtension = Extension.create({
+export const EnterKeyExtension = (onEnterKeyPress?: () => void) => Extension.create({
   name: 'enterKey',
 
   addKeyboardShortcuts() {
     return {
       'Enter': () => {
-        console.log('Submit comment');
+        if (onEnterKeyPress) {
+          onEnterKeyPress();
+        }
         return true;
       },
     }

packages/editor/lite-text-editor/src/ui/extensions/index.tsx

@@ -1,5 +1,5 @@
 import { EnterKeyExtension } from "./enter-key-extension";
 
-export const LiteTextEditorExtensions = () => [
+export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [
-  EnterKeyExtension,
+  EnterKeyExtension(onEnterKeyPress),
 ];

packages/editor/lite-text-editor/src/ui/index.tsx

@@ -30,7 +30,8 @@ interface ILiteTextEditor {
       key: string;
       label: "Private" | "Public";
     }[]
-  }
+  };
+  onEnterKeyPress?: (e?: any) => void;
 }
 
 interface LiteTextEditorProps extends ILiteTextEditor {
@@ -57,6 +58,7 @@ const LiteTextEditor = ({
   customClassName,
   forwardedRef,
   commentAccessSpecifier,
+  onEnterKeyPress
 }: LiteTextEditorProps) => {
   const editor = useEditor({
     onChange,
@@ -68,7 +70,7 @@ const LiteTextEditor = ({
     uploadFile,
     deleteFile,
     forwardedRef,
-    extensions: LiteTextEditorExtensions(),
+    extensions: LiteTextEditorExtensions(onEnterKeyPress),
   });
 
   const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });

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

@@ -11,7 +11,7 @@ import { SecondaryButton } from "components/ui";
 // types
 import { Comment } from "types/issue";
 // components
-import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
 // service
 import fileService from "@/services/file.service";
 
@@ -71,7 +71,12 @@ export const AddComment: React.FC<Props> = observer((props) => {
           name="comment_html"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <RichTextEditorWithRef
+            <LiteTextEditorWithRef
+              onEnterKeyPress={(e) => {
+                userStore.requiredLogin(() => {
+                  handleSubmit(onSubmit)(e);
+                });
+              }}
               uploadFile={fileService.getUploadFileFunction(workspace_slug as string)}
               deleteFile={fileService.deleteImage}
               ref={editorRef}

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

@@ -104,6 +104,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                 name="comment_html"
                 render={({ field: { onChange, value } }) => (
                   <LiteTextEditorWithRef
+                    onEnterKeyPress={handleSubmit(handleCommentUpdate)}
                     uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
                     deleteFile={fileService.deleteImage}
                     ref={editorRef}
@@ -149,7 +150,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
         <Menu as="div" className="relative w-min text-left">
           <Menu.Button
             type="button"
-            onClick={() => {}}
+            onClick={() => { }}
             className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none cursor-pointer hover:bg-custom-background-80"
           >
             <EllipsisVerticalIcon className="h-5 w-5 text-custom-text-200 duration-300" />
@@ -173,9 +174,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                       onClick={() => {
                         setIsEditing(true);
                       }}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${active ? "bg-custom-background-80" : ""
-                        active ? "bg-custom-background-80" : ""
+                        }`}
-                      }`}
                     >
                       Edit
                     </button>
@@ -188,9 +188,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                     <button
                       type="button"
                       onClick={handleDelete}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${active ? "bg-custom-background-80" : ""
-                        active ? "bg-custom-background-80" : ""
+                        }`}
-                      }`}
                     >
                       Delete
                     </button>

web/components/issues/comment/add-comment.tsx

@@ -80,6 +80,7 @@ export const AddComment: React.FC<Props> = ({
                   control={control}
                   render={({ field: { onChange: onCommentChange, value: commentValue } }) => (
                     <LiteTextEditorWithRef
+                      onEnterKeyPress={handleSubmit(handleAddComment)}
                       uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
                       deleteFile={fileService.deleteImage}
                       ref={editorRef}

web/components/issues/comment/comment-card.tsx

@@ -113,6 +113,7 @@ export const CommentCard: React.FC<Props> = ({
           >
             <div>
               <LiteTextEditorWithRef
+                onEnterKeyPress={handleSubmit(onEnter)}
                 uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
                 deleteFile={fileService.deleteImage}
                 ref={editorRef}