@atlaskit/editor-plugin-block-controls 4.0.6 → 4.0.8

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 4.0.8
+
+### Patch Changes
+
+- [#185723](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185723)
+  [`751aeb4580469`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/751aeb4580469) -
+  ED-28315 clean up fg platform_editor_controls_patch_13
+- Updated dependencies
+
+## 4.0.7
+
+### Patch Changes
+
+- [#185940](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185940)
+  [`456bee393c4d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/456bee393c4d3) -
+  [ux] When editor-area is less than 768px wide, we reduce editor gutters to 24px in Full-page
+  editor.
+- Updated dependencies
+
 ## 4.0.6
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -195,7 +195,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = _main.key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
-      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13')) {
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3;
         sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
       }

package/dist/cjs/pm-plugins/interaction-tracking/pm-plugin.js

@@ -9,7 +9,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _bindEventListener = require("bind-event-listener");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _handleKeyDown = require("./handle-key-down");
 var _handleMouseMove = require("./handle-mouse-move");
@@ -24,26 +23,13 @@ var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin =
         var state = {
           isEditing: false
         };
-        if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13')) {
+        if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
           state.isMouseOut = false;
         }
         return state;
       },
       apply: function apply(tr, pluginState) {
         var meta = tr.getMeta(interactionTrackingPluginKey);
-        if (!(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13')) {
-          switch (meta === null || meta === void 0 ? void 0 : meta.type) {
-            case 'startEditing':
-              return {
-                isEditing: true
-              };
-            case 'stopEditing':
-              return {
-                isEditing: false
-              };
-          }
-          return pluginState;
-        }
         var newState = {};
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case 'startEditing':
@@ -68,7 +54,7 @@ var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin =
         mousemove: _handleMouseMove.handleMouseMove
       }
     },
-    view: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13') ? function (view) {
+    view: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? function (view) {
       var editorContentArea = view.dom.closest('.ak-editor-content-area');
       var unbindMouseEnter;
       var unbindMouseLeave;

package/dist/cjs/ui/global-styles.js

@@ -28,10 +28,10 @@ var _consts = require("./consts");
  */
 var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
 var gutterPaddingWidth = function gutterPaddingWidth() {
-  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13') ? "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '100%';
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '100%';
 };
 var gutterPaddingLeft = function gutterPaddingLeft() {
-  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13') ? "-".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '-100px';
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? "-".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '-100px';
 };
 var extendedHoverZone = function extendedHoverZone() {
   return (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
@@ -90,6 +90,15 @@ var extendedHoverZone = function extendedHoverZone() {
     display: 'none'
   }));
 };
+var extendHoverZoneReduced = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (0, _defineProperty2.default)({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), (0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    left: "-".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    width: "".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
+  }))
+});
 var extendedDragZone = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': (0, _defineProperty2.default)({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), {
@@ -307,6 +316,6 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
     disabled: !(0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true) || !(0, _platformFeatureFlags.fg)('platform_editor_block_controls_perf_opt_patch_1')
   });
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _platformFeatureFlags.fg)('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? extendHoverZoneReduced : undefined, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _platformFeatureFlags.fg)('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
   });
 };

package/dist/es2019/blockControlsPlugin.js

@@ -186,7 +186,7 @@ export const blockControlsPlugin = ({
       isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
       isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
     };
-    if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13')) {
+    if (editorExperiment('platform_editor_controls', 'variant1')) {
       var _interactionTrackingP2, _interactionTrackingP3;
       sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
     }

package/dist/es2019/pm-plugins/interaction-tracking/pm-plugin.js

@@ -1,7 +1,6 @@
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { handleKeyDown } from './handle-key-down';
 import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mouse-move';
@@ -14,26 +13,13 @@ export const createInteractionTrackingPlugin = () => {
         const state = {
           isEditing: false
         };
-        if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13')) {
+        if (editorExperiment('platform_editor_controls', 'variant1')) {
           state.isMouseOut = false;
         }
         return state;
       },
       apply(tr, pluginState) {
         const meta = tr.getMeta(interactionTrackingPluginKey);
-        if (!fg('platform_editor_controls_patch_13')) {
-          switch (meta === null || meta === void 0 ? void 0 : meta.type) {
-            case 'startEditing':
-              return {
-                isEditing: true
-              };
-            case 'stopEditing':
-              return {
-                isEditing: false
-              };
-          }
-          return pluginState;
-        }
         const newState = {};
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case 'startEditing':
@@ -61,7 +47,7 @@ export const createInteractionTrackingPlugin = () => {
         mousemove: handleMouseMove
       }
     },
-    view: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? view => {
+    view: editorExperiment('platform_editor_controls', 'variant1') ? view => {
       const editorContentArea = view.dom.closest('.ak-editor-content-area');
       let unbindMouseEnter;
       let unbindMouseLeave;

package/dist/es2019/ui/global-styles.js

@@ -7,7 +7,7 @@ import { css, Global, jsx } from '@emotion/react';
 import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
-import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -19,8 +19,8 @@ import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
  * including those within table rows and media.
  */
 const dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
-const gutterPaddingWidth = () => editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? `${akEditorGutterPaddingDynamic()}px` : '100%';
-const gutterPaddingLeft = () => editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? `-${akEditorGutterPaddingDynamic()}px` : '-100px';
+const gutterPaddingWidth = () => editorExperiment('platform_editor_controls', 'variant1') ? `${akEditorGutterPaddingDynamic()}px` : '100%';
+const gutterPaddingLeft = () => editorExperiment('platform_editor_controls', 'variant1') ? `-${akEditorGutterPaddingDynamic()}px` : '-100px';
 const extendedHoverZone = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   [`.block-ctrl-drag-preview ${dragHandlerAnchorSelector}::after`]: {
@@ -97,6 +97,21 @@ const extendedHoverZone = () => css({
     display: 'none'
   }
 });
+const extendHoverZoneReduced = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+    [`&& [data-drag-handler-anchor-depth="0"]${dragHandlerAnchorSelector}::after`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      [`@container editor-area (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+        left: `-${akEditorGutterPaddingReduced}px`,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+        width: `${akEditorGutterPaddingReduced}px`
+      }
+    }
+  }
+});
 const extendedDragZone = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
