From 779b0d58f741b9e8eea978f1651701e586d722c4 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Mon, 24 Oct 2022 10:48:33 +0200
Subject: [PATCH] fix(editor): stop rendering expressions as html (#4420)

* fix(editor): don't render expr as html

* fix highlight bug
---
 .../editor-ui/src/components/ParameterInputFull.vue   |  2 --
 .../editor-ui/src/components/ParameterInputHint.vue   | 11 ++++++++++-
 .../src/components/ParameterInputWrapper.vue          |  3 ++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index d21566c0f8..b5179e3e70 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -68,7 +68,6 @@ import {
 	IUpdateInformation,
 } from '@/Interface';
 
-import InputHint from './ParameterInputHint.vue';
 import ParameterOptions from './ParameterOptions.vue';
 import DraggableTarget from '@/components/DraggableTarget.vue';
 import mixins from 'vue-typed-mixins';
@@ -87,7 +86,6 @@ export default mixins(
 	.extend({
 		name: 'parameter-input-full',
 		components: {
-			InputHint,
 			ParameterOptions,
 			DraggableTarget,
 			ParameterInputWrapper,
diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index 9d0075cd9e..8a9db34bfb 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -1,10 +1,12 @@
 <template>
 	<n8n-text size="small" color="text-base" tag="div" v-if="hint">
-		<div ref="hint" :class="{[$style.hint]: true, [$style.highlight]: highlight}" v-html="hint"></div>
+		<div v-if="!renderHTML" :class="{[$style.hint]: true, [$style.highlight]: highlight}">{{ hint }}</div>
+		<div v-else ref="hint" :class="{[$style.hint]: true, [$style.highlight]: highlight}" v-html="sanitizeHtml(hint)"></div>
 	</n8n-text>
 </template>
 
 <script lang="ts">
+import { sanitizeHtml } from "@/utils";
 import Vue from "vue";
 
 export default Vue.extend({
@@ -16,6 +18,13 @@ export default Vue.extend({
 		highlight: {
 			type: Boolean,
 		},
+		renderHTML: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	methods: {
+		sanitizeHtml,
 	},
 	mounted(){
 		if(this.$refs.hint){
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 45b50605b9..4074af45cc 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -21,7 +21,8 @@
 				@drop="onDrop"
 				@textInput="onTextInput"
 				@valueChanged="onValueChanged" />
-		<input-hint v-if="expressionOutput || parameterHint" :class="$style.hint" :highlight="!!(expressionOutput && targetItem)" :hint="expressionOutput || parameterHint" />
+		<input-hint v-if="expressionOutput" :class="$style.hint" :highlight="!!(expressionOutput && targetItem)" :hint="expressionOutput" />
+		<input-hint v-else-if="parameterHint" :class="$style.hint" :renderHTML="true" :hint="parameterHint" />
 	</div>
 </template>