fix(editor): stop rendering expressions as html (n8n-io#4420)

* fix(editor): don't render expr as html * fix highlight bug
valya · Oct 24, 2022 · 386b02a · 386b02a
1 parent 071f9b9
commit 386b02a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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>