From 9769646a30c1a522e0724828764da0431b8803f9 Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <me@olegivaniv.com>
Date: Tue, 4 Jun 2024 12:43:45 +0200
Subject: [PATCH 1/5] feat(editor): Harmonize rendering of new-lines in RunData

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
---
 .../src/components/RunDataSchemaItem.vue      | 24 +++++++++++++----
 .../editor-ui/src/components/RunDataTable.vue |  2 +-
 .../src/components/TextWithHighlights.vue     | 27 +++++++++++++++++--
 3 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index fed0df3d3d46b..e2a4a87301a11 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, useCssModule } from 'vue';
 import type { INodeUi, Schema } from '@/Interface';
 import { checkExhaustive } from '@/utils/typeGuards';
 import { shorten } from '@/utils/typesUtils';
 import { getMappedExpression } from '@/utils/mappingUtils';
 import TextWithHighlights from './TextWithHighlights.vue';
+import { sanitizeHtml } from '@/utils/htmlUtils';
 
 type Props = {
 	schema: Schema;
@@ -20,6 +21,7 @@ type Props = {
 };
 
 const props = defineProps<Props>();
+const $style = useCssModule();
 
 const isSchemaValueArray = computed(() => Array.isArray(props.schema.value));
 const schemaArray = computed(
@@ -38,9 +40,14 @@ const key = computed((): string | undefined => {
 const schemaName = computed(() =>
 	isSchemaParentTypeArray.value ? `${props.schema.type}[${props.schema.key}]` : props.schema.key,
 );
-const text = computed(() =>
-	Array.isArray(props.schema.value) ? '' : shorten(props.schema.value, 600, 0),
-);
+const text = computed(() => {
+	if (Array.isArray(props.schema.value)) return '';
+
+	return sanitizeHtml(shorten(props.schema.value, 600, 0)).replaceAll(
+		'\n',
+		`<span class="${$style.newLine}">\\n</span>`,
+	);
+});
 
 const dragged = computed(() => props.draggingPath === props.schema.path);
 
@@ -114,7 +121,9 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 				/>
 			</span>
 		</div>
-		<span v-if="text" :class="$style.text">{{ text }}</span>
+		<!-- We need to use v-html here as we want to render the new lines wrapped in span. The HTML is sanitized before. -->
+		<!-- eslint-disable-next-line vue/no-v-html-->
+		<span v-if="text" :class="$style.text" v-html="text" />
 		<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" checked />
 		<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
 			<font-awesome-icon icon="angle-up" />
@@ -286,6 +295,11 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 	font-size: var(--font-size-2xs);
 	overflow: hidden;
 	word-break: break-word;
+
+	.newLine {
+		font-size: 0.8em;
+		color: red;
+	}
 }
 
 .toggle {
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index e0dee509aea90..5c26659e75ae6 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -388,7 +388,7 @@ export default defineComponent({
 				return this.$locale.baseText('runData.emptyString');
 			}
 			if (typeof value === 'string') {
-				return value.replaceAll('\n', '\\n');
+				return value;
 			}
 			if (Array.isArray(value) && value.length === 0) {
 				return this.$locale.baseText('runData.emptyArray');
diff --git a/packages/editor-ui/src/components/TextWithHighlights.vue b/packages/editor-ui/src/components/TextWithHighlights.vue
index 43951463d8ac7..1cf5a59a0d160 100644
--- a/packages/editor-ui/src/components/TextWithHighlights.vue
+++ b/packages/editor-ui/src/components/TextWithHighlights.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
 import type { GenericValue } from 'n8n-workflow';
-import { computed } from 'vue';
+import { computed, useCssModule } from 'vue';
+import { sanitizeHtml } from '@/utils/htmlUtils';
 
 const props = defineProps({
 	content: {
@@ -12,6 +13,8 @@ const props = defineProps({
 	},
 });
 
+const $style = useCssModule();
+
 const splitTextBySearch = (
 	text = '',
 	search = '',
@@ -37,6 +40,17 @@ const parts = computed(() => {
 		? splitTextBySearch(props.content, props.search)
 		: [];
 });
+
+const contentWithNewLines = computed(() => {
+	if (typeof props.content === 'string') {
+		return sanitizeHtml(props.content).replaceAll(
+			'\n',
+			`<span class="${$style.newLine}">\\n</span>`,
+		);
+	}
+
+	return props.content;
+});
 </script>
 
 <template>
@@ -48,5 +62,14 @@ const parts = computed(() => {
 			<span v-else-if="part.content" :key="`span-${index}`">{{ part.content }}</span>
 		</template>
 	</span>
-	<span v-else>{{ props.content }}</span>
+	<!-- We need to use v-html here as we want to render the new lines wrapped in span. The HTML is sanitized before. -->
+	<!-- eslint-disable-next-line vue/no-v-html-->
+	<span v-else :class="$style.content" v-html="contentWithNewLines" />
 </template>
+
+<style lang="scss" module>
+:root .content .newLine {
+	font-size: 0.8em;
+	color: red;
+}
+</style>

From 68b155fb0f57a7eabd59eb7f2947ece8101edea7 Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <me@olegivaniv.com>
Date: Tue, 4 Jun 2024 13:22:51 +0200
Subject: [PATCH 2/5] Update snapshots & add new unit-test

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
---
 .../src/components/RunDataSchemaItem.vue      |  2 -
 .../src/components/TextWithHighlights.vue     |  6 ++-
 .../__tests__/TextWithHIghlights.test.ts      | 23 +++++++---
 .../__snapshots__/RunDataJson.test.ts.snap    | 46 ++++++++++++-------
 .../__snapshots__/RunDataSchema.test.ts.snap  | 32 +++++++------
 5 files changed, 69 insertions(+), 40 deletions(-)

diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index e2a4a87301a11..cafcfbbf17c70 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -121,8 +121,6 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 				/>
 			</span>
 		</div>
-		<!-- We need to use v-html here as we want to render the new lines wrapped in span. The HTML is sanitized before. -->
-		<!-- eslint-disable-next-line vue/no-v-html-->
 		<span v-if="text" :class="$style.text" v-html="text" />
 		<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" checked />
 		<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
diff --git a/packages/editor-ui/src/components/TextWithHighlights.vue b/packages/editor-ui/src/components/TextWithHighlights.vue
index 1cf5a59a0d160..feaabaaf6b46f 100644
--- a/packages/editor-ui/src/components/TextWithHighlights.vue
+++ b/packages/editor-ui/src/components/TextWithHighlights.vue
@@ -49,6 +49,10 @@ const contentWithNewLines = computed(() => {
 		);
 	}
 
+	if (typeof props.content === 'object') {
+		return JSON.stringify(props.content, null, 2);
+	}
+
 	return props.content;
 });
 </script>
@@ -62,8 +66,6 @@ const contentWithNewLines = computed(() => {
 			<span v-else-if="part.content" :key="`span-${index}`">{{ part.content }}</span>
 		</template>
 	</span>
-	<!-- We need to use v-html here as we want to render the new lines wrapped in span. The HTML is sanitized before. -->
-	<!-- eslint-disable-next-line vue/no-v-html-->
 	<span v-else :class="$style.content" v-html="contentWithNewLines" />
 </template>
 
diff --git a/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts b/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
index 555ae1dae879b..2a9207159ba6c 100644
--- a/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
+++ b/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
@@ -21,7 +21,7 @@ describe('TextWithHighlights', () => {
 			},
 		});
 
-		expect(wrapper.html()).toEqual('<span>Test content</span>');
+		expect(wrapper.html()).toEqual('<span class="content">Test content</span>');
 		expect(wrapper.html()).not.toContain('<mark>');
 	});
 
@@ -32,18 +32,17 @@ describe('TextWithHighlights', () => {
 			},
 		});
 
-		expect(wrapper.html()).toEqual('<span>1</span>');
+		expect(wrapper.html()).toEqual('<span class="content">1</span>');
 		expect(wrapper.html()).not.toContain('<mark>');
 	});
 
-	it('renders correctly objects when search is not set', () => {
+	it('renders correctly objects when search is not set', async () => {
 		const wrapper = shallowMount(TextWithHighlights, {
 			props: {
 				content: { hello: 'world' },
 			},
 		});
-
-		expect(wrapper.html()).toEqual('<span>{\n  "hello": "world"\n}</span>');
+		expect(wrapper.html()).toEqual('<span class="content">{\n  "hello": "world"\n}</span>');
 		expect(wrapper.html()).not.toContain('<mark>');
 	});
 
@@ -55,7 +54,7 @@ describe('TextWithHighlights', () => {
 			},
 		});
 
-		expect(wrapper.html()).toEqual('<span>{\n  "hello": "world"\n}</span>');
+		expect(wrapper.html()).toEqual('<span class="content">{\n  "hello": "world"\n}</span>');
 		expect(wrapper.html()).not.toContain('<mark>');
 	});
 
@@ -100,4 +99,16 @@ describe('TextWithHighlights', () => {
 			'<span><span>Test content </span><mark>()^${}[]</mark><span> world</span></span>',
 		);
 	});
+
+	it('renders new lines in the content correctly', () => {
+		const wrapper = shallowMount(TextWithHighlights, {
+			props: {
+				content: 'Line 1\n Line 2\nLine 3',
+			},
+		});
+
+		expect(wrapper.html()).toContain(
+			'<span class="content">Line 1<span class="newLine">\\n</span> Line 2<span class="newLine">\\n</span>Line 3</span>',
+		);
+	});
 });
diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
index 0f8242eacead8..a9dbb0f55938a 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
@@ -86,7 +86,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
           >
             
             <span
-              class="mappable"
+              class="content mappable"
               data-depth="2"
               data-name="list"
               data-path="[0].list"
@@ -140,7 +140,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
             >
               
               <span
-                class="mappable ph-no-capture"
+                class="content mappable ph-no-capture"
                 data-depth="3"
                 data-name="list[0]"
                 data-path="[0].list[0]"
@@ -185,7 +185,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
             >
               
               <span
-                class="mappable ph-no-capture"
+                class="content mappable ph-no-capture"
                 data-depth="3"
                 data-name="list[1]"
                 data-path="[0].list[1]"
@@ -230,7 +230,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
             >
               
               <span
-                class="mappable ph-no-capture"
+                class="content mappable ph-no-capture"
                 data-depth="3"
                 data-name="list[2]"
                 data-path="[0].list[2]"
@@ -299,7 +299,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
           >
             
             <span
-              class="mappable"
+              class="content mappable"
               data-depth="2"
               data-name="record"
               data-path="[0].record"
@@ -351,7 +351,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
           >
             
             <span
-              class="mappable"
+              class="content mappable"
               data-depth="3"
               data-name="name"
               data-path="[0].record.name"
@@ -372,7 +372,9 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               class="vjs-value vjs-value-string"
             >
               
-              <span>
+              <span
+                class="content"
+              >
                 "Joe"
               </span>
               
@@ -435,7 +437,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
           >
             
             <span
-              class="mappable"
+              class="content mappable"
               data-depth="2"
               data-name="myNumber"
               data-path="[0].myNumber"
@@ -456,7 +458,9 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               class="vjs-value vjs-value-number"
             >
               
-              <span>
+              <span
+                class="content"
+              >
                 123
               </span>
               
@@ -490,7 +494,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
           >
             
             <span
-              class="mappable"
+              class="content mappable"
               data-depth="2"
               data-name="myStringNumber"
               data-path="[0].myStringNumber"
@@ -511,7 +515,9 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               class="vjs-value vjs-value-string"
             >
               
-              <span>
+              <span
+                class="content"
+              >
                 "456"
               </span>
               
@@ -545,7 +551,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
           >
             
             <span
-              class="mappable"
+              class="content mappable"
               data-depth="2"
               data-name="myStringText"
               data-path="[0].myStringText"
@@ -566,7 +572,9 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               class="vjs-value vjs-value-string"
             >
               
-              <span>
+              <span
+                class="content"
+              >
                 "abc"
               </span>
               
@@ -600,7 +608,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
           >
             
             <span
-              class="mappable"
+              class="content mappable"
               data-depth="2"
               data-name="nil"
               data-path="[0].nil"
@@ -621,7 +629,9 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               class="vjs-value vjs-value-null"
             >
               
-              <span>
+              <span
+                class="content"
+              >
                 null
               </span>
               
@@ -655,7 +665,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
           >
             
             <span
-              class="mappable"
+              class="content mappable"
               data-depth="2"
               data-name="d"
               data-path="[0].d"
@@ -676,7 +686,9 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               class="vjs-value vjs-value-undefined"
             >
               
-              <span />
+              <span
+                class="content"
+              />
               
             </span>
             <!---->
diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
index 60c00cceb70c6..30dfc65e2af22 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
@@ -59,7 +59,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                   </svg>
                   <!--v-if-->
                   <span
-                    class=""
+                    class="content"
                   >
                     name
                   </span>
@@ -109,7 +109,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                   </svg>
                   <!--v-if-->
                   <span
-                    class=""
+                    class="content"
                   >
                     age
                   </span>
@@ -159,7 +159,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                   </svg>
                   <!--v-if-->
                   <span
-                    class=""
+                    class="content"
                   >
                     hobbies
                   </span>
@@ -228,11 +228,13 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                           fill="currentColor"
                         />
                       </svg>
-                      <span>
+                      <span
+                        class="content"
+                      >
                         hobbies
                       </span>
                       <span
-                        class="arrayIndex"
+                        class="content arrayIndex"
                       >
                         [0]
                       </span>
@@ -280,11 +282,13 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                           fill="currentColor"
                         />
                       </svg>
-                      <span>
+                      <span
+                        class="content"
+                      >
                         hobbies
                       </span>
                       <span
-                        class="arrayIndex"
+                        class="content arrayIndex"
                       >
                         [1]
                       </span>
@@ -417,7 +421,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                   </svg>
                   <!--v-if-->
                   <span
-                    class=""
+                    class="content"
                   >
                     hello world
                   </span>
@@ -486,11 +490,13 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                           fill="currentColor"
                         />
                       </svg>
-                      <span>
+                      <span
+                        class="content"
+                      >
                         hello world
                       </span>
                       <span
-                        class="arrayIndex"
+                        class="content arrayIndex"
                       >
                         [0]
                       </span>
@@ -561,7 +567,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                           </svg>
                           <!--v-if-->
                           <span
-                            class=""
+                            class="content"
                           >
                             test
                           </span>
@@ -632,7 +638,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                               </svg>
                               <!--v-if-->
                               <span
-                                class=""
+                                class="content"
                               >
                                 more to think about
                               </span>
@@ -685,7 +691,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                           </svg>
                           <!--v-if-->
                           <span
-                            class=""
+                            class="content"
                           >
                             test.how
                           </span>

From 678c21a14dfadac8cf295485d94cfecf3ac8bac8 Mon Sep 17 00:00:00 2001
From: Giulio Andreini <g.andreini@gmail.com>
Date: Tue, 4 Jun 2024 15:03:27 +0200
Subject: [PATCH 3/5] Style for line breaks in input/output views.

---
 packages/design-system/src/css/_tokens.dark.scss         | 2 ++
 packages/design-system/src/css/_tokens.scss              | 2 ++
 packages/editor-ui/src/components/RunDataJson.vue        | 1 +
 packages/editor-ui/src/components/RunDataSchemaItem.vue  | 5 +++--
 packages/editor-ui/src/components/TextWithHighlights.vue | 5 +++--
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
index 44ee54404f784..64ca5ed9e7158 100644
--- a/packages/design-system/src/css/_tokens.dark.scss
+++ b/packages/design-system/src/css/_tokens.dark.scss
@@ -114,6 +114,8 @@
 	--color-code-gutterBackground: var(--prim-gray-670);
 	--color-code-gutterForeground: var(--prim-gray-320);
 	--color-code-tags-comment: var(--prim-gray-200);
+	--color-line-break: var(--prim-gray-420);
+	--color-code-line-break: var(--prim-color-secondary-tint-100);
 
 	// Variables
 	--color-variables-usage-font: var(--prim-color-alt-a-tint-300);
diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
index 0b2940f0151e9..db2485c2080f6 100644
--- a/packages/design-system/src/css/_tokens.scss
+++ b/packages/design-system/src/css/_tokens.scss
@@ -146,6 +146,8 @@
 	--color-code-gutterBackground: var(--prim-gray-0);
 	--color-code-gutterForeground: var(--prim-gray-320);
 	--color-code-tags-comment: var(--prim-gray-420);
+	--color-line-break: var(--prim-gray-320);
+	--color-code-line-break: var(--prim-color-secondary-tint-200);
 
 	// Variables
 	--color-variables-usage-font: var(--color-success);
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 2281cc64ba2e8..7ffc626c5c895 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -264,6 +264,7 @@ export default defineComponent({
 <style lang="scss">
 .vjs-tree {
 	color: var(--color-json-default);
+	--color-line-break: var(--color-code-line-break);
 }
 
 .vjs-tree-node {
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index cafcfbbf17c70..8bc3a99e4dd0b 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -295,8 +295,9 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 	word-break: break-word;
 
 	.newLine {
-		font-size: 0.8em;
-		color: red;
+		font-family: var(--font-family-monospace);
+		color: var(--color-line-break);
+		padding-right: 2px;
 	}
 }
 
diff --git a/packages/editor-ui/src/components/TextWithHighlights.vue b/packages/editor-ui/src/components/TextWithHighlights.vue
index feaabaaf6b46f..31116294f551e 100644
--- a/packages/editor-ui/src/components/TextWithHighlights.vue
+++ b/packages/editor-ui/src/components/TextWithHighlights.vue
@@ -71,7 +71,8 @@ const contentWithNewLines = computed(() => {
 
 <style lang="scss" module>
 :root .content .newLine {
-	font-size: 0.8em;
-	color: red;
+	font-family: var(--font-family-monospace);
+	color: var(--color-line-break);
+	padding-right: 2px;
 }
 </style>

From 2f70adf9e13fd6e5d0a8fe2e70397a5efc5bea69 Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <me@olegivaniv.com>
Date: Mon, 10 Jun 2024 11:00:33 +0200
Subject: [PATCH 4/5] Split by new-line and replace v-html

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
---
 .../src/components/RunDataSchemaItem.vue      |  17 ++-
 .../src/components/TextWithHighlights.vue     |  25 ++--
 .../__tests__/TextWithHIghlights.test.ts      |  16 ++-
 .../__snapshots__/RunDataJson.test.ts.snap    | 116 ++++++++++++++---
 .../__snapshots__/RunDataSchema.test.ts.snap  | 121 ++++++++++++++++--
 5 files changed, 234 insertions(+), 61 deletions(-)

diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index 8bc3a99e4dd0b..315fdf9cee72b 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -5,7 +5,6 @@ import { checkExhaustive } from '@/utils/typeGuards';
 import { shorten } from '@/utils/typesUtils';
 import { getMappedExpression } from '@/utils/mappingUtils';
 import TextWithHighlights from './TextWithHighlights.vue';
-import { sanitizeHtml } from '@/utils/htmlUtils';
 
 type Props = {
 	schema: Schema;
@@ -40,14 +39,10 @@ const key = computed((): string | undefined => {
 const schemaName = computed(() =>
 	isSchemaParentTypeArray.value ? `${props.schema.type}[${props.schema.key}]` : props.schema.key,
 );
-const text = computed(() => {
-	if (Array.isArray(props.schema.value)) return '';
 
-	return sanitizeHtml(shorten(props.schema.value, 600, 0)).replaceAll(
-		'\n',
-		`<span class="${$style.newLine}">\\n</span>`,
-	);
-});
+const text = computed(() =>
+	Array.isArray(props.schema.value) ? '' : shorten(props.schema.value, 600, 0),
+);
 
 const dragged = computed(() => props.draggingPath === props.schema.path);
 
@@ -121,7 +116,11 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 				/>
 			</span>
 		</div>
-		<span v-if="text" :class="$style.text" v-html="text" />
+		<span v-if="text" :class="$style.text">
+			<template v-for="(line, index) in text.split('\n')" :key="`line-${index}`">
+				<span v-if="index > 0" :class="$style.newLine">\n</span>{{ line }}
+			</template>
+		</span>
 		<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" checked />
 		<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
 			<font-awesome-icon icon="angle-up" />
diff --git a/packages/editor-ui/src/components/TextWithHighlights.vue b/packages/editor-ui/src/components/TextWithHighlights.vue
index 31116294f551e..12f18bb0d808c 100644
--- a/packages/editor-ui/src/components/TextWithHighlights.vue
+++ b/packages/editor-ui/src/components/TextWithHighlights.vue
@@ -2,7 +2,6 @@
 import type { PropType } from 'vue';
 import type { GenericValue } from 'n8n-workflow';
 import { computed, useCssModule } from 'vue';
-import { sanitizeHtml } from '@/utils/htmlUtils';
 
 const props = defineProps({
 	content: {
@@ -40,21 +39,6 @@ const parts = computed(() => {
 		? splitTextBySearch(props.content, props.search)
 		: [];
 });
-
-const contentWithNewLines = computed(() => {
-	if (typeof props.content === 'string') {
-		return sanitizeHtml(props.content).replaceAll(
-			'\n',
-			`<span class="${$style.newLine}">\\n</span>`,
-		);
-	}
-
-	if (typeof props.content === 'object') {
-		return JSON.stringify(props.content, null, 2);
-	}
-
-	return props.content;
-});
 </script>
 
 <template>
@@ -66,7 +50,14 @@ const contentWithNewLines = computed(() => {
 			<span v-else-if="part.content" :key="`span-${index}`">{{ part.content }}</span>
 		</template>
 	</span>
-	<span v-else :class="$style.content" v-html="contentWithNewLines" />
+	<span v-else :class="$style.content">
+		<template v-if="typeof props.content === 'string'">
+			<span v-for="(line, index) in props.content.split('\n')" :key="`line-${index}`">
+				<span v-if="index > 0" :class="$style.newLine">\n</span>{{ line }}
+			</span>
+		</template>
+		<span v-else v-text="props.content" />
+	</span>
 </template>
 
 <style lang="scss" module>
diff --git a/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts b/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
index 2a9207159ba6c..bb98a7ff9802e 100644
--- a/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
+++ b/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
@@ -21,7 +21,9 @@ describe('TextWithHighlights', () => {
 			},
 		});
 
-		expect(wrapper.html()).toEqual('<span class="content">Test content</span>');
+		expect(wrapper.html()).toEqual(
+			'<span class="content"><span><!--v-if-->Test content</span></span>',
+		);
 		expect(wrapper.html()).not.toContain('<mark>');
 	});
 
@@ -32,7 +34,7 @@ describe('TextWithHighlights', () => {
 			},
 		});
 
-		expect(wrapper.html()).toEqual('<span class="content">1</span>');
+		expect(wrapper.html()).toEqual('<span class="content"><span>1</span></span>');
 		expect(wrapper.html()).not.toContain('<mark>');
 	});
 
@@ -42,7 +44,9 @@ describe('TextWithHighlights', () => {
 				content: { hello: 'world' },
 			},
 		});
-		expect(wrapper.html()).toEqual('<span class="content">{\n  "hello": "world"\n}</span>');
+		expect(wrapper.html()).toEqual(
+			'<span class="content"><span>{\n  "hello": "world"\n}</span></span>',
+		);
 		expect(wrapper.html()).not.toContain('<mark>');
 	});
 
@@ -54,7 +58,9 @@ describe('TextWithHighlights', () => {
 			},
 		});
 
-		expect(wrapper.html()).toEqual('<span class="content">{\n  "hello": "world"\n}</span>');
+		expect(wrapper.html()).toEqual(
+			'<span class="content"><span>{\n  "hello": "world"\n}</span></span>',
+		);
 		expect(wrapper.html()).not.toContain('<mark>');
 	});
 
@@ -108,7 +114,7 @@ describe('TextWithHighlights', () => {
 		});
 
 		expect(wrapper.html()).toContain(
-			'<span class="content">Line 1<span class="newLine">\\n</span> Line 2<span class="newLine">\\n</span>Line 3</span>',
+			'<span class="content"><span><!--v-if-->Line 1</span><span><span class="newLine">\\n</span> Line 2</span><span><span class="newLine">\\n</span>Line 3</span></span>',
 		);
 	});
 });
diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
index a9dbb0f55938a..7c4494b1198dd 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
@@ -93,7 +93,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               data-target="mappable"
               data-value="{{ $('Set').item.json.list }}"
             >
-              "list"
+              
+              <span>
+                <!--v-if-->
+                "list"
+              </span>
+              
             </span>
             
             <span
@@ -147,7 +152,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                 data-target="mappable"
                 data-value="{{ $('Set').item.json.list[0] }}"
               >
-                1
+                
+                <span>
+                  <!--v-if-->
+                  1
+                </span>
+                
               </span>
               
             </span>
@@ -192,7 +202,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                 data-target="mappable"
                 data-value="{{ $('Set').item.json.list[1] }}"
               >
-                2
+                
+                <span>
+                  <!--v-if-->
+                  2
+                </span>
+                
               </span>
               
             </span>
@@ -237,7 +252,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                 data-target="mappable"
                 data-value="{{ $('Set').item.json.list[2] }}"
               >
-                3
+                
+                <span>
+                  <!--v-if-->
+                  3
+                </span>
+                
               </span>
               
             </span>
@@ -306,7 +326,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               data-target="mappable"
               data-value="{{ $('Set').item.json.record }}"
             >
-              "record"
+              
+              <span>
+                <!--v-if-->
+                "record"
+              </span>
+              
             </span>
             
             <span
