diff options
| -rw-r--r-- | web_src/js/features/comp/EasyMDE.js | 2 | ||||
| -rw-r--r-- | web_src/js/features/comp/ImagePaste.js | 135 | ||||
| -rw-r--r-- | web_src/js/features/repo-issue.js | 7 | ||||
| -rw-r--r-- | web_src/js/features/repo-legacy.js | 16 | ||||
| -rw-r--r-- | web_src/js/features/repo-release.js | 5 | ||||
| -rw-r--r-- | web_src/js/features/repo-wiki.js | 2 |
6 files changed, 102 insertions, 65 deletions
diff --git a/web_src/js/features/comp/EasyMDE.js b/web_src/js/features/comp/EasyMDE.js index 61aaf23e89..7c1db9a998 100644 --- a/web_src/js/features/comp/EasyMDE.js +++ b/web_src/js/features/comp/EasyMDE.js @@ -38,6 +38,8 @@ export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) { indentWithTabs: false, tabSize: 4, spellChecker: false, + inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable + nativeSpellcheck: true, toolbar: ['bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|', 'code', 'quote', '|', { diff --git a/web_src/js/features/comp/ImagePaste.js b/web_src/js/features/comp/ImagePaste.js index 79aeffa02b..da41e7611a 100644 --- a/web_src/js/features/comp/ImagePaste.js +++ b/web_src/js/features/comp/ImagePaste.js @@ -1,4 +1,5 @@ import $ from 'jquery'; + const {csrfToken} = window.config; async function uploadFile(file, uploadUrl) { @@ -21,72 +22,104 @@ function clipboardPastedImages(e) { if (!item.type || !item.type.startsWith('image/')) continue; files.push(item.getAsFile()); } - - if (files.length) { - e.preventDefault(); - e.stopPropagation(); - } return files; } +class TextareaEditor { + constructor(editor) { + this.editor = editor; + } -function insertAtCursor(field, value) { - if (field.selectionStart || field.selectionStart === 0) { - const startPos = field.selectionStart; - const endPos = field.selectionEnd; - field.value = field.value.substring(0, startPos) + value + field.value.substring(endPos, field.value.length); - field.selectionStart = startPos + value.length; - field.selectionEnd = startPos + value.length; - } else { - field.value += value; + 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(); } } -function replaceAndKeepCursor(field, oldval, newval) { - if (field.selectionStart || field.selectionStart === 0) { - const startPos = field.selectionStart; - const endPos = field.selectionEnd; - field.value = field.value.replace(oldval, newval); - field.selectionStart = startPos + newval.length - oldval.length; - field.selectionEnd = endPos + newval.length - oldval.length; - } else { - field.value = field.value.replace(oldval, newval); +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(); } } -export function initCompImagePaste($target) { - $target.each(function () { - const dropzone = this.querySelector('.dropzone'); - if (!dropzone) { + +export function initEasyMDEImagePaste(easyMDE, $dropzone) { + const uploadUrl = $dropzone.attr('data-upload-url'); + const $files = $dropzone.find('.files'); + + if (!uploadUrl || !$files.length) return; + + const uploadClipboardImage = async (editor, e) => { + const pastedImages = clipboardPastedImages(e); + if (!pastedImages || pastedImages.length === 0) { return; } - const uploadUrl = dropzone.getAttribute('data-upload-url'); - const dropzoneFiles = dropzone.querySelector('.files'); - for (const textarea of this.querySelectorAll('textarea')) { - textarea.addEventListener('paste', async (e) => { - for (const img of clipboardPastedImages(e)) { - const name = img.name.slice(0, img.name.lastIndexOf('.')); - insertAtCursor(textarea, `![${name}]()`); - const data = await uploadFile(img, uploadUrl); - replaceAndKeepCursor(textarea, `![${name}]()`, ``); - const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid); - dropzoneFiles.appendChild(input[0]); - } - }, false); - } - }); -} + e.preventDefault(); + e.stopPropagation(); -export function initEasyMDEImagePaste(easyMDE, dropzone, files) { - const uploadUrl = dropzone.getAttribute('data-upload-url'); - easyMDE.codemirror.on('paste', async (_, e) => { - for (const img of clipboardPastedImages(e)) { + for (const img of pastedImages) { const name = img.name.slice(0, img.name.lastIndexOf('.')); + + const placeholder = ``; + editor.insertPlaceholder(placeholder); const data = await uploadFile(img, uploadUrl); - const pos = easyMDE.codemirror.getCursor(); - easyMDE.codemirror.replaceRange(``, pos); - const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid); - files.append(input); + editor.replacePlaceholder(placeholder, ``); + + const $input = $(`<input name="files" type="hidden">`).attr('id', data.uuid).val(data.uuid); + $files.append($input); } + }; + + easyMDE.codemirror.on('paste', async (_, e) => { + return uploadClipboardImage(new CodeMirrorEditor(easyMDE.codemirror), e); + }); + + $(easyMDE.element).on('paste', async (e) => { + return uploadClipboardImage(new TextareaEditor(easyMDE.element), e.originalEvent); }); } diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index bdd616f071..12900c2455 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -2,7 +2,7 @@ import $ from 'jquery'; import {htmlEscape} from 'escape-goat'; import attachTribute from './tribute.js'; import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js'; -import {initCompImagePaste} from './comp/ImagePaste.js'; +import {initEasyMDEImagePaste} from './comp/ImagePaste.js'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; const {appSubUrl, csrfToken} = window.config; @@ -480,8 +480,9 @@ export function initRepoPullRequestReview() { // 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; }` // 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 // EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set max-height for .CodeMirror-scroll in CSS. - await createCommentEasyMDE($reviewBox.find('textarea'), {minHeight: '80px'}); - initCompImagePaste($reviewBox); + const $reviewTextarea = $reviewBox.find('textarea'); + const easyMDE = await createCommentEasyMDE($reviewTextarea, {minHeight: '80px'}); + initEasyMDEImagePaste(easyMDE, $reviewBox.find('.dropzone')); })(); } diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 2bf80d5511..11c97ccfb0 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; -import {initCompImagePaste, initEasyMDEImagePaste} from './comp/ImagePaste.js'; +import {initEasyMDEImagePaste} from './comp/ImagePaste.js'; import { initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel, initRepoIssueCommentDelete, @@ -33,7 +33,8 @@ import initRepoPullRequestMergeForm from './repo-issue-pr-form.js'; const {csrfToken} = window.config; export function initRepoCommentForm() { - if ($('.comment.form').length === 0) { + const $commentForm = $('.comment.form'); + if ($commentForm.length === 0) { return; } @@ -67,12 +68,13 @@ export function initRepoCommentForm() { } (async () => { - await createCommentEasyMDE($('.comment.form textarea:not(.review-textarea)')); - initCompImagePaste($('.comment.form')); + const $textarea = $commentForm.find('textarea:not(.review-textarea)'); + const easyMDE = await createCommentEasyMDE($textarea); + initEasyMDEImagePaste(easyMDE, $commentForm.find('.dropzone')); })(); initBranchSelector(); - initCompMarkupContentPreviewTab($('.comment.form')); + initCompMarkupContentPreviewTab($commentForm); // List submits function initListSubmits(selector, outerSelector) { @@ -352,9 +354,7 @@ async function onEditContent(event) { easyMDE = await createCommentEasyMDE($textarea); initCompMarkupContentPreviewTab($editContentForm); - if ($dropzone.length === 1) { - initEasyMDEImagePaste(easyMDE, $dropzone[0], $dropzone.find('.files')); - } + initEasyMDEImagePaste(easyMDE, $dropzone); const $saveButton = $editContentZone.find('.save.button'); $textarea.on('ce-quick-submit', () => { diff --git a/web_src/js/features/repo-release.js b/web_src/js/features/repo-release.js index a44b91f35b..b68a7a6cd5 100644 --- a/web_src/js/features/repo-release.js +++ b/web_src/js/features/repo-release.js @@ -23,10 +23,9 @@ export function initRepoReleaseEditor() { (async () => { const $textarea = $editor.find('textarea'); await attachTribute($textarea.get(), {mentions: false, emoji: true}); - const $files = $editor.parent().find('.files'); const easyMDE = await createCommentEasyMDE($textarea); initCompMarkupContentPreviewTab($editor); - const dropzone = $editor.parent().find('.dropzone')[0]; - initEasyMDEImagePaste(easyMDE, dropzone, $files); + const $dropzone = $editor.parent().find('.dropzone'); + initEasyMDEImagePaste(easyMDE, $dropzone); })(); } diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js index 27f44f4e22..4555b32e5f 100644 --- a/web_src/js/features/repo-wiki.js +++ b/web_src/js/features/repo-wiki.js @@ -67,6 +67,8 @@ async function initRepoWikiFormEditor() { indentWithTabs: false, tabSize: 4, spellChecker: false, + inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable + nativeSpellcheck: true, toolbar: ['bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|', { |