mirror of
https://github.com/go-gitea/gitea
synced 2024-08-27 17:53:41 +02:00
The first step of the plan * #23290 Thanks to @silverwind for the first try in #15394 . Close #10729 and a lot of related issues. The EasyMDE is not removed, now it works as a fallback, users can switch between these two editors. Editor list: * Issue / PR comment * Issue / PR comment edit * Issue / PR comment quote reply * PR diff view, inline comment * PR diff view, inline comment edit * PR diff view, inline comment quote reply * Release editor * Wiki editor Some editors have attached dropzone Screenshots: <details> ![image](https://user-images.githubusercontent.com/2114189/229363558-7e44dcd4-fb6d-48a0-92f8-bd12f57bb0a0.png) ![image](https://user-images.githubusercontent.com/2114189/229363566-781489c8-5306-4347-9714-d71af5d5b0b1.png) ![image](https://user-images.githubusercontent.com/2114189/229363771-1717bf5c-0f2a-4fc2-ba84-4f5b2a343a11.png) ![image](https://user-images.githubusercontent.com/2114189/229363793-ad362d0f-a045-47bd-8f9d-05a9a842bb39.png) </details> --------- Co-authored-by: silverwind <me@silverwind.io>
131 lines
3.7 KiB
JavaScript
131 lines
3.7 KiB
JavaScript
import $ from 'jquery';
|
|
|
|
const {csrfToken} = window.config;
|
|
|
|
async function uploadFile(file, uploadUrl) {
|
|
const formData = new FormData();
|
|
formData.append('file', file, file.name);
|
|
|
|
const res = await fetch(uploadUrl, {
|
|
method: 'POST',
|
|
headers: {'X-Csrf-Token': csrfToken},
|
|
body: formData,
|
|
});
|
|
return await res.json();
|
|
}
|
|
|
|
function clipboardPastedImages(e) {
|
|
if (!e.clipboardData) return [];
|
|
|
|
const files = [];
|
|
for (const item of e.clipboardData.items || []) {
|
|
if (!item.type || !item.type.startsWith('image/')) continue;
|
|
files.push(item.getAsFile());
|
|
}
|
|
return files;
|
|
}
|
|
|
|
class TextareaEditor {
|
|
constructor(editor) {
|
|
this.editor = editor;
|
|
}
|
|
|
|
insertPlaceholder(value) {
|
|
const editor = this.editor;
|
|
const startPos = editor.selectionStart;
|
|
const endPos = editor.selectionEnd;
|
|
editor.value = editor.value.substring(0, startPos) + value + editor.value.substring(endPos);
|
|
editor.selectionStart = startPos;
|
|
editor.selectionEnd = startPos + value.length;
|
|
editor.focus();
|
|
}
|
|
|
|
replacePlaceholder(oldVal, newVal) {
|
|
const editor = this.editor;
|
|
const startPos = editor.selectionStart;
|
|
const endPos = editor.selectionEnd;
|
|
if (editor.value.substring(startPos, endPos) === oldVal) {
|
|
editor.value = editor.value.substring(0, startPos) + newVal + editor.value.substring(endPos);
|
|
editor.selectionEnd = startPos + newVal.length;
|
|
} else {
|
|
editor.value = editor.value.replace(oldVal, newVal);
|
|
editor.selectionEnd -= oldVal.length;
|
|
editor.selectionEnd += newVal.length;
|
|
}
|
|
editor.selectionStart = editor.selectionEnd;
|
|
editor.focus();
|
|
}
|
|
}
|
|
|
|
class CodeMirrorEditor {
|
|
constructor(editor) {
|
|
this.editor = editor;
|
|
}
|
|
|
|
insertPlaceholder(value) {
|
|
const editor = this.editor;
|
|
const startPoint = editor.getCursor('start');
|
|
const endPoint = editor.getCursor('end');
|
|
editor.replaceSelection(value);
|
|
endPoint.ch = startPoint.ch + value.length;
|
|
editor.setSelection(startPoint, endPoint);
|
|
editor.focus();
|
|
}
|
|
|
|
replacePlaceholder(oldVal, newVal) {
|
|
const editor = this.editor;
|
|
const endPoint = editor.getCursor('end');
|
|
if (editor.getSelection() === oldVal) {
|
|
editor.replaceSelection(newVal);
|
|
} else {
|
|
editor.setValue(editor.getValue().replace(oldVal, newVal));
|
|
}
|
|
endPoint.ch -= oldVal.length;
|
|
endPoint.ch += newVal.length;
|
|
editor.setSelection(endPoint, endPoint);
|
|
editor.focus();
|
|
}
|
|
}
|
|
|
|
|
|
const uploadClipboardImage = async (editor, dropzone, e) => {
|
|
const $dropzone = $(dropzone);
|
|
const uploadUrl = $dropzone.attr('data-upload-url');
|
|
const $files = $dropzone.find('.files');
|
|
|
|
if (!uploadUrl || !$files.length) return;
|
|
|
|
const pastedImages = clipboardPastedImages(e);
|
|
if (!pastedImages || pastedImages.length === 0) {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
for (const img of pastedImages) {
|
|
const name = img.name.slice(0, img.name.lastIndexOf('.'));
|
|
|
|
const placeholder = `![${name}](uploading ...)`;
|
|
editor.insertPlaceholder(placeholder);
|
|
const data = await uploadFile(img, uploadUrl);
|
|
editor.replacePlaceholder(placeholder, `![${name}](/attachments/${data.uuid})`);
|
|
|
|
const $input = $(`<input name="files" type="hidden">`).attr('id', data.uuid).val(data.uuid);
|
|
$files.append($input);
|
|
}
|
|
};
|
|
|
|
export function initEasyMDEImagePaste(easyMDE, dropzone) {
|
|
if (!dropzone) return;
|
|
easyMDE.codemirror.on('paste', async (_, e) => {
|
|
return uploadClipboardImage(new CodeMirrorEditor(easyMDE.codemirror), dropzone, e);
|
|
});
|
|
}
|
|
|
|
export function initTextareaImagePaste(textarea, dropzone) {
|
|
if (!dropzone) return;
|
|
$(textarea).on('paste', async (e) => {
|
|
return uploadClipboardImage(new TextareaEditor(textarea), dropzone, e.originalEvent);
|
|
});
|
|
}
|