@@ -358,7 +383,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               data-target="mappable"
               data-value="{{ $('Set').item.json.record.name }}"
             >
-              "name"
+              
+              <span>
+                <!--v-if-->
+                "name"
+              </span>
+              
             </span>
             
             <span
@@ -375,7 +405,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               <span
                 class="content"
               >
-                "Joe"
+                
+                <span>
+                  <!--v-if-->
+                  "Joe"
+                </span>
+                
               </span>
               
             </span>
@@ -444,7 +479,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               data-target="mappable"
               data-value="{{ $('Set').item.json.myNumber }}"
             >
-              "myNumber"
+              
+              <span>
+                <!--v-if-->
+                "myNumber"
+              </span>
+              
             </span>
             
             <span
@@ -461,7 +501,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               <span
                 class="content"
               >
-                123
+                
+                <span>
+                  <!--v-if-->
+                  123
+                </span>
+                
               </span>
               
             </span>
@@ -501,7 +546,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               data-target="mappable"
               data-value="{{ $('Set').item.json.myStringNumber }}"
             >
-              "myStringNumber"
+              
+              <span>
+                <!--v-if-->
+                "myStringNumber"
+              </span>
+              
             </span>
             
             <span
@@ -518,7 +568,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               <span
                 class="content"
               >
-                "456"
+                
+                <span>
+                  <!--v-if-->
+                  "456"
+                </span>
+                
               </span>
               
             </span>
