feat(editor): Node IO filter (#7503)

Co-authored-by: Omar Ajoue <krynble@gmail.com>

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

@@ -43,11 +43,11 @@
 							[$style.mappable]: mappingEnabled,
 							[$style.dragged]: draggingPath === node.path,
 						}"
-						>"{{ node.key }}"</span
-					>
+						v-html="highlightSearchTerm(node.key)"
+					/>
 				</template>
 				<template #renderNodeValue="{ node }">
-					<span v-if="isNaN(node.index)">{{ getContent(node.content) }}</span>
+					<span v-if="isNaN(node.index)" v-html="highlightSearchTerm(node.content)" />
 					<span
 						v-else
 						data-target="mappable"
@@ -60,8 +60,8 @@
 							[$style.dragged]: draggingPath === node.path,
 						}"
 						class="ph-no-capture"
-						>{{ getContent(node.content) }}</span
-					>
+						v-html="highlightSearchTerm(node.content)"
+					/>
 				</template>
 			</vue-json-pretty>
 		</draggable>
@@ -74,7 +74,7 @@ import type { PropType } from 'vue';
 import VueJsonPretty from 'vue-json-pretty';
 import type { IDataObject, INodeExecutionData } from 'n8n-workflow';
 import Draggable from '@/components/Draggable.vue';
-import { executionDataToJson, isString, shorten } from '@/utils';
+import { executionDataToJson, highlightText, isString, sanitizeHtml, shorten } from '@/utils';
 import type { INodeUi } from '@/Interface';
 import { externalHooks } from '@/mixins/externalHooks';
 import { mapStores } from 'pinia';
@@ -125,6 +125,9 @@ export default defineComponent({
 		totalRuns: {
 			type: Number,
 		},
+		search: {
+			type: String,
+		},
 	},
 	setup() {
 		const selectedJsonPath = ref(nonExistingJsonPath);
@@ -194,6 +197,9 @@ 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>