fix: Prevent overflow when rendering expression hints (#6214)

* fix: Prevent whitespace overflow

* fix: show overflow ellipsis

* chore: add comment

* chore: clean up other approach

* test: update tests, fix test

* test: uncomment test

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

@@ -1,6 +1,6 @@
 <template>
 	<n8n-text size="small" color="text-base" tag="div" v-if="hint">
-		<div v-if="!renderHTML" :class="classes">{{ hint }}</div>
+		<div v-if="!renderHTML" :class="classes"><span v-html="simplyText"></span></div>
 		<div
 			v-else
 			ref="hint"
@@ -39,9 +39,20 @@ export default defineComponent({
 			return {
 				[this.$style.singleline]: this.singleLine,
 				[this.$style.highlight]: this.highlight,
-				[this.$style['preserve-whitespace']]: true,
 			};
 		},
+		simplyText(): string {
+			if (this.hint) {
+				return String(this.hint)
+					.replace(/&/g, '&amp;') // allows us to keep spaces at the beginning of an expression
+					.replace(/</g, '&lt;') // prevent XSS exploits since we are rendering HTML
+					.replace(/>/g, '&gt;')
+					.replace(/"/g, '&quot;')
+					.replace(/ /g, '&nbsp;');
+			}
+
+			return '';
+		},
 	},
 	mounted() {
 		if (this.$refs.hint) {
@@ -60,7 +71,4 @@ export default defineComponent({
 .highlight {
 	color: var(--color-secondary);
 }
-.preserve-whitespace {
-	white-space: pre;
-}
 </style>