@@ -558,7 +613,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               data-target="mappable"
               data-value="{{ $('Set').item.json.myStringText }}"
             >
-              "myStringText"
+              
+              <span>
+                <!--v-if-->
+                "myStringText"
+              </span>
+              
             </span>
             
             <span
@@ -575,7 +635,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               <span
                 class="content"
               >
-                "abc"
+                
+                <span>
+                  <!--v-if-->
+                  "abc"
+                </span>
+                
               </span>
               
             </span>
@@ -615,7 +680,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               data-target="mappable"
               data-value="{{ $('Set').item.json.nil }}"
             >
-              "nil"
+              
+              <span>
+                <!--v-if-->
+                "nil"
+              </span>
+              
             </span>
             
             <span
@@ -632,7 +702,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               <span
                 class="content"
               >
-                null
+                
+                <span>
+                  <!--v-if-->
+                  null
+                </span>
+                
               </span>
               
             </span>
@@ -672,7 +747,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               data-target="mappable"
               data-value="{{ $('Set').item.json.d }}"
             >
-              "d"
+              
+              <span>
+                <!--v-if-->
+                "d"
+              </span>
+              
             </span>
             
             <span
@@ -688,7 +768,9 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
               
               <span
                 class="content"
-              />
+              >
+                <span />
+              </span>
               
             </span>
             <!---->
diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
index 30dfc65e2af22..244c3e458110c 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
@@ -61,14 +61,24 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                   <span
                     class="content"
                   >
-                    name
+                    
+                    <span>
+                      <!--v-if-->
+                      name
+                    </span>
+                    
                   </span>
                 </span>
               </div>
               <span
                 class="text"
               >
+                
+                
+                <!--v-if-->
                 John
+                
+                
               </span>
               <!--v-if-->
               <!--v-if-->
@@ -111,14 +121,24 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                   <span
                     class="content"
                   >
-                    age
+                    
+                    <span>
+                      <!--v-if-->
+                      age
+                    </span>
+                    
                   </span>
                 </span>
               </div>
               <span
                 class="text"
               >
+                
+                
+                <!--v-if-->
                 22
+                
+                
               </span>
               <!--v-if-->
               <!--v-if-->
@@ -161,7 +181,12 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                   <span
                     class="content"
                   >
-                    hobbies
+                    
+                    <span>
+                      <!--v-if-->
+                      hobbies
+                    </span>
+                    
                   </span>
                 </span>
               </div>
@@ -231,19 +256,34 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                       <span
                         class="content"
                       >
-                        hobbies
+                        
+                        <span>
+                          <!--v-if-->
+                          hobbies
+                        </span>
+                        
                       </span>
                       <span
                         class="content arrayIndex"
                       >
