From eb5ad7eb26f67510aa289755b53d83116869a826 Mon Sep 17 00:00:00 2001
From: ObserverOfTime <chronobserver@disroot.org>
Date: Fri, 22 Aug 2025 18:45:01 +0300
Subject: [PATCH] feat(playground): add a button to copy the tree

Co-Authored-By: Firas al-Khalil <firasalkhalil@gmail.com>
---
 crates/cli/src/playground.html   |  5 ++++-
 docs/src/7-playground.md         |  5 ++++-
 docs/src/assets/js/playground.js | 14 +++++++++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/crates/cli/src/playground.html b/crates/cli/src/playground.html
index 1d0e0d81..ecf7efc4 100644
--- a/crates/cli/src/playground.html
+++ b/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>
diff --git a/docs/src/7-playground.md b/docs/src/7-playground.md
index c9a13123..1d728e98 100644
--- a/docs/src/7-playground.md
+++ b/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>
diff --git a/docs/src/assets/js/playground.js b/docs/src/assets/js/playground.js
index cebd7b52..3a410595 100644
--- a/docs/src/assets/js/playground.js
+++ b/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();