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

## Summary
In search feature, output sanitization was added to support `<mark` tag
in output panel to highlight searched text. This removes any html like
data in the input/output panel..
This PR removes sanitization while keeping text highlights..


## Related tickets and issues
https://community.n8n.io/t/n8n-output/33997
https://community.n8n.io/t/html-tags-in-editor-rendered/34240
https://github.com/n8n-io/n8n/issues/8081
https://linear.app/n8n/issue/ADO-1594/node-output-view-not-consistent
https://linear.app/n8n/issue/ADO-1597/bug-xml-display-issue


## Review / Merge checklist
- [X] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [ ] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again.
   > A feature is not complete without tests.

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>