Skip to content

Commit 8639203

Browse files
wxiaoguangwxiaoguang
committed
fix
1 parent e69da2c commit 8639203

File tree

4 files changed

+43
-35
lines changed

4 files changed

+43
-35
lines changed

‎templates/repo/diff/box.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@
235235

236236
{{if and (not $.Repository.IsArchived) (not .DiffNotAvailable)}}
237237
<template id="issue-comment-editor-template">
238-
<div class="ui form comment">
238+
<form class="ui form comment">
239239
{{template "shared/combomarkdowneditor" (dict
240240
"CustomInit" true
241241
"MarkdownPreviewInRepo" $.Repository
@@ -252,7 +252,7 @@
252252
<button class="ui cancel button">{{ctx.Locale.Tr "repo.issues.cancel"}}</button>
253253
<button class="ui primary button">{{ctx.Locale.Tr "repo.issues.save"}}</button>
254254
</div>
255-
</div>
255+
</form>
256256
</template>
257257
{{end}}
258258
{{if (not .DiffNotAvailable)}}

‎web_src/js/features/repo-diff.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ function initRepoDiffFileViewToggle() {
3838
}
3939

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

‎web_src/js/features/repo-issue-content.ts

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
1-
import $ from 'jquery';
21
import {svg} from '../svg.ts';
32
import {showErrorToast} from '../modules/toast.ts';
43
import {GET, POST} from '../modules/fetch.ts';
5-
import {showElem} from '../utils/dom.ts';
4+
import {createElementFromHTML, showElem} from '../utils/dom.ts';
65
import {parseIssuePageInfo} from '../utils.ts';
6+
import {fomanticQuery} from '../modules/fomantic/base.ts';
77

8-
let i18nTextEdited;
9-
let i18nTextOptions;
10-
let i18nTextDeleteFromHistory;
11-
let i18nTextDeleteFromHistoryConfirm;
8+
let i18nTextEdited: string;
9+
let i18nTextOptions: string;
10+
let i18nTextDeleteFromHistory: string;
11+
let i18nTextDeleteFromHistoryConfirm: string;
1212

13-
function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleHtml) {
14-
let $dialog = $('.content-history-detail-dialog');
15-
if ($dialog.length) return;
16-
17-
$dialog = $(`
13+
function showContentHistoryDetail(issueBaseUrl: string, commentId: string, historyId: string, itemTitleHtml: string) {
14+
const elDetailDialog = createElementFromHTML(`
1815
<div class="ui modal content-history-detail-dialog">
1916
${svg('octicon-x', 16, 'close icon inside')}
2017
<div class="header tw-flex tw-items-center tw-justify-between">
@@ -29,8 +26,11 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
2926
</div>
3027
<div class="comment-diff-data is-loading"></div>
3128
</div>`);
32-
$dialog.appendTo($('body'));
33-
$dialog.find('.dialog-header-options').dropdown({
29+
document.body.append(elDetailDialog);
30+
const elOptionsDropdown = elDetailDialog.querySelector('.ui.dropdown.dialog-header-options');
31+
const $fomanticDialog = fomanticQuery(elDetailDialog);
32+
const $fomanticDropdownOptions = fomanticQuery(elOptionsDropdown);
33+
$fomanticDropdownOptions.dropdown({
3434
showOnFocus: false,
3535
allowReselection: true,
3636
async onChange(_value, _text, $item) {
@@ -46,7 +46,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
4646
const resp = await response.json();
4747

4848
if (resp.ok) {
49-
$dialog.modal('hide');
49+
$fomanticDialog.modal('hide');
5050
} else {
5151
showErrorToast(resp.message);
5252
}
@@ -60,10 +60,10 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
6060
}
6161
},
6262
onHide() {
63-
$(this).dropdown('clear', true);
63+
$fomanticDropdownOptions.dropdown('clear', true);
6464
},
6565
});
66-
$dialog.modal({
66+
$fomanticDialog.modal({
6767
async onShow() {
6868
try {
6969
const params = new URLSearchParams();
@@ -74,43 +74,46 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
7474
const response = await GET(url);
7575
const resp = await response.json();
7676

77-
const commentDiffData = $dialog.find('.comment-diff-data')[0];
78-
commentDiffData?.classList.remove('is-loading');
77+
const commentDiffData = elDetailDialog.querySelector('.comment-diff-data');
78+
commentDiffData.classList.remove('is-loading');
7979
commentDiffData.innerHTML = resp.diffHtml;
8080
// there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden.
8181
if (resp.canSoftDelete) {
82-
showElem($dialog.find('.dialog-header-options'));
82+
showElem(elOptionsDropdown);
8383
}
8484
} catch (error) {
8585
console.error('Error:', error);
8686
}
8787
},
8888
onHidden() {
89-
$dialog.remove();
89+
$fomanticDialog.remove();
9090
},
9191
}).modal('show');
9292
}
9393

94-
function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
95-
const $headerLeft = $item.find('.comment-header-left');
94+
function showContentHistoryMenu(issueBaseUrl: string, elCommentItem: Element, commentId: string) {
95+
const elHeaderLeft = elCommentItem.querySelector('.comment-header-left');
9696
const menuHtml = `
9797
<div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}">
9898
&bull; ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')}
9999
<div class="menu">
100100
</div>
101101
</div>`;
102102

103-
$headerLeft.find(`.content-history-menu`).remove();
104-
$headerLeft.append($(menuHtml));
105-
$headerLeft.find('.dropdown').dropdown({
103+
elHeaderLeft.querySelector(`.ui.dropdown.content-history-menu`)?.remove(); // remove the old one if exists
104+
elHeaderLeft.append(createElementFromHTML(menuHtml));
105+
106+
const elDropdown = elHeaderLeft.querySelector('.ui.dropdown.content-history-menu');
107+
const $fomanticDropdown = fomanticQuery(elDropdown);
108+
$fomanticDropdown.dropdown({
106109
action: 'hide',
107110
apiSettings: {
108111
cache: false,
109112
url: `${issueBaseUrl}/content-history/list?comment_id=${commentId}`,
110113
},
111114
saveRemoteData: false,
112115
onHide() {
113-
$(this).dropdown('change values', null);
116+
$fomanticDropdown.dropdown('change values', null);
114117
},
115118
onChange(value, itemHtml, $item) {
116119
if (value && !$item.find('[data-history-is-deleted=1]').length) {
@@ -124,9 +127,9 @@ export async function initRepoIssueContentHistory() {
124127
const issuePageInfo = parseIssuePageInfo();
125128
if (!issuePageInfo.issueNumber) return;
126129

127-
const $itemIssue = $('.repository.issue .timeline-item.comment.first'); // issue(PR) main content
128-
const $comments = $('.repository.issue .comment-list .comment'); // includes: issue(PR) comments, review comments, code comments
129-
if (!$itemIssue.length && !$comments.length) return;
130+
const elIssueDescription = document.querySelector('.repository.issue .timeline-item.comment.first'); // issue(PR) main content
131+
const elComments = document.querySelectorAll('.repository.issue .comment-list .comment'); // includes: issue(PR) comments, review comments, code comments
132+
if (!elIssueDescription && !elComments.length) return;
130133

131134
const issueBaseUrl = `${issuePageInfo.repoLink}/issues/${issuePageInfo.issueNumber}`;
132135

@@ -139,13 +142,13 @@ export async function initRepoIssueContentHistory() {
139142
i18nTextDeleteFromHistoryConfirm = resp.i18n.textDeleteFromHistoryConfirm;
140143
i18nTextOptions = resp.i18n.textOptions;
141144

142-
if (resp.editedHistoryCountMap[0] && $itemIssue.length) {
143-
showContentHistoryMenu(issueBaseUrl, $itemIssue, '0');
145+
if (resp.editedHistoryCountMap[0] && elIssueDescription) {
146+
showContentHistoryMenu(issueBaseUrl, elIssueDescription, '0');
144147
}
145148
for (const [commentId, _editedCount] of Object.entries(resp.editedHistoryCountMap)) {
146149
if (commentId === '0') continue;
147-
const $itemComment = $(`#issuecomment-${commentId}`);
148-
showContentHistoryMenu(issueBaseUrl, $itemComment, commentId);
150+
const elIssueComment = document.querySelector(`#issuecomment-${commentId}`);
151+
if (elIssueComment) showContentHistoryMenu(issueBaseUrl, elIssueComment, commentId);
149152
}
150153
} catch (error) {
151154
console.error('Error:', error);

‎web_src/js/features/repo-issue-edit.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ async function tryOnEditContent(e) {
3030

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

0 commit comments

Comments
 (0)