feat(playground): add a button to copy the tree

Co-Authored-By: Firas al-Khalil <firasalkhalil@gmail.com>

crates/cli/src/playground.html

@@ -387,7 +387,10 @@
       </div>
 
       <div id="output-container-scroll">
-        <div class="panel-header">Tree</div>
+        <div class="panel-header">
+          Tree
+          <button type="button" id="copy-button" class="theme-toggle">📋</button>
+        </div>
         <pre id="output-container" class="highlight"></pre>
       </div>
     </main>

docs/src/7-playground.md

@@ -70,7 +70,10 @@
 <textarea id="query-input"></textarea>
 </div>
 
-<h2>Tree</h2>
+<h2>
+  Tree
+  <button type="button" id="copy-button" class="theme-toggle">📋</button>
+</h2>
 <span id="update-time"></span>
 <div id="output-container-scroll">
 <pre id="output-container" class="highlight"></pre>

docs/src/assets/js/playground.js

@@ -117,6 +117,7 @@ window.initializePlayground = async (opts) => {
   const queryContainer = document.getElementById("query-container");
   const queryInput = document.getElementById("query-input");
   const accessibilityCheckbox = document.getElementById("accessibility-checkbox");
+  const copyButton = document.getElementById("copy-button");
   const updateTimeSpan = document.getElementById("update-time");
   const languagesByName = {};
 
@@ -174,11 +175,12 @@ window.initializePlayground = async (opts) => {
   queryEditor.on("changes", debounce(handleQueryChange, 150));
 
   loggingCheckbox.addEventListener("change", handleLoggingChange);
-  anonymousNodes.addEventListener('change', renderTree);
+  anonymousNodes.addEventListener("change", renderTree);
   queryCheckbox.addEventListener("change", handleQueryEnableChange);
   accessibilityCheckbox.addEventListener("change", handleQueryChange);
   languageSelect.addEventListener("change", handleLanguageChange);
   outputContainer.addEventListener("click", handleTreeClick);
+  copyButton.addEventListener("click", handleCopy);
 
   handleQueryEnableChange();
   await handleLanguageChange();
@@ -497,6 +499,16 @@ window.initializePlayground = async (opts) => {
     }
   }
 
+  function handleCopy() {
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    const range = document.createRange();
+    range.selectNodeContents(outputContainer);
+    selection.addRange(range);
+    navigator.clipboard.writeText(selection.toString());
+    selection.removeRange(range);
+  }
+
   function handleTreeClick(event) {
     if (event.target.tagName === "A") {
       event.preventDefault();