UX: Add copied text upon copy button click (#9793)

UX: Add copied text upon copy button click (#9793)

diff --git a/app/assets/javascripts/discourse/app/initializers/copy-codeblocks.js b/app/assets/javascripts/discourse/app/initializers/copy-codeblocks.js
index 62552f6..a0b0d50 100644
--- a/app/assets/javascripts/discourse/app/initializers/copy-codeblocks.js
+++ b/app/assets/javascripts/discourse/app/initializers/copy-codeblocks.js
@@ -2,6 +2,7 @@ import { withPluginApi } from "discourse/lib/plugin-api";
 import { cancel, later } from "@ember/runloop";
 import { Promise } from "rsvp";
 import { iconHTML } from "discourse-common/lib/icon-library";
+import I18n from "I18n";
 
 // http://github.com/feross/clipboard-copy
 function clipboardCopy(text) {
@@ -86,6 +87,8 @@ export default {
         if (code) {
           clipboardCopy(code.innerText.trim()).then(() => {
             button.classList.add("copied");
+            const state = button.innerHTML;
+            button.innerHTML = I18n.t("copy_codeblock.copied");
 
             const commandId = Ember.guidFor(button);
 
@@ -96,6 +99,7 @@ export default {
 
             _fadeCopyCodeblocksRunners[commandId] = later(() => {
               button.classList.remove("copied");
+              button.innerHTML = state;
               delete _fadeCopyCodeblocksRunners[commandId];
             }, 3000);
           });
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 6fab3f4..56d6574 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -336,6 +336,9 @@ en:
         tomorrow_with_time: "tomorrow at %{time}"
         at_time: "at %{date_time}"
         existing_reminder: "You have a reminder set for this bookmark which will be sent"
+    
+    copy_codeblock:
+      copied: "copied!"
 
     drafts:
       resume: "Resume"

GitHub sha: 9810ca1d

1 Like

This commit appears in #9793 which was merged by jjaffeux.