From 01fa6fbb97f0e6e2cf63f0d0e84957aace05d051 Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Thu, 22 Feb 2024 18:35:58 +0200
Subject: [PATCH] Remove jQuery from the image pasting functionality (#29324)

- Switched to plain JavaScript
- Tested the image pasting functionality and it works as before

# Demo using JavaScript without jQuery

![demo](https://github.com/go-gitea/gitea/assets/20454870/018993ff-7b09-4d5f-88e0-f276368bacd6)

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
(cherry picked from commit f390d5eb4f4db21eeacdf2e7a093f6bd4e87c96f)
---
 web_src/js/features/comp/ImagePaste.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/web_src/js/features/comp/ImagePaste.js b/web_src/js/features/comp/ImagePaste.js
index 444ab8915..b727880bc 100644
--- a/web_src/js/features/comp/ImagePaste.js
+++ b/web_src/js/features/comp/ImagePaste.js
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import {htmlEscape} from 'escape-goat';
 import {POST} from '../../modules/fetch.js';
 import {imageInfo} from '../../utils/image.js';
@@ -93,11 +92,10 @@ class CodeMirrorEditor {
 }
 
 const uploadClipboardImage = async (editor, dropzone, e) => {
-  const $dropzone = $(dropzone);
-  const uploadUrl = $dropzone.attr('data-upload-url');
-  const $files = $dropzone.find('.files');
+  const uploadUrl = dropzone.getAttribute('data-upload-url');
+  const filesContainer = dropzone.querySelector('.files');
 
-  if (!uploadUrl || !$files.length) return;
+  if (!uploadUrl || !filesContainer) return;
 
   const pastedImages = clipboardPastedImages(e);
   if (!pastedImages || pastedImages.length === 0) {
@@ -126,8 +124,12 @@ const uploadClipboardImage = async (editor, dropzone, e) => {
     }
     editor.replacePlaceholder(placeholder, text);
 
-    const $input = $(`<input name="files" type="hidden">`).attr('id', uuid).val(uuid);
-    $files.append($input);
+    const input = document.createElement('input');
+    input.setAttribute('name', 'files');
+    input.setAttribute('type', 'hidden');
+    input.setAttribute('id', uuid);
+    input.value = uuid;
+    filesContainer.append(input);
   }
 };
 
@@ -140,7 +142,7 @@ export function initEasyMDEImagePaste(easyMDE, dropzone) {
 
 export function initTextareaImagePaste(textarea, dropzone) {
   if (!dropzone) return;
-  $(textarea).on('paste', async (e) => {
-    return uploadClipboardImage(new TextareaEditor(textarea), dropzone, e.originalEvent);
+  textarea.addEventListener('paste', async (e) => {
+    return uploadClipboardImage(new TextareaEditor(textarea), dropzone, e);
   });
 }