Added seperate portal to put dom elements inside the flow

packages/react/src/components/ViewPortal/index.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+import { useStore } from '../../hooks/useStore';
+import type { ReactFlowState } from '../../types';
+
+const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__view-portal');
+
+function ViewPortal({ children }: { children: ReactNode }) {
+  const viewPortalDiv = useStore(selector);
+
+  if (!viewPortalDiv) {
+    return null;
+  }
+
+  return createPortal(children, viewPortalDiv);
+}
+
+export default ViewPortal;

packages/react/src/container/GraphView/index.tsx

@@ -180,7 +180,7 @@ const GraphView = ({
           />
         </EdgeRenderer>
         <div className="react-flow__edgelabel-renderer" />
-
+        <div className="react-flow__view-portal" />
         <NodeRenderer
           nodeTypes={nodeTypesWrapped}
           onNodeClick={onNodeClick}

packages/svelte/src/lib/components/ViewPortal/ViewPortal.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import portal from '$lib/actions/portal';
+  import { useStore } from '$lib/store';
+
+  type $$Props = {};
+
+  const { domNode } = useStore();
+</script>
+
+<div use:portal={{ target: '.svelte-flow__view-portal', domNode: $domNode }}>
+  <slot />
+</div>

packages/svelte/src/lib/components/ViewPortal/index.ts

@@ -0,0 +1 @@
+export { default as ViewPortal } from './ViewPortal.svelte';

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -218,6 +218,7 @@
           <slot name="connectionLine" slot="connectionLine" />
         </ConnectionLine>
         <div class="svelte-flow__edgelabel-renderer" />
+        <div class="svelte-view-portal" />
         <NodeRenderer
           on:nodeclick
           on:nodemouseenter