From cd8e330208dd4396ac0cd88bee448740e7ea190a Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Fri, 17 Jan 2025 15:06:47 +0530
Subject: [PATCH] Fix: Not able to copy value in debugger

---
 .../src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx  | 12 +++++++++++-
 frontend/src/_ui/JSONTreeViewer/JSONNode.jsx         |  8 +++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx b/frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx
index 66548cbef8..aba2ca6af1 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarDebugger/Logs.jsx
@@ -5,6 +5,7 @@ import JSONTreeViewer from '@/_ui/JSONTreeViewer';
 import cx from 'classnames';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import useStore from '@/AppBuilder/_stores/store';
+import { toast } from 'react-hot-toast';
 
 function Logs({ logProps, idx }) {
   const [open, setOpen] = React.useState(false);
@@ -52,10 +53,19 @@ function Logs({ logProps, idx }) {
     }
   };
 
+  const copyToClipboard = (data) => {
+    const stringified = JSON.stringify(data, null, 2).replace(/\\/g, '');
+    navigator.clipboard.writeText(stringified);
+    return toast.success('Value copied to clipboard', { position: 'top-center' });
+  };
+
   const callbackActions = [
     {
       for: 'all',
-      actions: [{ name: 'Select Widget', dispatchAction: handleSelectComponentOnEditor, icon: false, onSelect: true }],
+      actions: [
+        { name: 'Copy value', dispatchAction: copyToClipboard, icon: false },
+        { name: 'Select Widget', dispatchAction: handleSelectComponentOnEditor, icon: false, onSelect: true },
+      ],
       enableForAllChildren: true,
       enableFor1stLevelChildren: true,
     },
diff --git a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
index 65a4ece91d..c6b2a504fa 100644
--- a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
+++ b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
@@ -269,7 +269,7 @@ export const JSONNode = ({ data, ...restProps }) => {
 
     return (
       <div style={{ fontSize: '9px', marginTop: '0px', right: '10px' }} className="d-flex position-absolute">
-        {enableCopyToClipboard && (
+        {enableCopyToClipboard ? (
           <ToolTip message={'Copy to clipboard'}>
             <span
               onClick={() => {
@@ -281,6 +281,12 @@ export const JSONNode = ({ data, ...restProps }) => {
               <DefaultCopyIcon />
             </span>
           </ToolTip>
+        ) : (
+          // Temporary fix for hover issue for copy value button. Need to remove this once inspector gets revamped.
+          <span
+            style={{ height: '13px', width: '13px', marginBottom: '4px' }}
+            className="mx-1 copy-to-clipboard"
+          ></span>
         )}
         <ToolTip message={'Copy value'}>
           <span