Skip to content

Commit 7b34b4f

Browse files
wxiaoguangwxiaoguang
committed
fix image paste
1 parent c741fc9 commit 7b34b4f

File tree

4 files changed

+99
-61
lines changed

4 files changed

+99
-61
lines changed

‎web_src/js/features/comp/ImagePaste.js

+85-47
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import $ from 'jquery';
2+
23
const {csrfToken} = window.config;
34

45
async function uploadFile(file, uploadUrl) {
@@ -21,67 +22,104 @@ function clipboardPastedImages(e) {
2122
if (!item.type || !item.type.startsWith('image/')) continue;
2223
files.push(item.getAsFile());
2324
}
24-
25-
if (files.length) {
26-
e.preventDefault();
27-
e.stopPropagation();
28-
}
2925
return files;
3026
}
3127

28+
class TextareaEditor {
29+
constructor(editor) {
30+
this.editor = editor;
31+
}
3232

33-
function insertAtCursor(field, value) {
34-
if (field.getTextArea().selectionStart || field.getTextArea().selectionStart === 0) {
35-
const startPos = field.getTextArea().selectionStart;
36-
const endPos = field.getTextArea().selectionEnd;
37-
field.setValue(field.getValue().substring(0, startPos) + value + field.getValue().substring(endPos, field.getValue().length));
38-
field.getTextArea().electionStart = startPos + value.length;
39-
field.getTextArea().selectionEnd = startPos + value.length;
40-
} else {
41-
field.setValue(field.getValue() + value);
33+
insertPlaceholder(value) {
34+
const editor = this.editor;
35+
const startPos = editor.selectionStart;
36+
const endPos = editor.selectionEnd;
37+
editor.value = editor.value.substring(0, startPos) + value + editor.value.substring(endPos);
38+
editor.selectionStart = startPos;
39+
editor.selectionEnd = startPos + value.length;
40+
editor.focus();
4241
}
43-
}
4442

45-
function replaceAndKeepCursor(field, oldval, newval) {
46-
if (field.getTextArea().selectionStart || field.getTextArea().selectionStart === 0) {
47-
const startPos = field.getTextArea().selectionStart;
48-
const endPos = field.getTextArea().selectionEnd;
49-
field.setValue(field.getValue().replace(oldval, newval));
50-
field.getTextArea().selectionStart = startPos + newval.length - oldval.length;
51-
field.getTextArea().selectionEnd = endPos + newval.length - oldval.length;
52-
} else {
53-
field.setValue(field.getValue().replace(oldval, newval));
43+
replacePlaceholder(oldVal, newVal) {
44+
const editor = this.editor;
45+
const startPos = editor.selectionStart;
46+
const endPos = editor.selectionEnd;
47+
if (editor.value.substring(startPos, endPos) === oldVal) {
48+
editor.value = editor.value.substring(0, startPos) + newVal + editor.value.substring(endPos);
49+
editor.selectionEnd = startPos + newVal.length;
50+
} else {
51+
editor.value = editor.value.replace(oldVal, newVal);
52+
editor.selectionEnd -= oldVal.length;
53+
editor.selectionEnd += newVal.length;
54+
}
55+
editor.selectionStart = editor.selectionEnd;
56+
editor.focus();
5457
}
5558
}
5659

57-
export function initCompImagePaste($target) {
58-
const dropzone = $target[0].querySelector('.dropzone');
59-
if (!dropzone) {
60-
return;
60+
class CodeMirrorEditor {
61+
constructor(editor) {
62+
this.editor = editor;
63+
}
64+
65+
insertPlaceholder(value) {
66+
const editor = this.editor;
67+
const startPoint = editor.getCursor('start');
68+
const endPoint = editor.getCursor('end');
69+
editor.replaceSelection(value);
70+
endPoint.ch = startPoint.ch + value.length;
71+
editor.setSelection(startPoint, endPoint);
72+
editor.focus();
73+
}
74+
75+
replacePlaceholder(oldVal, newVal) {
76+
const editor = this.editor;
77+
const endPoint = editor.getCursor('end');
78+
if (editor.getSelection() === oldVal) {
79+
editor.replaceSelection(newVal);
80+
} else {
81+
editor.setValue(editor.getValue().replace(oldVal, newVal));
82+
}
83+
endPoint.ch -= oldVal.length;
84+
endPoint.ch += newVal.length;
85+
editor.setSelection(endPoint, endPoint);
86+
editor.focus();
6187
}
62-
const uploadUrl = dropzone.getAttribute('data-upload-url');
63-
const dropzoneFiles = dropzone.querySelector('.files');
64-
$(document).on('paste', '.CodeMirror', async function (e) {
65-
const img = clipboardPastedImages(e.originalEvent);
66-
const name = img[0].name.substring(0, img[0].name.lastIndexOf('.'));
67-
insertAtCursor(this.CodeMirror, `![${name}]()`);
68-
const data = await uploadFile(img[0], uploadUrl);
69-
replaceAndKeepCursor(this.CodeMirror, `![${name}]()`, `![${name}](/attachments/${data.uuid})`);
70-
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
71-
dropzoneFiles.appendChild(input[0]);
72-
});
7388
}
7489

75-
export function initEasyMDEImagePaste(easyMDE, dropzone, files) {
76-
const uploadUrl = dropzone.getAttribute('data-upload-url');
77-
easyMDE.codemirror.on('paste', async (_, e) => {
78-
for (const img of clipboardPastedImages(e)) {
90+
91+
export function initEasyMDEImagePaste(easyMDE, $dropzone) {
92+
const uploadUrl = $dropzone.attr('data-upload-url');
93+
const $files = $dropzone.find('.files');
94+
95+
if (!uploadUrl || !$files.length) return;
96+
97+
const uploadClipboardImage = async (editor, e) => {
98+
const pastedImages = clipboardPastedImages(e);
99+
if (!pastedImages || pastedImages.length === 0) {
100+
return;
101+
}
102+
e.preventDefault();
103+
e.stopPropagation();
104+
105+
for (const img of pastedImages) {
79106
const name = img.name.slice(0, img.name.lastIndexOf('.'));
107+
108+
const placeholder = `![${name}](uploading ...)`;
109+
editor.insertPlaceholder(placeholder);
80110
const data = await uploadFile(img, uploadUrl);
81-
const pos = easyMDE.codemirror.getCursor();
82-
easyMDE.codemirror.replaceRange(`![${name}](/attachments/${data.uuid})`, pos);
83-
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
84-
files.append(input);
111+
editor.replacePlaceholder(placeholder, `![${name}](/attachments/${data.uuid})`);
112+
113+
const $input = $(`<input name="files" type="hidden">`).attr('id', data.uuid).val(data.uuid);
114+
$files.append($input);
85115
}
116+
};
117+
118+
easyMDE.codemirror.on('paste', async (_, e) => {
119+
return uploadClipboardImage(new CodeMirrorEditor(easyMDE.codemirror), e);
120+
});
121+
122+
$(easyMDE.element).on('paste', async (e) => {
123+
return uploadClipboardImage(new TextareaEditor(easyMDE.element), e.originalEvent);
86124
});
87125
}

‎web_src/js/features/repo-issue.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import $ from 'jquery';
22
import {htmlEscape} from 'escape-goat';
33
import attachTribute from './tribute.js';
44
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
5-
import {initCompImagePaste} from './comp/ImagePaste.js';
5+
import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
66
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
77

88
const {appSubUrl, csrfToken} = window.config;
@@ -480,8 +480,9 @@ export function initRepoPullRequestReview() {
480480
// the editor's height is too large in some cases, and the panel cannot be scrolled with page now because there is `.repository .diff-detail-box.sticky { position: sticky; }`
481481
// the temporary solution is to make the editor's height smaller (about 4 lines). GitHub also only show 4 lines for default. We can improve the UI (including Dropzone area) in future
482482
// EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set max-height for .CodeMirror-scroll in CSS.
483-
await createCommentEasyMDE($reviewBox.find('textarea'), {minHeight: '80px'});
484-
initCompImagePaste($reviewBox);
483+
const $reviewTextarea = $reviewBox.find('textarea');
484+
const easyMDE = await createCommentEasyMDE($reviewTextarea, {minHeight: '80px'});
485+
initEasyMDEImagePaste(easyMDE, $reviewBox.find('.dropzone'));
485486
})();
486487
}
487488

‎web_src/js/features/repo-legacy.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import $ from 'jquery';
22
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
33
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
4-
import {initCompImagePaste, initEasyMDEImagePaste} from './comp/ImagePaste.js';
4+
import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
55
import {
66
initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel,
77
initRepoIssueCommentDelete,
@@ -33,7 +33,8 @@ import initRepoPullRequestMergeForm from './repo-issue-pr-form.js';
3333
const {csrfToken} = window.config;
3434

3535
export function initRepoCommentForm() {
36-
if ($('.comment.form').length === 0) {
36+
const $commentForm = $('.comment.form');
37+
if ($commentForm.length === 0) {
3738
return;
3839
}
3940

@@ -67,12 +68,13 @@ export function initRepoCommentForm() {
6768
}
6869

6970
(async () => {
70-
await createCommentEasyMDE($('.comment.form textarea:not(.review-textarea)'));
71-
initCompImagePaste($('.comment.form'));
71+
const $textarea = $commentForm.find('textarea:not(.review-textarea)');
72+
const easyMDE = await createCommentEasyMDE($textarea);
73+
initEasyMDEImagePaste(easyMDE, $commentForm.find('.dropzone'));
7274
})();
7375

7476
initBranchSelector();
75-
initCompMarkupContentPreviewTab($('.comment.form'));
77+
initCompMarkupContentPreviewTab($commentForm);
7678

7779
// List submits
7880
function initListSubmits(selector, outerSelector) {
@@ -351,9 +353,7 @@ async function onEditContent(event) {
351353
easyMDE = await createCommentEasyMDE($textarea);
352354

353355
initCompMarkupContentPreviewTab($editContentForm);
354-
if ($dropzone.length === 1) {
355-
initEasyMDEImagePaste(easyMDE, $dropzone[0], $dropzone.find('.files'));
356-
}
356+
initEasyMDEImagePaste(easyMDE, $dropzone);
357357

358358
const $saveButton = $editContentZone.find('.save.button');
359359
$textarea.on('ce-quick-submit', () => {

‎web_src/js/features/repo-release.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,9 @@ export function initRepoReleaseEditor() {
2323
(async () => {
2424
const $textarea = $editor.find('textarea');
2525
await attachTribute($textarea.get(), {mentions: false, emoji: true});
26-
const $files = $editor.parent().find('.files');
2726
const easyMDE = await createCommentEasyMDE($textarea);
2827
initCompMarkupContentPreviewTab($editor);
29-
const dropzone = $editor.parent().find('.dropzone')[0];
30-
initEasyMDEImagePaste(easyMDE, dropzone, $files);
28+
const $dropzone = $editor.parent().find('.dropzone');
29+
initEasyMDEImagePaste(easyMDE, $dropzone);
3130
})();
3231
}

0 commit comments

Comments
 (0)