From bc8d5085f06a88bfd6f24c329e1904ca2e07d0d5 Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Mon, 27 Jun 2022 09:08:24 +0800
Subject: [PATCH 1/8] Add paste images legend function

---
 web_src/js/features/common-global.js   |  4 ++++
 web_src/js/features/comp/ImagePaste.js | 10 ++++++++++
 web_src/js/features/repo-legacy.js     |  4 ++++
 3 files changed, 18 insertions(+)

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index eb59bcbe38f7f..cacdb67302e6a 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -198,10 +198,14 @@ export function initGlobalDropzone() {
         });
         this.on('removedfile', (file) => {
           $(`#${file.uuid}`).remove();
+          const editor = this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;
           if ($dropzone.data('remove-url')) {
             $.post($dropzone.data('remove-url'), {
               file: file.uuid,
               _csrf: csrfToken,
+            }).then(() => {
+              const filename = file.name.substring(0, file.name.lastIndexOf('.')), oldval = `![${filename}](/attachments/${file.uuid})`;
+              editor.value(editor.value().replace(oldval, ''));
             });
           }
         });
diff --git a/web_src/js/features/comp/ImagePaste.js b/web_src/js/features/comp/ImagePaste.js
index 79aeffa02b4b6..977884cc6cb20 100644
--- a/web_src/js/features/comp/ImagePaste.js
+++ b/web_src/js/features/comp/ImagePaste.js
@@ -71,6 +71,11 @@ export function initCompImagePaste($target) {
           replaceAndKeepCursor(textarea, `![${name}]()`, `![${name}](/attachments/${data.uuid})`);
           const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
           dropzoneFiles.appendChild(input[0]);
+          const upfile = {name: img.name, size: img.size, uuid: data.uuid};
+          dropzone.dropzone.emit('addedfile', upfile);
+          dropzone.dropzone.emit('thumbnail', upfile, `/attachments/${data.uuid}`);
+          dropzone.dropzone.emit('complete', upfile);
+          dropzone.dropzone.files.push(upfile);
         }
       }, false);
     }
