feat(edge-labels): add div based renderer

packages/core/package.json

@@ -58,6 +58,7 @@
     "@reactflow/tsconfig": "workspace:*",
     "@types/node": "^18.7.16",
     "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "typescript": "^4.8.3"
   },

packages/core/src/components/EdgeLabelRenderer/index.tsx

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+function EdgeLabelRenderer({ children }: { children: ReactNode }) {
+  const wrapperRef = useRef(document.getElementById('edgelabel-portal'));
+
+  if (!wrapperRef.current) {
+    return null;
+  }
+
+  return createPortal(children, wrapperRef.current);
+}
+
+export default EdgeLabelRenderer;

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

@@ -158,6 +158,8 @@ const GraphView = ({
           disableKeyboardA11y={disableKeyboardA11y}
           rfId={rfId}
         />
+        <div className="react-flow__edgelabel-renderer" id="edgelabel-portal" />
+
         <NodeRenderer
           nodeTypes={nodeTypes}
           onNodeClick={onNodeClick}

packages/core/src/index.ts

@@ -24,6 +24,7 @@ export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { getMarkerEnd } from './components/Edges/utils';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel } from './components/Panel';
+export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
 
 export { default as useReactFlow } from './hooks/useReactFlow';
 export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';

packages/core/src/styles/init.css

@@ -220,3 +220,10 @@
     stroke-dashoffset: 10;
   }
 }
+
+.react-flow__edgelabel-renderer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}