Manually force blur on submitting an edited message (#21333)

* Return focus to parent entry element after message is edited

* Revert "Return focus to parent entry element after message is edited"

This reverts commit 96234a666e7e7c17b99a23a8a92ea030efe6083f.

* Manually force blur on submitting an edited message

* Show review panel entry header when editing comment (#21397)

* Show review panel entry header when editing comment

* edit comment spacing

* hide comment options when editing

---------

Co-authored-by: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
GitOrigin-RevId: 66a8d1ed772cf91ea0f086bd08cdabaeb7456956

services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx

@@ -51,32 +51,6 @@ export const ReviewPanelMessage: FC<{
     setDeleting(false)
   }, [onDelete])
 
-  if (editing) {
-    return (
-      <div>
-        <AutoExpandingTextArea
-          className="review-panel-comment-input"
-          onBlur={handleSubmit}
-          onChange={e => setContent(e.target.value)}
-          onKeyDown={e => {
-            if (
-              e.key === 'Enter' &&
-              !e.shiftKey &&
-              !e.ctrlKey &&
-              !e.metaKey &&
-              content
-            ) {
-              e.preventDefault()
-              handleSubmit()
-            }
-          }}
-          value={content}
-          autoFocus // eslint-disable-line jsx-a11y/no-autofocus
-        />
-      </div>
-    )
-  }
-
   return (
     <div className="review-panel-comment">
       <div className="review-panel-entry-header">
@@ -90,7 +64,7 @@ export const ReviewPanelMessage: FC<{
         </div>
 
         <div className="review-panel-entry-actions">
-          {!isReply && !isThreadResolved && (
+          {!editing && !isReply && !isThreadResolved && (
             <OLTooltip
               id="resolve-thread"
               overlayProps={{ placement: 'bottom' }}
@@ -107,7 +81,7 @@ export const ReviewPanelMessage: FC<{
             </OLTooltip>
           )}
 
-          {!isThreadResolved && (
+          {!editing && !isThreadResolved && (
             <ReviewPanelCommentOptions
               belongsToCurrentUser={user.id === message.user.id}
               onEdit={handleEditOption}
@@ -117,9 +91,32 @@ export const ReviewPanelMessage: FC<{
           )}
         </div>
       </div>
-      <ExpandableContent className="review-panel-comment-body">
+      {editing ? (
-        {message.content}
+        <AutoExpandingTextArea
-      </ExpandableContent>
+          className="review-panel-comment-input review-panel-comment-edit"
+          onBlur={handleSubmit}
+          onChange={e => setContent(e.target.value)}
+          onKeyDown={e => {
+            if (
+              e.key === 'Enter' &&
+              !e.shiftKey &&
+              !e.ctrlKey &&
+              !e.metaKey &&
+              content
+            ) {
+              e.preventDefault()
+              ;(e.target as HTMLTextAreaElement).blur()
+            }
+          }}
+          value={content}
+          autoFocus // eslint-disable-line jsx-a11y/no-autofocus
+        />
+      ) : (
+        <ExpandableContent className="review-panel-comment-body">
+          {message.content}
+        </ExpandableContent>
+      )}
+
       {deleting && (
         <ReviewPanelDeleteCommentModal
           onHide={hideDeleteModal}

services/web/frontend/stylesheets/app/editor/review-panel-new.less

@@ -391,6 +391,10 @@
     max-height: 400px;
   }
 
+  .review-panel-comment-edit {
+    margin-top: var(--spacing-03);
+  }
+
   .review-panel-empty-state {
     position: fixed;
     width: var(--review-panel-width);

services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss

@@ -396,6 +396,10 @@
     max-height: 400px;
   }
 
+  .review-panel-comment-edit {
+    margin-top: var(--spacing-03);
+  }
+
   .review-panel-empty-state {
     position: fixed;
     width: var(--review-panel-width);