fix(editor): Avoid sanitizing output to search node data

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"?>');
+	});
 });

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": {}
+  }

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,18 @@
 							[$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 +67,6 @@
 							[$style.dragged]: draggingPath === node.path,
 						}"
 						class="ph-no-capture"
-						v-html="highlightSearchTerm(node.content)"
 					/>
 				</template>
 			</vue-json-pretty>
@@ -76,7 +82,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 +91,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'),
@@ -98,6 +104,7 @@ export default defineComponent({
 		Draggable,
 		RunDataJsonActions,
 		MappingPill,
+		TextWithHighlights,
 	},
 	props: {
 		editMode: {
@@ -202,9 +209,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>

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,17 @@ 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>

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 { 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,14 +172,15 @@
 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;
 
 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 @@
 			}
 			return value;
 		},
-		highlightSearchTerm(value: string): string {
-			return sanitizeHtml(highlightText(this.getValueToRender(value), this.search));
-		},
 		onDragStart() {
 			this.draggedColumn = true;
 			this.ndvStore.resetMappingTelemetry();

packages/editor-ui/src/components/TextWithHighlights.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import { GenericValue } from 'n8n-workflow';
+
+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">{{ part.content }}</mark>
+			<span v-else-if="part.content">{{ part.content }}</span>
+		</template>
+	</span>
+	<span v-else>{{ props.content }}</span>
+</template>

packages/editor-ui/src/components/__tests__/TextWithHIghlights.test.ts

@@ -0,0 +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',
+			},
+		});
+
+		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>',
+		);
+	});
+});