From b32669900342d3bdefdd40ba4999a5b15153d9c3 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 6 Mar 2024 19:20:24 +0000 Subject: [PATCH 1/2] Remove jQuery AJAX from the repo editor # 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 targets 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 Signed-off-by: Yarden Shoham --- templates/repo/editor/edit.tmpl | 2 +- web_src/js/features/repo-editor.js | 42 ++++++++++-------------------- 2 files changed, 15 insertions(+), 29 deletions(-) diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index a6dce81c08e9b..6e009a87a66de 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -30,7 +30,7 @@ {{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}} {{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}} {{if not .IsNewFile}} - {{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}} + {{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}} {{end}}
diff --git a/web_src/js/features/repo-editor.js b/web_src/js/features/repo-editor.js index f00f817223f5d..4fe7ed8a4dd6b 100644 --- a/web_src/js/features/repo-editor.js +++ b/web_src/js/features/repo-editor.js @@ -4,15 +4,14 @@ import {createCodeEditor} from './codeeditor.js'; import {hideElem, showElem} from '../utils/dom.js'; import {initMarkupContent} from '../markup/content.js'; import {attachRefIssueContextPopup} from './contextpopup.js'; - -const {csrfToken} = window.config; +import {POST} from '../modules/fetch.js'; function initEditPreviewTab($form) { const $tabMenu = $form.find('.tabular.menu'); $tabMenu.find('.item').tab(); const $previewTab = $tabMenu.find(`.item[data-tab="${$tabMenu.data('preview')}"]`); if ($previewTab.length) { - $previewTab.on('click', function () { + $previewTab.on('click', async function () { const $this = $(this); let context = `${$this.data('context')}/`; const mode = $this.data('markup-mode') || 'comment'; @@ -21,43 +20,30 @@ function initEditPreviewTab($form) { context += treePathEl.val(); } context = context.substring(0, context.lastIndexOf('/')); - $.post($this.data('url'), { - _csrf: csrfToken, - mode, - context, - text: $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val(), - file_path: treePathEl.val(), - }, (data) => { + + const formData = new FormData(); + formData.append('mode', mode); + formData.append('context', context); + formData.append('text', $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val()); + formData.append('file_path', treePathEl.val()); + try { + const response = await POST($this.data('url'), {data: formData}); + const data = await response.text(); const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`); renderPreviewPanelContent($previewPanel, data); - }); + } catch (error) { + console.error('Error:', error); + } }); } } -function initEditDiffTab($form) { - const $tabMenu = $form.find('.tabular.menu'); - $tabMenu.find('.item').tab(); - $tabMenu.find(`.item[data-tab="${$tabMenu.data('diff')}"]`).on('click', function () { - const $this = $(this); - $.post($this.data('url'), { - _csrf: csrfToken, - context: $this.data('context'), - content: $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val(), - }, (data) => { - const $diffPreviewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('diff')}"]`); - $diffPreviewPanel.html(data); - }); - }); -} - function initEditorForm() { if ($('.repository .edit.form').length === 0) { return; } initEditPreviewTab($('.repository .edit.form')); - initEditDiffTab($('.repository .edit.form')); } function getCursorPosition($e) { From 784a8382048959c77c48c4a103c5eb0cff63a1b9 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 6 Mar 2024 21:14:49 +0000 Subject: [PATCH 2/2] Remove "Loading..." --- templates/repo/editor/edit.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index 6e009a87a66de..05a8d966815b0 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -45,7 +45,7 @@ {{ctx.Locale.Tr "loading"}}
- {{ctx.Locale.Tr "loading"}} +
{{template "repo/editor/commit_form" .}}