@atlaskit/editor-plugin-breakout 2.7.1 → 2.7.3

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

@@ -3,7 +3,8 @@ 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 { generateResizeFrameRatePayloads } from './utils/analytics';
+import { resizingPluginKey } from './resizing-plugin';
+import { generateResizeFrameRatePayloads, generateResizedEventPayload } from './utils/analytics';
 import { measureFramerate, reduceResizeFrameRateSamples } from './utils/measure-framerate';
 const RESIZE_RATIO = 2;
 const SNAP_GAP = 10;
@@ -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
@@ -122,6 +161,14 @@ export function createResizerCallbacks({
       });
       setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
+      if (node && fg('platform_editor_breakout_resizing_hello_release')) {
+        const resizedPayload = generateResizedEventPayload({
+          node,
+          prevWidth: initialWidth,
+          newWidth
+        });
+        payloads.push(resizedPayload);
+      }
       api === null || api === void 0 ? void 0 : api.core.actions.execute(({
         tr
       }) => {
@@ -129,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/pm-plugins/utils/analytics.js

@@ -12,4 +12,20 @@ export const generateResizeFrameRatePayloads = props => {
       isInitialSample: index === 0
     }
   }));
+};
+export const generateResizedEventPayload = ({
+  node,
+  prevWidth,
+  newWidth
+}) => {
+  return {
+    action: ACTION.RESIZED,
+    actionSubject: ACTION_SUBJECT.ELEMENT,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      nodeType: node.type.name,
+      prevWidth,
+      newWidth
+    }
+  };
 };

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

@@ -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';
 var WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
   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) {
@@ -37,33 +41,49 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
   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 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
-  if (lineLength) {
+  if (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)
     },
@@ -71,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,7 +3,8 @@ 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 { generateResizeFrameRatePayloads } from './utils/analytics';
+import { resizingPluginKey } from './resizing-plugin';
+import { generateResizeFrameRatePayloads, generateResizedEventPayload } from './utils/analytics';
 import { measureFramerate, reduceResizeFrameRateSamples } from './utils/measure-framerate';
 var RESIZE_RATIO = 2;
 var SNAP_GAP = 10;
@@ -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)({
@@ -119,17 +158,30 @@ export function createResizerCallbacks(_ref2) {
       });
       setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
-      api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
+      if (node && fg('platform_editor_breakout_resizing_hello_release')) {
+        var resizedPayload = 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 (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/pm-plugins/utils/analytics.js

@@ -14,4 +14,19 @@ export var generateResizeFrameRatePayloads = function generateResizeFrameRatePay
       }
     };
   });
+};
+export var generateResizedEventPayload = function generateResizedEventPayload(_ref) {
+  var node = _ref.node,
+    prevWidth = _ref.prevWidth,
+    newWidth = _ref.newWidth;
+  return {
+    action: ACTION.RESIZED,
+    actionSubject: ACTION_SUBJECT.ELEMENT,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      nodeType: node.type.name,
+      prevWidth: prevWidth,
+      newWidth: newWidth
+    }
+  };
 };

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[]>;