diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css
index 433a987..643c16d 100644
--- a/core/modules/outside_in/css/outside_in.theme.css
+++ b/core/modules/outside_in/css/outside_in.theme.css
@@ -107,3 +107,7 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:be
   font-size: 120%;
   border-bottom: 1px solid #ddd;
 }
+
+#main-canvas.js-outside-in-edit-mode .outside-in-editable.outside-in-active-editable {
+  outline: 2px dotted rgba(183, 36, 36, 0.5);
+}
diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js
index caeef8d..de546c2 100644
--- a/core/modules/outside_in/js/outside_in.js
+++ b/core/modules/outside_in/js/outside_in.js
@@ -142,9 +142,29 @@
         .forEach(function (instance) {
           // @todo Move logic for data-dialog-renderer attribute into ajax.js
           //   https://www.drupal.org/node/2784443
-            instance.options.url = instance.options.url.replace(search, replace);
+          instance.options.url = instance.options.url.replace(search, replace);
+          instance.options.data.dialogOptions = {outsideInActiveEditableId: $(instance.element).parents('.outside-in-editable').attr('id')};
+
         });
     }
   };
 
+  // Manage Active editable class on opening and closing of the dialog.
+  $(window).on({
+    'dialog:beforecreate': function (event, dialog, $element, settings) {
+      if ($element.is('#drupal-offcanvas')) {
+        $('body').find('*').removeClass('outside-in-active-editable');
+        var $activeElement = $('#' + settings.outsideInActiveEditableId);
+        if ($activeElement) {
+          $activeElement.addClass('outside-in-active-editable');
+        }
+      }
+    },
+    'dialog:beforeclose': function (event, dialog, $element) {
+      if ($element.is('#drupal-offcanvas')) {
+        $('body').find('*').removeClass('outside-in-active-editable');
+      }
+    }
+  });
+
 })(jQuery, Drupal);