Fix issue comment form and quick-submit (#30623)

1. Rewrite initGlobalEnterQuickSubmit (by the way, remove jQuery)
2. Fix issue comment form layout

templates/devtest/fetch-action.tmpl

@@ -21,7 +21,7 @@
 				<button name="btn">submit get</button>
 			</form>
 			<form method="post" action="fetch-action-test?k=1" class="form-fetch-action">
-				<div><textarea name="text" rows="3" class="js-quick-submit"></textarea></div>
+				<div><textarea name="text" rows="3"></textarea></div>
 				<div><label><input name="check" type="checkbox"> check</label></div>
 				<div><button name="btn">submit post</button></div>
 			</form>

templates/repo/issue/view_content.tmpl

@@ -85,32 +85,34 @@
 						{{ctx.AvatarUtils.Avatar .SignedUser 40}}
 					</a>
 					<div class="content">
-						<form class="ui segment form form-fetch-action" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post">
-							{{template "repo/issue/comment_tab" .}}
-							{{.CsrfTokenHtml}}
-							<div class="field footer">
-								<div class="text right">
-									{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
-										{{if .Issue.IsClosed}}
-											<button id="status-button" class="ui primary basic button" data-status="{{ctx.Locale.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.reopen_comment_issue"}}" name="status" value="reopen">
-												{{ctx.Locale.Tr "repo.issues.reopen_issue"}}
-											</button>
-										{{else}}
-											{{$closeTranslationKey := "repo.issues.close"}}
-											{{if .Issue.IsPull}}
-												{{$closeTranslationKey = "repo.pulls.close"}}
+						<div class="ui segment">
+							<form class="ui form form-fetch-action" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post">
+								{{template "repo/issue/comment_tab" .}}
+								{{.CsrfTokenHtml}}
+								<div class="field footer">
+									<div class="text right">
+										{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
+											{{if .Issue.IsClosed}}
+												<button id="status-button" class="ui primary basic button" data-status="{{ctx.Locale.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.reopen_comment_issue"}}" name="status" value="reopen">
+													{{ctx.Locale.Tr "repo.issues.reopen_issue"}}
+												</button>
+											{{else}}
+												{{$closeTranslationKey := "repo.issues.close"}}
+												{{if .Issue.IsPull}}
+													{{$closeTranslationKey = "repo.pulls.close"}}
+												{{end}}
+												<button id="status-button" class="ui red basic button" data-status="{{ctx.Locale.Tr $closeTranslationKey}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.close_comment_issue"}}" name="status" value="close">
+													{{ctx.Locale.Tr $closeTranslationKey}}
+												</button>
 											{{end}}
-											<button id="status-button" class="ui red basic button" data-status="{{ctx.Locale.Tr $closeTranslationKey}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.close_comment_issue"}}" name="status" value="close">
-												{{ctx.Locale.Tr $closeTranslationKey}}
-											</button>
 										{{end}}
-									{{end}}
-									<button class="ui primary button">
-										{{ctx.Locale.Tr "repo.issues.create_comment"}}
-									</button>
+										<button class="ui primary button">
+											{{ctx.Locale.Tr "repo.issues.create_comment"}}
+										</button>
+									</div>
 								</div>
-							</div>
-						</form>
+							</form>
+						</div>
 					</div>
 				</div>
 				{{else if .Repository.IsArchived}}

templates/shared/combomarkdowneditor.tmpl

@@ -45,7 +45,7 @@ Template Attributes:
 			</div>
 		</markdown-toolbar>
 		<text-expander keys=": @" suffix="">
