Improve attachment upload methods (#30513)
* Use dropzone to handle file uploading for all cases, including pasting and dragging * Merge duplicate code, use consistent behavior for link generating Close #20130 --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Tyrone Yeh
GitHub
parent
00fc29aee1
commit
9bc5552c11
10 changed files with 169 additions and 97 deletions
|
|
@ -3,7 +3,7 @@ import '@github/text-expander-element';
|
|||
import $ from 'jquery';
|
||||
import {attachTribute} from '../tribute.js';
|
||||
import {hideElem, showElem, autosize, isElemVisible} from '../../utils/dom.js';
|
||||
import {initEasyMDEPaste, initTextareaPaste} from './Paste.js';
|
||||
import {initEasyMDEPaste, initTextareaUpload} from './EditorUpload.js';
|
||||
import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
|
||||
import {renderPreviewPanelContent} from '../repo-editor.js';
|
||||
import {easyMDEToolbarActions} from './EasyMDEToolbarActions.js';
|
||||
|
|
@ -11,7 +11,7 @@ import {initTextExpander} from './TextExpander.js';
|
|||
import {showErrorToast} from '../../modules/toast.js';
|
||||
import {POST} from '../../modules/fetch.js';
|
||||
import {initTextareaMarkdown} from './EditorMarkdown.js';
|
||||
import {initDropzone} from '../dropzone.js';
|
||||
import {DropzoneCustomEventReloadFiles, initDropzone} from '../dropzone.js';
|
||||
|
||||
let elementIdCounter = 0;
|
||||
|
||||
|
|
@ -111,7 +111,7 @@ class ComboMarkdownEditor {
|
|||
|
||||
initTextareaMarkdown(this.textarea);
|
||||
if (this.dropzone) {
|
||||
initTextareaPaste(this.textarea, this.dropzone);
|
||||
initTextareaUpload(this.textarea, this.dropzone);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -130,13 +130,13 @@ class ComboMarkdownEditor {
|
|||
|
||||
dropzoneReloadFiles() {
|
||||
if (!this.dropzone) return;
|
||||
this.attachedDropzoneInst.emit('reload');
|
||||
this.attachedDropzoneInst.emit(DropzoneCustomEventReloadFiles);
|
||||
}
|
||||
|
||||
dropzoneSubmitReload() {
|
||||
if (!this.dropzone) return;
|
||||
this.attachedDropzoneInst.emit('submit');
|
||||
this.attachedDropzoneInst.emit('reload');
|
||||
this.attachedDropzoneInst.emit(DropzoneCustomEventReloadFiles);
|
||||
}
|
||||
|
||||
setupTab() {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import {triggerEditorContentChanged} from './Paste.js';
|
||||
export function triggerEditorContentChanged(target) {
|
||||
target.dispatchEvent(new CustomEvent('ce-editor-content-changed', {bubbles: true}));
|
||||
}
|
||||
|
||||
function handleIndentSelection(textarea, e) {
|
||||
const selStart = textarea.selectionStart;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,29 @@
|
|||
import {htmlEscape} from 'escape-goat';
|
||||
import {POST} from '../../modules/fetch.js';
|
||||
import {imageInfo} from '../../utils/image.js';
|
||||
import {getPastedContent, replaceTextareaSelection} from '../../utils/dom.js';
|
||||
import {replaceTextareaSelection} from '../../utils/dom.js';
|
||||
import {isUrl} from '../../utils/url.js';
|
||||
import {triggerEditorContentChanged} from './EditorMarkdown.js';
|
||||
import {
|
||||
DropzoneCustomEventRemovedFile,
|
||||
DropzoneCustomEventUploadDone,
|
||||
generateMarkdownLinkForAttachment,
|
||||
} from '../dropzone.js';
|
||||
|
||||
async function uploadFile(file, uploadUrl) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file, file.name);
|
||||
let uploadIdCounter = 0;
|
||||
|
||||
const res = await POST(uploadUrl, {data: formData});
|
||||
return await res.json();
|
||||
}
|
||||
|
||||
export function triggerEditorContentChanged(target) {
|
||||
target.dispatchEvent(new CustomEvent('ce-editor-content-changed', {bubbles: true}));
|
||||
function uploadFile(dropzoneEl, file) {
|
||||
return new Promise((resolve) => {
|
||||
const curUploadId = uploadIdCounter++;
|
||||
file._giteaUploadId = curUploadId;
|
||||
const dropzoneInst = dropzoneEl.dropzone;
|
||||
const onUploadDone = ({file}) => {
|
||||
if (file._giteaUploadId === curUploadId) {
|
||||
dropzoneInst.off(DropzoneCustomEventUploadDone, onUploadDone);
|
||||
resolve();
|
||||
}
|
||||
};
|
||||
dropzoneInst.on(DropzoneCustomEventUploadDone, onUploadDone);
|
||||
dropzoneInst.handleFiles([file]);
|
||||
});
|
||||
}
|
||||
|
||||
class TextareaEditor {
|
||||
|
|
@ -82,48 +92,25 @@ class CodeMirrorEditor {
|
|||
}
|
||||
}
|
||||
|
||||
async function handleClipboardImages(editor, dropzone, images, e) {
|
||||
const uploadUrl = dropzone.getAttribute('data-upload-url');
|
||||
const filesContainer = dropzone.querySelector('.files');
|
||||
|
||||
if (!dropzone || !uploadUrl || !filesContainer || !images.length) return;
|
||||
|
||||
async function handleUploadFiles(editor, dropzoneEl, files, e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
for (const file of files) {
|
||||
const name = file.name.slice(0, file.name.lastIndexOf('.'));
|
||||
const {width, dppx} = await imageInfo(file);
|
||||
const placeholder = `[${name}](uploading ...)`;
|
||||
|
||||
for (const img of images) {
|
||||
const name = img.name.slice(0, img.name.lastIndexOf('.'));
|
||||
|
||||
const placeholder = ``;
|
||||
editor.insertPlaceholder(placeholder);
|
||||
|
||||
const {uuid} = await uploadFile(img, uploadUrl);
|
||||
const {width, dppx} = await imageInfo(img);
|
||||
|
||||
let text;
|
||||
if (width > 0 && dppx > 1) {
|
||||
// Scale down images from HiDPI monitors. This uses the <img> tag because it's the only
|
||||
// method to change image size in Markdown that is supported by all implementations.
|
||||
// Make the image link relative to the repo path, then the final URL is "/sub-path/owner/repo/attachments/{uuid}"
|
||||
const url = `attachments/${uuid}`;
|
||||
text = `<img width="${Math.round(width / dppx)}" alt="${htmlEscape(name)}" src="${htmlEscape(url)}">`;
|
||||
} else {
|
||||
// Markdown always renders the image with a relative path, so the final URL is "/sub-path/owner/repo/attachments/{uuid}"
|
||||
// TODO: it should also use relative path for consistency, because absolute is ambiguous for "/sub-path/attachments" or "/attachments"
|
||||
const url = `/attachments/${uuid}`;
|
||||
text = ``;
|
||||
}
|
||||
editor.replacePlaceholder(placeholder, text);
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.setAttribute('name', 'files');
|
||||
input.setAttribute('type', 'hidden');
|
||||
input.setAttribute('id', uuid);
|
||||
input.value = uuid;
|
||||
filesContainer.append(input);
|
||||
await uploadFile(dropzoneEl, file); // the "file" will get its "uuid" during the upload
|
||||
editor.replacePlaceholder(placeholder, generateMarkdownLinkForAttachment(file, {width, dppx}));
|
||||
}
|
||||
}
|
||||
|
||||
export function removeAttachmentLinksFromMarkdown(text, fileUuid) {
|
||||
text = text.replace(new RegExp(`!?\\[([^\\]]+)\\]\\(/?attachments/${fileUuid}\\)`, 'g'), '');
|
||||
text = text.replace(new RegExp(`<img[^>]+src="/?attachments/${fileUuid}"[^>]*>`, 'g'), '');
|
||||
return text;
|
||||
}
|
||||
|
||||
function handleClipboardText(textarea, e, {text, isShiftDown}) {
|
||||
// pasting with "shift" means "paste as original content" in most applications
|
||||
if (isShiftDown) return; // let the browser handle it
|
||||
|
|
@ -139,16 +126,37 @@ function handleClipboardText(textarea, e, {text, isShiftDown}) {
|
|||
// else, let the browser handle it
|
||||
}
|
||||
|
||||
export function initEasyMDEPaste(easyMDE, dropzone) {
|
||||
// extract text and images from "paste" event
|
||||
function getPastedContent(e) {
|
||||
const images = [];
|
||||
for (const item of e.clipboardData?.items ?? []) {
|
||||
if (item.type?.startsWith('image/')) {
|
||||
images.push(item.getAsFile());
|
||||
}
|
||||
}
|
||||
const text = e.clipboardData?.getData?.('text') ?? '';
|
||||
return {text, images};
|
||||
}
|
||||
|
||||
export function initEasyMDEPaste(easyMDE, dropzoneEl) {
|
||||
const editor = new CodeMirrorEditor(easyMDE.codemirror);
|
||||
easyMDE.codemirror.on('paste', (_, e) => {
|
||||
const {images} = getPastedContent(e);
|
||||
if (images.length) {
|
||||
handleClipboardImages(new CodeMirrorEditor(easyMDE.codemirror), dropzone, images, e);
|
||||
}
|
||||
if (!images.length) return;
|
||||
handleUploadFiles(editor, dropzoneEl, images, e);
|
||||
});
|
||||
easyMDE.codemirror.on('drop', (_, e) => {
|
||||
if (!e.dataTransfer.files.length) return;
|
||||
handleUploadFiles(editor, dropzoneEl, e.dataTransfer.files, e);
|
||||
});
|
||||
dropzoneEl.dropzone.on(DropzoneCustomEventRemovedFile, ({fileUuid}) => {
|
||||
const oldText = easyMDE.codemirror.getValue();
|
||||
const newText = removeAttachmentLinksFromMarkdown(oldText, fileUuid);
|
||||
if (oldText !== newText) easyMDE.codemirror.setValue(newText);
|
||||
});
|
||||
}
|
||||
|
||||
export function initTextareaPaste(textarea, dropzone) {
|
||||
export function initTextareaUpload(textarea, dropzoneEl) {
|
||||
let isShiftDown = false;
|
||||
textarea.addEventListener('keydown', (e) => {
|
||||
if (e.shiftKey) isShiftDown = true;
|
||||
|
|
@ -159,9 +167,17 @@ export function initTextareaPaste(textarea, dropzone) {
|
|||
textarea.addEventListener('paste', (e) => {
|
||||
const {images, text} = getPastedContent(e);
|
||||
if (images.length) {
|
||||
handleClipboardImages(new TextareaEditor(textarea), dropzone, images, e);
|
||||
handleUploadFiles(new TextareaEditor(textarea), dropzoneEl, images, e);
|
||||
} else if (text) {
|
||||
handleClipboardText(textarea, e, {text, isShiftDown});
|
||||
}
|
||||
});
|
||||
textarea.addEventListener('drop', (e) => {
|
||||
if (!e.dataTransfer.files.length) return;
|
||||
handleUploadFiles(new TextareaEditor(textarea), dropzoneEl, e.dataTransfer.files, e);
|
||||
});
|
||||
dropzoneEl.dropzone.on(DropzoneCustomEventRemovedFile, ({fileUuid}) => {
|
||||
const newText = removeAttachmentLinksFromMarkdown(textarea.value, fileUuid);
|
||||
if (textarea.value !== newText) textarea.value = newText;
|
||||
});
|
||||
}
|
||||
14
web_src/js/features/comp/EditorUpload.test.js
Normal file
14
web_src/js/features/comp/EditorUpload.test.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import {removeAttachmentLinksFromMarkdown} from './EditorUpload.js';
|
||||
|
||||
test('removeAttachmentLinksFromMarkdown', () => {
|
||||
expect(removeAttachmentLinksFromMarkdown('a foo b', 'foo')).toBe('a foo b');
|
||||
expect(removeAttachmentLinksFromMarkdown('a [x](attachments/foo) b', 'foo')).toBe('a b');
|
||||
expect(removeAttachmentLinksFromMarkdown('a  b', 'foo')).toBe('a b');
|
||||
expect(removeAttachmentLinksFromMarkdown('a [x](/attachments/foo) b', 'foo')).toBe('a b');
|
||||
expect(removeAttachmentLinksFromMarkdown('a  b', 'foo')).toBe('a b');
|
||||
|
||||
expect(removeAttachmentLinksFromMarkdown('a <img src="attachments/foo"> b', 'foo')).toBe('a b');
|
||||
expect(removeAttachmentLinksFromMarkdown('a <img width="100" src="attachments/foo"> b', 'foo')).toBe('a b');
|
||||
expect(removeAttachmentLinksFromMarkdown('a <img src="/attachments/foo"> b', 'foo')).toBe('a b');
|
||||
expect(removeAttachmentLinksFromMarkdown('a <img src="/attachments/foo" width="100"/> b', 'foo')).toBe('a b');
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue