ui: use switch for markdown editor modes (#7481)

Replaces https://codeberg.org/forgejo/forgejo/pulls/5478
Closes https://codeberg.org/forgejo/forgejo/issues/244

Use switch for preview mode switching instead of tabs. It is placed in line with the toolbar buttons.

Preview:
* https://codeberg.org/attachments/38910747-c14c-41d1-9935-c35f3e17033b
* https://codeberg.org/attachments/ff8ea47a-f157-424f-8b7f-af1008d5e8b5

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7481
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
This commit is contained in:
0ko 2025-04-07 13:47:13 +00:00 committed by David Rotermund
parent 61ad6d5bc0
commit 2430107459
5 changed files with 94 additions and 42 deletions

View file

@ -39,7 +39,7 @@ test('Markdown image preview behaviour', async ({page}, workerInfo) => {
await save_visual(page);
});
test('markdown indentation', async ({page}) => {
test('Markdown indentation', async ({page}) => {
const initText = `* first\n* second\n* third\n* last`;
const response = await page.goto('/user2/repo1/issues/new');
@ -109,7 +109,7 @@ test('markdown indentation', async ({page}) => {
await expect(textarea).toHaveValue(initText);
});
test('markdown list continuation', async ({page}) => {
test('Markdown list continuation', async ({page}) => {
const initText = `* first\n* second`;
const response = await page.goto('/user2/repo1/issues/new');
@ -202,7 +202,7 @@ test('markdown list continuation', async ({page}) => {
}
});
test('markdown insert table', async ({page}) => {
test('Markdown insert table', async ({page}) => {
const response = await page.goto('/user2/repo1/issues/new');
expect(response?.status()).toBe(200);
@ -225,7 +225,7 @@ test('markdown insert table', async ({page}) => {
await save_visual(page);
});
test('markdown insert link', async ({page}) => {
test('Markdown insert link', async ({page}) => {
const response = await page.goto('/user2/repo1/issues/new');
expect(response?.status()).toBe(200);
@ -277,3 +277,43 @@ test('text expander has higher prio then prefix continuation', async ({page}) =>
await textarea.press('Enter');
await expect(textarea).toHaveValue(`* first\n* 😸\n* @user2 \n* `);
});
test('Combo Markdown: preview mode switch', async ({page}) => {
// Load page with editor
const response = await page.goto('/user2/repo1/issues/new');
expect(response?.status()).toBe(200);
const toolbarItem = page.locator('md-header');
const editorPanel = page.locator('[data-tab-panel="markdown-writer"]');
const previewPanel = page.locator('[data-tab-panel="markdown-previewer"]');
// Verify correct visibility of related UI elements
await expect(toolbarItem).toBeVisible();
await expect(editorPanel).toBeVisible();
await expect(previewPanel).toBeHidden();
// Fill some content
const textarea = page.locator('textarea.markdown-text-editor');
await textarea.fill('**Content** :100: _100_');
// Switch to preview mode
await page.locator('a[data-tab-for="markdown-previewer"]').click();
// Verify that the related UI elements were switched correctly
await expect(toolbarItem).toBeHidden();
await expect(editorPanel).toBeHidden();
await expect(previewPanel).toBeVisible();
await save_visual(page);
// Verify that some content rendered
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();
// Verify that the related UI elements were switched back correctly
await expect(toolbarItem).toBeVisible();
await expect(editorPanel).toBeVisible();
await expect(previewPanel).toBeHidden();
await save_visual(page);
});