From f7a266415a162213e363d0397135950a00c2d76a Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 13 Nov 2024 20:15:25 +0100 Subject: [PATCH] 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> --- .changeset/tame-cups-tan.md | 5 +++++ packages/core/src/components/Nodes/DefaultNode.ts | 4 ++-- packages/core/src/components/Nodes/InputNode.ts | 4 ++-- packages/core/src/components/Nodes/OutputNode.ts | 4 ++-- 4 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 .changeset/tame-cups-tan.md diff --git a/.changeset/tame-cups-tan.md b/.changeset/tame-cups-tan.md new file mode 100644 index 00000000..8e10592e --- /dev/null +++ b/.changeset/tame-cups-tan.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Escape node labels and avoid rendering them as innerHTML diff --git a/packages/core/src/components/Nodes/DefaultNode.ts b/packages/core/src/components/Nodes/DefaultNode.ts index 839e7a7f..e8af0cbd 100644 --- a/packages/core/src/components/Nodes/DefaultNode.ts +++ b/packages/core/src/components/Nodes/DefaultNode.ts @@ -1,5 +1,5 @@ import type { Component, FunctionalComponent } from 'vue' -import { h } from 'vue' +import { Fragment, h } from 'vue' import Handle from '../Handle/Handle.vue' import type { NodeProps } from '../../types' import { Position } from '../../types' @@ -17,7 +17,7 @@ const DefaultNode: FunctionalComponent> = function ({ return [ 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 }), ] } diff --git a/packages/core/src/components/Nodes/InputNode.ts b/packages/core/src/components/Nodes/InputNode.ts index c963faaf..bc892265 100644 --- a/packages/core/src/components/Nodes/InputNode.ts +++ b/packages/core/src/components/Nodes/InputNode.ts @@ -1,5 +1,5 @@ import type { Component, FunctionalComponent } from 'vue' -import { h } from 'vue' +import { Fragment, h } from 'vue' import Handle from '../Handle/Handle.vue' import type { NodeProps } from '../../types' import { Position } from '../../types' @@ -14,7 +14,7 @@ const InputNode: FunctionalComponent> = function ({ const label = data.label || _label 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 }), ] } diff --git a/packages/core/src/components/Nodes/OutputNode.ts b/packages/core/src/components/Nodes/OutputNode.ts index 02fb7933..a0cffdc1 100644 --- a/packages/core/src/components/Nodes/OutputNode.ts +++ b/packages/core/src/components/Nodes/OutputNode.ts @@ -1,5 +1,5 @@ import type { Component, FunctionalComponent } from 'vue' -import { h } from 'vue' +import { Fragment, h } from 'vue' import Handle from '../Handle/Handle.vue' import type { NodeProps } from '../../types' import { Position } from '../../types' @@ -15,7 +15,7 @@ const OutputNode: FunctionalComponent> = function ({ return [ 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]), ] }