[v12.0/forgejo] fix(ui): Add pasted images to dropzone (#8362)

**Backport:** https://codeberg.org/forgejo/forgejo/pulls/7749

This adds pasted images to the dropzone. To provide the same experience
as when using the dropzone. This gives the possibility to preview and
delete the image. Additionally it provides a copy button to copy the
markdown code for inserting the image.

Fixes #4588

Co-authored-by: Beowulf <beowulf@beocode.eu>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8362
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
Co-committed-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>

tests/e2e/issue-comment-dropzone.test.e2e.ts

@@ -0,0 +1,94 @@
+// Copyright 2025 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+// @watch start
+// web_src/js/features/common-global.js
+// web_src/js/features/comp/Paste.js
+// web_src/js/features/repo-issue.js
+// web_src/js/features/repo-legacy.js
+// @watch end
+
+import {expect, type Locator, type Page, type TestInfo} from '@playwright/test';
+import {test, save_visual, dynamic_id} from './utils_e2e.ts';
+
+test.use({user: 'user2'});
+
+async function pasteImage(el: Locator) {
+  await el.evaluate(async (el) => {
+    const base64 = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAHklEQVQoU2MUk1P7z0AGYBzViDvURgMHT4oaQoEDAFuJEu2fuGfhAAAAAElFTkSuQmCC`;
+    // eslint-disable-next-line no-restricted-syntax
+    const response = await fetch(base64);
+    const blob = await response.blob();
+
+    el.focus();
+
+    let pasteEvent = new Event('paste', {bubbles: true, cancelable: true});
+    pasteEvent = Object.assign(pasteEvent, {
+      clipboardData: {
+        items: [
+          {
+            kind: 'file',
+            type: 'image/png',
+            getAsFile() {
+              return new File([blob], 'foo.png', {type: blob.type});
+            },
+          },
+        ],
+      },
+    });
+
+    el.dispatchEvent(pasteEvent);
+  });
+}
+
+async function assertCopy(page: Page, workerInfo: TestInfo, startWith: string) {
+  const project = workerInfo.project.name;
+  if (project === 'webkit' || project === 'Mobile Safari') return;
+
+  const dropzone = page.locator('.dropzone');
+  const preview = dropzone.locator('.dz-preview');
+  const copyLink = preview.locator('.octicon-copy').locator('..');
+  await copyLink.click();
+
+  const clipboardContent = await page.evaluate(() => navigator.clipboard.readText());
+  expect(clipboardContent).toContain(startWith);
+}
+
+test('Paste image in new comment', async ({page}, workerInfo) => {
+  await page.goto('/user2/repo1/issues/new');
+
+  await pasteImage(page.locator('.markdown-text-editor'));
+
+  const dropzone = page.locator('.dropzone');
+  await expect(dropzone.locator('.files')).toHaveCount(1);
+  const preview = dropzone.locator('.dz-preview');
+  await expect(preview).toHaveCount(1);
+  await expect(preview.locator('.dz-filename')).toHaveText('foo.png');
+  await expect(preview.locator('.octicon-copy')).toBeVisible();
+  await assertCopy(page, workerInfo, '![foo](');
+
+  await save_visual(page);
+});
+
+test('Re-add images to dropzone on edit', async ({page}, workerInfo) => {
+  await page.goto('/user2/repo1/issues/new');
+
+  const issueTitle = dynamic_id();
+  await page.locator('#issue_title').fill(issueTitle);
+  await pasteImage(page.locator('.markdown-text-editor'));
+  await page.getByRole('button', {name: 'Create issue'}).click();
+
+  await expect(page).toHaveURL(/\/user2\/repo1\/issues\/\d+$/);
+  await page.click('.comment-container .context-menu');
+  await page.click('.comment-container .menu > .edit-content');
+
+  const dropzone = page.locator('.dropzone');
+  await expect(dropzone.locator('.files').first()).toHaveCount(1);
+  const preview = dropzone.locator('.dz-preview');
+  await expect(preview).toHaveCount(1);
+  await expect(preview.locator('.dz-filename')).toHaveText('foo.png');
+  await expect(preview.locator('.octicon-copy')).toBeVisible();
+  await assertCopy(page, workerInfo, '![foo](');
+
+  await save_visual(page);
+});

tests/integration/issue_test.go

@@ -629,7 +629,12 @@ func TestIssueCommentAttachment(t *testing.T) {
 	assert.NotEqual(t, 0, id)
 
 	req = NewRequest(t, "GET", fmt.Sprintf("/%s/%s/comments/%d/attachments", "user2", "repo1", id))
-	session.MakeRequest(t, req, http.StatusOK)
+	resp = session.MakeRequest(t, req, http.StatusOK)
+	var attachments []*api.WebAttachment
+	DecodeJSON(t, resp, &attachments)
+	assert.Len(t, attachments, 1)
+	assert.Equal(t, attachments[0].UUID, uuid)
+	assert.Equal(t, "image/png", attachments[0].MimeType)
 
 	// Using the ID of a comment that does not belong to the repository must fail
 	req = NewRequest(t, "GET", fmt.Sprintf("/%s/%s/comments/%d/attachments", "user5", "repo4", id))