-			<textarea class="markdown-text-editor js-quick-submit"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}{{if .DisableAutosize}} data-disable-autosize="{{.DisableAutosize}}"{{end}}>{{.TextareaContent}}</textarea>
+			<textarea class="markdown-text-editor"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}{{if .DisableAutosize}} data-disable-autosize="{{.DisableAutosize}}"{{end}}>{{.TextareaContent}}</textarea>
 		</text-expander>
 		<script>
 			if (localStorage?.getItem('markdown-editor-monospace') === 'true') {

templates/user/settings/keys_ssh.tmpl

@@ -16,7 +16,7 @@
 			</div>
 			<div class="field {{if .Err_Content}}error{{end}}">
 				<label for="ssh-key-content">{{ctx.Locale.Tr "settings.key_content"}}</label>
-				<textarea id="ssh-key-content" name="content" class="js-quick-submit" placeholder="{{ctx.Locale.Tr "settings.key_content_ssh_placeholder"}}" required>{{.content}}</textarea>
+				<textarea id="ssh-key-content" name="content" placeholder="{{ctx.Locale.Tr "settings.key_content_ssh_placeholder"}}" required>{{.content}}</textarea>
 			</div>
 			<input name="type" type="hidden" value="ssh">
 			<button class="ui primary button">
@@ -84,7 +84,7 @@
 						</div>
 						<div class="field">
 							<label for="signature">{{ctx.Locale.Tr "settings.ssh_token_signature"}}</label>
-							<textarea id="ssh-key-signature" name="signature" class="js-quick-submit" placeholder="{{ctx.Locale.Tr "settings.key_signature_ssh_placeholder"}}" required>{{$.signature}}</textarea>
+							<textarea id="ssh-key-signature" name="signature" placeholder="{{ctx.Locale.Tr "settings.key_signature_ssh_placeholder"}}" required>{{$.signature}}</textarea>
 						</div>
 						<input name="type" type="hidden" value="verify_ssh">
 						<button class="ui primary button">

web_src/css/repo.css

@@ -1080,8 +1080,8 @@ td .commit-summary {
   clear: none;
 }
 
-.repository .comment.form .content .form::before,
-.repository .comment.form .content .form::after {
+.repository .comment.form .content .segment::before,
+.repository .comment.form .content .segment::after {
   right: 100%;
   top: 20px;
   border: solid transparent;
@@ -1092,13 +1092,13 @@ td .commit-summary {
   pointer-events: none;
 }
 
-.repository .comment.form .content .form::before {
+.repository .comment.form .content .segment::before {
   border-right-color: var(--color-secondary);
   border-width: 9px;
   margin-top: -9px;
 }
 
-.repository .comment.form .content .form::after {
+.repository .comment.form .content .segment::after {
   border-right-color: var(--color-box-body);
   border-width: 8px;
   margin-top: -8px;

web_src/js/features/common-global.js

@@ -46,10 +46,11 @@ export function initFootLanguageMenu() {
 }
 
 export function initGlobalEnterQuickSubmit() {
-  $(document).on('keydown', '.js-quick-submit', (e) => {
-    if (((e.ctrlKey && !e.altKey) || e.metaKey) && (e.key === 'Enter')) {
+  document.addEventListener('keydown', (e) => {
+    const isQuickSubmitEnter = ((e.ctrlKey && !e.altKey) || e.metaKey) && (e.key === 'Enter');
+    if (isQuickSubmitEnter && e.target.matches('textarea')) {
+      e.preventDefault();
       handleGlobalEnterQuickSubmit(e.target);
-      return false;
     }
   });
 }

web_src/js/features/comp/QuickSubmit.js

@@ -9,9 +9,5 @@ export function handleGlobalEnterQuickSubmit(target) {
     // here use the event to trigger the submit event (instead of calling `submit()` method directly)
     // otherwise the `areYouSure` handler won't be executed, then there will be an annoying "confirm to leave" dialog
     form.dispatchEvent(new SubmitEvent('submit', {bubbles: true, cancelable: true}));
-  } else {
-    // if no form, then the editor is for an AJAX request, dispatch an event to the target, let the target's event handler to do the AJAX request.
-    // the 'ce-' prefix means this is a CustomEvent
-    target.dispatchEvent(new CustomEvent('ce-quick-submit', {bubbles: true}));
   }
 }