fix(core): escape node labels (#1695)

* fix(core): escape node labels

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2024-11-13 20:20:43 +01:00
parent 4b8139da66
commit f7a266415a
4 changed files with 11 additions and 6 deletions
+5
View File
@@ -0,0 +1,5 @@
---
"@vue-flow/core": patch
---
Escape node labels and avoid rendering them as innerHTML
@@ -1,5 +1,5 @@
import type { Component, FunctionalComponent } from 'vue' import type { Component, FunctionalComponent } from 'vue'
import { h } from 'vue' import { Fragment, h } from 'vue'
import Handle from '../Handle/Handle.vue' import Handle from '../Handle/Handle.vue'
import type { NodeProps } from '../../types' import type { NodeProps } from '../../types'
import { Position } from '../../types' import { Position } from '../../types'
@@ -17,7 +17,7 @@ const DefaultNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
return [ return [
h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }), h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }), typeof label !== 'string' && label ? h(label) : h(Fragment, [label]),
h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }), h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }),
] ]
} }
@@ -1,5 +1,5 @@
import type { Component, FunctionalComponent } from 'vue' import type { Component, FunctionalComponent } from 'vue'
import { h } from 'vue' import { Fragment, h } from 'vue'
import Handle from '../Handle/Handle.vue' import Handle from '../Handle/Handle.vue'
import type { NodeProps } from '../../types' import type { NodeProps } from '../../types'
import { Position } from '../../types' import { Position } from '../../types'
@@ -14,7 +14,7 @@ const InputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
const label = data.label || _label const label = data.label || _label
return [ return [
typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }), typeof label !== 'string' && label ? h(label) : h(Fragment, [label]),
h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }), h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }),
] ]
} }
@@ -1,5 +1,5 @@
import type { Component, FunctionalComponent } from 'vue' import type { Component, FunctionalComponent } from 'vue'
import { h } from 'vue' import { Fragment, h } from 'vue'
import Handle from '../Handle/Handle.vue' import Handle from '../Handle/Handle.vue'
import type { NodeProps } from '../../types' import type { NodeProps } from '../../types'
import { Position } from '../../types' import { Position } from '../../types'
@@ -15,7 +15,7 @@ const OutputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
return [ return [
h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }), h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }), typeof label !== 'string' && label ? h(label) : h(Fragment, [label]),
] ]
} }