Make Ctrl+Enter (quick submit) work for issue comment and wiki editor

Author: wxiaoguang

web_src/js/features/common-global.js

@@ -44,9 +44,17 @@ export function initFootLanguageMenu() {
 
 
 export function initGlobalEnterQuickSubmit() {
-  $('.js-quick-submit').on('keydown', function (e) {
+  $(document).on('keydown', '.js-quick-submit', function (e) {
     if (((e.ctrlKey && !e.altKey) || e.metaKey) && (e.keyCode === 13 || e.keyCode === 10)) {
-      $(this).closest('form').trigger('submit');
+      const $form = $(this).closest('form');
+      // the same logic as `codeMirrorQuickSubmit` function
+      if ($form.length) {
+        // here must use jQuery to trigger the submit event, otherwise the `areYouSure` handler won't be executed, then there will be an annoying "confirm to leave" dialog
+        $form.trigger('submit');
+      } else {
+        // if no form, then the editor is for an AJAX request, we dispatch an event to the target, let the target's event handler to do the AJAX request.
+        $(e.target).trigger('ce-quick-submit');
+      }
     }
   });
 }

web_src/js/features/comp/EasyMDE.js

@@ -71,9 +71,12 @@ export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) {
         title: 'Revert to simple textarea',
       },
     ], ...easyMDEOptions});
+
   const inputField = easyMDE.codemirror.getInputField();
-  inputField.classList.add('js-quick-submit');
+
   easyMDE.codemirror.setOption('extraKeys', {
+    'Cmd-Enter': codeMirrorQuickSubmit,
+    'Ctrl-Enter': codeMirrorQuickSubmit,
     Enter: (cm) => {
       const tributeContainer = document.querySelector('.tribute-container');
       if (!tributeContainer || tributeContainer.style.display === 'none') {
@@ -149,3 +152,19 @@ export function validateTextareaNonEmpty($textarea) {
   $mdeInputField.prop('required', false);
   return true;
 }
+
+/**
+ * @param {CodeMirror.EditorFromTextArea} codeMirror
+ */
+export function codeMirrorQuickSubmit(codeMirror) {
+  const textarea = codeMirror.getTextArea();
+  const form = textarea.closest('form');
+  // the same logic as the global `.js-quick-submit` handler.
+  if (form) {
+    // here must use jQuery to trigger the submit event, otherwise the `areYouSure` handler won't be executed, then there will be an annoying "confirm to leave" dialog
+    $(form).trigger('submit');
+  } else {
+    // if no form, then the editor is for an AJAX request, we dispatch an event to the textarea, let the textarea's event handler to do the AJAX request.
+    textarea.dispatchEvent(new CustomEvent('ce-quick-submit'));
+  }
+}

web_src/js/features/repo-legacy.js

@@ -355,14 +355,20 @@ async function onEditContent(event) {
       initEasyMDEImagePaste(easyMDE, $dropzone[0], $dropzone.find('.files'));
     }
 
+    const $saveButton = $editContentZone.find('.save.button');
+    $textarea.on('ce-quick-submit', () => {
+      $saveButton.trigger('click');
+    });
+
     $editContentZone.find('.cancel.button').on('click', () => {
       $renderContent.show();
       $editContentZone.hide();
       if (dz) {
         dz.emit('reload');
       }
     });
-    $editContentZone.find('.save.button').on('click', () => {
+
+    $saveButton.on('click', () => {
       $renderContent.show();
       $editContentZone.hide();
       const $attachments = $dropzone.find('.files').find('[name=files]').map(function () {
@@ -400,7 +406,7 @@ async function onEditContent(event) {
         initCommentContent();
       });
     });
-  } else {
+  } else { // use existing form
     $textarea = $segment.find('textarea');
     easyMDE = getAttachedEasyMDE($textarea);
   }

web_src/js/features/repo-wiki.js

@@ -1,6 +1,11 @@
 import $ from 'jquery';
 import {initMarkupContent} from '../markup/content.js';
-import {attachEasyMDEToElements, importEasyMDE, validateTextareaNonEmpty} from './comp/EasyMDE.js';
+import {
+  attachEasyMDEToElements,
+  codeMirrorQuickSubmit,
+  importEasyMDE,
+  validateTextareaNonEmpty,
+} from './comp/EasyMDE.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
 
 const {csrfToken} = window.config;
@@ -122,10 +127,12 @@ async function initRepoUncycloFormEditor() {
     ]
   });
 
-  attachEasyMDEToElements(easyMDE);
+  easyMDE.codemirror.setOption('extraKeys', {
+    'Cmd-Enter': codeMirrorQuickSubmit,
+    'Ctrl-Enter': codeMirrorQuickSubmit,
+  });
 
-  const $mdeInputField = $(easyMDE.codemirror.getInputField());
-  $mdeInputField.addClass('js-quick-submit');
+  attachEasyMDEToElements(easyMDE);
 
   $form.on('submit', () => {
     if (!validateTextareaNonEmpty($editArea)) {