Skip to content

Commit 76910f2

Browse files
wxiaoguangwxiaoguang
authored
Enable spellcheck for EasyMDE, use contenteditable mode (#19776)
Enable spellcheck for EasyMDE, use contenteditable mode. Rewrite and refactor the ImagePaste code.
1 parent cdd6371 commit 76910f2

File tree

6 files changed

+102
-65
lines changed

6 files changed

+102
-65
lines changed

‎web_src/js/features/comp/EasyMDE.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) {
3838
indentWithTabs: false,
3939
tabSize: 4,
4040
spellChecker: false,
41+
inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable
42+
nativeSpellcheck: true,
4143
toolbar: ['bold', 'italic', 'strikethrough', '|',
4244
'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
4345
'code', 'quote', '|', {

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

Lines changed: 84 additions & 51 deletions
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,72 +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.selectionStart || field.selectionStart === 0) {
35-
const startPos = field.selectionStart;
36-
const endPos = field.selectionEnd;
37-
field.value = field.value.substring(0, startPos) + value + field.value.substring(endPos, field.value.length);
38-
field.selectionStart = startPos + value.length;
39-
field.selectionEnd = startPos + value.length;
40-
} else {
41-
field.value += 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();
41+
}
42+
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();
4257
}
4358
}
4459

45-
function replaceAndKeepCursor(field, oldval, newval) {
46-
if (field.selectionStart || field.selectionStart === 0) {
47-
const startPos = field.selectionStart;
48-
const endPos = field.selectionEnd;
49-
field.value = field.value.replace(oldval, newval);
50-
field.selectionStart = startPos + newval.length - oldval.length;
51-
field.selectionEnd = endPos + newval.length - oldval.length;
52-
} else {
53-
field.value = field.value.replace(oldval, newval);
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();
5487
}
5588
}
5689

57-
export function initCompImagePaste($target) {
58-
$target.each(function () {
59-
const dropzone = this.querySelector('.dropzone');
60-
if (!dropzone) {
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) {
61100
return;
62101
}
63-
const uploadUrl = dropzone.getAttribute('data-upload-url');
64-
const dropzoneFiles = dropzone.querySelector('.files');
65-
for (const textarea of this.querySelectorAll('textarea')) {
66-
textarea.addEventListener('paste', async (e) => {
67-
for (const img of clipboardPastedImages(e)) {
68-
const name = img.name.slice(0, img.name.lastIndexOf('.'));
69-
insertAtCursor(textarea, `![${name}]()`);
70-
const data = await uploadFile(img, uploadUrl);
71-
replaceAndKeepCursor(textarea, `![${name}]()`, `![${name}](/attachments/${data.uuid})`);
72-
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
73-
dropzoneFiles.appendChild(input[0]);
74-
}
75-
}, false);
76-
}
77-
});
78-
}
102+
e.preventDefault();
103+
e.stopPropagation();
79104

80-
export function initEasyMDEImagePaste(easyMDE, dropzone, files) {
81-
const uploadUrl = dropzone.getAttribute('data-upload-url');
82-
easyMDE.codemirror.on('paste', async (_, e) => {
83-
for (const img of clipboardPastedImages(e)) {
105+
for (const img of pastedImages) {
84106
const name = img.name.slice(0, img.name.lastIndexOf('.'));
107+
108+
const placeholder = `![${name}](uploading ...)`;
109+
editor.insertPlaceholder(placeholder);
85110
const data = await uploadFile(img, uploadUrl);
86-
const pos = easyMDE.codemirror.getCursor();
87-
easyMDE.codemirror.replaceRange(`![${name}](/attachments/${data.uuid})`, pos);
88-
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
89-
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);
90115
}
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);
91124
});
92125
}

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

Lines changed: 4 additions & 3 deletions
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

Lines changed: 8 additions & 8 deletions
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) {
@@ -352,9 +354,7 @@ async function onEditContent(event) {
352354
easyMDE = await createCommentEasyMDE($textarea);
353355

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

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

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

Lines changed: 2 additions & 3 deletions
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
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ async function initRepoWikiFormEditor() {
6767
indentWithTabs: false,
6868
tabSize: 4,
6969
spellChecker: false,
70+
inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable
71+
nativeSpellcheck: true,
7072
toolbar: ['bold', 'italic', 'strikethrough', '|',
7173
'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
7274
{

0 commit comments

Comments
 (0)