@@ -340,6 +355,6 @@ export const GlobalStylesWrapper = ({
     disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true) || !fg('platform_editor_block_controls_perf_opt_patch_1')
   });
   return jsx(Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? extendHoverZoneReduced : undefined, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
   });
 };

package/dist/esm/blockControlsPlugin.js

@@ -188,7 +188,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
-      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13')) {
+      if (editorExperiment('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3;
         sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
       }

package/dist/esm/pm-plugins/interaction-tracking/pm-plugin.js

@@ -4,7 +4,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { handleKeyDown } from './handle-key-down';
 import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mouse-move';
@@ -17,26 +16,13 @@ export var createInteractionTrackingPlugin = function createInteractionTrackingP
         var state = {
           isEditing: false
         };
-        if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13')) {
+        if (editorExperiment('platform_editor_controls', 'variant1')) {
           state.isMouseOut = false;
         }
         return state;
       },
       apply: function apply(tr, pluginState) {
         var meta = tr.getMeta(interactionTrackingPluginKey);
-        if (!fg('platform_editor_controls_patch_13')) {
-          switch (meta === null || meta === void 0 ? void 0 : meta.type) {
-            case 'startEditing':
-              return {
-                isEditing: true
-              };
-            case 'stopEditing':
-              return {
-                isEditing: false
-              };
-          }
-          return pluginState;
-        }
         var newState = {};
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case 'startEditing':
@@ -61,7 +47,7 @@ export var createInteractionTrackingPlugin = function createInteractionTrackingP
         mousemove: handleMouseMove
       }
     },
-    view: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? function (view) {
+    view: editorExperiment('platform_editor_controls', 'variant1') ? function (view) {
       var editorContentArea = view.dom.closest('.ak-editor-content-area');
       var unbindMouseEnter;
       var unbindMouseLeave;

package/dist/esm/ui/global-styles.js

@@ -8,7 +8,7 @@ import { css, Global, jsx } from '@emotion/react';
 import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
-import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -21,10 +21,10 @@ import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
  */
 var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
 var gutterPaddingWidth = function gutterPaddingWidth() {
-  return editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? "".concat(akEditorGutterPaddingDynamic(), "px") : '100%';
+  return editorExperiment('platform_editor_controls', 'variant1') ? "".concat(akEditorGutterPaddingDynamic(), "px") : '100%';
 };
 var gutterPaddingLeft = function gutterPaddingLeft() {
-  return editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? "-".concat(akEditorGutterPaddingDynamic(), "px") : '-100px';
+  return editorExperiment('platform_editor_controls', 'variant1') ? "-".concat(akEditorGutterPaddingDynamic(), "px") : '-100px';
 };
 var extendedHoverZone = function extendedHoverZone() {
   return css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
@@ -83,6 +83,15 @@ var extendedHoverZone = function extendedHoverZone() {
     display: 'none'
   }));
 };
+var extendHoverZoneReduced = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': _defineProperty({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), _defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    left: "-".concat(akEditorGutterPaddingReduced, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    width: "".concat(akEditorGutterPaddingReduced, "px")
+  }))
+});
 var extendedDragZone = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': _defineProperty({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), {
@@ -300,6 +309,6 @@ export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
     disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true) || !fg('platform_editor_block_controls_perf_opt_patch_1')
   });
   return jsx(Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), isDragging && extendedDragZone, expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? extendHoverZoneReduced : undefined, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "4.0.6",
+	"version": "4.0.8",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -44,7 +44,7 @@
 		"@atlaskit/editor-plugin-user-intent": "^1.0.0",
 		"@atlaskit/editor-plugin-width": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.4.0",
+		"@atlaskit/editor-shared-styles": "^3.5.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/icon": "^27.3.0",
 		"@atlaskit/link": "^3.2.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.7.0",
+		"@atlaskit/tmp-editor-statsig": "^9.8.0",
 		"@atlaskit/tokens": "^5.5.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -167,9 +167,6 @@
 		"dst-a11y__replace-anchor-with-link__editor-jenga": {
 			"type": "boolean"
 		},
-		"platform_editor_controls_patch_13": {
-			"type": "boolean"
-		},
 		"platform_editor_breakout_resizing_hello_release": {
 			"type": "boolean"
 		},