From bd8b7b468c671ec3559a86e89e3cf1a587bf9133 Mon Sep 17 00:00:00 2001
From: Nikhil Kuriakose <nikhilkuria@gmail.com>
Date: Mon, 7 Jul 2025 10:49:26 +0200
Subject: [PATCH] fix(editor): Show escape characters in json view (#16930)

---
 cypress/e2e/5-ndv.cy.ts                       |  2 +-
 .../editor-ui/src/components/RunDataJson.vue  | 16 ++++---
 .../__snapshots__/RunDataJson.test.ts.snap    | 42 ++++++++++++++++---
 3 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
index 66978e4b33..23223aa0bf 100644
--- a/cypress/e2e/5-ndv.cy.ts
+++ b/cypress/e2e/5-ndv.cy.ts
@@ -712,7 +712,7 @@ describe('NDV', () => {
 			.outputDataContainer()
 			.should(
 				'have.text',
-				'[{"body": "<?xml version="1.0" encoding="UTF-8"?> <library>     <book>         <title>Introduction to XML</title>         <author>John Doe</author>         <publication_year>2020</publication_year>         <isbn>1234567890</isbn>     </book>     <book>         <title>Data Science Basics</title>         <author>Jane Smith</author>         <publication_year>2019</publication_year>         <isbn>0987654321</isbn>     </book>     <book>         <title>Programming in Python</title>         <author>Bob Johnson</author>         <publication_year>2021</publication_year>         <isbn>5432109876</isbn>     </book> </library>"}]',
+				'[{"body": "<?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?> <library>     <book>         <title>Introduction to XML</title>         <author>John Doe</author>         <publication_year>2020</publication_year>         <isbn>1234567890</isbn>     </book>     <book>         <title>Data Science Basics</title>         <author>Jane Smith</author>         <publication_year>2019</publication_year>         <isbn>0987654321</isbn>     </book>     <book>         <title>Programming in Python</title>         <author>Bob Johnson</author>         <publication_year>2021</publication_year>         <isbn>5432109876</isbn>     </book> </library>"}]',
 			);
 		ndv.getters.outputDataContainer().find('mark').should('have.text', '<lib');
 
diff --git a/packages/frontend/editor-ui/src/components/RunDataJson.vue b/packages/frontend/editor-ui/src/components/RunDataJson.vue
index 735f566dbb..eb1e122cb9 100644
--- a/packages/frontend/editor-ui/src/components/RunDataJson.vue
+++ b/packages/frontend/editor-ui/src/components/RunDataJson.vue
@@ -112,10 +112,14 @@ const onDragEnd = (el: HTMLElement) => {
 	}, 1000); // ensure dest data gets set if drop
 };
 
-const getContent = (value: unknown) => {
+const formatKey = (value: unknown) => {
 	return isString(value) ? `"${value}"` : JSON.stringify(value);
 };
 
+const formatValue = (value: unknown) => {
+	return JSON.stringify(value);
+};
+
 const getListItemName = (path: string) => {
 	return path.replace(/^(\["?\d"?]\.?)/g, '');
 };
@@ -168,7 +172,7 @@ const getListItemName = (path: string) => {
 			>
 				<template #renderNodeKey="{ node }">
 					<TextWithHighlights
-						:content="getContent(node.key)"
+						:content="formatKey(node.key)"
 						:search="search"
 						data-target="mappable"
 						:data-value="getJsonParameterPath(node.path)"
@@ -183,13 +187,7 @@ const getListItemName = (path: string) => {
 				</template>
 				<template #renderNodeValue="{ node }">
 					<TextWithHighlights
-						v-if="isNaN(node.index)"
-						:content="getContent(node.content)"
-						:search="search"
-					/>
-					<TextWithHighlights
-						v-else
-						:content="getContent(node.content)"
+						:content="formatValue(node.content)"
 						:search="search"
 						data-target="mappable"
 						:data-value="getJsonParameterPath(node.path)"
diff --git a/packages/frontend/editor-ui/src/components/__snapshots__/RunDataJson.test.ts.snap b/packages/frontend/editor-ui/src/components/__snapshots__/RunDataJson.test.ts.snap
index 39657b02e5..f6a5b81999 100644
--- a/packages/frontend/editor-ui/src/components/__snapshots__/RunDataJson.test.ts.snap
+++ b/packages/frontend/editor-ui/src/components/__snapshots__/RunDataJson.test.ts.snap
@@ -416,7 +416,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                   >
                     
                     <span
-                      class="content"
+                      class="content mappable ph-no-capture"
+                      data-depth="3"
+                      data-name="record.name"
+                      data-path="[0].record.name"
+                      data-target="mappable"
+                      data-value="{{ $('Set').item.json.record.name }}"
                     >
                       
                       <span>
@@ -512,7 +517,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                   >
                     
                     <span
-                      class="content"
+                      class="content mappable ph-no-capture"
+                      data-depth="2"
+                      data-name="myNumber"
+                      data-path="[0].myNumber"
+                      data-target="mappable"
+                      data-value="{{ $('Set').item.json.myNumber }}"
                     >
                       
                       <span>
@@ -579,7 +589,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                   >
                     
                     <span
-                      class="content"
+                      class="content mappable ph-no-capture"
+                      data-depth="2"
+                      data-name="myStringNumber"
+                      data-path="[0].myStringNumber"
+                      data-target="mappable"
+                      data-value="{{ $('Set').item.json.myStringNumber }}"
                     >
                       
                       <span>
@@ -646,7 +661,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                   >
                     
                     <span
-                      class="content"
+                      class="content mappable ph-no-capture"
+                      data-depth="2"
+                      data-name="myStringText"
+                      data-path="[0].myStringText"
+                      data-target="mappable"
+                      data-value="{{ $('Set').item.json.myStringText }}"
                     >
                       
                       <span>
@@ -713,7 +733,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                   >
                     
                     <span
-                      class="content"
+                      class="content mappable ph-no-capture"
+                      data-depth="2"
+                      data-name="nil"
+                      data-path="[0].nil"
+                      data-target="mappable"
+                      data-value="{{ $('Set').item.json.nil }}"
                     >
                       
                       <span>
@@ -780,7 +805,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                   >
                     
                     <span
-                      class="content"
+                      class="content mappable ph-no-capture"
+                      data-depth="2"
+                      data-name="d"
+                      data-path="[0].d"
+                      data-target="mappable"
+                      data-value="{{ $('Set').item.json.d }}"
                     >
                       <span />
                     </span>