From ffce336f1802b2f2298fc8fd27e815086702c812 Mon Sep 17 00:00:00 2001 From: HesterG Date: Fri, 3 Mar 2023 03:53:22 +0800 Subject: [PATCH] Use async await to fix empty quote reply at first time (#23168) The reason why quote reply is empty is when quote reply is clicked, it triggers the click function on `.comment-form-reply` button, and when the first time this function is triggered, easyMDE for the reply has not yet initialized, so that click handler of `.quote-reply` button in `repo-legacy.js` got an `undefined` as easyMDE, and the following lines which put quoted reply into the easyMDE is not executed. The workaround in this PR is to pass the replied content to '.comment-form-reply' button if easyMDE is not yet initialized (quote reply first clicked) and put the replied content into it the after easyMDE is created. Now quote reply on first click: https://user-images.githubusercontent.com/17645053/221452823-fc699d50-1649-4af1-952e-f04fc8d2978e.mov
Update: The above change is not appropriate as stated in the [comment](https://github.com/go-gitea/gitea/pull/23168#issuecomment-1445562284) Use await instead Close #22075. Close #23247. --- web_src/js/features/comp/EasyMDE.js | 2 +- web_src/js/features/repo-issue.js | 30 ++++++++++++++++------------- web_src/js/features/repo-legacy.js | 11 +++++------ 3 files changed, 23 insertions(+), 20 deletions(-) diff --git a/web_src/js/features/comp/EasyMDE.js b/web_src/js/features/comp/EasyMDE.js index a030db83a..2979627b0 100644 --- a/web_src/js/features/comp/EasyMDE.js +++ b/web_src/js/features/comp/EasyMDE.js @@ -78,7 +78,7 @@ export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) { const inputField = easyMDE.codemirror.getInputField(); easyMDE.codemirror.on('change', (...args) => { - easyMDEOptions?.onChange(...args); + easyMDEOptions?.onChange?.(...args); }); easyMDE.codemirror.setOption('extraKeys', { 'Cmd-Enter': codeMirrorQuickSubmit, diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index 4fc8bb5e6..4163fb120 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -418,6 +418,22 @@ function assignMenuAttributes(menu) { return id; } +export async function handleReply($el) { + hideElem($el); + const form = $el.closest('.comment-code-cloud').find('.comment-form'); + form.removeClass('gt-hidden'); + const $textarea = form.find('textarea'); + let easyMDE = getAttachedEasyMDE($textarea); + if (!easyMDE) { + await attachTribute($textarea.get(), {mentions: true, emoji: true}); + easyMDE = await createCommentEasyMDE($textarea); + } + $textarea.focus(); + easyMDE.codemirror.focus(); + assignMenuAttributes(form.find('.menu')); + return easyMDE; +} + export function initRepoPullRequestReview() { if (window.location.hash && window.location.hash.startsWith('#issuecomment-')) { const commentDiv = $(window.location.hash); @@ -455,19 +471,7 @@ export function initRepoPullRequestReview() { $(document).on('click', 'button.comment-form-reply', async function (e) { e.preventDefault(); - - hideElem($(this)); - const form = $(this).closest('.comment-code-cloud').find('.comment-form'); - form.removeClass('gt-hidden'); - const $textarea = form.find('textarea'); - let easyMDE = getAttachedEasyMDE($textarea); - if (!easyMDE) { - await attachTribute($textarea.get(), {mentions: true, emoji: true}); - easyMDE = await createCommentEasyMDE($textarea); - } - $textarea.focus(); - easyMDE.codemirror.focus(); - assignMenuAttributes(form.find('.menu')); + await handleReply($(this)); }); const $reviewBox = $('.review-box-panel'); diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 8c2a0207c..22113af16 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -6,7 +6,7 @@ import { initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel, initRepoIssueCommentDelete, initRepoIssueComments, initRepoIssueDependencyDelete, initRepoIssueReferenceIssue, initRepoIssueStatusButton, initRepoIssueTitleEdit, initRepoIssueWipToggle, - initRepoPullRequestUpdate, updateIssuesMeta, + initRepoPullRequestUpdate, updateIssuesMeta, handleReply } from './repo-issue.js'; import {initUnicodeEscapeButton} from './repo-unicode-escape.js'; import {svg} from '../svg.js'; @@ -613,15 +613,15 @@ function initRepoIssueCommentEdit() { $(document).on('click', '.edit-content', onEditContent); // Quote reply - $(document).on('click', '.quote-reply', function (event) { + $(document).on('click', '.quote-reply', async function (event) { + event.preventDefault(); const target = $(this).data('target'); const quote = $(`#${target}`).text().replace(/\n/g, '\n> '); const content = `> ${quote}\n\n`; let easyMDE; if ($(this).hasClass('quote-reply-diff')) { - const $parent = $(this).closest('.comment-code-cloud'); - $parent.find('button.comment-form-reply').trigger('click'); - easyMDE = getAttachedEasyMDE($parent.find('[name="content"]')); + const $replyBtn = $(this).closest('.comment-code-cloud').find('button.comment-form-reply'); + easyMDE = await handleReply($replyBtn); } else { // for normal issue/comment page easyMDE = getAttachedEasyMDE($('#comment-form .edit_area')); @@ -637,6 +637,5 @@ function initRepoIssueCommentEdit() { easyMDE.codemirror.setCursor(easyMDE.codemirror.lineCount(), 0); }); } - event.preventDefault(); }); }