diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css
index 433a987..04d86fe 100644
--- a/core/modules/outside_in/css/outside_in.theme.css
+++ b/core/modules/outside_in/css/outside_in.theme.css
@@ -68,7 +68,8 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:be
   outline: 1px dashed rgba(0,0,0,0.5);
   box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
 }
-#main-canvas.js-outside-in-edit-mode .outside-in-editable:hover {
+#main-canvas.js-outside-in-edit-mode .outside-in-editable:hover,
+#main-canvas.js-outside-in-edit-mode .outside-in-editable.outside-in-active-editable {
   outline: 1px dashed rgba(0,0,0,0.5);
   box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
   background-color: rgba(0,0,0,0.2);
diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js
index 8384500..33c0ddb 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 .outside-in-active-editable').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 .outside-in-active-editable').removeClass('outside-in-active-editable')
+      }
+    }
+  });
+
 })(jQuery, Drupal);