Merge pull request #11 from jmsche/success-content-html

Allow to use HTML for success content
stimulus-components · May 19, 2023 · f0af55c · f0af55c
2 parents f5fc183 + 1dc4586
commit f0af55c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- Allow to use HTML for success content.
+
 ## [3.3.0] - 2022-12-23
 
 ### Added

diff --git a/index.html b/index.html
@@ -137,7 +137,7 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
       <section class="mt-16">
         <div
           data-controller="clipboard"
-          data-clipboard-success-content="Copied!"
+          data-clipboard-success-content="<strong>Copied!</strong>"
           class="mt-1 flex rounded-md shadow-sm"
         >
           <input
@@ -172,7 +172,7 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
           </button>
         </div>
 
-        <div data-controller="clipboard" data-clipboard-success-content="Copied!" class="relative mt-16">
+        <div data-controller="clipboard" data-clipboard-success-content="<strong>Copied!</strong>" class="relative mt-16">
           <button
             class="absolute top-2 right-2 p-2 bg-white hover:bg-gray-200 rounded"
             type="button"

diff --git a/src/index.ts b/src/index.ts
@@ -37,7 +37,7 @@ export default class extends Controller {
       clearTimeout(this.timeout)
     }
 
-    this.buttonTarget.innerText = this.data.get('successContent')
+    this.buttonTarget.innerHTML = this.data.get('successContent')
 
     this.timeout = setTimeout(() => {
       this.buttonTarget.innerHTML = this.originalContent