diff options
author | wxiaoguang <wxiaoguang@gmail.com> | 2022-05-20 10:26:04 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-20 04:26:04 +0200 |
commit | cc7236e852e60e4dc9c4fb5692ac62697ef0e9e3 (patch) | |
tree | fdc3a7c3fbb3a5af6954673dfbb627619c0539aa /web_src | |
parent | 3b359b1629c3b6ae35c64c750fa66b9bd4f5d223 (diff) | |
download | gitea-cc7236e852e60e4dc9c4fb5692ac62697ef0e9e3.tar.gz gitea-cc7236e852e60e4dc9c4fb5692ac62697ef0e9e3.zip |
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
Diffstat (limited to 'web_src')
-rw-r--r-- | web_src/js/features/common-global.js | 21 | ||||
-rw-r--r-- | web_src/js/features/comp/EasyMDE.js | 15 | ||||
-rw-r--r-- | web_src/js/features/repo-legacy.js | 10 | ||||
-rw-r--r-- | web_src/js/features/repo-wiki.js | 10 |
4 files changed, 46 insertions, 10 deletions
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index eb21a4bb93..57fd549019 100644 --- a/web_src/js/features/common-global.js +++ b/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 diff --git a/web_src/js/features/comp/EasyMDE.js b/web_src/js/features/comp/EasyMDE.js index 0327a1e023..61aaf23e89 100644 --- a/web_src/js/features/comp/EasyMDE.js +++ b/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()); +} diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index a24d1b974a..53471b30cf 100644 --- a/web_src/js/features/repo-legacy.js +++ b/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); } diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js index 0ac88e3f5a..27f44f4e22 100644 --- a/web_src/js/features/repo-wiki.js +++ b/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)) { |