fix: prevent copy text being copied in code samples fixes SeleniumHQ#2366 [deploy site]

Author: harsha509

website_and_docs/layouts/shortcodes/gh-codeblock.html

@@ -51,6 +51,12 @@
 
 {{ highlight $codeSnippet $language }}
 
+<style>
+div.code-toolbar > .toolbar {
+    display: none !important;
+}
+</style>
+
 {{ if $hasFragment }}
 {{ $uniqueId := md5 $path }}
 <div class="mt-4 pb-2">
@@ -70,10 +76,10 @@
         <div style="position: sticky; top: 0; z-index: 10; background: white; box-shadow: 0 2px 2px rgba(0,0,0,0.1); padding: 10px 15px; border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center; height: 50px;">
             <h5 style="margin: 0;">{{ $path }}</h5>
             <div>
-                <button onclick="copyCode('{{ $uniqueId }}', event)" style="margin-right: 10px; padding: 5px 10px; border: 1px solid #007bff; background: #007bff; color: white; border-radius: 4px; cursor: pointer;">
+                <button onclick="copyCode('{{ $uniqueId }}', event)" style="margin-right: 10px; padding: 5px 10px; border: 1px solid #007bff; background: #007bff; color: white; border-radius: 4px; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;">
                     Copy
                 </button>
-                <button onclick="closeCodeModal('{{ $uniqueId }}')" style="padding: 5px 10px; border: 1px solid #6c757d; background: #6c757d; color: white; border-radius: 4px; cursor: pointer;">
+                <button onclick="closeCodeModal('{{ $uniqueId }}')" style="padding: 5px 10px; border: 1px solid #6c757d; background: #6c757d; color: white; border-radius: 4px; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;">
                     Close
                 </button>
             </div>
@@ -85,6 +91,11 @@ <h5 style="margin: 0;">{{ $path }}</h5>
 </div>
 
 <script>
+document.addEventListener('DOMContentLoaded', function() {
+    const toolbars = document.querySelectorAll('div.code-toolbar > .toolbar');
+    toolbars.forEach(toolbar => toolbar.remove());
+});
+
 window.showCodeModal = window.showCodeModal || function(id) {
     document.getElementById('codeModal_' + id).style.display = 'block';
     document.body.style.overflow = 'hidden';
@@ -97,7 +108,8 @@ <h5 style="margin: 0;">{{ $path }}</h5>
 
 window.copyCode = window.copyCode || function(id, event) {
     const codeElement = document.getElementById('codeContent_' + id);
-    const code = codeElement.textContent;
+    const preElement = codeElement.querySelector('pre');
+    const code = preElement ? preElement.textContent : codeElement.textContent;
 
     if (navigator.clipboard) {
         navigator.clipboard.writeText(code).then(() => {