Auto-remove leading $ symbols when copying from docs terminal blocks

docs/js/custom.js

@@ -112,8 +112,70 @@ function setupTermynal() {
     loadVisibleTermynals();
 }
 
+/**
+ * This function is enhances the 'copy to clipboard' buttons on terminal blocks 
+ * by removing leading $ signs. This ensures users can copy and paste the
+ * commands into their terminal without having to manually remove the $ signs.
+ */
+function enhanceCopyButtons() {
+    // Wait until the DOM is loaded before looking up the buttons
+    document.addEventListener("DOMContentLoaded", function() {
+        var buttons = document.querySelectorAll(
+            ".terminal pre[id^='__code_'] button.md-code__button");
+        buttons.forEach(function(button) {
+            // Check if the button's "data-clipboard-target" attribute is already
+            // a cleaned textarea - if so, no need to clean it again.
+            if (!button.getAttribute("data-clipboard-target").startsWith("#__cleaned")) {
+                // Next, add event listeners to the button to clean the code block
+                // before the 'click' event handler copies the code to the clipboard.
+
+                // On desktop devices, clean the code block when the user
+                // hovers over the button.
+                button.addEventListener("mouseenter", copyCleaner);
+
+                // On mobile devices, clean the code block when the user
+                // taps on the button. This works because the 'click' event
+                // is fired after the 'touchstart' event.
+                button.addEventListener("touchstart", copyCleaner);
+
+                function copyCleaner() {
+                    // Look up the code block referenced by the button's 
+                    // "data-clipboard-target" attribute.
+                    let codeBlockSelector = button.getAttribute("data-clipboard-target");
+
+                    // return early if we've already cleaned this code block
+                    if (codeBlockSelector.startsWith("#__cleaned")) { return; }
+                    let codeBlock = document.querySelector(codeBlockSelector);
+
+                    // clean the code block by removing leading $ signs and trim whitespace
+                    let cleanedCode = codeBlock.innerText.replace(/^\$\s/gm, "").trim();
+                    let cleanedCodeId = "__cleaned_"
+                        + codeBlockSelector.replace('#','').split(" ")[0];
+                    let cleanedCodeBlock = document.getElementById(cleanedCodeId);
+
+                    // if the cleaned code block doesn't exist, create it and add it to the DOM
+                    if (cleanedCodeBlock == null) {
+                        cleanedCodeBlock = document.createElement("code");
+                        cleanedCodeBlock.id = cleanedCodeId;
+                        // escape HTML entities via createTextNode
+                        let textNode = document.createTextNode(cleanedCode);
+                        cleanedCodeBlock.appendChild(textNode);
+
+                        cleanedCodeBlock.style.display = "none";
+                        document.body.appendChild(cleanedCodeBlock);
+                    }
+                    // update the button's "data-clipboard-target" attribute to reference 
+                    // the cleaned code block
+                    button.setAttribute("data-clipboard-target", "#" + cleanedCodeId);
+                }
+            }
+        });
+    });
+} 
+
 async function main() {
     setupTermynal();
+    enhanceCopyButtons();
 }
 
-main()
+main()