Skip to content

Commit c1331d1

Browse files
Remove jQuery AJAX from the repo editor (#29636)
# Preview Tab - Removed the jQuery AJAX call and replaced with our fetch wrapper - Tested the preview tab functionality and it works as before # Diff Tab - Removed the jQuery AJAX call and replaced with htmx - Tested the diff tab functionality and it works as before ## htmx Attributes - `hx-post="{{.RepoLink}}..."`: make a POST request to the endpoint - `hx-indicator=".tab[data-tab='diff']"`: attach the loading indicator to the tab body - `hx-target=".tab[data-tab='diff']"`: target the tab body for swapping with the response - `hx-swap="innerHTML"`: swap the target's inner HTML - `hx-include="#edit_area"`: include the value of the textarea (content) in the request body - `hx-vals='{"context":"{{.BranchLink}}"}'`: include the context in the request body - `hx-params="context,content"`: include only these keys in the request body # Demo using `fetch` and `htmx` instead of jQuery AJAX ![demo](https://github.com/go-gitea/gitea/assets/20454870/585cd6e8-f329-4c9e-ab53-a540acbd7988) --------- Signed-off-by: Yarden Shoham <[email protected]> Co-authored-by: silverwind <[email protected]>
1 parent c72e1a7 commit c1331d1

File tree

2 files changed

+16
-30
lines changed

2 files changed

+16
-30
lines changed

templates/repo/editor/edit.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
3131
<a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
3232
{{if not .IsNewFile}}
33-
<a class="item" data-tab="diff" data-url="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" data-context="{{.BranchLink}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
33+
<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
3434
{{end}}
3535
</div>
3636
<div class="ui bottom attached active tab segment" data-tab="write">
@@ -45,7 +45,7 @@
4545
{{ctx.Locale.Tr "loading"}}
4646
</div>
4747
<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">
48-
{{ctx.Locale.Tr "loading"}}
48+
<div class="tw-p-16"></div>
4949
</div>
5050
</div>
5151
{{template "repo/editor/commit_form" .}}

web_src/js/features/repo-editor.js

Lines changed: 14 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@ import {createCodeEditor} from './codeeditor.js';
44
import {hideElem, showElem} from '../utils/dom.js';
55
import {initMarkupContent} from '../markup/content.js';
66
import {attachRefIssueContextPopup} from './contextpopup.js';
7-
8-
const {csrfToken} = window.config;
7+
import {POST} from '../modules/fetch.js';
98

109
function initEditPreviewTab($form) {
1110
const $tabMenu = $form.find('.tabular.menu');
1211
$tabMenu.find('.item').tab();
1312
const $previewTab = $tabMenu.find(`.item[data-tab="${$tabMenu.data('preview')}"]`);
1413
if ($previewTab.length) {
15-
$previewTab.on('click', function () {
14+
$previewTab.on('click', async function () {
1615
const $this = $(this);
1716
let context = `${$this.data('context')}/`;
1817
const mode = $this.data('markup-mode') || 'comment';
@@ -21,43 +20,30 @@ function initEditPreviewTab($form) {
2120
context += treePathEl.val();
2221
}
2322
context = context.substring(0, context.lastIndexOf('/'));
24-
$.post($this.data('url'), {
25-
_csrf: csrfToken,
26-
mode,
27-
context,
28-
text: $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val(),
29-
file_path: treePathEl.val(),
30-
}, (data) => {
23+
24+
const formData = new FormData();
25+
formData.append('mode', mode);
26+
formData.append('context', context);
27+
formData.append('text', $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val());
28+
formData.append('file_path', treePathEl.val());
29+
try {
30+
const response = await POST($this.data('url'), {data: formData});
31+
const data = await response.text();
3132
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
3233
renderPreviewPanelContent($previewPanel, data);
33-
});
34+
} catch (error) {
35+
console.error('Error:', error);
36+
}
3437
});
3538
}
3639
}
3740

38-
function initEditDiffTab($form) {
39-
const $tabMenu = $form.find('.tabular.menu');
40-
$tabMenu.find('.item').tab();
41-
$tabMenu.find(`.item[data-tab="${$tabMenu.data('diff')}"]`).on('click', function () {
42-
const $this = $(this);
43-
$.post($this.data('url'), {
44-
_csrf: csrfToken,
45-
context: $this.data('context'),
46-
content: $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val(),
47-
}, (data) => {
48-
const $diffPreviewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('diff')}"]`);
49-
$diffPreviewPanel.html(data);
50-
});
51-
});
52-
}
53-
5441
function initEditorForm() {
5542
if ($('.repository .edit.form').length === 0) {
5643
return;
5744
}
5845

5946
initEditPreviewTab($('.repository .edit.form'));
60-
initEditDiffTab($('.repository .edit.form'));
6147
}
6248

6349
function getCursorPosition($e) {

0 commit comments

Comments
 (0)