From 54eb1b030cfdad958ea5373f67ea0fb7888e0e24 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <mutasem@n8n.io>
Date: Thu, 21 Dec 2023 15:52:01 +0100
Subject: [PATCH 1/8] fix: fix json mode santizing content for search

---
 .../editor-ui/src/components/RunDataJson.vue  | 28 ++++++------
 .../src/components/TextWithHighlights.vue     | 44 +++++++++++++++++++
 2 files changed, 58 insertions(+), 14 deletions(-)
 create mode 100644 packages/editor-ui/src/components/TextWithHighlights.vue

diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index b46e95fae61a1..671555f7b382c 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -33,7 +33,9 @@
 				@update:selectedValue="selectedJsonPath = $event"
 			>
 				<template #renderNodeKey="{ node }">
-					<span
+					<TextWithHighlights
+						:content="getContent(node.key)"
+						:search="search"
 						data-target="mappable"
 						:data-value="getJsonParameterPath(node.path)"
 						:data-name="node.key"
@@ -43,13 +45,14 @@
 							[$style.mappable]: mappingEnabled,
 							[$style.dragged]: draggingPath === node.path,
 						}"
-						v-html="highlightSearchTerm(node.key)"
 					/>
 				</template>
 				<template #renderNodeValue="{ node }">
-					<span v-if="isNaN(node.index)" v-html="highlightSearchTerm(node.content)" />
-					<span
+					<TextWithHighlights v-if="isNaN(node.index)" :content="getContent(node.content)" :search="search" />
+					<TextWithHighlights
 						v-else
+						:content="getContent(node.content)"
+						:search="search"
 						data-target="mappable"
 						:data-value="getJsonParameterPath(node.path)"
 						:data-name="getListItemName(node.path)"
@@ -60,7 +63,6 @@
 							[$style.dragged]: draggingPath === node.path,
 						}"
 						class="ph-no-capture"
-						v-html="highlightSearchTerm(node.content)"
 					/>
 				</template>
 			</vue-json-pretty>
@@ -76,7 +78,6 @@ import type { IDataObject, INodeExecutionData } from 'n8n-workflow';
 import Draggable from '@/components/Draggable.vue';
 import { executionDataToJson } from '@/utils/nodeTypesUtils';
 import { isString } from '@/utils/typeGuards';
-import { highlightText, sanitizeHtml } from '@/utils/htmlUtils';
 import { shorten } from '@/utils/typesUtils';
 import type { INodeUi } from '@/Interface';
 import { mapStores } from 'pinia';
@@ -86,6 +87,7 @@ import { getMappedExpression } from '@/utils/mappingUtils';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { nonExistingJsonPath } from '@/constants';
 import { useExternalHooks } from '@/composables/useExternalHooks';