-                        [0]
+                        
+                        <span>
+                          <!--v-if-->
+                          [0]
+                        </span>
+                        
                       </span>
                     </span>
                   </div>
                   <span
                     class="text"
                   >
+                    
+                    
+                    <!--v-if-->
                     surfing
+                    
+                    
                   </span>
                   <!--v-if-->
                   <!--v-if-->
@@ -285,19 +325,34 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                       <span
                         class="content"
                       >
-                        hobbies
+                        
+                        <span>
+                          <!--v-if-->
+                          hobbies
+                        </span>
+                        
                       </span>
                       <span
                         class="content arrayIndex"
                       >
-                        [1]
+                        
+                        <span>
+                          <!--v-if-->
+                          [1]
+                        </span>
+                        
                       </span>
                     </span>
                   </div>
                   <span
                     class="text"
                   >
+                    
+                    
+                    <!--v-if-->
                     traveling
+                    
+                    
                   </span>
                   <!--v-if-->
                   <!--v-if-->
@@ -423,7 +478,12 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                   <span
                     class="content"
                   >
-                    hello world
+                    
+                    <span>
+                      <!--v-if-->
+                      hello world
+                    </span>
+                    
                   </span>
                 </span>
               </div>
@@ -493,12 +553,22 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                       <span
                         class="content"
                       >
