feat: use v-html for node labels

* add span tag as wrapper for node labels

feat(examples):

* Add overview example

src/components/Edges/EdgeText.vue

@@ -48,7 +48,7 @@ const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
         v-if="typeof props.label.component !== 'undefined'"
         v-bind="{ ...props, ...props.label.props, width, height, x, y }"
       />
-      <template v-else>
+      <template v-else v-html="props.label">
         {{ props.label }}
       </template>
     </text>

src/components/Nodes/DefaultNode.vue

@@ -19,8 +19,6 @@ const props = withDefaults(defineProps<DefaultNodeProps>(), {
 <template>
   <Handle type="target" :position="props.targetPosition" :is-connectable="props.connectable" />
   <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-  <template v-else>
-    {{ props.data?.label }}
-  </template>
+  <span v-else v-html="props.data?.label"></span>
   <Handle type="source" :position="props.sourcePosition" :is-connectable="props.connectable" />
 </template>

src/components/Nodes/InputNode.vue

@@ -16,8 +16,6 @@ const props = withDefaults(defineProps<InputNodeProps>(), {
 </script>
 <template>
   <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-  <template v-else>
-    {{ props.data?.label }}
-  </template>
+  <span v-else v-html="props.data?.label"></span>
   <Handle type="source" :position="props.sourcePosition" :connectable="props.connectable" />
 </template>

src/components/Nodes/OutputNode.vue

@@ -16,8 +16,6 @@ const props = withDefaults(defineProps<OutputNodeProps>(), {
 </script>
 <template>
   <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-  <template v-else>
-    {{ props.data?.label }}
-  </template>
+  <span v-else v-html="props.data?.label"></span>
   <Handle type="source" :position="props.targetPosition" :is-connectable="props.connectable" />
 </template>

src/composables/useKeyPress.ts

@@ -2,6 +2,7 @@ import { Ref } from 'vue'
 import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
 import { KeyCode } from '~/types'
 
+// todo cancel keypress for input dom nodes
 export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
   const isPressed = controlledRef<boolean>(false, {
     onBeforeChange(val, oldVal) {