mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-19 11:01:15 +00:00
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.
This commit is contained in:
52
packages/editor-ui/src/components/TextWithHighlights.vue
Normal file
52
packages/editor-ui/src/components/TextWithHighlights.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue';
|
||||
import type { GenericValue } from 'n8n-workflow';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: [Object, String, Number] as PropType<GenericValue>,
|
||||
},
|
||||
search: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
const splitTextBySearch = (
|
||||
text = '',
|
||||
search = '',
|
||||
): Array<{ tag: 'span' | 'mark'; content: string }> => {
|
||||
if (!search) {
|
||||
return [
|
||||
{
|
||||
tag: 'span',
|
||||
content: text,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const escapeRegExp = (s: string) => s.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="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>
|
||||
</template>
|
||||
Reference in New Issue
Block a user