Make Ctrl+Enter (quick submit) work for issue comment and wiki editor (#19729) * Make Ctrl+Enter (quick submit) work for issue comment and wiki editor * Remove the required `SubmitReviewForm.Type`, empty type (triggered by quick submit) means "comment" * Merge duplicate code

Changes

8 changed files (+54/-16)

• services/forms/repo_form.go
  • @@ -623,7 +623,7 @@ func (f *CodeCommentForm) Validate(req *http.Request, errs binding.Errors) bindi
    // SubmitReviewForm for submitting a finished code review type SubmitReviewForm struct { Content string - Type string `binding:"Required;In(approve,comment,reject)"` + Type string CommitID string Files []string }
  • @@ -634,7 +634,7 @@ func (f *SubmitReviewForm) Validate(req *http.Request, errs binding.Errors) bind
    return middleware.Validate(errs, ctx.Data, f, ctx.Locale) } - // ReviewType will return the corresponding reviewtype for type + // ReviewType will return the corresponding ReviewType for type func (f SubmitReviewForm) ReviewType() models.ReviewType { switch f.Type { case "approve":
  • @@ -643,6 +643,8 @@ func (f SubmitReviewForm) ReviewType() models.ReviewType {
    return models.ReviewTypeComment case "reject": return models.ReviewTypeReject + case "": + return models.ReviewTypeComment // default to comment when doing quick-submit (Ctrl+Enter) on the review form default: return models.ReviewTypeUnknown }
• templates/repo/diff/box.tmpl
  • @@ -180,7 +180,7 @@
    <a class="preview item" data-url="{{$.Repository.HTMLURL}}/markdown" data-context="{{$.RepoLink}}">{{$.i18n.Tr "preview"}}</a> </div> <div class="ui bottom attached active write tab segment"> - <textarea class="review-textarea" tabindex="1" name="content"></textarea> + <textarea class="review-textarea js-quick-submit" tabindex="1" name="content"></textarea> </div> <div class="ui bottom attached tab preview segment markup"> {{$.i18n.Tr "loading"}}
• templates/repo/issue/view_content.tmpl
  • @@ -202,7 +202,7 @@
    </div> <div class="field"> <div class="ui bottom active tab write"> - <textarea tabindex="1" name="content"></textarea> + <textarea tabindex="1" name="content" class="js-quick-submit"></textarea> </div> <div class="ui bottom tab preview markup"> {{$.i18n.Tr "loading"}}
• templates/user/settings/keys_ssh.tmpl
  • @@ -20,7 +20,7 @@
    </div> <div class="field {{if .Err_Content}}error{{end}}"> <label for="content">{{.i18n.Tr "settings.key_content"}}</label> - <textarea id="ssh-key-content" name="content" placeholder="{{.i18n.Tr "settings.key_content_ssh_placeholder"}}" required>{{.content}}</textarea> + <textarea id="ssh-key-content" name="content" class="js-quick-submit" placeholder="{{.i18n.Tr "settings.key_content_ssh_placeholder"}}" required>{{.content}}</textarea> </div> <input name="type" type="hidden" value="ssh"> <button class="ui green button">
  • @@ -81,7 +81,7 @@
    </div> <div class="field"> <label for="signature">{{$.i18n.Tr "settings.ssh_token_signature"}}</label> - <textarea id="ssh-key-signature" name="signature" placeholder="{{$.i18n.Tr "settings.key_signature_ssh_placeholder"}}" required>{{$.signature}}</textarea> + <textarea id="ssh-key-signature" name="signature" class="js-quick-submit" placeholder="{{$.i18n.Tr "settings.key_signature_ssh_placeholder"}}" required>{{$.signature}}</textarea> </div> <input name="type" type="hidden" value="verify_ssh"> <button class="ui green button">
• web_src/js/features/common-global.js
  • @@ -44,13 +44,28 @@ export function initFootLanguageMenu() {
    export function initGlobalEnterQuickSubmit() { - $('.js-quick-submit').on('keydown', function (e) { - if (((e.ctrlKey && !e.altKey) || e.metaKey) && (e.keyCode === 13 || e.keyCode === 10)) { - $(this).closest('form').trigger('submit'); + $(document).on('keydown', '.js-quick-submit', (e) => { + if (((e.ctrlKey && !e.altKey) || e.metaKey) && (e.key === 'Enter')) { + handleGlobalEnterQuickSubmit(e.target); + return false; } }); } + export function handleGlobalEnterQuickSubmit(target) { + const $target = $(target); + const $form = $(target).closest('form'); + if ($form.length) { + // 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.trigger('submit'); + } 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.trigger('ce-quick-submit'); + } + } + export function initGlobalButtonClickOnEnter() { $(document).on('keypress', '.ui.button', (e) => { if (e.keyCode === 13 || e.keyCode === 32) { // enter key or space bar
• web_src/js/features/comp/EasyMDE.js
  • @@ -1,5 +1,6 @@
    import $ from 'jquery'; import attachTribute from '../tribute.js'; + import {handleGlobalEnterQuickSubmit} from '../common-global.js'; /** * @returns {EasyMDE}
  • @@ -71,9 +72,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 +153,12 @@ export function validateTextareaNonEmpty($textarea) {
    $mdeInputField.prop('required', false); return true; } + + /** + * there is no guarantee that the CodeMirror object is inside the same form as the textarea, + * so can not call handleGlobalEnterQuickSubmit directly. + * @param {CodeMirror.EditorFromTextArea} codeMirror + */ + export function codeMirrorQuickSubmit(codeMirror) { + handleGlobalEnterQuickSubmit(codeMirror.getTextArea()); + }
• web_src/js/features/repo-legacy.js
  • @@ -355,6 +355,11 @@ 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();
  • @@ -362,7 +367,8 @@ async function onEditContent(event) {
    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,6 @@
    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 +122,12 @@ async function initRepoWikiFormEditor() {
    ] }); - 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)) {