feat(components): Support passing shadow root as document

src/container/GraphView/index.tsx

@@ -91,6 +91,7 @@ const GraphView = ({
   onEdgeMouseMove,
   onEdgeMouseLeave,
   edgeUpdaterRadius,
+  document,
 }: GraphViewProps) => {
   const isInitialized = useRef<boolean>(false);
   const setOnConnect = useStoreActions((actions) => actions.setOnConnect);
@@ -107,6 +108,7 @@ const GraphView = ({
   const setTranslateExtent = useStoreActions((actions) => actions.setTranslateExtent);
   const setNodeExtent = useStoreActions((actions) => actions.setNodeExtent);
   const setConnectionMode = useStoreActions((actions) => actions.setConnectionMode);
+  const setDocument = useStoreActions(actions => actions.setDocument);
   const currentStore = useStore();
   const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
 
@@ -129,6 +131,10 @@ const GraphView = ({
     }
   }, [onLoad, zoomIn, zoomOut, zoomTo, transform, fitView, initialized]);
 
+  useEffect(() => {
+    setDocument(document);
+  }, [document])
+
   useEffect(() => {
     if (onConnect) {
       setOnConnect(onConnect);

src/container/ReactFlow/index.tsx

@@ -115,6 +115,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
   onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
   edgeUpdaterRadius?: number;
+  document?: Document | ShadowRoot;
   nodeTypesId?: string;
   edgeTypesId?: string;
 }
@@ -189,6 +190,7 @@ const ReactFlow = ({
   edgeUpdaterRadius = 10,
   nodeTypesId = '1',
   edgeTypesId = '1',
+  document = window.document,
   ...rest
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), [nodeTypesId]);
@@ -262,6 +264,7 @@ const ReactFlow = ({
           onEdgeMouseMove={onEdgeMouseMove}
           onEdgeMouseLeave={onEdgeMouseLeave}
           edgeUpdaterRadius={edgeUpdaterRadius}
+          document={document}
         />
         <ElementUpdater elements={elements} />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}