-                        hello world
+                        
+                        <span>
+                          <!--v-if-->
+                          hello world
+                        </span>
+                        
                       </span>
                       <span
                         class="content arrayIndex"
                       >
-                        [0]
+                        
+                        <span>
+                          <!--v-if-->
+                          [0]
+                        </span>
+                        
                       </span>
                     </span>
                   </div>
@@ -569,7 +639,12 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                           <span
                             class="content"
                           >
-                            test
+                            
+                            <span>
+                              <!--v-if-->
+                              test
+                            </span>
+                            
                           </span>
                         </span>
                       </div>
@@ -640,14 +715,24 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                               <span
                                 class="content"
                               >
-                                more to think about
+                                
+                                <span>
+                                  <!--v-if-->
+                                  more to think about
+                                </span>
+                                
                               </span>
                             </span>
                           </div>
                           <span
                             class="text"
                           >
+                            
+                            
+                            <!--v-if-->
                             1
+                            
+                            
                           </span>
                           <!--v-if-->
                           <!--v-if-->
@@ -693,14 +778,24 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                           <span
                             class="content"
                           >
-                            test.how
+                            
+                            <span>
+                              <!--v-if-->
+                              test.how
+                            </span>
+                            
                           </span>
                         </span>
                       </div>
                       <span
                         class="text"
                       >
