diff --git a/app/w/components/console/components/json-view/json-view.tsx b/app/w/components/console/components/json-view/json-view.tsx index 42874d9233..1a3e9b8725 100644 --- a/app/w/components/console/components/json-view/json-view.tsx +++ b/app/w/components/console/components/json-view/json-view.tsx @@ -35,31 +35,67 @@ const TruncatedValue = ({ value }: { value: string }) => { ) } +const copyToClipboard = (data: any) => { + const stringified = JSON.stringify(data, null, 2) + navigator.clipboard.writeText(stringified) +} + export const JSONView = ({ data, level = 0, initiallyExpanded = false, }: JSONViewProps) => { const [isCollapsed, setIsCollapsed] = useState(!initiallyExpanded) + const [contextMenuPosition, setContextMenuPosition] = useState<{ + x: number + y: number + } | null>(null) useEffect(() => { setIsCollapsed(!initiallyExpanded) }, [initiallyExpanded]) + const handleContextMenu = (e: React.MouseEvent) => { + e.preventDefault() + setContextMenuPosition({ x: e.clientX, y: e.clientY }) + } + + useEffect(() => { + const handleClickOutside = () => setContextMenuPosition(null) + if (contextMenuPosition) { + document.addEventListener('click', handleClickOutside) + return () => document.removeEventListener('click', handleClickOutside) + } + }, [contextMenuPosition]) + if (data === null) return null if (typeof data !== 'object') { const stringValue = JSON.stringify(data) return ( {typeof data === 'string' ? ( ) : ( stringValue )} + {contextMenuPosition && ( +
+ +
+ )}
) } @@ -75,7 +111,7 @@ export const JSONView = ({ } return ( -
+
{ @@ -89,6 +125,19 @@ export const JSONView = ({ {isArray ? '[' : '{'} {isCollapsed ? '...' : ''} + {contextMenuPosition && ( +
+ +
+ )} {!isCollapsed && (
{isArray