@atlaskit/editor-plugin-breakout 2.7.2 → 2.7.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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,7 +4,7 @@ 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");
@@ -14,10 +14,13 @@ var WIDTHS = {
   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) {
@@ -48,14 +51,14 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
   var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding) : undefined;
   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(WIDTHS.MIN / 2 + innerPaddingOffset)
       },
       active: newWidth === WIDTHS.MIN
     });
     guidelines.push({
-      key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
+      key: GUIDELINE_KEYS.lineLengthRight,
       position: {
         x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
       },
@@ -64,14 +67,14 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
   } else {
     if (lineLength) {
       guidelines.push({
-        key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
+        key: GUIDELINE_KEYS.lineLengthLeft,
         position: {
           x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
         },
         active: newWidth === lineLength
       });
       guidelines.push({
-        key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
+        key: GUIDELINE_KEYS.lineLengthRight,
         position: {
           x: roundToNearest(lineLength / 2 + innerPaddingOffset)
         },
@@ -80,14 +83,14 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
     }
   }
   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)
     },
@@ -95,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)({
@@ -134,17 +173,22 @@ function createResizerCallbacks(_ref2) {
         });
         payloads.push(resizedPayload);
       }
-      api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
+      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/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

@@ -7,10 +7,13 @@ const WIDTHS = {
   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;
@@ -39,14 +42,14 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
   const fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
   if (fg('platform_editor_breakout_resizing_hello_release')) {
     guidelines.push({
-      key: `${GUIDELINE_KEYS.lineLength}_left`,
+      key: GUIDELINE_KEYS.lineLengthLeft,
       position: {
         x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
       },
       active: newWidth === WIDTHS.MIN
     });
     guidelines.push({
-      key: `${GUIDELINE_KEYS.lineLength}_right`,
+      key: GUIDELINE_KEYS.lineLengthRight,
       position: {
         x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
       },
@@ -55,14 +58,14 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
   } else {
     if (lineLength) {
       guidelines.push({
-        key: `${GUIDELINE_KEYS.lineLength}_left`,
+        key: GUIDELINE_KEYS.lineLengthLeft,
         position: {
           x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
         },
         active: newWidth === lineLength
       });
       guidelines.push({
-        key: `${GUIDELINE_KEYS.lineLength}_right`,
+        key: GUIDELINE_KEYS.lineLengthRight,
         position: {
           x: roundToNearest(lineLength / 2 + innerPaddingOffset)
         },
@@ -71,14 +74,14 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
     }
   }
   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)
     },
@@ -86,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)
       },

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

@@ -3,6 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
 import { getGuidelines } from './get-guidelines';
 import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
+import { resizingPluginKey } from './resizing-plugin';
 import { generateResizeFrameRatePayloads, generateResizedEventPayload } from './utils/analytics';
 import { measureFramerate, reduceResizeFrameRateSamples } from './utils/measure-framerate';
 const RESIZE_RATIO = 2;
@@ -58,6 +59,8 @@ export function createResizerCallbacks({
       if (fg('platform_editor_breakout_resizing_hello_release')) {
         startMeasure();
       }
+      const pos = view.posAtDOM(dom, 0);
+      node = view.state.doc.nodeAt(pos);
       api === null || api === void 0 ? void 0 : api.core.actions.execute(({
         tr
       }) => {
@@ -66,10 +69,19 @@ export function createResizerCallbacks({
           tr
         });
         tr.setMeta('is-resizer-resizing', true);
+        if (fg('platform_editor_breakout_resizing_hello_release')) {
+          tr.setMeta(resizingPluginKey, {
+            type: 'UPDATE_BREAKOUT_NODE',
+            data: {
+              node,
+              pos,
+              start: pos,
+              depth: 0
+            }
+          });
+        }
         return tr;
       });
-      const pos = view.posAtDOM(dom, 0);
-      node = view.state.doc.nodeAt(pos);
     },
     onDrag: ({
       location,
@@ -90,6 +102,33 @@ export function createResizerCallbacks({
       api === null || api === void 0 ? void 0 : (_api$guideline = api.guideline) === null || _api$guideline === void 0 ? void 0 : (_api$guideline$action = _api$guideline.actions) === null || _api$guideline$action === void 0 ? void 0 : _api$guideline$action.displayGuideline(view)({
         guidelines
       });
+      if (fg('platform_editor_breakout_resizing_hello_release')) {
+        var _api$breakout$sharedS;
+        const activeGuideline = guidelines.find(guideline => guideline.active && !guideline.key.startsWith('grid'));
+        if (activeGuideline) {
+          api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+            tr
+          }) => {
+            tr.setMeta(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 ? void 0 : api.core.actions.execute(({
+            tr
+          }) => {
+            tr.setMeta(resizingPluginKey, {
+              type: 'CLEAR_ACTIVE_GUIDELINE_KEY'
+            });
+            return tr;
+          });
+        }
+      }
       contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
     },
     onDrop({
@@ -106,7 +145,7 @@ export function createResizerCallbacks({
           originalNode: node
         });
       }
-      const isResizedToFullWidth = !!guidelines.find(guideline => guideline.key.includes('full_width') && guideline.active);
+      const isResizedToFullWidth = !!guidelines.find(guideline => guideline.key.startsWith('full_width') && guideline.active);
       guidelines = getGuidelines(false, 0, getEditorWidth);
       api === null || api === void 0 ? void 0 : (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 ? void 0 : (_api$guideline2$actio = _api$guideline2.actions) === null || _api$guideline2$actio === void 0 ? void 0 : _api$guideline2$actio.displayGuideline(view)({
         guidelines
@@ -137,11 +176,16 @@ export function createResizerCallbacks({
         (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default')({
           tr
         });
-        tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
         payloads.forEach(payload => {
           var _api$analytics, _api$analytics$action;
           (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent(payload)(tr);
         });
+        tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
+        if (fg('platform_editor_breakout_resizing_hello_release')) {
+          tr.setMeta(resizingPluginKey, {
+            type: 'RESET_STATE'
+          });
+        }
         return tr;
       });
     }

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

@@ -3,6 +3,7 @@ import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
 import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { handleKeyDown } from './handle-key-down';
 import { ResizingMarkView } from './resizing-mark-view';
 const addBreakoutToResizableNode = ({
@@ -44,9 +45,46 @@ const addBreakoutToResizableNode = ({
   };
 };
 export const resizingPluginKey = new PluginKey('breakout-resizing');
+const pluginState = {
+  init() {
+    return {
+      breakoutNode: undefined,
+      activeGuidelineLabel: undefined
+    };
+  },
+  apply(tr, pluginState) {
+    const meta = tr.getMeta(resizingPluginKey);
+    if (meta) {
+      switch (meta.type) {
+        case 'UPDATE_BREAKOUT_NODE':
+          return {
+            ...pluginState,
+            breakoutNode: meta.data
+          };
+        case 'UPDATE_ACTIVE_GUIDELINE_KEY':
+          return {
+            ...pluginState,
+            activeGuidelineKey: meta.data.activeGuidelineKey
+          };
+        case 'CLEAR_ACTIVE_GUIDELINE_KEY':
+          return {
+            ...pluginState,
+            activeGuidelineKey: undefined
+          };
+        case 'RESET_STATE':
+          return {
+            activeGuidelineLabel: undefined,
+            breakoutNode: undefined
+          };
+      }
+    }
+    return pluginState;
+  }
+};
 export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, options) => {
   return new SafePlugin({
     key: resizingPluginKey,
+    state: fg('platform_editor_breakout_resizing_hello_release') ? pluginState : undefined,
     props: {
       markViews: {
         breakout: (mark, view) => {

package/dist/es2019/ui/GuidelineLabel.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+const GUIDELINE_KEY_TO_LAYOUT = {
+  wide_left: 'wide',
+  wide_right: 'wide',
+  full_width_left: 'full-width',
+  full_width_right: 'full-width'
+};
+export const GuidelineLabel = ({
+  api,
+  editorView,
+  mountPoint,
+  boundariesElement,
+  scrollableElement
+}) => {
+  const breakoutNode = useSharedPluginStateSelector(api, 'breakout.breakoutNode');
+  const activeGuidelineKey = useSharedPluginStateSelector(api, 'breakout.activeGuidelineKey');
+  if (!breakoutNode || !activeGuidelineKey) {
+    return null;
+  }
+  const element = findDomRefAtPos(breakoutNode.pos, editorView.domAtPos.bind(editorView));
+  return /*#__PURE__*/React.createElement(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.createElement(ResizerBreakoutModeLabel, {
+    layout: GUIDELINE_KEY_TO_LAYOUT[activeGuidelineKey]
+  }));
+};

package/dist/esm/breakoutPlugin.js

@@ -13,11 +13,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';
 var BreakoutView = /*#__PURE__*/_createClass(function BreakoutView(
 /**
@@ -77,7 +79,8 @@ function createPlugin(api, _ref) {
     state: {
       init: function init() {
         return {
-          breakoutNode: undefined
+          breakoutNode: undefined,
+          activeGuidelineKey: undefined
         };
       },
       apply: function apply(tr, pluginState) {
@@ -197,7 +200,7 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
   return {
     name: 'breakout',
     pmPlugins: function pmPlugins() {
-      if (editorExperiment('platform_editor_breakout_resizing', true)) {
+      if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true)) {
         return [{
           name: 'breakout-resizing',
           plugin: function plugin(_ref5) {
@@ -226,6 +229,16 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
           breakoutNode: undefined
         };
       }
+      if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
+        var resizingPluginState = resizingPluginKey.getState(editorState);
+        if (!resizingPluginState) {
+          return {
+            breakoutNode: undefined,
+            activeGuidelineKey: undefined
+          };
+        }
+        return resizingPluginState;
+      }
       var pluginState = pluginKey.getState(editorState);
       if (!pluginState) {
         return {
@@ -239,6 +252,16 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
         popupsMountPoint = _ref6.popupsMountPoint,
         popupsBoundariesElement = _ref6.popupsBoundariesElement,
         popupsScrollableElement = _ref6.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/esm/pm-plugins/get-guidelines.js

@@ -7,10 +7,13 @@ var WIDTHS = {
   WIDE: akEditorCalculatedWideLayoutWidth,
   MAX: akEditorFullWidthLayoutWidth
 };
-var GUIDELINE_KEYS = {
-  lineLength: 'grid',
-  wide: 'wide',
-  fullWidth: 'full_width'
+export var 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) {
@@ -41,14 +44,14 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
   var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
   if (fg('platform_editor_breakout_resizing_hello_release')) {
     guidelines.push({
-      key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
+      key: GUIDELINE_KEYS.lineLengthLeft,
       position: {
         x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
       },
       active: newWidth === WIDTHS.MIN
     });
     guidelines.push({
-      key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
+      key: GUIDELINE_KEYS.lineLengthRight,
       position: {
         x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
       },
@@ -57,14 +60,14 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
   } else {
     if (lineLength) {
       guidelines.push({
-        key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
+        key: GUIDELINE_KEYS.lineLengthLeft,
         position: {
           x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
         },
         active: newWidth === lineLength
       });
       guidelines.push({
-        key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
+        key: GUIDELINE_KEYS.lineLengthRight,
         position: {
           x: roundToNearest(lineLength / 2 + innerPaddingOffset)
         },
@@ -73,14 +76,14 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
     }
   }
   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)
     },
@@ -88,14 +91,14 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
   });
   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/esm/pm-plugins/resizer-callbacks.js

@@ -3,6 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
 import { getGuidelines } from './get-guidelines';
 import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
+import { resizingPluginKey } from './resizing-plugin';
 import { generateResizeFrameRatePayloads, generateResizedEventPayload } from './utils/analytics';
 import { measureFramerate, reduceResizeFrameRateSamples } from './utils/measure-framerate';
 var RESIZE_RATIO = 2;
@@ -56,6 +57,8 @@ export function createResizerCallbacks(_ref2) {
       if (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;
@@ -63,10 +66,19 @@ export function createResizerCallbacks(_ref2) {
           tr: tr
         });
         tr.setMeta('is-resizer-resizing', true);
+        if (fg('platform_editor_breakout_resizing_hello_release')) {
+          tr.setMeta(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;
@@ -86,12 +98,39 @@ export 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 (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(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(resizingPluginKey, {
+              type: 'CLEAR_ACTIVE_GUIDELINE_KEY'
+            });
+            return tr;
+          });
+        }
+      }
       contentDOM.style.setProperty(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 (fg('platform_editor_breakout_resizing_hello_release')) {
         var frameRateSamples = endMeasure();
@@ -102,7 +141,7 @@ export 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 = 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)({
@@ -127,17 +166,22 @@ export function createResizerCallbacks(_ref2) {
         });
         payloads.push(resizedPayload);
       }
-      api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
+      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 (fg('platform_editor_breakout_resizing_hello_release')) {
+          tr.setMeta(resizingPluginKey, {
+            type: 'RESET_STATE'
+          });
+        }
         return tr;
       });
     }

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

@@ -1,8 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
 import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { handleKeyDown } from './handle-key-down';
 import { ResizingMarkView } from './resizing-mark-view';
 var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
@@ -43,9 +47,43 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
   };
 };
 export var resizingPluginKey = new 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;
+  }
+};
 export var createResizingPlugin = function createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options) {
   return new SafePlugin({
     key: resizingPluginKey,
+    state: fg('platform_editor_breakout_resizing_hello_release') ? pluginState : undefined,
     props: {
       markViews: {
         breakout: function breakout(mark, view) {

package/dist/esm/ui/GuidelineLabel.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { findDomRefAtPos } from '@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'
+};
+export var GuidelineLabel = function GuidelineLabel(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement;
+  var breakoutNode = useSharedPluginStateSelector(api, 'breakout.breakoutNode');
+  var activeGuidelineKey = useSharedPluginStateSelector(api, 'breakout.activeGuidelineKey');
+  if (!breakoutNode || !activeGuidelineKey) {
+    return null;
+  }
+  var element = findDomRefAtPos(breakoutNode.pos, editorView.domAtPos.bind(editorView));
+  return /*#__PURE__*/React.createElement(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.createElement(ResizerBreakoutModeLabel, {
+    layout: GUIDELINE_KEY_TO_LAYOUT[activeGuidelineKey]
+  }));
+};

package/dist/types/breakoutPluginType.d.ts

@@ -8,8 +8,10 @@ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import { ActiveGuidelineKey } from './pm-plugins/resizing-plugin';
 export interface BreakoutPluginState {
     breakoutNode: ContentNodeWithPos | undefined;
+    activeGuidelineKey: ActiveGuidelineKey | undefined;
 }
 export interface BreakoutPluginOptions {
     allowBreakoutButton?: boolean;

package/dist/types/pm-plugins/get-guidelines.d.ts

@@ -1,4 +1,12 @@
 import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { NodeType } from '@atlaskit/editor-prosemirror/model';
+export declare const GUIDELINE_KEYS: {
+    readonly lineLengthLeft: "grid_left";
+    readonly lineLengthRight: "grid_right";
+    readonly wideLeft: "wide_left";
+    readonly wideRight: "wide_right";
+    readonly fullWidthLeft: "full_width_left";
+    readonly fullWidthRight: "full_width_right";
+};
 export declare const getGuidelines: import("memoize-one").MemoizedFn<(isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[]>;

package/dist/types/pm-plugins/resizing-plugin.d.ts

@@ -4,6 +4,11 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { BreakoutPlugin } from '../breakoutPluginType';
-import type { BreakoutPluginOptions } from '../breakoutPluginType';
-export declare const resizingPluginKey: PluginKey<any>;
-export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions) => SafePlugin<any>;
+import type { BreakoutPluginOptions, BreakoutPluginState } from '../breakoutPluginType';
+import { GUIDELINE_KEYS } from './get-guidelines';
+export declare const resizingPluginKey: PluginKey<BreakoutPluginState>;
+export type ActiveGuidelineKey = Exclude<(typeof GUIDELINE_KEYS)[keyof typeof GUIDELINE_KEYS], 'grid_left' | 'grid_right'>;
+export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions) => SafePlugin<BreakoutPluginState | {
+    activeGuidelineLabel: undefined;
+    breakoutNode: undefined;
+}>;

package/dist/types/ui/GuidelineLabel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { BreakoutPlugin } from '../breakoutPluginType';
+type GuidelineLabelProps = {
+    api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
+    editorView: EditorView;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+};
+export declare const GuidelineLabel: ({ api, editorView, mountPoint, boundariesElement, scrollableElement, }: GuidelineLabelProps) => React.JSX.Element | null;
+export {};

package/dist/types-ts4.5/breakoutPluginType.d.ts

@@ -8,8 +8,10 @@ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import { ActiveGuidelineKey } from './pm-plugins/resizing-plugin';
 export interface BreakoutPluginState {
     breakoutNode: ContentNodeWithPos | undefined;
+    activeGuidelineKey: ActiveGuidelineKey | undefined;
 }
 export interface BreakoutPluginOptions {
     allowBreakoutButton?: boolean;

package/dist/types-ts4.5/pm-plugins/get-guidelines.d.ts

@@ -1,4 +1,12 @@
 import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { NodeType } from '@atlaskit/editor-prosemirror/model';
+export declare const GUIDELINE_KEYS: {
+    readonly lineLengthLeft: "grid_left";
+    readonly lineLengthRight: "grid_right";
+    readonly wideLeft: "wide_left";
+    readonly wideRight: "wide_right";
+    readonly fullWidthLeft: "full_width_left";
+    readonly fullWidthRight: "full_width_right";
+};
 export declare const getGuidelines: import("memoize-one").MemoizedFn<(isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[]>;

package/dist/types-ts4.5/pm-plugins/resizing-plugin.d.ts

@@ -4,6 +4,11 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { BreakoutPlugin } from '../breakoutPluginType';
-import type { BreakoutPluginOptions } from '../breakoutPluginType';
-export declare const resizingPluginKey: PluginKey<any>;
-export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions) => SafePlugin<any>;
+import type { BreakoutPluginOptions, BreakoutPluginState } from '../breakoutPluginType';
+import { GUIDELINE_KEYS } from './get-guidelines';
+export declare const resizingPluginKey: PluginKey<BreakoutPluginState>;
+export type ActiveGuidelineKey = Exclude<(typeof GUIDELINE_KEYS)[keyof typeof GUIDELINE_KEYS], 'grid_left' | 'grid_right'>;
+export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions) => SafePlugin<BreakoutPluginState | {
+    activeGuidelineLabel: undefined;
+    breakoutNode: undefined;
+}>;

package/dist/types-ts4.5/ui/GuidelineLabel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { BreakoutPlugin } from '../breakoutPluginType';
+type GuidelineLabelProps = {
+    api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
+    editorView: EditorView;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+};
+export declare const GuidelineLabel: ({ api, editorView, mountPoint, boundariesElement, scrollableElement, }: GuidelineLabelProps) => React.JSX.Element | null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.7.2",
+	"version": "2.7.3",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,8 +34,8 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^106.5.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.16.0",
+		"@atlaskit/editor-common": "^106.6.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.17.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^6.1.0",
+		"@atlaskit/tmp-editor-statsig": "^6.2.0",
 		"@atlaskit/tokens": "^5.1.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",