+                        
+                        
+                        <!--v-if-->
                         ignore
+                        
+                        
                       </span>
                       <!--v-if-->
                       <!--v-if-->

From e2a3d4f1f2b3d1dc2bc7bb80e8e896d722269e65 Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <me@olegivaniv.com>
Date: Mon, 10 Jun 2024 11:01:24 +0200
Subject: [PATCH 5/5] Remove unused $style declaration

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
---
 packages/editor-ui/src/components/RunDataSchemaItem.vue  | 3 +--
 packages/editor-ui/src/components/TextWithHighlights.vue | 4 +---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index 315fdf9cee72b..2732ead59c220 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, useCssModule } from 'vue';
+import { computed } from 'vue';
 import type { INodeUi, Schema } from '@/Interface';
 import { checkExhaustive } from '@/utils/typeGuards';
 import { shorten } from '@/utils/typesUtils';
@@ -20,7 +20,6 @@ type Props = {
 };
 
 const props = defineProps<Props>();
-const $style = useCssModule();
 
 const isSchemaValueArray = computed(() => Array.isArray(props.schema.value));
 const schemaArray = computed(
diff --git a/packages/editor-ui/src/components/TextWithHighlights.vue b/packages/editor-ui/src/components/TextWithHighlights.vue
index 12f18bb0d808c..ed1d4f7e993e0 100644
--- a/packages/editor-ui/src/components/TextWithHighlights.vue
+++ b/packages/editor-ui/src/components/TextWithHighlights.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
 import type { GenericValue } from 'n8n-workflow';
-import { computed, useCssModule } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
 	content: {
@@ -12,8 +12,6 @@ const props = defineProps({
 	},
 });
 
-const $style = useCssModule();
-
 const splitTextBySearch = (
 	text = '',
 	search = '',