refactor(core,edges): add div based edge label renderer

packages/core/src/components/Edges/EdgeLabelRenderer.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { useVueFlow } from '../../composables'
+
+const { viewportRef } = useVueFlow()
+
+const teleportTarget = $computed(() => viewportRef.value?.getElementsByClassName('vue-flow__edge-labels')[0])
+</script>
+
+<script lang="ts">
+export default {
+  name: 'EdgeLabelRenderer',
+}
+</script>
+
+<template>
+  <svg>
+    <foreignObject height="0" width="0">
+      <Teleport :to="teleportTarget" :disabled="!teleportTarget">
+        <slot />
+      </Teleport>
+    </foreignObject>
+  </svg>
+</template>

packages/core/src/components/Edges/EdgeText.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { isString } from '@vueuse/core'
 import type { EdgeTextProps } from '../../types/components'
 import type { Rect as RectType } from '../../types'
 
@@ -55,10 +56,8 @@ export default {
     />
     <text v-bind="$attrs" ref="el" class="vue-flow__edge-text" :y="box.height / 2" dy="0.3em" :style="labelStyle">
       <slot>
-        <component :is="label" v-if="typeof label !== 'string' && typeof label" />
-        <template v-else>
-          {{ label }}
-        </template>
+        <component :is="label" v-if="!isString(label)" />
+        <template v-else> {{ label }} </template>
       </slot>
     </text>
   </g>

packages/core/src/components/Edges/index.ts

@@ -7,3 +7,4 @@ export { default as StraightEdge } from './StraightEdge'
 export { default as EdgeAnchor } from './EdgeAnchor'
 export { default as EdgeText } from './EdgeText.vue'
 export { default as EdgeWrapper } from './Wrapper'
+export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.vue'