tdsds.com/gitea
tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-01-05 07:24:25 +00:00
Code Releases Activity

Refactor comment history and fix content edit (#33018)

Browse Source 
And fix a regression bug for comment content editing.

Now 11 "import jquery" files left
This commit is contained in:
wxiaoguang 2024-12-28 19:26:16 +08:00 committed by GitHub
parent e69da2cd07
commit 3d3ece36d2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 43 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/repo/diff/box.tmpl
View File

@ -235,7 +235,7 @@
{{if and (not $.Repository.IsArchived) (not .DiffNotAvailable)}} {{if and (not $.Repository.IsArchived) (not .DiffNotAvailable)}}
<template id="issue-comment-editor-template"> <template id="issue-comment-editor-template">
<div class="ui form comment"> <form class="ui form comment">
{{template "shared/combomarkdowneditor" (dict {{template "shared/combomarkdowneditor" (dict
"CustomInit" true "CustomInit" true
"MarkdownPreviewInRepo" $.Repository "MarkdownPreviewInRepo" $.Repository
@ -252,7 +252,7 @@
<button class="ui cancel button">{{ctx.Locale.Tr "repo.issues.cancel"}}</button> <button class="ui cancel button">{{ctx.Locale.Tr "repo.issues.cancel"}}</button>
<button class="ui primary button">{{ctx.Locale.Tr "repo.issues.save"}}</button> <button class="ui primary button">{{ctx.Locale.Tr "repo.issues.save"}}</button>
</div> </div>
</div> </form>
</template> </template>
{{end}} {{end}}
{{if (not .DiffNotAvailable)}} {{if (not .DiffNotAvailable)}}

2
web_src/js/features/repo-diff.ts
View File

@ -38,6 +38,8 @@ function initRepoDiffFileViewToggle() {
} }
function initRepoDiffConversationForm() { function initRepoDiffConversationForm() {
// FIXME: there could be various different form in a conversation-holder (for example: reply form, edit form).
// This listener is for "reply form" only, it should clearly distinguish different forms in the future.
addDelegatedEventListener<HTMLFormElement, SubmitEvent>(document, 'submit', '.conversation-holder form', async (form, e) => { addDelegatedEventListener<HTMLFormElement, SubmitEvent>(document, 'submit', '.conversation-holder form', async (form, e) => {
e.preventDefault(); e.preventDefault();
const textArea = form.querySelector<HTMLTextAreaElement>('textarea'); const textArea = form.querySelector<HTMLTextAreaElement>('textarea');

69
web_src/js/features/repo-issue-content.ts
View File

@ -1,20 +1,17 @@
import $ from 'jquery';
import {svg} from '../svg.ts'; import {svg} from '../svg.ts';
import {showErrorToast} from '../modules/toast.ts'; import {showErrorToast} from '../modules/toast.ts';
import {GET, POST} from '../modules/fetch.ts'; import {GET, POST} from '../modules/fetch.ts';
import {showElem} from '../utils/dom.ts'; import {createElementFromHTML, showElem} from '../utils/dom.ts';
import {parseIssuePageInfo} from '../utils.ts'; import {parseIssuePageInfo} from '../utils.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
let i18nTextEdited; let i18nTextEdited: string;
let i18nTextOptions; let i18nTextOptions: string;
let i18nTextDeleteFromHistory; let i18nTextDeleteFromHistory: string;
let i18nTextDeleteFromHistoryConfirm; let i18nTextDeleteFromHistoryConfirm: string;
function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleHtml) { function showContentHistoryDetail(issueBaseUrl: string, commentId: string, historyId: string, itemTitleHtml: string) {
let $dialog = $('.content-history-detail-dialog'); const elDetailDialog = createElementFromHTML(`
if ($dialog.length) return;
$dialog = $(`
<div class="ui modal content-history-detail-dialog"> <div class="ui modal content-history-detail-dialog">
${svg('octicon-x', 16, 'close icon inside')} ${svg('octicon-x', 16, 'close icon inside')}
<div class="header tw-flex tw-items-center tw-justify-between"> <div class="header tw-flex tw-items-center tw-justify-between">
@ -29,8 +26,11 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
</div> </div>
<div class="comment-diff-data is-loading"></div> <div class="comment-diff-data is-loading"></div>
</div>`); </div>`);
$dialog.appendTo($('body')); document.body.append(elDetailDialog);
$dialog.find('.dialog-header-options').dropdown({ const elOptionsDropdown = elDetailDialog.querySelector('.ui.dropdown.dialog-header-options');
const $fomanticDialog = fomanticQuery(elDetailDialog);
const $fomanticDropdownOptions = fomanticQuery(elOptionsDropdown);
$fomanticDropdownOptions.dropdown({
showOnFocus: false, showOnFocus: false,
allowReselection: true, allowReselection: true,
async onChange(_value, _text, $item) { async onChange(_value, _text, $item) {
@ -46,7 +46,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
const resp = await response.json(); const resp = await response.json();
if (resp.ok) { if (resp.ok) {
$dialog.modal('hide'); $fomanticDialog.modal('hide');
} else { } else {
showErrorToast(resp.message); showErrorToast(resp.message);
} }
@ -60,10 +60,10 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
} }
}, },
onHide() { onHide() {
$(this).dropdown('clear', true); $fomanticDropdownOptions.dropdown('clear', true);
}, },
}); });
$dialog.modal({ $fomanticDialog.modal({
async onShow() { async onShow() {
try { try {
const params = new URLSearchParams(); const params = new URLSearchParams();
@ -74,25 +74,25 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
const response = await GET(url); const response = await GET(url);
const resp = await response.json(); const resp = await response.json();
const commentDiffData = $dialog.find('.comment-diff-data')[0]; const commentDiffData = elDetailDialog.querySelector('.comment-diff-data');
commentDiffData?.classList.remove('is-loading'); commentDiffData.classList.remove('is-loading');
commentDiffData.innerHTML = resp.diffHtml; commentDiffData.innerHTML = resp.diffHtml;
// there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden. // there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden.
if (resp.canSoftDelete) { if (resp.canSoftDelete) {
showElem($dialog.find('.dialog-header-options')); showElem(elOptionsDropdown);
} }
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);
} }
}, },
onHidden() { onHidden() {
$dialog.remove(); $fomanticDialog.remove();
}, },
}).modal('show'); }).modal('show');
} }
function showContentHistoryMenu(issueBaseUrl, $item, commentId) { function showContentHistoryMenu(issueBaseUrl: string, elCommentItem: Element, commentId: string) {
const $headerLeft = $item.find('.comment-header-left'); const elHeaderLeft = elCommentItem.querySelector('.comment-header-left');
const menuHtml = ` const menuHtml = `
<div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}"> <div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}">
&bull; ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')} &bull; ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')}
@ -100,9 +100,12 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
</div> </div>
</div>`; </div>`;
$headerLeft.find(`.content-history-menu`).remove(); elHeaderLeft.querySelector(`.ui.dropdown.content-history-menu`)?.remove(); // remove the old one if exists
$headerLeft.append($(menuHtml)); elHeaderLeft.append(createElementFromHTML(menuHtml));
$headerLeft.find('.dropdown').dropdown({
const elDropdown = elHeaderLeft.querySelector('.ui.dropdown.content-history-menu');
const $fomanticDropdown = fomanticQuery(elDropdown);
$fomanticDropdown.dropdown({
action: 'hide', action: 'hide',
apiSettings: { apiSettings: {
cache: false, cache: false,
@ -110,7 +113,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
}, },
saveRemoteData: false, saveRemoteData: false,
onHide() { onHide() {
$(this).dropdown('change values', null); $fomanticDropdown.dropdown('change values', null);
}, },
onChange(value, itemHtml, $item) { onChange(value, itemHtml, $item) {
if (value && !$item.find('[data-history-is-deleted=1]').length) { if (value && !$item.find('[data-history-is-deleted=1]').length) {
@ -124,9 +127,9 @@ export async function initRepoIssueContentHistory() {
const issuePageInfo = parseIssuePageInfo(); const issuePageInfo = parseIssuePageInfo();
if (!issuePageInfo.issueNumber) return; if (!issuePageInfo.issueNumber) return;
const $itemIssue = $('.repository.issue .timeline-item.comment.first'); // issue(PR) main content const elIssueDescription = document.querySelector('.repository.issue .timeline-item.comment.first'); // issue(PR) main content
const $comments = $('.repository.issue .comment-list .comment'); // includes: issue(PR) comments, review comments, code comments const elComments = document.querySelectorAll('.repository.issue .comment-list .comment'); // includes: issue(PR) comments, review comments, code comments
if (!$itemIssue.length && !$comments.length) return; if (!elIssueDescription && !elComments.length) return;
const issueBaseUrl = `${issuePageInfo.repoLink}/issues/${issuePageInfo.issueNumber}`; const issueBaseUrl = `${issuePageInfo.repoLink}/issues/${issuePageInfo.issueNumber}`;
@ -139,13 +142,13 @@ export async function initRepoIssueContentHistory() {
i18nTextDeleteFromHistoryConfirm = resp.i18n.textDeleteFromHistoryConfirm; i18nTextDeleteFromHistoryConfirm = resp.i18n.textDeleteFromHistoryConfirm;
i18nTextOptions = resp.i18n.textOptions; i18nTextOptions = resp.i18n.textOptions;
if (resp.editedHistoryCountMap[0] && $itemIssue.length) { if (resp.editedHistoryCountMap[0] && elIssueDescription) {
showContentHistoryMenu(issueBaseUrl, $itemIssue, '0'); showContentHistoryMenu(issueBaseUrl, elIssueDescription, '0');
} }
for (const [commentId, _editedCount] of Object.entries(resp.editedHistoryCountMap)) { for (const [commentId, _editedCount] of Object.entries(resp.editedHistoryCountMap)) {
if (commentId === '0') continue; if (commentId === '0') continue;
const $itemComment = $(`#issuecomment-${commentId}`); const elIssueComment = document.querySelector(`#issuecomment-${commentId}`);
showContentHistoryMenu(issueBaseUrl, $itemComment, commentId); if (elIssueComment) showContentHistoryMenu(issueBaseUrl, elIssueComment, commentId);
} }
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);

3
web_src/js/features/repo-issue-edit.ts
View File

@ -30,6 +30,9 @@ async function tryOnEditContent(e) {
const saveAndRefresh = async (e) => { const saveAndRefresh = async (e) => {
e.preventDefault(); e.preventDefault();
// we are already in a form, do not bubble up to the document otherwise there will be other "form submit handlers"
// at the moment, the form submit event conflicts with initRepoDiffConversationForm (global '.conversation-holder form' event handler)
e.stopPropagation();
renderContent.classList.add('is-loading'); renderContent.classList.add('is-loading');
showElem(renderContent); showElem(renderContent);
hideElem(editContentZone); hideElem(editContentZone);