@@ -87,6 +92,11 @@ export function initEasyMDEImagePaste(easyMDE, dropzone, files) {
       easyMDE.codemirror.replaceRange(`![${name}](/attachments/${data.uuid})`, pos);
       const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
       files.append(input);
+      const upfile = {name: img.name, size: img.size, uuid: data.uuid};
+      dropzone.dropzone.emit('addedfile', upfile);
+      dropzone.dropzone.emit('thumbnail', upfile, `/attachments/${data.uuid}`);
+      dropzone.dropzone.emit('complete', upfile);
+      dropzone.dropzone.files.push(upfile);
     }
   });
 }
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 6cdde6a1e4c27..ae77f8d5be365 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -307,9 +307,13 @@ async function onEditContent(event) {
           this.on('removedfile', (file) => {
             $(`#${file.uuid}`).remove();
             if ($dropzone.data('remove-url') && !fileUuidDict[file.uuid].submitted) {
+              const editor = this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;
               $.post($dropzone.data('remove-url'), {
                 file: file.uuid,
                 _csrf: csrfToken,
+              }).then(() => {
+                const filename = file.name.substring(0, file.name.lastIndexOf('.')), oldval = `![${filename}](/attachments/${file.uuid})`;
+                editor.value(editor.value().replace(oldval, ''));
               });
             }
           });

From 9adeab802e5f2c68817536e678855049a637a3d3 Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Mon, 27 Jun 2022 09:23:21 +0800
Subject: [PATCH 2/8] Adjust editor define postition

---
 web_src/js/features/common-global.js | 2 +-
 web_src/js/features/repo-legacy.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index cacdb67302e6a..35c4ad3bce67f 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -198,13 +198,13 @@ export function initGlobalDropzone() {
         });
         this.on('removedfile', (file) => {
           $(`#${file.uuid}`).remove();
-          const editor = this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;
           if ($dropzone.data('remove-url')) {
             $.post($dropzone.data('remove-url'), {
               file: file.uuid,
               _csrf: csrfToken,
             }).then(() => {
               const filename = file.name.substring(0, file.name.lastIndexOf('.')), oldval = `![${filename}](/attachments/${file.uuid})`;
+              const editor = this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;
               editor.value(editor.value().replace(oldval, ''));
             });
           }
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index ae77f8d5be365..4082b90d0b380 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -307,12 +307,12 @@ async function onEditContent(event) {
           this.on('removedfile', (file) => {
             $(`#${file.uuid}`).remove();
             if ($dropzone.data('remove-url') && !fileUuidDict[file.uuid].submitted) {
-              const editor = this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;
               $.post($dropzone.data('remove-url'), {
                 file: file.uuid,
                 _csrf: csrfToken,
               }).then(() => {
                 const filename = file.name.substring(0, file.name.lastIndexOf('.')), oldval = `![${filename}](/attachments/${file.uuid})`;
+                const editor = this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;
                 editor.value(editor.value().replace(oldval, ''));
               });
             }

From 146600125c3ddb4235df238c0d4eda70eb9e7e61 Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Mon, 27 Jun 2022 09:50:33 +0800
Subject: [PATCH 3/8] Combine const

---
 web_src/js/features/common-global.js | 3 +--
 web_src/js/features/repo-legacy.js   | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 35c4ad3bce67f..6f62bc5f425fa 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -203,8 +203,7 @@ export function initGlobalDropzone() {
               file: file.uuid,
               _csrf: csrfToken,
             }).then(() => {
-              const filename = file.name.substring(0, file.name.lastIndexOf('.')), oldval = `![${filename}](/attachments/${file.uuid})`;
-              const editor = this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;
+              const filename = file.name.substring(0, file.name.lastIndexOf('.')), oldval = `![${filename}](/attachments/${file.uuid})`, editor = this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;
               editor.value(editor.value().replace(oldval, ''));
             });
           }
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 4082b90d0b380..f9cdd8a2e8bf0 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -311,8 +311,7 @@ async function onEditContent(event) {
                 file: file.uuid,
                 _csrf: csrfToken,
               }).then(() => {
-                const filename = file.name.substring(0, file.name.lastIndexOf('.')), oldval = `![${filename}](/attachments/${file.uuid})`;
-                const editor = this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;
+                const filename = file.name.substring(0, file.name.lastIndexOf('.')), oldval = `![${filename}](/attachments/${file.uuid})`, editor = this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;
                 editor.value(editor.value().replace(oldval, ''));
               });
             }

From 0fbe301cddb48c5fcf88a4998f38457d93008e29 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 28 Jun 2022 10:37:37 +0800
Subject: [PATCH 4/8] refactor

---
 web_src/js/features/common-global.js   |  9 +++++--
 web_src/js/features/comp/ImagePaste.js | 34 +++++++++++++++-----------
 web_src/js/features/repo-legacy.js     |  9 +++----
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 6f62bc5f425fa..db5152b184e88 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -5,6 +5,8 @@ import createDropzone from './dropzone.js';
 import {initCompColorPicker} from './comp/ColorPicker.js';
 import {showGlobalErrorMessage} from '../bootstrap.js';
 import {attachDropdownAria} from './aria.js';
+import {removeUploadedFileFromEditor} from './comp/ImagePaste.js';
+import {getAttachedEasyMDE} from './comp/EasyMDE.js';
 
 const {appUrl, csrfToken} = window.config;
 
@@ -203,8 +205,11 @@ export function initGlobalDropzone() {
               file: file.uuid,
               _csrf: csrfToken,
             }).then(() => {
-              const filename = file.name.substring(0, file.name.lastIndexOf('.')), oldval = `![${filename}](/attachments/${file.uuid})`, editor = this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;
-              editor.value(editor.value().replace(oldval, ''));
+              // FIXME: the code is still very fragile, in the future, there should be stable relation between dropzone and its editor.
+              const easyMDE = getAttachedEasyMDE($dropzone.parent().parent().find('textarea'));
+              if (easyMDE) {
+                removeUploadedFileFromEditor(easyMDE, file.uuid);
+              }
             });
           }
         });
diff --git a/web_src/js/features/comp/ImagePaste.js b/web_src/js/features/comp/ImagePaste.js
index 977884cc6cb20..80ff7825e37a0 100644
--- a/web_src/js/features/comp/ImagePaste.js
+++ b/web_src/js/features/comp/ImagePaste.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 const {csrfToken} = window.config;
 
