From a3dbbfd7abf01d842a342c02e18c17e9fc77c4b0 Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <sam.elhusseini@gmail.com>
Date: Fri, 27 Mar 2020 17:13:46 -0700
Subject: [PATCH] Support a custom container element for the dropdowndiv,
 widgetdiv and tooltip. (#3772)

* Support a custom container element for the dropdowndiv, widgetdiv and tooltip
---
 core/blockly.js     | 18 ++++++++++++++++++
 core/dropdowndiv.js |  3 ++-
 core/tooltip.js     |  3 ++-
 core/widgetdiv.js   |  3 ++-
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/core/blockly.js b/core/blockly.js
index b415ab082..209c22e96 100644
--- a/core/blockly.js
+++ b/core/blockly.js
@@ -90,6 +90,13 @@ Blockly.clipboardTypeCounts_ = null;
  */
 Blockly.cache3dSupported_ = null;
 
+/**
+ * Container element to render the WidgetDiv, DropDownDiv and Tooltip.
+ * @type {?Element}
+ * @package
+ */
+Blockly.parentContainer = null;
+
 /**
  * Blockly opaque event data used to unbind events when using
  * `Blockly.bindEvent_` and `Blockly.bindEventWithChecks_`.
@@ -661,3 +668,14 @@ Blockly.checkBlockColourConstant_ = function(
     console.warn(warning);
   }
 };
+
+/**
+ * Set the parent container.  This is the container element that the WidgetDiv,
+ * DropDownDiv, and Tooltip are rendered into the first time `Blockly.inject`
+ * is called.
+ * This method is a NOP if called after the first ``Blockly.inject``.
+ * @param {!Element} container The container element.
+ */
+Blockly.setParentContainer = function(container) {
+  Blockly.parentContainer = container;
+};
diff --git a/core/dropdowndiv.js b/core/dropdowndiv.js
index 3a6240ee9..4c8c3fe2a 100644
--- a/core/dropdowndiv.js
+++ b/core/dropdowndiv.js
@@ -127,7 +127,8 @@ Blockly.DropDownDiv.createDom = function() {
   }
   var div = document.createElement('div');
   div.className = 'blocklyDropDownDiv';
-  document.body.appendChild(div);
+  var container = Blockly.parentContainer || document.body;
+  container.appendChild(div);
   /**
    * The div element.
    * @type {!Element}
diff --git a/core/tooltip.js b/core/tooltip.js
index 3bb20270d..966807dc7 100644
--- a/core/tooltip.js
+++ b/core/tooltip.js
@@ -121,7 +121,8 @@ Blockly.Tooltip.createDom = function() {
   // Create an HTML container for popup overlays (e.g. editor widgets).
   Blockly.Tooltip.DIV = document.createElement('div');
   Blockly.Tooltip.DIV.className = 'blocklyTooltipDiv';
-  document.body.appendChild(Blockly.Tooltip.DIV);
+  var container = Blockly.parentContainer || document.body;
+  container.appendChild(Blockly.Tooltip.DIV);
 };
 
 /**
diff --git a/core/widgetdiv.js b/core/widgetdiv.js
index 633021e78..3529a4400 100644
--- a/core/widgetdiv.js
+++ b/core/widgetdiv.js
@@ -62,7 +62,8 @@ Blockly.WidgetDiv.createDom = function() {
    */
   Blockly.WidgetDiv.DIV = document.createElement('div');
   Blockly.WidgetDiv.DIV.className = 'blocklyWidgetDiv';
-  document.body.appendChild(Blockly.WidgetDiv.DIV);
+  var container = Blockly.parentContainer || document.body;
+  container.appendChild(Blockly.WidgetDiv.DIV);
 };
 
 /**