Refactor to use dropzone native methods upload files

web_src/js/features/common-global.js

@@ -5,6 +5,9 @@ import createDropzone from './dropzone.js';
 import {initCompColorPicker} from './comp/ColorPicker.js';
 import {showGlobalErrorMessage} from '../bootstrap.js';
 import {attachDropdownAria} from './aria.js';
+import {addUploadedFileToEditor, removeUploadedFileFromEditor} from './comp/ImagePaste.js';
+import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
+import {getAttachedEasyMDE} from './comp/EasyMDE.js';
 
 const {appUrl, csrfToken} = window.config;
 
@@ -53,20 +56,6 @@ export function initGlobalEnterQuickSubmit() {
   });
 }
 
-export function handleGlobalEnterQuickSubmit(target) {
-  const $target = $(target);
-  const $form = $(target).closest('form');
-  if ($form.length) {
-    // here use the event to trigger the submit event (instead of calling `submit()` method directly)
-    // otherwise the `areYouSure` handler won't be executed, then there will be an annoying "confirm to leave" dialog
-    $form.trigger('submit');
-  } else {
-    // if no form, then the editor is for an AJAX request, dispatch an event to the target, let the target's event handler to do the AJAX request.
-    // the 'ce-' prefix means this is a CustomEvent
-    $target.trigger('ce-quick-submit');
-  }
-}
-
 export function initGlobalButtonClickOnEnter() {
   $(document).on('keypress', '.ui.button', (e) => {
     if (e.keyCode === 13 || e.keyCode === 32) { // enter key or space bar
@@ -201,13 +190,19 @@ export function initGlobalDropzone() {
           file.uuid = data.uuid;
           const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
           $dropzone.find('.files').append(input);
+          addUploadedFileToEditor(file.editor, file);
         });
         this.on('removedfile', (file) => {
           $(`#${file.uuid}`).remove();
+          if (!file.editor && (file.editor = getAttachedEasyMDE(this.element.closest('form').querySelector('textarea')))) {
+            file.editor = file.editor.codemirror;
+          }
           if ($dropzone.data('remove-url')) {
             $.post($dropzone.data('remove-url'), {
               file: file.uuid,
               _csrf: csrfToken,
+            }).always(() => {
+              removeUploadedFileFromEditor(file.editor, file.uuid);
             });
           }
         });

web_src/js/features/comp/EasyMDE.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import attachTribute from '../tribute.js';
-import {handleGlobalEnterQuickSubmit} from '../common-global.js';
+import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
 
 /**
  * @returns {EasyMDE}

web_src/js/features/comp/ImagePaste.js

@@ -1,94 +1,72 @@
 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();
+import {getAttachedEasyMDE} from './EasyMDE.js';
+
+/**
+ *
+ * @param {*} editor
+ * @param {*} file
+ */
+export function addUploadedFileToEditor(editor, file) {
+  if (!editor && file.previewElement) {
+    editor = file.previewElement.closest('form') ? getAttachedEasyMDE(file.previewElement.closest('form').querySelector('textarea')) : getAttachedEasyMDE(file.previewElement.parentElement.parentElement.parentElement.querySelector('textarea'));
+    editor = editor.codemirror;
   }
-
-  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;
+  const startPos = editor.selectionStart || editor.getCursor && editor.getCursor('start');
+  const endPos = editor.selectionEnd || editor.getCursor && editor.getCursor('end');
+  const isimage = file.type.startsWith('image/') ? '!' : '';
+  const fileName = (isimage ? file.name.replace(/\.[^/.]+$/, '') : file.name);
+  if (startPos) {
+    if (editor.setSelection) {
+      if (startPos.line !== undefined) {
+        editor.setSelection(startPos, endPos);
+        editor.replaceSelection(`${isimage}[${fileName}](/attachments/${file.uuid})\n`);
+      } else {
+        const val = editor.getValue();
+        editor.setValue(`${val}\n${isimage}[${fileName}](/attachments/${file.uuid})`);
+      }
+    } else if (typeof startPos === 'number' && startPos > 0) {
+      editor.value = `${editor.value.substring(0, startPos)}\n${isimage}[${fileName}](/attachments/${file.uuid})\n${editor.value.substring(endPos)}`;
     } else {
-      editor.value = editor.value.replace(oldVal, newVal);
-      editor.selectionEnd -= oldVal.length;
-      editor.selectionEnd += newVal.length;
+      editor.value += `\n${isimage}[${fileName}](/attachments/${file.uuid})`;
     }
-    editor.selectionStart = editor.selectionEnd;
-    editor.focus();
+  } else if (editor.setSelection) {
+    editor.value(`${editor.value()}\n${isimage}[${fileName}](/attachments/${file.uuid})\n`);
+  } else {
+    editor.value += `${editor.value}\n${isimage}[${fileName}](/attachments/${file.uuid})\n`;
   }
 }
 
-class CodeMirrorEditor {
-  constructor(editor) {
-    this.editor = editor;
+/**
+ * @param editor{EasyMDE}
+ * @param fileUuid
+ */
+export function removeUploadedFileFromEditor(editor, fileUuid) {
+  // the raw regexp is: /!\[[^\]]*]\(\/attachments\/{uuid}\)/
+  const re = new RegExp(`(!|)\\[[^\\]]*]\\(/attachments/${fileUuid}\\)`);
+  if (editor.setValue) {
+    editor.setValue(editor.getValue().replace(re, '')); // at the moment, we assume the editor is an EasyMDE
+  } else {
+    editor.value = editor.value.replace(re, '');
   }
+}
 
-  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();
-  }
+function clipboardPastedImages(e) {
+  const data = e.clipboardData || e.dataTransfer;
+  if (!data) return [];
 
-  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 files = [];
+  const datafiles = e.clipboardData?.items || e.dataTransfer?.files;
+  for (const item of datafiles || []) {
+    const file = e.clipboardData ? item.getAsFile() : item;
+    if (file === null || !item.type) continue;
+    files.push(file);
   }
+  return files;
 }
 
-
 export function initEasyMDEImagePaste(easyMDE, $dropzone) {
+  if ($dropzone.length !== 1) throw new Error('invalid dropzone binding for editor');
+
   const uploadUrl = $dropzone.attr('data-upload-url');
   const $files = $dropzone.find('.files');
 
@@ -103,23 +81,20 @@ export function initEasyMDEImagePaste(easyMDE, $dropzone) {
     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);
+      img.editor = editor;
+      $dropzone[0].dropzone.addFile(img);
     }
   };
 
   easyMDE.codemirror.on('paste', async (_, e) => {
-    return uploadClipboardImage(new CodeMirrorEditor(easyMDE.codemirror), e);
+    return uploadClipboardImage(easyMDE.codemirror, e);
+  });
+
+  easyMDE.codemirror.on('drop', async (_, e) => {
+    return uploadClipboardImage(easyMDE.codemirror, e);
   });
 
-  $(easyMDE.element).on('paste', async (e) => {
-    return uploadClipboardImage(new TextareaEditor(easyMDE.element), e.originalEvent);
+  $(easyMDE.element).on('paste drop', async (e) => {
+    return uploadClipboardImage(easyMDE.element, e.originalEvent);
   });
 }

web_src/js/features/comp/QuickSubmit.js

@@ -0,0 +1,15 @@
+import $ from 'jquery';
+
+export function handleGlobalEnterQuickSubmit(target) {
+  const $target = $(target);
+  const $form = $(target).closest('form');
+  if ($form.length) {
+    // here use the event to trigger the submit event (instead of calling `submit()` method directly)
+    // otherwise the `areYouSure` handler won't be executed, then there will be an annoying "confirm to leave" dialog
+    $form.trigger('submit');
+  } else {
+    // if no form, then the editor is for an AJAX request, dispatch an event to the target, let the target's event handler to do the AJAX request.
+    // the 'ce-' prefix means this is a CustomEvent
+    $target.trigger('ce-quick-submit');
+  }
+}

web_src/js/features/repo-issue.js

@@ -480,8 +480,7 @@ 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.
-      const $reviewTextarea = $reviewBox.find('textarea');
-      const easyMDE = await createCommentEasyMDE($reviewTextarea, {minHeight: '80px'});
+      const easyMDE = await createCommentEasyMDE($reviewBox.find('textarea'), {minHeight: '80px'});
       initEasyMDEImagePaste(easyMDE, $reviewBox.find('.dropzone'));
     })();
   }

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 {initEasyMDEImagePaste} from './comp/ImagePaste.js';
+import {initEasyMDEImagePaste, addUploadedFileToEditor, removeUploadedFileFromEditor} from './comp/ImagePaste.js';
 import {
   initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel,
   initRepoIssueCommentDelete,
@@ -33,7 +33,7 @@ import initRepoPullRequestMergeForm from './repo-issue-pr-form.js';
 const {csrfToken} = window.config;
 
 export function initRepoCommentForm() {
-  const $commentForm = $('.comment.form');
+  const $commentForm = $('#comment-form, #new-issue'); // for issues and PRs
   if ($commentForm.length === 0) {
     return;
   }
@@ -68,8 +68,7 @@ export function initRepoCommentForm() {
   }
 
   (async () => {
-    const $textarea = $commentForm.find('textarea:not(.review-textarea)');
-    const easyMDE = await createCommentEasyMDE($textarea);
+    const easyMDE = await createCommentEasyMDE($commentForm.find('textarea:not(.review-textarea)'));
     initEasyMDEImagePaste(easyMDE, $commentForm.find('.dropzone'));
   })();
 
@@ -284,7 +283,8 @@ async function onEditContent(event) {
     if ($dropzone.length === 1) {
       $dropzone.data('saved', false);
 
-      const fileUuidDict = {};
+      let disableRemovedfileEvent = false; // when resetting the dropzone (removeAllFiles), disable the removedfile event
+      let fileUuidDict = {}; // if a comment has been saved, then the uploaded files won't be deleted from server when clicking the Remove in the dropzone
       dz = await createDropzone($dropzone[0], {
         url: $dropzone.data('upload-url'),
         headers: {'X-Csrf-Token': csrfToken},
@@ -303,17 +303,27 @@ async function onEditContent(event) {
         init() {
           this.on('success', (file, data) => {
             file.uuid = data.uuid;
-            fileUuidDict[file.uuid] = {submitted: false};
-            const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
+            const input = $(`<input id="${file.uuid}" name="files" type="hidden">`).val(data.uuid);
             $dropzone.find('.files').append(input);
+            fileUuidDict[file.uuid] = {submitted: false};
+            addUploadedFileToEditor(file.editor, file);
           });
           this.on('removedfile', (file) => {
+            if (disableRemovedfileEvent) return;
             $(`#${file.uuid}`).remove();
-            if ($dropzone.data('remove-url') && !fileUuidDict[file.uuid].submitted) {
+            if (!file.editor && (file.editor = getAttachedEasyMDE(this.element.parentElement.parentElement.querySelector('textarea')))) {
+              file.editor = file.editor.codemirror;
+            }
+            if ($dropzone.data('remove-url') && !fileUuidDict[file.uuid]?.submitted) {
               $.post($dropzone.data('remove-url'), {
                 file: file.uuid,
                 _csrf: csrfToken,
+              }).always(() => {
+                removeUploadedFileFromEditor(file.editor, file.uuid);
               });
+            } else {
+              // for saved comment's attachment's removal, only remove the link in the editor
+              removeUploadedFileFromEditor(file.editor, file.uuid);
             }
           });
           this.on('submit', () => {
@@ -323,8 +333,11 @@ async function onEditContent(event) {
           });
           this.on('reload', () => {
             $.getJSON($editContentZone.data('attachment-url'), (data) => {
+              disableRemovedfileEvent = true;
               dz.removeAllFiles(true);
+              disableRemovedfileEvent = false;
               $dropzone.find('.files').empty();
+              fileUuidDict = {};
               $.each(data, function () {
                 const imgSrc = `${$dropzone.data('link-url')}/${this.uuid}`;
                 dz.emit('addedfile', this);
@@ -354,7 +367,9 @@ async function onEditContent(event) {
     easyMDE = await createCommentEasyMDE($textarea);
 
     initCompMarkupContentPreviewTab($editContentForm);
-    initEasyMDEImagePaste(easyMDE, $dropzone);
+    if ($dropzone.length) {
+      initEasyMDEImagePaste(easyMDE, $dropzone);
+    }
 
     const $saveButton = $editContentZone.find('.save.button');
     $textarea.on('ce-quick-submit', () => {