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

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

* fix highlight bug
This commit is contained in:
Mutasem Aldmour 2022-10-24 10:48:33 +02:00 committed by GitHub
parent 91bd3c6567
commit 779b0d58f7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 4 deletions

View file

@ -68,7 +68,6 @@ import {
IUpdateInformation, IUpdateInformation,
} from '@/Interface'; } from '@/Interface';
import InputHint from './ParameterInputHint.vue';
import ParameterOptions from './ParameterOptions.vue'; import ParameterOptions from './ParameterOptions.vue';
import DraggableTarget from '@/components/DraggableTarget.vue'; import DraggableTarget from '@/components/DraggableTarget.vue';
import mixins from 'vue-typed-mixins'; import mixins from 'vue-typed-mixins';
@ -87,7 +86,6 @@ export default mixins(
.extend({ .extend({
name: 'parameter-input-full', name: 'parameter-input-full',
components: { components: {
InputHint,
ParameterOptions, ParameterOptions,
DraggableTarget, DraggableTarget,
ParameterInputWrapper, ParameterInputWrapper,

View file

@ -1,10 +1,12 @@
<template> <template>
<n8n-text size="small" color="text-base" tag="div" v-if="hint"> <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> </n8n-text>
</template> </template>
<script lang="ts"> <script lang="ts">
import { sanitizeHtml } from "@/utils";
import Vue from "vue"; import Vue from "vue";
export default Vue.extend({ export default Vue.extend({
@ -16,6 +18,13 @@ export default Vue.extend({
highlight: { highlight: {
type: Boolean, type: Boolean,
}, },
renderHTML: {
type: Boolean,
default: false,
},
},
methods: {
sanitizeHtml,
}, },
mounted(){ mounted(){
if(this.$refs.hint){ if(this.$refs.hint){

View file

@ -21,7 +21,8 @@
@drop="onDrop" @drop="onDrop"
@textInput="onTextInput" @textInput="onTextInput"
@valueChanged="onValueChanged" /> @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> </div>
</template> </template>