-async function uploadFile(file, uploadUrl) {
+async function uploadFile(file, uploadUrl, dropzone) {
   const formData = new FormData();
   formData.append('file', file, file.name);
 
@@ -10,7 +10,23 @@ async function uploadFile(file, uploadUrl) {
     headers: {'X-Csrf-Token': csrfToken},
     body: formData,
   });
-  return await res.json();
+  const data = await res.json();
+  const upfile = {name: file.name, size: file.size, uuid: data.uuid};
+  dropzone.dropzone.emit('addedfile', upfile);
+  dropzone.dropzone.emit('thumbnail', upfile, `/attachments/${data.uuid}`);
+  dropzone.dropzone.emit('complete', upfile);
+  dropzone.dropzone.files.push(upfile);
+  return data;
+}
+
+export function removeUploadedFileFromEditor(editor, fileUuid) {
+  // the raw regexp is: /!\[[^\]]*]\(\/attachments\/{uuid}\)/
+  const re = new RegExp(`!\\[[^\\]]*]\\(/attachments/${fileUuid}\\)`);
+  editor.value(editor.value().replace(re, '')); // at the moment, we assume the editor is an EasyMDE
+  if (editor.element) {
+    // when using "simple textarea" mode, the value of the textarea should be replaced too.
+    editor.element.value = editor.element.value.replace(re, '');
+  }
 }
 
 function clipboardPastedImages(e) {
@@ -67,15 +83,10 @@ export function initCompImagePaste($target) {
         for (const img of clipboardPastedImages(e)) {
           const name = img.name.slice(0, img.name.lastIndexOf('.'));
           insertAtCursor(textarea, `![${name}]()`);
-          const data = await uploadFile(img, uploadUrl);
+          const data = await uploadFile(img, uploadUrl, dropzone);
           replaceAndKeepCursor(textarea, `![${name}]()`, `![${name}](/attachments/${data.uuid})`);
           const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
           dropzoneFiles.appendChild(input[0]);
-          const upfile = {name: img.name, size: img.size, uuid: data.uuid};
-          dropzone.dropzone.emit('addedfile', upfile);
-          dropzone.dropzone.emit('thumbnail', upfile, `/attachments/${data.uuid}`);
-          dropzone.dropzone.emit('complete', upfile);
-          dropzone.dropzone.files.push(upfile);
         }
       }, false);
     }
