Change button text for commenting and closing an issue at the same time (#23135)...

Backport #23135

Close  #10468

Without SimpleMDE/EasyMDE, using Simple Textarea, the button text could
be changed when content changes.

After introducing SimpleMDE/EasyMDE, there is no code for updating the
button text.

![image](https://user-images.githubusercontent.com/2114189/221334034-8d556cd5-1136-4ba0-8faa-a65ffadd7fb7.png)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

diff --git a/web_src/js/features/comp/EasyMDE.js b/web_src/js/features/comp/EasyMDE.js
index 1f7fe45153cce36f0fca609259b94b8f11ffaea9..6793bd84d57eff5f9b26243dec9df998f129b2b7 100644 (file)
--- a/web_src/js/features/comp/EasyMDE.js
+++ b/web_src/js/features/comp/EasyMDE.js
@@ -77,6 +77,9 @@ export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) {
 
   const inputField = easyMDE.codemirror.getInputField();
 
+  easyMDE.codemirror.on('change', (...args) => {
+    easyMDEOptions?.onChange?.(...args);
+  });
   easyMDE.codemirror.setOption('extraKeys', {
     'Cmd-Enter': codeMirrorQuickSubmit,
     'Ctrl-Enter': codeMirrorQuickSubmit,

diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 2c93ca03424b0f804881ab35f5ebf694dd2451d1..cfb4f16131f1bbe2674c0a14efbc2e5ab558cd45 100644 (file)
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -68,12 +68,18 @@ export function initRepoCommentForm() {
   }
 
   (async () => {
+    const $statusButton = $('#status-button');
     for (const textarea of $commentForm.find('textarea:not(.review-textarea, .no-easymde)')) {
       // Don't initialize EasyMDE for the dormant #edit-content-form
       if (textarea.closest('#edit-content-form')) {
         continue;
       }
-      const easyMDE = await createCommentEasyMDE(textarea);
+      const easyMDE = await createCommentEasyMDE(textarea, {
+        'onChange': () => {
+          const value = easyMDE?.value().trim();
+          $statusButton.text($statusButton.attr(value.length === 0 ? 'data-status' : 'data-status-and-comment'));
+        },
+      });
       initEasyMDEImagePaste(easyMDE, $commentForm.find('.dropzone'));
     }
   })();