docs: add a StackBlitz "Try It" button in code examples (#35644)

Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>

2 files changed, 26 insertions, 12 deletions

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index b267bfb6f2..1719ed9f2a 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -125,17 +125,24 @@
       element.insertAdjacentHTML('beforebegin', btnHtml)
     })
 
-  document.querySelectorAll('.btn-clipboard')
-    .forEach(function (btn) {
-      var tooltipBtn = new bootstrap.Tooltip(btn, { title: btnTitle })
-
-      btn.addEventListener('mouseleave', function () {
-        // Explicitly hide tooltip, since after clicking it remains
-        // focused (as it's a button), so tooltip would otherwise
-        // remain visible until focus is moved away
-        tooltipBtn.hide()
-      })
+  /**
+   *
+   * @param {HTMLButtonElement} btn
+   * @param {string} title
+   */
+  function snippetButtonTooltip(btn, title) {
+    var tooltipBtn = new bootstrap.Tooltip(btn, { title: title })
+
+    btn.addEventListener('mouseleave', function () {
+      // Explicitly hide tooltip, since after clicking it remains
+      // focused (as it's a button), so tooltip would otherwise
+      // remain visible until focus is moved away
+      tooltipBtn.hide()
     })
+  }
+
+  snippetButtonTooltip(document.querySelector('.btn-clipboard'), 'Copy to clipboard')
+  snippetButtonTooltip(document.querySelector('.btn-edit'), 'Edit on Stackblitz')
 
   var clipboard = new ClipboardJS('.btn-clipboard', {
     target: function (trigger) {
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 83b9a8b9e5..b2b0854dc4 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -2,7 +2,8 @@
 //
 // JS-based `Copy` buttons for code snippets.
 
-.bd-clipboard {
+.bd-clipboard,
+.bd-edit {
   position: relative;
   display: none;
   float: right;
@@ -16,7 +17,8 @@
   }
 }
 
-.btn-clipboard {
+.btn-clipboard,
+.btn-edit {
   position: absolute;
   top: .65rem;
   right: .65rem;
@@ -25,6 +27,7 @@
   padding: .25rem .5rem;
   @include font-size(.65em);
   color: $primary;
+  white-space: nowrap;
   background-color: $white;
   border: 1px solid;
   @include border-radius();
@@ -35,3 +38,7 @@
     background-color: $primary;
   }
 }
+
+.btn-edit {
+  right: 3.65rem;
+}