@@ -87,16 +98,11 @@ export function initEasyMDEImagePaste(easyMDE, dropzone, files) {
   easyMDE.codemirror.on('paste', async (_, e) => {
     for (const img of clipboardPastedImages(e)) {
       const name = img.name.slice(0, img.name.lastIndexOf('.'));
-      const data = await uploadFile(img, uploadUrl);
+      const data = await uploadFile(img, uploadUrl, dropzone);
       const pos = easyMDE.codemirror.getCursor();
       easyMDE.codemirror.replaceRange(`![${name}](/attachments/${data.uuid})`, pos);
       const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
       files.append(input);
-      const upfile = {name: img.name, size: img.size, uuid: data.uuid};
-      dropzone.dropzone.emit('addedfile', upfile);
-      dropzone.dropzone.emit('thumbnail', upfile, `/attachments/${data.uuid}`);
-      dropzone.dropzone.emit('complete', upfile);
-      dropzone.dropzone.files.push(upfile);
     }
   });
 }
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index f9cdd8a2e8bf0..de4dae08b3d25 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 {initCompImagePaste, initEasyMDEImagePaste, removeUploadedFileFromEditor} from './comp/ImagePaste.js';
 import {
   initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel,
   initRepoIssueCommentDelete,
@@ -282,7 +282,7 @@ async function onEditContent(event) {
     if ($dropzone.length === 1) {
       $dropzone.data('saved', false);
 
-      const fileUuidDict = {};
+      const fileUuidDict = {};  // suspicious logic, need to be confirmed in the future, fix or comment.
       dz = await createDropzone($dropzone[0], {
         url: $dropzone.data('upload-url'),
         headers: {'X-Csrf-Token': csrfToken},
@@ -306,13 +306,12 @@ async function onEditContent(event) {
           });
           this.on('removedfile', (file) => {
             $(`#${file.uuid}`).remove();
-            if ($dropzone.data('remove-url') && !fileUuidDict[file.uuid].submitted) {
+            if ($dropzone.data('remove-url') && !fileUuidDict[file.uuid]?.submitted) {
               $.post($dropzone.data('remove-url'), {
                 file: file.uuid,
                 _csrf: csrfToken,
               }).then(() => {
-                const filename = file.name.substring(0, file.name.lastIndexOf('.')), oldval = `![${filename}](/attachments/${file.uuid})`, editor = this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;
-                editor.value(editor.value().replace(oldval, ''));
+                removeUploadedFileFromEditor(easyMDE, file.uuid);
               });
             }
           });

From 6747657a1598902f2e0bace0574ea86c05c98499 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 28 Jun 2022 10:47:57 +0800
Subject: [PATCH 5/8] decouple cycle-import

---
 web_src/js/features/common-global.js    | 15 +--------------
 web_src/js/features/comp/EasyMDE.js     |  2 +-
 web_src/js/features/comp/QuickSubmit.js | 15 +++++++++++++++
 3 files changed, 17 insertions(+), 15 deletions(-)
 create mode 100644 web_src/js/features/comp/QuickSubmit.js

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index db5152b184e88..c21ed148cba87 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -7,6 +7,7 @@ import {showGlobalErrorMessage} from '../bootstrap.js';
 import {attachDropdownAria} from './aria.js';
 import {removeUploadedFileFromEditor} from './comp/ImagePaste.js';
 import {getAttachedEasyMDE} from './comp/EasyMDE.js';
+import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
 
 const {appUrl, csrfToken} = window.config;
 
@@ -55,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
diff --git a/web_src/js/features/comp/EasyMDE.js b/web_src/js/features/comp/EasyMDE.js
index 61aaf23e89582..eb663dd30a486 100644
--- a/web_src/js/features/comp/EasyMDE.js
+++ b/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}
diff --git a/web_src/js/features/comp/QuickSubmit.js b/web_src/js/features/comp/QuickSubmit.js
new file mode 100644
index 0000000000000..43424a949f1ec
--- /dev/null
+++ b/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');
+  }
+}

From c6c05b246449fb2abeccdda99c0aed9293a072f6 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 29 Jun 2022 02:19:32 +0800
Subject: [PATCH 6/8] fix merge, fix the bug for the removal of saved comment's
 attachments

---
 web_src/js/features/comp/ImagePaste.js | 28 +++++++++++++++++++++++---
 web_src/js/features/repo-legacy.js     |  9 ++++++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/web_src/js/features/comp/ImagePaste.js b/web_src/js/features/comp/ImagePaste.js
index da41e7611a620..ae5795d86bf8e 100644
--- a/web_src/js/features/comp/ImagePaste.js
+++ b/web_src/js/features/comp/ImagePaste.js
@@ -2,7 +2,7 @@ import $ from 'jquery';
 
 const {csrfToken} = window.config;
 
-async function uploadFile(file, uploadUrl) {
+async function uploadFile(file, uploadUrl, dropzone) {
   const formData = new FormData();
   formData.append('file', file, file.name);
 
@@ -11,7 +11,27 @@ async function uploadFile(file, uploadUrl) {
     headers: {'X-Csrf-Token': csrfToken},
     body: formData,
   });
-  return await res.json();
+  const data = await res.json();
+  const upfile = {name: file.name, size: file.size, uuid: data.uuid};
+  dropzone.emit('addedfile', upfile);
+  dropzone.emit('thumbnail', upfile, `/attachments/${data.uuid}`);
+  dropzone.emit('complete', upfile);
+  dropzone.files.push(upfile);
+  return data;
+}
+
+/**
+ * @param editor{EasyMDE}
+ * @param fileUuid
+ */
+export function removeUploadedFileFromEditor(editor, fileUuid) {
+  // the raw regexp is: /!\[[^\]]*]\(\/attachments\/{uuid}\)/
+  const re = new RegExp(`!\\[[^\\]]*]\\(/attachments/${fileUuid}\\)`);
+  editor.value(editor.value().replace(re, '')); // at the moment, we assume the editor is an EasyMDE
+  if (editor.element) {
+    // when using "simple textarea" mode, the value of the textarea should be replaced too.
+    editor.element.value = editor.element.value.replace(re, '');
+  }
 }
 
 function clipboardPastedImages(e) {
@@ -89,6 +109,8 @@ class CodeMirrorEditor {
 
 
 export function initEasyMDEImagePaste(easyMDE, $dropzone) {
+  if ($dropzone.length !== 1) throw new Error('invalid dropzone attach');
+
   const uploadUrl = $dropzone.attr('data-upload-url');
   const $files = $dropzone.find('.files');
 
@@ -107,7 +129,7 @@ export function initEasyMDEImagePaste(easyMDE, $dropzone) {
 
       const placeholder = `![${name}](uploading ...)`;
       editor.insertPlaceholder(placeholder);
-      const data = await uploadFile(img, uploadUrl);
+      const data = await uploadFile(img, uploadUrl, $dropzone[0].dropzone);
       editor.replacePlaceholder(placeholder, `![${name}](/attachments/${data.uuid})`);
 
       const $input = $(`<input name="files" type="hidden">`).attr('id', data.uuid).val(data.uuid);
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 2a31e73db94ae..9b3654b9db542 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, removeUploadedFileFromEditor} from './comp/ImagePaste.js';
+import {initEasyMDEImagePaste, 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');
   if ($commentForm.length === 0) {
     return;
   }
@@ -284,7 +284,7 @@ async function onEditContent(event) {
     if ($dropzone.length === 1) {
       $dropzone.data('saved', false);
 
-      const fileUuidDict = {};  // suspicious logic, need to be confirmed in the future, fix or comment.
+      const fileUuidDict = {}; // if a comment has been saved, then the uploaded files won't be deleted when clicking the Remove in the dropzone
       dz = await createDropzone($dropzone[0], {
         url: $dropzone.data('upload-url'),
         headers: {'X-Csrf-Token': csrfToken},
@@ -316,6 +316,9 @@ async function onEditContent(event) {
               }).then(() => {
                 removeUploadedFileFromEditor(easyMDE, file.uuid);
               });
+            } else {
+              // for saved comment's attachment's removal, only remove the link in the editor
+              removeUploadedFileFromEditor(easyMDE, file.uuid);
             }
           });
           this.on('submit', () => {

From f07b0de997125c9b79cc5af27966a7cdd1803a4d Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 29 Jun 2022 02:36:00 +0800
Subject: [PATCH 7/8] fix removal bug

---
 web_src/js/features/repo-legacy.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 9b3654b9db542..8899ac49b7f1b 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -284,7 +284,8 @@ async function onEditContent(event) {
     if ($dropzone.length === 1) {
       $dropzone.data('saved', false);
 
-      const fileUuidDict = {}; // if a comment has been saved, then the uploaded files won't be deleted when clicking the Remove in the dropzone
+      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},
@@ -308,6 +309,7 @@ async function onEditContent(event) {
             $dropzone.find('.files').append(input);
           });
           this.on('removedfile', (file) => {
+            if (disableRemovedfileEvent) return;
             $(`#${file.uuid}`).remove();
             if ($dropzone.data('remove-url') && !fileUuidDict[file.uuid]?.submitted) {
               $.post($dropzone.data('remove-url'), {
@@ -328,8 +330,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);

From 7f23b592920768230ba246eff5c88d89a6354df8 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 29 Jun 2022 08:59:44 +0800
Subject: [PATCH 8/8] fix

---
 web_src/js/features/comp/ImagePaste.js | 2 +-
 web_src/js/features/repo-legacy.js     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/js/features/comp/ImagePaste.js b/web_src/js/features/comp/ImagePaste.js
index ae5795d86bf8e..914808824646a 100644
--- a/web_src/js/features/comp/ImagePaste.js
+++ b/web_src/js/features/comp/ImagePaste.js
@@ -109,7 +109,7 @@ class CodeMirrorEditor {
 
 
 export function initEasyMDEImagePaste(easyMDE, $dropzone) {
-  if ($dropzone.length !== 1) throw new Error('invalid dropzone attach');
+  if ($dropzone.length !== 1) throw new Error('invalid dropzone binding for editor');
 
   const uploadUrl = $dropzone.attr('data-upload-url');
   const $files = $dropzone.find('.files');
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 8899ac49b7f1b..672de54d68cdc 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -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;
   }