git724/forgejo
1
0
Fork 0
Code Issues Pull requests 3 Projects 1 Releases Packages Wiki Activity

fix: avoid jumping to begin of page on edit comment action (#9645)

Browse source 
When you edit a comment and the comment already has a markdown editor,
then the code will click on the 'Write' tab, in case you canceled
editting the comment when you were at the 'Preview' tab. In
forgejo/forgejo#2681 I added `href="#"` to the tab items, this causes
that when the 'Write' tab is being clicked by the code the page is
jumped the beginning of the page.

Instead of being clever and trying to make this item interactive via
another way or via javascript avoid this jumping, we do better and make
this element a button. This item is not a link, it's a button that will
perform a action. This entirely avoids the issue of jumping and it's
still interactive.

Resolves forgejo/forgejo#9542

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9645
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
This commit is contained in:
Gusted 2025-10-13 17:46:35 +02:00 • committed by 0ko
commit d0a6f93f9e
4 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

4
templates/shared/combomarkdowneditor.tmpl
View file

@ -17,8 +17,8 @@ Template Attributes:
<markdown-toolbar>
{{if .MarkdownPreviewUrl}}
<div class="switch">
<a href="#" class="active item" data-tab-for="markdown-writer">{{ctx.Locale.Tr "write"}}</a>
<a href="#" class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{ctx.Locale.Tr "preview"}}</a>
<button type="button" class="active item" data-tab-for="markdown-writer">{{ctx.Locale.Tr "write"}}</button>
<button type="button" class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{ctx.Locale.Tr "preview"}}</button>
</div>
{{end}}
<div class="markdown-toolbar-group">

6
tests/e2e/issue-comment.test.e2e.ts
View file

@ -114,7 +114,7 @@ test('Always focus edit tab first on edit', async ({page}) => {
// Switch to preview tab and save
await page.click('#issue-1 .comment-container .context-menu');
await page.click('#issue-1 .comment-container .menu>.edit-content');
await page.locator('#issue-1 .comment-container a[data-tab-for=markdown-previewer]').click();
await page.locator('#issue-1 .comment-container [data-tab-for=markdown-previewer]').click();
await page.click('#issue-1 .comment-container .save');
await page.waitForLoadState();
@ -122,8 +122,8 @@ test('Always focus edit tab first on edit', async ({page}) => {
// Edit again and assert that edit tab should be active (and not preview tab)
await page.click('#issue-1 .comment-container .context-menu');
await page.click('#issue-1 .comment-container .menu>.edit-content');
const editTab = page.locator('#issue-1 .comment-container a[data-tab-for=markdown-writer]');
const previewTab = page.locator('#issue-1 .comment-container a[data-tab-for=markdown-previewer]');
const editTab = page.locator('#issue-1 .comment-container [data-tab-for=markdown-writer]');
const previewTab = page.locator('#issue-1 .comment-container [data-tab-for=markdown-previewer]');
await expect(editTab).toHaveClass(/active/);
await expect(previewTab).not.toHaveClass(/active/);

4
tests/e2e/markdown-editor.test.e2e.ts
View file

@ -448,7 +448,7 @@ test('Combo Markdown: preview mode switch', async ({page}) => {
await textarea.fill('**Content** :100: _100_');
// Switch to preview mode
await page.locator('a[data-tab-for="markdown-previewer"]').click();
await page.locator('[data-tab-for="markdown-previewer"]').click();
// Verify that the related UI elements were switched correctly
await expect(toolbarItem).toBeHidden();
@ -460,7 +460,7 @@ test('Combo Markdown: preview mode switch', async ({page}) => {
await expect(page.locator('[data-tab-panel="markdown-previewer"] .emoji[data-alias="100"]')).toBeVisible();
// Switch back to edit mode
await page.locator('a[data-tab-for="markdown-writer"]').click();
await page.locator('[data-tab-for="markdown-writer"]').click();
// Verify that the related UI elements were switched back correctly
await expect(toolbarItem).toBeVisible();

2
web_src/js/features/repo-legacy.js
View file

@ -379,7 +379,7 @@ async function onEditContent(event) {
editContentZone.querySelector('button[data-button-name="cancel-edit"]').addEventListener('click', cancelAndReset);
editContentZone.querySelector('button[data-button-name="save-edit"]').addEventListener('click', saveAndRefresh);
} else {
const tabEditor = editContentZone.querySelector('.combo-markdown-editor').querySelector('.switch > a[data-tab-for=markdown-writer]');
const tabEditor = editContentZone.querySelector('.combo-markdown-editor').querySelector('.switch > [data-tab-for=markdown-writer]');
tabEditor?.click();
}