Initialize SimpleMDE when making a code comment (#11749) (#11785)

Backport #11749

Fix #11704

Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-Authored-By: Cirno the Strongest <1447794+CirnoT@users.noreply.github.com>

Co-authored-by: Cirno the Strongest <1447794+CirnoT@users.noreply.github.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

2 files changed, 28 insertions, 13 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index 7cffdc79b3..86d9ca380c 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1202,6 +1202,18 @@ function initPullRequestReview() {
     $(this).hide();
     const form = $(this).parent().find('.comment-form');
     form.removeClass('hide');
+    const $textarea = form.find('textarea');
+    let $simplemde;
+    if ($textarea.data('simplemde')) {
+      $simplemde = $textarea.data('simplemde');
+    } else {
+      issuesTribute.attach($textarea.get());
+      emojiTribute.attach($textarea.get());
+      $simplemde = setCommentSimpleMDE($textarea);
+      $textarea.data('simplemde', $simplemde);
+    }
+    $textarea.focus();
+    $simplemde.codemirror.focus();
     assingMenuAttributes(form.find('.menu'));
   });
   // The following part is only for diff views
@@ -1261,7 +1273,13 @@ function initPullRequestReview() {
       td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed');
       td.find("input[name='path']").val(path);
     }
-    commentCloud.find('textarea').focus();
+    const $textarea = commentCloud.find('textarea');
+    issuesTribute.attach($textarea.get());
+    emojiTribute.attach($textarea.get());
+
+    const $simplemde = setCommentSimpleMDE($textarea);
+    $textarea.focus();
+    $simplemde.codemirror.focus();
   });
 }
 
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 172a38d727..b1eefbb28f 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -54,15 +54,14 @@
             border: 0;
             padding: 0;
             margin: 0;
-
-            &.markdown {
-                padding: 1em;
-                min-height: 168px;
-            }
         }
 
         &.header {
             padding: .1rem 1rem;
+
+            .text {
+                margin: 0;
+            }
         }
     }
 
@@ -76,18 +75,16 @@
     }
 
     .ui.active.tab {
-        border: 1px solid #d4d4d5;
         padding: .5em;
-        border-radius: 0 .28571429rem .28571429rem .28571429rem;
-    }
 
-    .ui.active.markdown.tab {
-        border-top-left-radius: .28571429rem;
+        &.markdown {
+            padding: 1em;
+            min-height: 168px;
+        }
     }
 
     .ui.tabular.menu {
-        margin-bottom: 0;
-        border-bottom: 0;
+        margin: .5em;
     }
 
     .comment-list {