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

* fix(core): escape node labels

Signed-off-by: braks <[email protected]>

* chore(changeset): add

Signed-off-by: braks <[email protected]>

---------

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

.changeset/tame-cups-tan.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Escape node labels and avoid rendering them as innerHTML

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<NodeProps<{ label: any }>> = 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 }),
   ]
 }

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<NodeProps<{ label: any }>> = 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 }),
   ]
 }

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<NodeProps<{ label: any }>> = 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]),
   ]
 }