+import TextWithHighlights from './TextWithHighlights.vue';
 
 const RunDataJsonActions = defineAsyncComponent(
 	async () => import('@/components/RunDataJsonActions.vue'),
@@ -94,11 +96,12 @@ const RunDataJsonActions = defineAsyncComponent(
 export default defineComponent({
 	name: 'run-data-json',
 	components: {
-		VueJsonPretty,
-		Draggable,
-		RunDataJsonActions,
-		MappingPill,
-	},
+    VueJsonPretty,
+    Draggable,
+    RunDataJsonActions,
+    MappingPill,
+    TextWithHighlights
+},
 	props: {
 		editMode: {
 			type: Object as () => { enabled?: boolean; value?: string },
@@ -202,9 +205,6 @@ export default defineComponent({
 		getListItemName(path: string): string {
 			return path.replace(/^(\["?\d"?]\.?)/g, '');
 		},
-		highlightSearchTerm(value: string): string {
-			return sanitizeHtml(highlightText(this.getContent(value), this.search));
-		},
 	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/TextWithHighlights.vue b/packages/editor-ui/src/components/TextWithHighlights.vue
new file mode 100644
index 0000000000000..d86b6dab6cabf
--- /dev/null
+++ b/packages/editor-ui/src/components/TextWithHighlights.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import { GenericValue } from 'n8n-workflow';
+import { useI18n } from '@/composables/useI18n';
+import { isString } from '@/utils/typeGuards';
+
+const i18n = useI18n();
+
+const props = defineProps({
+    content: {
+        type: [Object, String, Number] as PropType<GenericValue>,
+    },
+    search: {
+        type: String,
+    },
+});
+
+const splitTextBySearch = (text = '', search = ''): {tag: 'span' | 'mark', content: string}[] => {
+	if (!search) {
+		return [
+			{
+				tag: 'span',
+				content: text,
+			}
+		]
+	}
+
+	const pattern = new RegExp(`(${search})`, 'g');
+	const splitText = text.split(new RegExp(pattern, 'gi'));
+
+	return splitText.map((t) => ({ tag: pattern.test(t)? 'mark' : 'span', content: t }));
+}
+
+</script>
+
+<template>
+    <span v-if="props.search && typeof props.content === 'string'">
+        <template v-for="part in splitTextBySearch(props.content, props.search)">
+            <mark v-if="part.tag === 'mark'">{{ part.content }}</mark>
+            <span v-else>{{ part.content }}</span>
+        </template>
+    </span>
+    <span v-else>{{ props.content }}</span>
+</template>

From 53328b3efc0376bc9fe180ed7e73981afc4115c3 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <mutasem@n8n.io>
Date: Thu, 21 Dec 2023 16:13:36 +0100
Subject: [PATCH 2/8] fix: fix other views

---
 .../src/components/RunDataSchemaItem.vue      | 12 ++----
 .../editor-ui/src/components/RunDataTable.vue | 19 ++++-----
 .../src/utils/__tests__/htmlUtils.test.ts     | 41 -------------------
 packages/editor-ui/src/utils/htmlUtils.ts     |  6 ---
 4 files changed, 13 insertions(+), 65 deletions(-)
 delete mode 100644 packages/editor-ui/src/utils/__tests__/htmlUtils.test.ts

diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index a4a496bd07299..caa30b0f3a318 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import type { INodeUi, Schema } from '@/Interface';
-import { highlightText, sanitizeHtml } from '@/utils/htmlUtils';
 import { checkExhaustive } from '@/utils/typeGuards';
 import { shorten } from '@/utils/typesUtils';
 import { getMappedExpression } from '@/utils/mappingUtils';
+import TextWithHighlights from './TextWithHighlights.vue';
 
 type Props = {
 	schema: Schema;
@@ -30,12 +30,8 @@ const isFlat = computed(
 		props.schema.value.every((v) => !Array.isArray(v.value)),
 );
 const key = computed((): string | undefined => {
-	const highlightedKey = sanitizeHtml(highlightText(props.schema.key, props.search));
-	return isSchemaParentTypeArray.value ? `[${highlightedKey}]` : highlightedKey;
+	return isSchemaParentTypeArray.value ? `[${props.schema.key}]` : props.schema.key;
 });
-const parentKey = computed((): string | undefined =>
-	sanitizeHtml(highlightText(props.parent.key, props.search)),
-);
 const schemaName = computed(() =>
 	isSchemaParentTypeArray.value ? `${props.schema.type}[${props.schema.key}]` : props.schema.key,
 );
@@ -99,8 +95,8 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 				data-target="mappable"
 			>
 				<font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm" />
-				<span v-if="isSchemaParentTypeArray" v-html="parentKey" />
-				<span v-if="key" :class="{ [$style.arrayIndex]: isSchemaParentTypeArray }" v-html="key" />
+				<TextWithHighlights v-if="isSchemaParentTypeArray" :content="props.parent?.key" :search="props.search" />
+				<TextWithHighlights v-if="key" :class="{ [$style.arrayIndex]: isSchemaParentTypeArray }" :content="key" :search="props.search" />
 			</span>
 		</div>
 		<span v-if="text" :class="$style.text">{{ text }}</span>
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 3adee15eadf4f..5e774e5c07a9b 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -52,7 +52,7 @@
 											[$style.draggingHeader]: isDragging,
 										}"
 									>
-										<span v-html="highlightSearchTerm(column || '')" />
+										<TextWithHighlights :content="getValueToRender(column || '')" :search="search" />
 										<div :class="$style.dragButton">
 											<font-awesome-icon icon="grip-vertical" />
 										</div>
@@ -117,10 +117,11 @@
 						@mouseleave="onMouseLeaveCell"
 						:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
 					>
-						<span
+						<TextWithHighlights
 							v-if="isSimple(data)"
+							:content="getValueToRender(data)"
+							:search="search"
 							:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
-							v-html="highlightSearchTerm(data)"
 						/>
 						<n8n-tree :nodeClass="$style.nodeClass" v-else :value="data">
 							<template #label="{ label, path }">
@@ -141,9 +142,10 @@
 								>
 							</template>
 							<template #value="{ value }">
-								<span
+								<TextWithHighlights
+									:content="getValueToRender(value)"
+									:search="search"
 									:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
-									v-html="highlightSearchTerm(value)"
 								/>
 							</template>
 						</n8n-tree>
@@ -162,7 +164,6 @@ import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
 import type { INodeUi, ITableData, NDVState } from '@/Interface';
 import { shorten } from '@/utils/typesUtils';
-import { highlightText, sanitizeHtml } from '@/utils/htmlUtils';
 import { getPairedItemId } from '@/utils/pairedItemUtils';
 import type { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
 import Draggable from './Draggable.vue';
@@ -171,6 +172,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import MappingPill from './MappingPill.vue';
 import { getMappedExpression } from '@/utils/mappingUtils';
 import { useExternalHooks } from '@/composables/useExternalHooks';
+import TextWithHighlights from './TextWithHighlights.vue';
 
 const MAX_COLUMNS_LIMIT = 40;
 
@@ -178,7 +180,7 @@ type DraggableRef = InstanceType<typeof Draggable>;
 
 export default defineComponent({
 	name: 'run-data-table',
-	components: { Draggable, MappingPill },
+	components: { Draggable, MappingPill, TextWithHighlights },
 	props: {
 		node: {
 			type: Object as PropType<INodeUi>,
@@ -392,9 +394,6 @@ export default defineComponent({
 			}
 			return value;
 		},
-		highlightSearchTerm(value: string): string {
-			return sanitizeHtml(highlightText(this.getValueToRender(value), this.search));
-		},
 		onDragStart() {
 			this.draggedColumn = true;
 			this.ndvStore.resetMappingTelemetry();
diff --git a/packages/editor-ui/src/utils/__tests__/htmlUtils.test.ts b/packages/editor-ui/src/utils/__tests__/htmlUtils.test.ts
deleted file mode 100644
index 096b421b95d56..0000000000000
--- a/packages/editor-ui/src/utils/__tests__/htmlUtils.test.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { highlightText } from '@/utils/htmlUtils';
-
-describe('highlightText', () => {
-	it('should return original text if search parameter is an empty string', () => {
-		const text = 'some text';
-		const result = highlightText(text);
-		expect(result).toBe(text);
-	});
-
-	it('should return original text if it is an empty string', () => {
-		const text = '';
-		const result = highlightText(text, 'search');
-		expect(result).toBe(text);
-	});
-
-	it('should escape special characters in the search string', () => {
-		const text = 'some text [example]';
-		const result = highlightText(text, '[example]');
-		expect(result).toBe('some text <mark class="highlight">[example]</mark>');
-	});
-
-	it('should escape other special characters in the search string', () => {
-		const text = 'phone number: +123-456-7890';
-		const result = highlightText(text, '+123-456-7890');
-		expect(result).toBe('phone number: <mark class="highlight">+123-456-7890</mark>');
-	});
-
-	it('should highlight occurrences of the search string in text', () => {
-		const text = 'example text example';
-		const result = highlightText(text, 'example');
-		expect(result).toBe(
-			'<mark class="highlight">example</mark> text <mark class="highlight">example</mark>',
-		);
-	});
-
-	it('should return original text if the search string is not found', () => {
-		const text = 'some text';
-		const result = highlightText(text, 'notfound');
-		expect(result).toBe(text);
-	});
-});
diff --git a/packages/editor-ui/src/utils/htmlUtils.ts b/packages/editor-ui/src/utils/htmlUtils.ts
index e1c39bbbd88c5..48a6794e65c0f 100644
--- a/packages/editor-ui/src/utils/htmlUtils.ts
+++ b/packages/editor-ui/src/utils/htmlUtils.ts
@@ -63,9 +63,3 @@ export const getBannerRowHeight = async (): Promise<number> => {
 		}, 0);
 	});
 };
-
-export const highlightText = (text: string, search = ''): string => {
-	const pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
-	const regex = new RegExp(`(${pattern})`, 'gi');
-	return search ? text?.replace(regex, '<mark class="highlight">$1</mark>') : text;
-};

From febec3be69c0a5ec27e11631f5a1d0b6137f0d22 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <mutasem@n8n.io>
Date: Thu, 21 Dec 2023 16:35:43 +0100
Subject: [PATCH 3/8] fix: add unit tests

---
 .../src/components/TextWithHighlights.vue     |  5 +-
 .../__tests__/TextWithHIghlights.test.ts      | 73 +++++++++++++++++++
 2 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts

diff --git a/packages/editor-ui/src/components/TextWithHighlights.vue b/packages/editor-ui/src/components/TextWithHighlights.vue
index d86b6dab6cabf..7440393cab6bd 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 { GenericValue } from 'n8n-workflow';
 import { useI18n } from '@/composables/useI18n';
-import { isString } from '@/utils/typeGuards';
 
 const i18n = useI18n();
 
@@ -36,8 +35,8 @@ const splitTextBySearch = (text = '', search = ''): {tag: 'span' | 'mark', conte
 <template>
     <span v-if="props.search && typeof props.content === 'string'">
         <template v-for="part in splitTextBySearch(props.content, props.search)">
-            <mark v-if="part.tag === 'mark'">{{ part.content }}</mark>
-            <span v-else>{{ part.content }}</span>
+            <mark v-if="part.tag === 'mark' && part.content">{{ part.content }}</mark>
+            <span v-else-if="part.content">{{ part.content }}</span>
         </template>
     </span>
     <span v-else>{{ props.content }}</span>
diff --git a/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts b/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
new file mode 100644
index 0000000000000..101b38c336c61
--- /dev/null
+++ b/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
@@ -0,0 +1,73 @@
+
+import { shallowMount } from '@vue/test-utils';
+import TextWithHighlights from '@/components/TextWithHighlights.vue';
+
+describe('TextWithHighlights', () => {
+  it('highlights the search text in the content', () => {
+    const wrapper = shallowMount(TextWithHighlights, {
+      props: {
+        content: 'Test content',
+        search: 'Test',
+      },
+    });
+
+    expect(wrapper.html()).toContain('<mark>Test</mark>');
+    expect(wrapper.html()).toContain('<span> content</span>');
+  });
+
+  it('renders correctly when search is not set', () => {
+    const wrapper = shallowMount(TextWithHighlights, {
+      props: {
+        content: 'Test content',
+      },
+    });
+
+    expect(wrapper.html()).toEqual('<span>Test content</span>');
+    expect(wrapper.html()).not.toContain('<mark>');
+  });
+
+  it('renders correctly numbers when search is not set', () => {
+    const wrapper = shallowMount(TextWithHighlights, {
+      props: {
+        content: 1,
+      },
+    });
+
+    expect(wrapper.html()).toEqual('<span>1</span>');
+    expect(wrapper.html()).not.toContain('<mark>');
+  });
+
+  it('renders correctly objects when search is not set', () => {
+    const wrapper = shallowMount(TextWithHighlights, {
+      props: {
+        content: { hello: 'world' },
+      },
+    });
+
+    expect(wrapper.html()).toEqual('<span>{\n  "hello": "world"\n}</span>');
+    expect(wrapper.html()).not.toContain('<mark>');
+  });
+
+  it('renders correctly objects ignoring search', () => {
+    const wrapper = shallowMount(TextWithHighlights, {
+      props: {
+        content: { hello: 'world' },
+        search: 'yo',
+      },
+    });
+
+    expect(wrapper.html()).toEqual('<span>{\n  "hello": "world"\n}</span>');
+    expect(wrapper.html()).not.toContain('<mark>');
+  });
+
+  it('highlights the search text in middle of the content', () => {
+    const wrapper = shallowMount(TextWithHighlights, {
+      props: {
+        content: 'Test content hello world',
+        search: 'con',
+      },
+    });
+
+    expect(wrapper.html()).toEqual('<span><span>Test </span><mark>con</mark><span>tent hello world</span></span>');
+  });
+});

From c02490b145a511bba0daba78340760f8df0d982d Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <mutasem@n8n.io>
Date: Thu, 21 Dec 2023 16:40:18 +0100
Subject: [PATCH 4/8] fix: lint

---
 .../editor-ui/src/components/RunDataJson.vue  |  18 +--
 .../src/components/RunDataSchemaItem.vue      |  13 +-
 .../src/components/TextWithHighlights.vue     |  40 +++---
 .../__tests__/TextWithHIghlights.test.ts      | 115 +++++++++---------
 4 files changed, 98 insertions(+), 88 deletions(-)

diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 671555f7b382c..42d05866d3d36 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -48,7 +48,11 @@
 					/>
 				</template>
 				<template #renderNodeValue="{ node }">
-					<TextWithHighlights v-if="isNaN(node.index)" :content="getContent(node.content)" :search="search" />
+					<TextWithHighlights
+						v-if="isNaN(node.index)"
+						:content="getContent(node.content)"
+						:search="search"
+					/>
 					<TextWithHighlights
 						v-else
 						:content="getContent(node.content)"
@@ -96,12 +100,12 @@ const RunDataJsonActions = defineAsyncComponent(
 export default defineComponent({
 	name: 'run-data-json',
 	components: {
-    VueJsonPretty,
-    Draggable,
-    RunDataJsonActions,
-    MappingPill,
-    TextWithHighlights
-},
+		VueJsonPretty,
+		Draggable,
+		RunDataJsonActions,
+		MappingPill,
+		TextWithHighlights,
+	},
 	props: {
 		editMode: {
 			type: Object as () => { enabled?: boolean; value?: string },
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index caa30b0f3a318..fe47770c897db 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -95,8 +95,17 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 				data-target="mappable"
 			>
 				<font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm" />
-				<TextWithHighlights v-if="isSchemaParentTypeArray" :content="props.parent?.key" :search="props.search" />
-				<TextWithHighlights v-if="key" :class="{ [$style.arrayIndex]: isSchemaParentTypeArray }" :content="key" :search="props.search" />
+				<TextWithHighlights
+					v-if="isSchemaParentTypeArray"
+					:content="props.parent?.key"
+					:search="props.search"
+				/>
+				<TextWithHighlights
+					v-if="key"
+					:class="{ [$style.arrayIndex]: isSchemaParentTypeArray }"
+					:content="key"
+					:search="props.search"
+				/>
 			</span>
 		</div>
 		<span v-if="text" :class="$style.text">{{ text }}</span>
diff --git a/packages/editor-ui/src/components/TextWithHighlights.vue b/packages/editor-ui/src/components/TextWithHighlights.vue
index 7440393cab6bd..4efcde4ad5c65 100644
--- a/packages/editor-ui/src/components/TextWithHighlights.vue
+++ b/packages/editor-ui/src/components/TextWithHighlights.vue
@@ -1,43 +1,39 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
 import { GenericValue } from 'n8n-workflow';
-import { useI18n } from '@/composables/useI18n';
-
-const i18n = useI18n();
 
 const props = defineProps({
-    content: {
-        type: [Object, String, Number] as PropType<GenericValue>,
-    },
-    search: {
-        type: String,
-    },
+	content: {
+		type: [Object, String, Number] as PropType<GenericValue>,
+	},
+	search: {
+		type: String,
+	},
 });
 
-const splitTextBySearch = (text = '', search = ''): {tag: 'span' | 'mark', content: string}[] => {
+const splitTextBySearch = (text = '', search = ''): { tag: 'span' | 'mark'; content: string }[] => {
 	if (!search) {
 		return [
 			{
 				tag: 'span',
 				content: text,
-			}
-		]
+			},
+		];
 	}
 
 	const pattern = new RegExp(`(${search})`, 'g');
 	const splitText = text.split(new RegExp(pattern, 'gi'));
 
-	return splitText.map((t) => ({ tag: pattern.test(t)? 'mark' : 'span', content: t }));
-}
-
+	return splitText.map((t) => ({ tag: pattern.test(t) ? 'mark' : 'span', content: t }));
+};
 </script>
 
 <template>
-    <span v-if="props.search && typeof props.content === 'string'">
-        <template v-for="part in splitTextBySearch(props.content, props.search)">
-            <mark v-if="part.tag === 'mark' && part.content">{{ part.content }}</mark>
-            <span v-else-if="part.content">{{ part.content }}</span>
-        </template>
-    </span>
-    <span v-else>{{ props.content }}</span>
+	<span v-if="props.search && typeof props.content === 'string'">
+		<template v-for="part in splitTextBySearch(props.content, props.search)">
+			<mark v-if="part.tag === 'mark' && part.content">{{ part.content }}</mark>
+			<span v-else-if="part.content">{{ part.content }}</span>
+		</template>
+	</span>
+	<span v-else>{{ props.content }}</span>
 </template>
diff --git a/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts b/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
index 101b38c336c61..24d038a0f1bd2 100644
--- a/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
+++ b/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
@@ -1,73 +1,74 @@
-
 import { shallowMount } from '@vue/test-utils';
 import TextWithHighlights from '@/components/TextWithHighlights.vue';
 
 describe('TextWithHighlights', () => {
-  it('highlights the search text in the content', () => {
-    const wrapper = shallowMount(TextWithHighlights, {
-      props: {
-        content: 'Test content',
-        search: 'Test',
-      },
-    });
+	it('highlights the search text in the content', () => {
+		const wrapper = shallowMount(TextWithHighlights, {
+			props: {
+				content: 'Test content',
+				search: 'Test',
+			},
+		});
 
-    expect(wrapper.html()).toContain('<mark>Test</mark>');
-    expect(wrapper.html()).toContain('<span> content</span>');
-  });
+		expect(wrapper.html()).toContain('<mark>Test</mark>');
+		expect(wrapper.html()).toContain('<span> content</span>');
+	});
 
-  it('renders correctly when search is not set', () => {
-    const wrapper = shallowMount(TextWithHighlights, {
-      props: {
-        content: 'Test content',
-      },
-    });
+	it('renders correctly when search is not set', () => {
+		const wrapper = shallowMount(TextWithHighlights, {
+			props: {
+				content: 'Test content',
+			},
+		});
 
-    expect(wrapper.html()).toEqual('<span>Test content</span>');
-    expect(wrapper.html()).not.toContain('<mark>');
-  });
+		expect(wrapper.html()).toEqual('<span>Test content</span>');
+		expect(wrapper.html()).not.toContain('<mark>');
+	});
 
-  it('renders correctly numbers when search is not set', () => {
-    const wrapper = shallowMount(TextWithHighlights, {
-      props: {
-        content: 1,
-      },
-    });
+	it('renders correctly numbers when search is not set', () => {
+		const wrapper = shallowMount(TextWithHighlights, {
+			props: {
+				content: 1,
+			},
+		});
 
-    expect(wrapper.html()).toEqual('<span>1</span>');
-    expect(wrapper.html()).not.toContain('<mark>');
-  });
+		expect(wrapper.html()).toEqual('<span>1</span>');
+		expect(wrapper.html()).not.toContain('<mark>');
+	});
 
-  it('renders correctly objects when search is not set', () => {
-    const wrapper = shallowMount(TextWithHighlights, {
-      props: {
-        content: { hello: 'world' },
-      },
-    });
+	it('renders correctly objects when search is not set', () => {
+		const wrapper = shallowMount(TextWithHighlights, {
+			props: {
+				content: { hello: 'world' },
+			},
+		});
 
-    expect(wrapper.html()).toEqual('<span>{\n  "hello": "world"\n}</span>');
-    expect(wrapper.html()).not.toContain('<mark>');
-  });
+		expect(wrapper.html()).toEqual('<span>{\n  "hello": "world"\n}</span>');
+		expect(wrapper.html()).not.toContain('<mark>');
+	});
 
-  it('renders correctly objects ignoring search', () => {
-    const wrapper = shallowMount(TextWithHighlights, {
-      props: {
-        content: { hello: 'world' },
-        search: 'yo',
-      },
-    });
+	it('renders correctly objects ignoring search', () => {
+		const wrapper = shallowMount(TextWithHighlights, {
+			props: {
+				content: { hello: 'world' },
+				search: 'yo',
+			},
+		});
 
-    expect(wrapper.html()).toEqual('<span>{\n  "hello": "world"\n}</span>');
-    expect(wrapper.html()).not.toContain('<mark>');
-  });
+		expect(wrapper.html()).toEqual('<span>{\n  "hello": "world"\n}</span>');
+		expect(wrapper.html()).not.toContain('<mark>');
+	});
 
-  it('highlights the search text in middle of the content', () => {
-    const wrapper = shallowMount(TextWithHighlights, {
-      props: {
-        content: 'Test content hello world',
-        search: 'con',
-      },
-    });
+	it('highlights the search text in middle of the content', () => {
+		const wrapper = shallowMount(TextWithHighlights, {
+			props: {
+				content: 'Test content hello world',
+				search: 'con',
+			},
+		});
 
-    expect(wrapper.html()).toEqual('<span><span>Test </span><mark>con</mark><span>tent hello world</span></span>');
-  });
+		expect(wrapper.html()).toEqual(
+			'<span><span>Test </span><mark>con</mark><span>tent hello world</span></span>',
+		);
+	});
 });

From 01cb40d9329ae8c7171811ba75a9add43e6aa445 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <mutasem@n8n.io>
Date: Thu, 21 Dec 2023 17:31:19 +0100
Subject: [PATCH 5/8] test: add e2e tests

---
 cypress/e2e/5-ndv.cy.ts                       | 27 ++++++++++
 .../fixtures/Test_workflow_xml_output.json    | 53 +++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 cypress/fixtures/Test_workflow_xml_output.json

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
index b7711b36e81d5..6d62da4ff0310 100644
--- a/cypress/e2e/5-ndv.cy.ts
+++ b/cypress/e2e/5-ndv.cy.ts
@@ -490,4 +490,31 @@ describe('NDV', () => {
 		ndv.getters.nodeVersion().should('have.text', 'Function node version 1 (Deprecated)');
 		ndv.actions.close();
 	});
+
+	it('Should render xml and html tags as strings and can search', () => {
+		cy.createFixtureWorkflow('Test_workflow_xml_output.json', `test`);
+
+		workflowPage.actions.executeWorkflow();
+
+		workflowPage.actions.openNode('Edit Fields');
+
+		ndv.getters.outputDisplayMode().find('[class*=active]').should('contain', 'Table');
+
+		ndv.getters.outputTableRow(1).should('include.text', '<?xml version="1.0" encoding="UTF-8"?> <library>');
+
+		cy.document().trigger('keyup', { key: '/' });
+		ndv.getters.searchInput().filter(':focus').type('<lib');
+
+		ndv.getters.outputTableRow(1).find('mark').should('have.text', '<lib')
+
+		ndv.getters.outputDisplayMode().find('label').eq(1).should('include.text', 'JSON');
+		ndv.getters.outputDisplayMode().find('label').eq(1).click();
+
+		ndv.getters.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>"}]');
+		ndv.getters.outputDataContainer().find('mark').should('have.text', '<lib')
+
+		ndv.getters.outputDisplayMode().find('label').eq(2).should('include.text', 'Schema');
+		ndv.getters.outputDisplayMode().find('label').eq(2).click({force: true});
+		ndv.getters.outputDataContainer().findChildByTestId('run-data-schema-item').find('> span').should('include.text', '<?xml version="1.0" encoding="UTF-8"?>');
+	});
 });
diff --git a/cypress/fixtures/Test_workflow_xml_output.json b/cypress/fixtures/Test_workflow_xml_output.json
new file mode 100644
index 0000000000000..b8422c101e7c7
--- /dev/null
+++ b/cypress/fixtures/Test_workflow_xml_output.json
@@ -0,0 +1,53 @@
+{
+    "meta": {
+      "instanceId": "2d1cf27f75b18bb9e146336f791c37884f4fc7ddb97c2def27c0444d106778bf"
+    },
+    "nodes": [
+      {
+        "parameters": {},
+        "id": "8108d313-8b03-4aa4-963d-cd1c0fe8f85c",
+        "name": "When clicking \"Execute Workflow\"",
+        "type": "n8n-nodes-base.manualTrigger",
+        "typeVersion": 1,
+        "position": [
+          420,
+          220
+        ]
+      },
+      {
+        "parameters": {
+          "fields": {
+            "values": [
+              {
+                "name": "body",
+                "stringValue": "<?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>"
+              }
+            ]
+          },
+          "options": {}
+        },
+        "id": "45888152-7c5f-4d88-9039-660c594da084",
+        "name": "Edit Fields",
+        "type": "n8n-nodes-base.set",
+        "typeVersion": 3.2,
+        "position": [
+          640,
+          220
+        ]
+      }
+    ],
+    "connections": {
+      "When clicking \"Execute Workflow\"": {
+        "main": [
+          [
+            {
+              "node": "Edit Fields",
+              "type": "main",
+              "index": 0
+            }
+          ]
+        ]
+      }
+    },
+    "pinData": {}
+  }
\ No newline at end of file

From 9eb7109fd00763a0cabe28b2f564732e24dee196 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <mutasem@n8n.io>
Date: Fri, 22 Dec 2023 14:06:38 +0100
Subject: [PATCH 6/8] fix: address feedback

---
 .../src/components/TextWithHighlights.vue      | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/TextWithHighlights.vue b/packages/editor-ui/src/components/TextWithHighlights.vue
index 4efcde4ad5c65..15863a16bf413 100644
--- a/packages/editor-ui/src/components/TextWithHighlights.vue
+++ b/packages/editor-ui/src/components/TextWithHighlights.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
 import { GenericValue } from 'n8n-workflow';
+import { computed } from 'vue';
 
 const props = defineProps({
 	content: {
@@ -21,18 +22,23 @@ const splitTextBySearch = (text = '', search = ''): { tag: 'span' | 'mark'; cont
 		];
 	}
 
-	const pattern = new RegExp(`(${search})`, 'g');
-	const splitText = text.split(new RegExp(pattern, 'gi'));
+	const escapeRegExp = (string: string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+	const pattern = new RegExp(`(${escapeRegExp(search)})`, 'i');
+	const splitText = text.split(pattern);
 
 	return splitText.map((t) => ({ tag: pattern.test(t) ? 'mark' : 'span', content: t }));
 };
+
+const parts = computed(() => {
+	return props.search && typeof props.content === 'string'? splitTextBySearch(props.content, props.search): [];
+});
 </script>
 
 <template>
-	<span v-if="props.search && typeof props.content === 'string'">
-		<template v-for="part in splitTextBySearch(props.content, props.search)">
-			<mark v-if="part.tag === 'mark' && part.content">{{ part.content }}</mark>
-			<span v-else-if="part.content">{{ part.content }}</span>
+	<span v-if="parts.length && typeof props.content === 'string'">
+		<template v-for="(part, index) in parts">
+			<mark v-if="part.tag === 'mark' && part.content" :key="`mark-${index}`">{{ part.content }}</mark>
+			<span v-else-if="part.content" :key="`span-${index}`">{{ part.content }}</span>
 		</template>
 	</span>
 	<span v-else>{{ props.content }}</span>

From 15023a4d09fea6bbf01a2b58485c4934cccfffc6 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <mutasem@n8n.io>
Date: Fri, 22 Dec 2023 14:09:51 +0100
Subject: [PATCH 7/8] test: add a test for special regex chars

---
 .../__tests__/TextWithHIghlights.test.ts      | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts b/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
index 24d038a0f1bd2..ed5b26057497f 100644
--- a/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
+++ b/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
@@ -71,4 +71,30 @@ describe('TextWithHighlights', () => {
 			'<span><span>Test </span><mark>con</mark><span>tent hello world</span></span>',
 		);
 	});
+
+	it('handles special regex characters in search correctly', () => {
+		const wrapper = shallowMount(TextWithHighlights, {
+			props: {
+				content: 'Test content (hello) world',
+				search: '(hello)',
+			},
+		});
+
+		expect(wrapper.html()).toEqual(
+			'<span><span>Test content </span><mark>(hello)</mark><span> world</span></span>',
+		);
+	});
+
+	it('searches for special regex characters correctly', () => {
+		const wrapper = shallowMount(TextWithHighlights, {
+			props: {
+				content: 'Test content ()^${}[] world',
+				search: '()^${}[]',
+			},
+		});
+
+		expect(wrapper.html()).toEqual(
+			'<span><span>Test content </span><mark>()^${}[]</mark><span> world</span></span>',
+		);
+	});
 });

From 206dfb153e1253d49b100943b9853c4dc0dd5678 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <mutasem@n8n.io>
Date: Fri, 22 Dec 2023 14:17:17 +0100
Subject: [PATCH 8/8] fix: lint

---
 .../editor-ui/src/components/RunDataTable.vue   |  5 ++++-
 .../src/components/TextWithHighlights.vue       | 17 ++++++++++++-----
 .../__tests__/TextWithHIghlights.test.ts        |  3 +++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 5e774e5c07a9b..ce1032094de8b 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -52,7 +52,10 @@
 											[$style.draggingHeader]: isDragging,
 										}"
 									>
-										<TextWithHighlights :content="getValueToRender(column || '')" :search="search" />
+										<TextWithHighlights
+											:content="getValueToRender(column || '')"
+											:search="search"
+										/>
 										<div :class="$style.dragButton">
 											<font-awesome-icon icon="grip-vertical" />
 										</div>
diff --git a/packages/editor-ui/src/components/TextWithHighlights.vue b/packages/editor-ui/src/components/TextWithHighlights.vue
index 15863a16bf413..43951463d8ac7 100644
--- a/packages/editor-ui/src/components/TextWithHighlights.vue
+++ b/packages/editor-ui/src/components/TextWithHighlights.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
-import { GenericValue } from 'n8n-workflow';
+import type { GenericValue } from 'n8n-workflow';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -12,7 +12,10 @@ const props = defineProps({
 	},
 });
 
-const splitTextBySearch = (text = '', search = ''): { tag: 'span' | 'mark'; content: string }[] => {
+const splitTextBySearch = (
+	text = '',
+	search = '',
+): Array<{ tag: 'span' | 'mark'; content: string }> => {
 	if (!search) {
 		return [
 			{
@@ -22,7 +25,7 @@ const splitTextBySearch = (text = '', search = ''): { tag: 'span' | 'mark'; cont
 		];
 	}
 
-	const escapeRegExp = (string: string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+	const escapeRegExp = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 	const pattern = new RegExp(`(${escapeRegExp(search)})`, 'i');
 	const splitText = text.split(pattern);
 
@@ -30,14 +33,18 @@ const splitTextBySearch = (text = '', search = ''): { tag: 'span' | 'mark'; cont
 };
 
 const parts = computed(() => {
-	return props.search && typeof props.content === 'string'? splitTextBySearch(props.content, props.search): [];
+	return props.search && typeof props.content === 'string'
+		? splitTextBySearch(props.content, props.search)
+		: [];
 });
 </script>
 
 <template>
 	<span v-if="parts.length && typeof props.content === 'string'">
 		<template v-for="(part, index) in parts">
-			<mark v-if="part.tag === 'mark' && part.content" :key="`mark-${index}`">{{ part.content }}</mark>
+			<mark v-if="part.tag === 'mark' && part.content" :key="`mark-${index}`">{{
+				part.content
+			}}</mark>
 			<span v-else-if="part.content" :key="`span-${index}`">{{ part.content }}</span>
 		</template>
 	</span>
diff --git a/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts b/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
index ed5b26057497f..555ae1dae879b 100644
--- a/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
+++ b/packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts
@@ -88,12 +88,15 @@ describe('TextWithHighlights', () => {
 	it('searches for special regex characters correctly', () => {
 		const wrapper = shallowMount(TextWithHighlights, {
 			props: {
+				// eslint-disable-next-line n8n-local-rules/no-interpolation-in-regular-string
 				content: 'Test content ()^${}[] world',
+				// eslint-disable-next-line n8n-local-rules/no-interpolation-in-regular-string
 				search: '()^${}[]',
 			},
 		});
 
 		expect(wrapper.html()).toEqual(
+			// eslint-disable-next-line n8n-local-rules/no-interpolation-in-regular-string
 			'<span><span>Test content </span><mark>()^${}[]</mark><span> world</span></span>',
 		);
 	});