From a26d9c912a6c42f19a133df1db571c802dbc47ee Mon Sep 17 00:00:00 2001
From: Ahmad Shakib <sabist@users.noreply.github.com>
Date: Fri, 20 Sep 2024 00:56:38 +0330
Subject: [PATCH] render laravel dd() dump output properly (#893)

---
 resources/css/theme-default.style.css |  5 +++++
 resources/js/tryitout.js              | 14 +++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/resources/css/theme-default.style.css b/resources/css/theme-default.style.css
index b46a0745..9a4741c1 100644
--- a/resources/css/theme-default.style.css
+++ b/resources/css/theme-default.style.css
@@ -894,6 +894,11 @@ html {
     text-shadow: 0 1px 2px rgba(0, 0, 0, .4)
 }
 
+.content blockquote pre.sf-dump,
+.content pre pre.sf-dump {
+    width: 100%;
+}
+
 .content .annotation {
     background-color: #292929;
     color: #fff;
diff --git a/resources/js/tryitout.js b/resources/js/tryitout.js
index 01c584f2..2a1d2b8a 100644
--- a/resources/js/tryitout.js
+++ b/resources/js/tryitout.js
@@ -139,6 +139,17 @@ function handleResponse(endpointId, response, status, headers) {
 
     const responseContentEl = document.querySelector('#execution-response-content-' + endpointId);
 
+    // Check if the response contains Laravel's  dd() default dump output
+    const isLaravelDump = response.includes('Sfdump');
+
+    // If it's a Laravel dd() dump, use innerHTML to render it safely
+    if (isLaravelDump) {
+        responseContentEl.innerHTML = response === '' ? responseContentEl.dataset.emptyResponseText : response;
+    } else {
+        // Otherwise, stick to textContent for regular responses
+        responseContentEl.textContent = response === '' ? responseContentEl.dataset.emptyResponseText : response;
+    }
+
     // Prettify it if it's JSON
     let isJson = false;
     try {
@@ -146,11 +157,12 @@ function handleResponse(endpointId, response, status, headers) {
         if (jsonParsed !== null) {
             isJson = true;
             response = JSON.stringify(jsonParsed, null, 4);
+            responseContentEl.textContent = response;
         }
     } catch (e) {
 
     }
-    responseContentEl.textContent = response === '' ? responseContentEl.dataset.emptyResponseText : response;
+
     isJson && window.hljs.highlightElement(responseContentEl);
     const statusEl = document.querySelector('#execution-response-status-' + endpointId);
     statusEl.textContent = ` (${status})`;