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

<br />


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.
This commit is contained in:
HesterG 2023-03-03 03:53:22 +08:00 committed by GitHub
parent a14e6af236
commit ffce336f18
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 20 deletions

View file

@ -78,7 +78,7 @@ export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) {
const inputField = easyMDE.codemirror.getInputField(); const inputField = easyMDE.codemirror.getInputField();
easyMDE.codemirror.on('change', (...args) => { easyMDE.codemirror.on('change', (...args) => {
easyMDEOptions?.onChange(...args); easyMDEOptions?.onChange?.(...args);
}); });
easyMDE.codemirror.setOption('extraKeys', { easyMDE.codemirror.setOption('extraKeys', {
'Cmd-Enter': codeMirrorQuickSubmit, 'Cmd-Enter': codeMirrorQuickSubmit,

View file

@ -418,6 +418,22 @@ function assignMenuAttributes(menu) {
return id; 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() { export function initRepoPullRequestReview() {
if (window.location.hash && window.location.hash.startsWith('#issuecomment-')) { if (window.location.hash && window.location.hash.startsWith('#issuecomment-')) {
const commentDiv = $(window.location.hash); const commentDiv = $(window.location.hash);
@ -455,19 +471,7 @@ export function initRepoPullRequestReview() {
$(document).on('click', 'button.comment-form-reply', async function (e) { $(document).on('click', 'button.comment-form-reply', async function (e) {
e.preventDefault(); e.preventDefault();
await handleReply($(this));
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'));
}); });
const $reviewBox = $('.review-box-panel'); const $reviewBox = $('.review-box-panel');

View file

@ -6,7 +6,7 @@ import {
initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel, initRepoIssueCommentDelete, initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel, initRepoIssueCommentDelete,
initRepoIssueComments, initRepoIssueDependencyDelete, initRepoIssueReferenceIssue, initRepoIssueComments, initRepoIssueDependencyDelete, initRepoIssueReferenceIssue,
initRepoIssueStatusButton, initRepoIssueTitleEdit, initRepoIssueWipToggle, initRepoIssueStatusButton, initRepoIssueTitleEdit, initRepoIssueWipToggle,
initRepoPullRequestUpdate, updateIssuesMeta, initRepoPullRequestUpdate, updateIssuesMeta, handleReply
} from './repo-issue.js'; } from './repo-issue.js';
import {initUnicodeEscapeButton} from './repo-unicode-escape.js'; import {initUnicodeEscapeButton} from './repo-unicode-escape.js';
import {svg} from '../svg.js'; import {svg} from '../svg.js';
@ -613,15 +613,15 @@ function initRepoIssueCommentEdit() {
$(document).on('click', '.edit-content', onEditContent); $(document).on('click', '.edit-content', onEditContent);
// Quote reply // 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 target = $(this).data('target');
const quote = $(`#${target}`).text().replace(/\n/g, '\n> '); const quote = $(`#${target}`).text().replace(/\n/g, '\n> ');
const content = `> ${quote}\n\n`; const content = `> ${quote}\n\n`;
let easyMDE; let easyMDE;
if ($(this).hasClass('quote-reply-diff')) { if ($(this).hasClass('quote-reply-diff')) {
const $parent = $(this).closest('.comment-code-cloud'); const $replyBtn = $(this).closest('.comment-code-cloud').find('button.comment-form-reply');
$parent.find('button.comment-form-reply').trigger('click'); easyMDE = await handleReply($replyBtn);
easyMDE = getAttachedEasyMDE($parent.find('[name="content"]'));
} else { } else {
// for normal issue/comment page // for normal issue/comment page
easyMDE = getAttachedEasyMDE($('#comment-form .edit_area')); easyMDE = getAttachedEasyMDE($('#comment-form .edit_area'));
@ -637,6 +637,5 @@ function initRepoIssueCommentEdit() {
easyMDE.codemirror.setCursor(easyMDE.codemirror.lineCount(), 0); easyMDE.codemirror.setCursor(easyMDE.codemirror.lineCount(), 0);
}); });
} }
event.preventDefault();
}); });
} }