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)
This commit is contained in:
Yarden Shoham 2024-02-22 18:35:58 +02:00 committed by Earl Warren
parent ff5df5fc97
commit 01fa6fbb97
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00

View file

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