[WEB-1689] fix: command enter submits the form (#4986)

* fix: command enter submits the form

* fix: build errors

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

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

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

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

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

@@ -64,7 +64,11 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
         }}
         isSubmitting={isSubmitting}
         showSubmitButton={showSubmitButton}
-        handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
+        handleSubmit={() => {
+          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: (commandName: EditorMenuItemNames) => void;
-  handleSubmit: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  handleSubmit: () => void;
   isCommentEmpty: boolean;
   isSubmitting: boolean;
   showSubmitButton: boolean;
@@ -95,7 +95,7 @@ export const IssueCommentToolbar: React.FC<Props> = (props) => {
         {showSubmitButton && (
           <div className="sticky right-1">
             <Button
-              type="submit"
+              type="button"
               variant="primary"
               className="px-2.5 py-1.5 text-xs"
               onClick={handleSubmit}

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={(e) => {
+              onEnterKeyPress={() => {
-                if (currentUser) handleSubmit(onSubmit)(e);
+                if (currentUser) handleSubmit(onSubmit)();
               }}
               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}
                     initialValue={value}
                     value={null}

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

@@ -92,7 +92,11 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
           }
         }}
         handleAccessChange={handleAccessChange}
-        handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
+        handleSubmit={() => {
+          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

@@ -81,7 +81,6 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
   }, [isEditing, setFocus]);
 
   const isEmpty =
-    watch("comment_html") === "" ||
     watch("comment_html")?.trim() === "" ||
     watch("comment_html") === "<p></p>" ||
     isEmptyHtmlString(watch("comment_html") ?? "");
@@ -138,11 +137,7 @@ 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 && !isEmpty) handleSubmit(onEnter)(e);
-            }}
-          >
             <LiteTextEditor
               workspaceId={workspaceId}
               projectId={projectId}
@@ -151,6 +146,15 @@ 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) => {
+                const isCommentEmpty =
+                  commentHTML?.trim() === "" ||
+                  commentHTML === "<p></p>" ||
+                  (isEmptyHtmlString(commentHTML ?? "") && !commentHTML?.includes("mention-component"));
+                if (!isCommentEmpty && !isSubmitting) {
+                  handleSubmit(onEnter)();
+                }
+              }}
               showSubmitButton={false}
             />
           </div>

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

@@ -33,7 +33,6 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
   const {
     handleSubmit,
     control,
-    watch,
     formState: { isSubmitting },
     reset,
   } = useForm<Partial<TIssueComment>>({
@@ -50,19 +49,8 @@ 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 && !isEmpty && !isSubmitting) handleSubmit(onSubmit)(e);
-      }}
-    >
       <Controller
         name="access"
         control={control}
@@ -77,8 +65,15 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
                 value={"<p></p>"}
                 projectId={projectId}
                 workspaceSlug={workspaceSlug}
-                onEnterKeyPress={(e) => {
+                onEnterKeyPress={(commentHTML) => {
-                  if (!isEmpty && !isSubmitting) handleSubmit(onSubmit)(e);
+                  console.log("commentHTML", commentHTML);
+                  const isEmpty =
+                    commentHTML?.trim() === "" ||
+                    commentHTML === "<p></p>" ||
+                    (isEmptyHtmlString(commentHTML ?? "") && !commentHTML?.includes("mention-component"));
+                  if (!isEmpty && !isSubmitting) {
+                    handleSubmit(onSubmit)();
+                  }
                 }}
                 ref={editorRef}
                 initialValue={value ?? "<p></p>"}

web/core/components/workspace/sidebar/projects-list-item.tsx

@@ -351,7 +351,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                         className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded"
                         onClick={() => setIsMenuActive(!isMenuActive)}
                       >
-                        <MoreHorizontal className="size-3.5" />
+                        <MoreHorizontal className="size-4" />
                       </span>
                     }
                     className={cn(
@@ -443,7 +443,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                     )}
                   >
                     <ChevronRight
-                      className={cn("size-3.5 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
+                      className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
                         "rotate-90": open,
                       })}
                     />

web/core/components/workspace/sidebar/projects-list.tsx

@@ -193,7 +193,7 @@ export const SidebarProjectsList: FC = observer(() => {
                 <>
                   <div
                     className={cn(
-                      "group w-full flex items-center justify-between px-2 py-0.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90",
+                      "group w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90",
                       {
                         "p-0 justify-center w-fit mx-auto bg-custom-sidebar-background-90 hover:bg-custom-sidebar-background-80":
                           isCollapsed,
@@ -221,7 +221,7 @@ export const SidebarProjectsList: FC = observer(() => {
                       </Tooltip>
                     </Disclosure.Button>
                     {!isCollapsed && (
-                      <div className="flex items-center opacity-0 group-hover:opacity-100">
+                      <div className="flex items-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
                         {isAuthorizedUser && (
                           <Tooltip tooltipHeading="Create project" tooltipContent="">
                             <button
@@ -244,7 +244,7 @@ export const SidebarProjectsList: FC = observer(() => {
                           onClick={() => toggleListDisclosure(!section.isOpen, section.key)}
                         >
                           <ChevronRight
-                            className={cn("flex-shrink-0 size-3.5 transition-all", {
+                            className={cn("flex-shrink-0 size-4 transition-all", {
                               "rotate-90": section.isOpen,
                             })}
                           />

web/core/components/workspace/sidebar/workspace-menu.tsx

@@ -56,13 +56,13 @@ export const SidebarWorkspaceMenu = observer(() => {
       {!sidebarCollapsed && (
         <Disclosure.Button
           as="button"
-          className="group/workspace-button w-full px-2 py-0.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90 rounded text-sm font-semibold"
+          className="group/workspace-button w-full px-2 py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90 rounded text-sm font-semibold"
           onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
         >
           <span>Workspace</span>
-          <span className="flex-shrink-0 hidden group-hover/workspace-button:inline-block rounded p-0.5 hover:bg-custom-sidebar-background-80">
+          <span className="flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded p-0.5 hover:bg-custom-sidebar-background-80">
             <ChevronRight
-              className={cn("size-3.5 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
+              className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
                 "rotate-90": isWorkspaceMenuOpen,
               })}
             />