@atlaskit/editor-plugin-breakout 2.7.1 → 2.7.3

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.7.3
+
+### Patch Changes
+
+- [#169885](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169885)
+  [`b0f7d84248010`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b0f7d84248010) -
+  Add label popup to contentComponent which renders when a guideline is active. Add
+  activeGuidelineKey to breakout plugin state to use with the label.
+- Updated dependencies
+
+## 2.7.2
+
+### Patch Changes
+
+- [#168573](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/168573)
+  [`8c337a8701dfb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c337a8701dfb) -
+  Adds resized analytics for nodes that support breakout mark.
+- [#169278](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169278)
+  [`3ff87a0248416`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3ff87a0248416) -
+  [ux] ED-28232 fix guidelines location on full width pages for new resizing experience behind
+  platform_editor_breakout_resizing
+- Updated dependencies
+
 ## 2.7.1
 
 ### Patch Changes

package/dist/cjs/breakoutPlugin.js

@@ -19,11 +19,13 @@ var _usePluginStateEffect = require("@atlaskit/editor-common/use-plugin-state-ef
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _resizingPlugin = require("./pm-plugins/resizing-plugin");
 var _findBreakoutNode = require("./pm-plugins/utils/find-breakout-node");
 var _getBreakoutMode = require("./pm-plugins/utils/get-breakout-mode");
+var _GuidelineLabel = require("./ui/GuidelineLabel");
 var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -86,7 +88,8 @@ function createPlugin(api, _ref) {
     state: {
       init: function init() {
         return {
-          breakoutNode: undefined
+          breakoutNode: undefined,
+          activeGuidelineKey: undefined
         };
       },
       apply: function apply(tr, pluginState) {
@@ -206,7 +209,7 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
   return {
     name: 'breakout',
     pmPlugins: function pmPlugins() {
-      if ((0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true)) {
+      if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true)) {
         return [{
           name: 'breakout-resizing',
           plugin: function plugin(_ref5) {
@@ -235,6 +238,16 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
           breakoutNode: undefined
         };
       }
+      if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        var resizingPluginState = _resizingPlugin.resizingPluginKey.getState(editorState);
+        if (!resizingPluginState) {
+          return {
+            breakoutNode: undefined,
+            activeGuidelineKey: undefined
+          };
+        }
+        return resizingPluginState;
+      }
       var pluginState = _pluginKey.pluginKey.getState(editorState);
       if (!pluginState) {
         return {
@@ -248,6 +261,16 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
         popupsMountPoint = _ref6.popupsMountPoint,
         popupsBoundariesElement = _ref6.popupsBoundariesElement,
         popupsScrollableElement = _ref6.popupsScrollableElement;
+      if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        return /*#__PURE__*/_react.default.createElement(_GuidelineLabel.GuidelineLabel, {
+          api: api,
+          editorView: editorView,
+          mountPoint: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement
+        });
+      }
+
       // This is a bit crappy, but should be resolved once we move to a static schema.
       if (options && !options.allowBreakoutButton) {
         return null;

package/dist/cjs/pm-plugins/get-guidelines.js

@@ -4,19 +4,23 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getGuidelines = void 0;
+exports.getGuidelines = exports.GUIDELINE_KEYS = void 0;
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var WIDTHS = {
   MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
   WIDE: _editorSharedStyles.akEditorCalculatedWideLayoutWidth,
   MAX: _editorSharedStyles.akEditorFullWidthLayoutWidth
 };
-var GUIDELINE_KEYS = {
-  lineLength: 'grid',
-  wide: 'wide',
-  fullWidth: 'full_width'
+var GUIDELINE_KEYS = exports.GUIDELINE_KEYS = {
+  lineLengthLeft: 'grid_left',
+  lineLengthRight: 'grid_right',
+  wideLeft: 'wide_left',
+  wideRight: 'wide_right',
+  fullWidthLeft: 'full_width_left',
+  fullWidthRight: 'full_width_right'
 };
 var AK_NESTED_DND_GUTTER_OFFSET = 8;
 var roundToNearest = function roundToNearest(value) {
@@ -44,33 +48,49 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
   var _ref = getEditorWidth() || {},
     width = _ref.width,
     lineLength = _ref.lineLength;
-  // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
   var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding) : undefined;
-  if (lineLength) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
     guidelines.push({
-      key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
+      key: GUIDELINE_KEYS.lineLengthLeft,
       position: {
-        x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
+        x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
       },
-      active: newWidth === lineLength
+      active: newWidth === WIDTHS.MIN
     });
     guidelines.push({
-      key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
+      key: GUIDELINE_KEYS.lineLengthRight,
       position: {
-        x: roundToNearest(lineLength / 2 + innerPaddingOffset)
+        x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
       },
-      active: newWidth === lineLength
+      active: newWidth === WIDTHS.MIN
     });
+  } else {
+    if (lineLength) {
+      guidelines.push({
+        key: GUIDELINE_KEYS.lineLengthLeft,
+        position: {
+          x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
+        },
+        active: newWidth === lineLength
+      });
+      guidelines.push({
+        key: GUIDELINE_KEYS.lineLengthRight,
+        position: {
+          x: roundToNearest(lineLength / 2 + innerPaddingOffset)
+        },
+        active: newWidth === lineLength
+      });
+    }
   }
   guidelines.push({
-    key: "".concat(GUIDELINE_KEYS.wide, "_left"),
+    key: GUIDELINE_KEYS.wideLeft,
     position: {
       x: -roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
     },
     active: newWidth === WIDTHS.WIDE
   });
   guidelines.push({
-    key: "".concat(GUIDELINE_KEYS.wide, "_right"),
+    key: GUIDELINE_KEYS.wideRight,
     position: {
       x: roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
     },
@@ -78,14 +98,14 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
   });
   if (fullWidth) {
     guidelines.push({
-      key: "".concat(GUIDELINE_KEYS.fullWidth, "_left"),
+      key: GUIDELINE_KEYS.fullWidthLeft,
       position: {
         x: -roundToNearest(fullWidth / 2 + innerPaddingOffset)
       },
       active: newWidth === fullWidth
     });
     guidelines.push({
-      key: "".concat(GUIDELINE_KEYS.fullWidth, "_right"),
+      key: GUIDELINE_KEYS.fullWidthRight,
       position: {
         x: roundToNearest(fullWidth / 2 + innerPaddingOffset)
       },

package/dist/cjs/pm-plugins/resizer-callbacks.js

@@ -10,6 +10,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
 var _getGuidelines = require("./get-guidelines");
 var _resizingMarkView = require("./resizing-mark-view");
+var _resizingPlugin = require("./resizing-plugin");
 var _analytics = require("./utils/analytics");
 var _measureFramerate2 = require("./utils/measure-framerate");
 var RESIZE_RATIO = 2;
@@ -63,6 +64,8 @@ function createResizerCallbacks(_ref2) {
       if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
         startMeasure();
       }
+      var pos = view.posAtDOM(dom, 0);
+      node = view.state.doc.nodeAt(pos);
       api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
         var _api$userIntent;
         var tr = _ref3.tr;
@@ -70,10 +73,19 @@ function createResizerCallbacks(_ref2) {
           tr: tr
         });
         tr.setMeta('is-resizer-resizing', true);
+        if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+          tr.setMeta(_resizingPlugin.resizingPluginKey, {
+            type: 'UPDATE_BREAKOUT_NODE',
+            data: {
+              node: node,
+              pos: pos,
+              start: pos,
+              depth: 0
+            }
+          });
+        }
         return tr;
       });
-      var pos = view.posAtDOM(dom, 0);
-      node = view.state.doc.nodeAt(pos);
     },
     onDrag: function onDrag(_ref4) {
       var _node, _api$guideline;
@@ -93,12 +105,39 @@ function createResizerCallbacks(_ref2) {
       api === null || api === void 0 || (_api$guideline = api.guideline) === null || _api$guideline === void 0 || (_api$guideline = _api$guideline.actions) === null || _api$guideline === void 0 || _api$guideline.displayGuideline(view)({
         guidelines: guidelines
       });
+      if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        var _api$breakout$sharedS;
+        var activeGuideline = guidelines.find(function (guideline) {
+          return guideline.active && !guideline.key.startsWith('grid');
+        });
+        if (activeGuideline) {
+          api === null || api === void 0 || api.core.actions.execute(function (_ref5) {
+            var tr = _ref5.tr;
+            tr.setMeta(_resizingPlugin.resizingPluginKey, {
+              type: 'UPDATE_ACTIVE_GUIDELINE_KEY',
+              data: {
+                activeGuidelineKey: activeGuideline.key
+              }
+            });
+            return tr;
+          });
+        }
+        if (!activeGuideline && api !== null && api !== void 0 && (_api$breakout$sharedS = api.breakout.sharedState.currentState()) !== null && _api$breakout$sharedS !== void 0 && _api$breakout$sharedS.activeGuidelineKey) {
+          api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
+            var tr = _ref6.tr;
+            tr.setMeta(_resizingPlugin.resizingPluginKey, {
+              type: 'CLEAR_ACTIVE_GUIDELINE_KEY'
+            });
+            return tr;
+          });
+        }
+      }
       contentDOM.style.setProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
     },
-    onDrop: function onDrop(_ref5) {
+    onDrop: function onDrop(_ref7) {
       var _api$guideline2;
-      var location = _ref5.location,
-        source = _ref5.source;
+      var location = _ref7.location,
+        source = _ref7.source;
       var payloads = [];
       if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
         var frameRateSamples = endMeasure();
@@ -109,7 +148,7 @@ function createResizerCallbacks(_ref2) {
         });
       }
       var isResizedToFullWidth = !!guidelines.find(function (guideline) {
-        return guideline.key.includes('full_width') && guideline.active;
+        return guideline.key.startsWith('full_width') && guideline.active;
       });
       guidelines = (0, _getGuidelines.getGuidelines)(false, 0, getEditorWidth);
       api === null || api === void 0 || (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 || (_api$guideline2 = _api$guideline2.actions) === null || _api$guideline2 === void 0 || _api$guideline2.displayGuideline(view)({
@@ -126,17 +165,30 @@ function createResizerCallbacks(_ref2) {
       });
       (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
-      api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
+      if (node && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        var resizedPayload = (0, _analytics.generateResizedEventPayload)({
+          node: node,
+          prevWidth: initialWidth,
+          newWidth: newWidth
+        });
+        payloads.push(resizedPayload);
+      }
+      api === null || api === void 0 || api.core.actions.execute(function (_ref8) {
         var _api$userIntent2;
-        var tr = _ref6.tr;
+        var tr = _ref8.tr;
         (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent('default')({
           tr: tr
         });
-        tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
         payloads.forEach(function (payload) {
           var _api$analytics;
           (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent(payload)(tr);
         });
+        tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
+        if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+          tr.setMeta(_resizingPlugin.resizingPluginKey, {
+            type: 'RESET_STATE'
+          });
+        }
         return tr;
       });
     }

package/dist/cjs/pm-plugins/resizing-plugin.js

@@ -1,16 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.resizingPluginKey = exports.createResizingPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _document = require("@atlaskit/editor-common/utils/document");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _handleKeyDown = require("./handle-key-down");
 var _resizingMarkView = require("./resizing-mark-view");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
   var node = _ref.node,
     pos = _ref.pos,
@@ -49,9 +54,43 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
   };
 };
 var resizingPluginKey = exports.resizingPluginKey = new _state.PluginKey('breakout-resizing');
+var pluginState = {
+  init: function init() {
+    return {
+      breakoutNode: undefined,
+      activeGuidelineLabel: undefined
+    };
+  },
+  apply: function apply(tr, pluginState) {
+    var meta = tr.getMeta(resizingPluginKey);
+    if (meta) {
+      switch (meta.type) {
+        case 'UPDATE_BREAKOUT_NODE':
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            breakoutNode: meta.data
+          });
+        case 'UPDATE_ACTIVE_GUIDELINE_KEY':
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            activeGuidelineKey: meta.data.activeGuidelineKey
+          });
+        case 'CLEAR_ACTIVE_GUIDELINE_KEY':
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            activeGuidelineKey: undefined
+          });
+        case 'RESET_STATE':
+          return {
+            activeGuidelineLabel: undefined,
+            breakoutNode: undefined
+          };
+      }
+    }
+    return pluginState;
+  }
+};
 var createResizingPlugin = exports.createResizingPlugin = function createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options) {
   return new _safePlugin.SafePlugin({
     key: resizingPluginKey,
+    state: (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release') ? pluginState : undefined,
     props: {
       markViews: {
         breakout: function breakout(mark, view) {

package/dist/cjs/pm-plugins/utils/analytics.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateResizeFrameRatePayloads = void 0;
+exports.generateResizedEventPayload = exports.generateResizeFrameRatePayloads = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var generateResizeFrameRatePayloads = exports.generateResizeFrameRatePayloads = function generateResizeFrameRatePayloads(props) {
   return props.frameRateSamples.map(function (frameRateSample, index) {
@@ -20,4 +20,19 @@ var generateResizeFrameRatePayloads = exports.generateResizeFrameRatePayloads =
       }
     };
   });
+};
+var generateResizedEventPayload = exports.generateResizedEventPayload = function generateResizedEventPayload(_ref) {
+  var node = _ref.node,
+    prevWidth = _ref.prevWidth,
+    newWidth = _ref.newWidth;
+  return {
+    action: _analytics.ACTION.RESIZED,
+    actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: {
+      nodeType: node.type.name,
+      prevWidth: prevWidth,
+      newWidth: newWidth
+    }
+  };
 };

package/dist/cjs/ui/GuidelineLabel.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuidelineLabel = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _resizer = require("@atlaskit/editor-common/resizer");
+var _ui = require("@atlaskit/editor-common/ui");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var GUIDELINE_KEY_TO_LAYOUT = {
+  wide_left: 'wide',
+  wide_right: 'wide',
+  full_width_left: 'full-width',
+  full_width_right: 'full-width'
+};
+var GuidelineLabel = exports.GuidelineLabel = function GuidelineLabel(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement;
+  var breakoutNode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'breakout.breakoutNode');
+  var activeGuidelineKey = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'breakout.activeGuidelineKey');
+  if (!breakoutNode || !activeGuidelineKey) {
+    return null;
+  }
+  var element = (0, _utils.findDomRefAtPos)(breakoutNode.pos, editorView.domAtPos.bind(editorView));
+  return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    target: element && element instanceof HTMLElement ? element : undefined,
+    offset: [0, 10],
+    alignY: "bottom",
+    alignX: "center",
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    stick: true,
+    forcePlacement: true
+  }, /*#__PURE__*/_react.default.createElement(_resizer.ResizerBreakoutModeLabel, {
+    layout: GUIDELINE_KEY_TO_LAYOUT[activeGuidelineKey]
+  }));
+};

package/dist/es2019/breakoutPlugin.js

@@ -7,11 +7,13 @@ import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-e
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginKey } from './pm-plugins/plugin-key';
-import { createResizingPlugin } from './pm-plugins/resizing-plugin';
+import { createResizingPlugin, resizingPluginKey } from './pm-plugins/resizing-plugin';
 import { findSupportedNodeForBreakout } from './pm-plugins/utils/find-breakout-node';
 import { getBreakoutMode } from './pm-plugins/utils/get-breakout-mode';
+import { GuidelineLabel } from './ui/GuidelineLabel';
 import LayoutButton from './ui/LayoutButton';
 class BreakoutView {
   constructor(
@@ -73,7 +75,8 @@ function createPlugin(api, {
     state: {
       init() {
         return {
-          breakoutNode: undefined
+          breakoutNode: undefined,
+          activeGuidelineKey: undefined
         };
       },
       apply(tr, pluginState) {
@@ -192,7 +195,7 @@ export const breakoutPlugin = ({
 }) => ({
   name: 'breakout',
   pmPlugins() {
-    if (editorExperiment('platform_editor_breakout_resizing', true)) {
+    if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true)) {
       return [{
         name: 'breakout-resizing',
         plugin: ({
@@ -218,6 +221,16 @@ export const breakoutPlugin = ({
         breakoutNode: undefined
       };
     }
+    if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
+      const resizingPluginState = resizingPluginKey.getState(editorState);
+      if (!resizingPluginState) {
+        return {
+          breakoutNode: undefined,
+          activeGuidelineKey: undefined
+        };
+      }
+      return resizingPluginState;
+    }
     const pluginState = pluginKey.getState(editorState);
     if (!pluginState) {
       return {
@@ -232,6 +245,16 @@ export const breakoutPlugin = ({
     popupsBoundariesElement,
     popupsScrollableElement
   }) {
+    if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
+      return /*#__PURE__*/React.createElement(GuidelineLabel, {
+        api: api,
+        editorView: editorView,
+        mountPoint: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement
+      });
+    }
+
     // This is a bit crappy, but should be resolved once we move to a static schema.
     if (options && !options.allowBreakoutButton) {
       return null;

package/dist/es2019/pm-plugins/get-guidelines.js

@@ -1,15 +1,19 @@
 import memoizeOne from 'memoize-one';
 import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
 import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 const WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
   WIDE: akEditorCalculatedWideLayoutWidth,
   MAX: akEditorFullWidthLayoutWidth
 };
-const GUIDELINE_KEYS = {
-  lineLength: 'grid',
-  wide: 'wide',
-  fullWidth: 'full_width'
+export const GUIDELINE_KEYS = {
+  lineLengthLeft: 'grid_left',
+  lineLengthRight: 'grid_right',
+  wideLeft: 'wide_left',
+  wideRight: 'wide_right',
+  fullWidthLeft: 'full_width_left',
+  fullWidthRight: 'full_width_right'
 };
 const AK_NESTED_DND_GUTTER_OFFSET = 8;
 const roundToNearest = (value, interval = 0.5) => Math.round(value / interval) * interval;
@@ -35,33 +39,49 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
     width,
     lineLength
   } = getEditorWidth() || {};
-  // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
   const fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
-  if (lineLength) {
+  if (fg('platform_editor_breakout_resizing_hello_release')) {
     guidelines.push({
-      key: `${GUIDELINE_KEYS.lineLength}_left`,
+      key: GUIDELINE_KEYS.lineLengthLeft,
       position: {
-        x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
+        x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
       },
-      active: newWidth === lineLength
+      active: newWidth === WIDTHS.MIN
     });
     guidelines.push({
-      key: `${GUIDELINE_KEYS.lineLength}_right`,
+      key: GUIDELINE_KEYS.lineLengthRight,
       position: {
-        x: roundToNearest(lineLength / 2 + innerPaddingOffset)
+        x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
       },
-      active: newWidth === lineLength
+      active: newWidth === WIDTHS.MIN
     });
+  } else {
+    if (lineLength) {
+      guidelines.push({
+        key: GUIDELINE_KEYS.lineLengthLeft,
+        position: {
+          x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
+        },
+        active: newWidth === lineLength
+      });
+      guidelines.push({
+        key: GUIDELINE_KEYS.lineLengthRight,
+        position: {
+          x: roundToNearest(lineLength / 2 + innerPaddingOffset)
+        },
+        active: newWidth === lineLength
+      });
+    }
   }
   guidelines.push({
-    key: `${GUIDELINE_KEYS.wide}_left`,
+    key: GUIDELINE_KEYS.wideLeft,
     position: {
       x: -roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
     },
     active: newWidth === WIDTHS.WIDE
   });
   guidelines.push({
-    key: `${GUIDELINE_KEYS.wide}_right`,
+    key: GUIDELINE_KEYS.wideRight,
     position: {
       x: roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
     },
@@ -69,14 +89,14 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
   });
   if (fullWidth) {
     guidelines.push({
-      key: `${GUIDELINE_KEYS.fullWidth}_left`,
+      key: GUIDELINE_KEYS.fullWidthLeft,
       position: {
         x: -roundToNearest(fullWidth / 2 + innerPaddingOffset)
       },
       active: newWidth === fullWidth
     });
     guidelines.push({
-      key: `${GUIDELINE_KEYS.fullWidth}_right`,
+      key: GUIDELINE_KEYS.fullWidthRight,
       position: {
         x: roundToNearest(fullWidth / 2 + innerPaddingOffset)
       },