@atlaskit/editor-plugin-breakout 2.7.6 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.8.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.8.0
+
+### Minor Changes
+
+- [#173259](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173259)
+  [`8c7a6909826be`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c7a6909826be) -
+  Add new Changed Breakout Mode event and hook it up to breakout button
+
+### Patch Changes
+
+- [#173297](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173297)
+  [`c1d3dba68babc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c1d3dba68babc) -
+  [ux] When single player expand FG is disabled, the opened expand should keep expanded state after
+  resize.
+- [#173239](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173239)
+  [`75dd671d5fcf6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/75dd671d5fcf6) -
+  Retain an exand nodes expanded state when applying breakout node
+- Updated dependencies
+
 ## 2.7.6
 
 ### Patch Changes

package/dist/cjs/breakoutPlugin.js

@@ -200,7 +200,8 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     node: (_breakoutNode$node = breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node) !== null && _breakoutNode$node !== void 0 ? _breakoutNode$node : null,
     isLivePage: isEditMode,
     isBreakoutNodePresent: breakoutNodePresent,
-    breakoutMode: breakoutMode
+    breakoutMode: breakoutMode,
+    api: api
   }) : null;
 };
 var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {

package/dist/cjs/pm-plugins/handle-key-down.js

@@ -38,34 +38,38 @@ var getAncestorResizableNode = function getAncestorResizableNode(view, breakoutR
   }
   return null;
 };
-var handleKeyDown = exports.handleKeyDown = function handleKeyDown(view, event) {
-  if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
-    var metaKey = _browser.browser.mac ? event.metaKey : event.ctrlKey;
-    var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
-    if (metaKey && event.altKey && isBracketKey) {
-      var _view$state$schema$no = view.state.schema.nodes,
-        expand = _view$state$schema$no.expand,
-        codeBlock = _view$state$schema$no.codeBlock,
-        layoutSection = _view$state$schema$no.layoutSection;
-      var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
-      var result = getAncestorResizableNode(view, breakoutResizableNodes);
-      if (result) {
-        var node = result.node,
-          pos = result.pos;
-        var breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(function (mark) {
-          return mark.type.name === 'breakout';
-        });
-        if (breakoutMark) {
-          var step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
-          var newWidth = breakoutMark.attrs.width + step;
-          if (newWidth < _editorSharedStyles.akEditorFullWidthLayoutWidth && newWidth > _editorSharedStyles.akEditorDefaultLayoutWidth) {
-            (0, _setBreakoutWidth.setBreakoutWidth)(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos)(view.state, view.dispatch);
-            view.focus();
+var handleKeyDown = exports.handleKeyDown = function handleKeyDown(api) {
+  return function (view, event) {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+      var metaKey = _browser.browser.mac ? event.metaKey : event.ctrlKey;
+      var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
+      if (metaKey && event.altKey && isBracketKey) {
+        var _view$state$schema$no = view.state.schema.nodes,
+          expand = _view$state$schema$no.expand,
+          codeBlock = _view$state$schema$no.codeBlock,
+          layoutSection = _view$state$schema$no.layoutSection;
+        var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
+        var result = getAncestorResizableNode(view, breakoutResizableNodes);
+        if (result) {
+          var node = result.node,
+            pos = result.pos;
+          var breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(function (mark) {
+            return mark.type.name === 'breakout';
+          });
+          if (breakoutMark) {
+            var step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
+            var newWidth = breakoutMark.attrs.width + step;
+            if (newWidth < _editorSharedStyles.akEditorFullWidthLayoutWidth && newWidth > _editorSharedStyles.akEditorDefaultLayoutWidth) {
+              var _api$editorViewMode;
+              var isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';
+              (0, _setBreakoutWidth.setBreakoutWidth)(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
+              view.focus();
+            }
+            return true;
           }
-          return true;
         }
       }
+      return false;
     }
-    return false;
-  }
+  };
 };

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

@@ -163,7 +163,12 @@ function createResizerCallbacks(_ref2) {
         api: api,
         source: source
       });
-      (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos)(view.state, view.dispatch);
+      var isEditMode;
+      if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        var _api$editorViewMode;
+        isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';
+      }
+      (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos, isEditMode)(view.state, view.dispatch);
       contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
       if (node && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
         var resizedPayload = (0, _analytics.generateResizedEventPayload)({

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

@@ -14,6 +14,7 @@ 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");
+var _singlePlayerExpand = require("./utils/single-player-expand");
 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) {
@@ -29,14 +30,24 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
   var isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.depth) === 0;
   if (breakoutResizableNodes.has(node.type) && isTopLevelNode) {
     var breakout = newState.schema.marks.breakout;
+    var expand = newState.schema.nodes.expand;
     var breakoutMark = node.marks.find(function (mark) {
       return mark.type === breakout;
     });
+    var isExpand = node.type === expand;
     if (!breakoutMark) {
       var width = isFullWidthEnabled ? _editorSharedStyles.akEditorFullWidthLayoutWidth : _editorSharedStyles.akEditorDefaultLayoutWidth;
       updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
         width: width
       })]);
+      if (isExpand && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        (0, _singlePlayerExpand.updateExpandedStateNew)({
+          tr: updatedTr,
+          node: node,
+          pos: pos,
+          isLivePage: true
+        });
+      }
       updatedDocChanged = true;
     } else if ((breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === null || (breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === undefined) {
       var mode = breakoutMark.attrs.mode;
@@ -45,6 +56,14 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
         width: newWidth,
         mode: mode
       })]);
+      if (isExpand && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        (0, _singlePlayerExpand.updateExpandedStateNew)({
+          tr: updatedTr,
+          node: node,
+          pos: pos,
+          isLivePage: true
+        });
+      }
       updatedDocChanged = true;
     }
   }
@@ -97,9 +116,14 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
           return new _resizingMarkView.ResizingMarkView(mark, view, api, getIntl, nodeViewPortalProviderAPI);
         }
       },
-      handleKeyDown: _handleKeyDown.handleKeyDown
+      handleKeyDown: (0, _handleKeyDown.handleKeyDown)(api)
     },
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var _api$editorViewMode;
+      // if editor is in live-view mode don't send transactions
+      if ((api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) !== 'edit' && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        return;
+      }
       var newTr = newState.tr;
       var hasDocChanged = false;
       var _newState$schema$node = newState.schema.nodes,

package/dist/cjs/ui/LayoutButton.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
@@ -61,6 +62,7 @@ function getBreakoutNodeElement(pluginState, selection, editorView) {
   return (0, _utils2.findParentDomRefOfType)(pluginState.breakoutNode.node.type, editorView.domAtPos.bind(editorView))(selection);
 }
 var LayoutButton = function LayoutButton(_ref) {
+  var _api$analytics3;
   var formatMessage = _ref.intl.formatMessage,
     mountPoint = _ref.mountPoint,
     boundariesElement = _ref.boundariesElement,
@@ -69,16 +71,37 @@ var LayoutButton = function LayoutButton(_ref) {
     node = _ref.node,
     isLivePage = _ref.isLivePage,
     isBreakoutNodePresent = _ref.isBreakoutNodePresent,
-    breakoutModeProp = _ref.breakoutMode;
+    breakoutModeProp = _ref.breakoutMode,
+    api = _ref.api;
   var handleClick = (0, _react.useCallback)(function (breakoutMode) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
+      var _api$analytics;
       (0, _setBreakoutMode.setBreakoutMode)(breakoutMode, isLivePage)(state, dispatch);
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+        action: _analytics.ACTION.CHANGED_BREAKOUT_MODE,
+        actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          mode: breakoutMode,
+          nodeType: node === null || node === void 0 ? void 0 : node.type.name
+        }
+      });
     } else {
+      var _api$analytics2;
       (0, _removeBreakout.removeBreakout)(isLivePage)(state, dispatch);
+      api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.fireAnalyticsEvent({
+        action: _analytics.ACTION.CHANGED_BREAKOUT_MODE,
+        actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          mode: 'center',
+          nodeType: node === null || node === void 0 ? void 0 : node.type.name
+        }
+      });
     }
-  }, [editorView, isLivePage]);
+  }, [api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage, node === null || node === void 0 ? void 0 : node.type.name]);
   var state = editorView.state;
   var exitCondition = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? !isBreakoutNodePresent : !node;
   if (exitCondition || !(0, _isBreakoutMarkAllowed.isBreakoutMarkAllowed)(state)) {

package/dist/es2019/breakoutPlugin.js

@@ -186,7 +186,8 @@ const LayoutButtonWrapper = ({
     node: (_breakoutNode$node = breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node) !== null && _breakoutNode$node !== void 0 ? _breakoutNode$node : null,
     isLivePage: isEditMode,
     isBreakoutNodePresent: breakoutNodePresent,
-    breakoutMode: breakoutMode
+    breakoutMode: breakoutMode,
+    api: api
   }) : null;
 };
 export const breakoutPlugin = ({

package/dist/es2019/pm-plugins/handle-key-down.js

@@ -32,7 +32,7 @@ const getAncestorResizableNode = (view, breakoutResizableNodes) => {
   }
   return null;
 };
-export const handleKeyDown = (view, event) => {
+export const handleKeyDown = api => (view, event) => {
   if (fg('platform_editor_breakout_resizing_hello_release')) {
     const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
     const isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
@@ -54,7 +54,9 @@ export const handleKeyDown = (view, event) => {
           const step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
           const newWidth = breakoutMark.attrs.width + step;
           if (newWidth < akEditorFullWidthLayoutWidth && newWidth > akEditorDefaultLayoutWidth) {
-            setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos)(view.state, view.dispatch);
+            var _api$editorViewMode, _api$editorViewMode$s;
+            const isEditMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'edit';
+            setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
             view.focus();
           }
           return true;

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

@@ -159,7 +159,12 @@ export function createResizerCallbacks({
         api,
         source
       });
-      setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
+      let isEditMode;
+      if (fg('platform_editor_breakout_resizing_hello_release')) {
+        var _api$editorViewMode, _api$editorViewMode$s;
+        isEditMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'edit';
+      }
+      setBreakoutWidth(newWidth, mode, pos, isEditMode)(view.state, view.dispatch);
       contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
       if (node && fg('platform_editor_breakout_resizing_hello_release')) {
         const resizedPayload = generateResizedEventPayload({

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

@@ -6,6 +6,7 @@ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalcu
 import { fg } from '@atlaskit/platform-feature-flags';
 import { handleKeyDown } from './handle-key-down';
 import { ResizingMarkView } from './resizing-mark-view';
+import { updateExpandedStateNew } from './utils/single-player-expand';
 const addBreakoutToResizableNode = ({
   node,
   pos,
@@ -22,12 +23,24 @@ const addBreakoutToResizableNode = ({
     const {
       breakout
     } = newState.schema.marks;
+    const {
+      expand
+    } = newState.schema.nodes;
     const breakoutMark = node.marks.find(mark => mark.type === breakout);
+    const isExpand = node.type === expand;
     if (!breakoutMark) {
       const width = isFullWidthEnabled ? akEditorFullWidthLayoutWidth : akEditorDefaultLayoutWidth;
       updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
         width: width
       })]);
+      if (isExpand && fg('platform_editor_breakout_resizing_hello_release')) {
+        updateExpandedStateNew({
+          tr: updatedTr,
+          node,
+          pos,
+          isLivePage: true
+        });
+      }
       updatedDocChanged = true;
     } else if ((breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === null || (breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === undefined) {
       const mode = breakoutMark.attrs.mode;
@@ -36,6 +49,14 @@ const addBreakoutToResizableNode = ({
         width: newWidth,
         mode: mode
       })]);
+      if (isExpand && fg('platform_editor_breakout_resizing_hello_release')) {
+        updateExpandedStateNew({
+          tr: updatedTr,
+          node,
+          pos,
+          isLivePage: true
+        });
+      }
       updatedDocChanged = true;
     }
   }
@@ -91,9 +112,14 @@ export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, op
           return new ResizingMarkView(mark, view, api, getIntl, nodeViewPortalProviderAPI);
         }
       },
-      handleKeyDown
+      handleKeyDown: handleKeyDown(api)
     },
     appendTransaction(transactions, oldState, newState) {
+      var _api$editorViewMode, _api$editorViewMode$s;
+      // if editor is in live-view mode don't send transactions
+      if ((api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) !== 'edit' && fg('platform_editor_breakout_resizing_hello_release')) {
+        return;
+      }
       let newTr = newState.tr;
       let hasDocChanged = false;
       const {

package/dist/es2019/ui/LayoutButton.js

@@ -7,6 +7,7 @@ import { useCallback } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
@@ -63,19 +64,41 @@ const LayoutButton = ({
   node,
   isLivePage,
   isBreakoutNodePresent,
-  breakoutMode: breakoutModeProp
+  breakoutMode: breakoutModeProp,
+  api
 }) => {
+  var _api$analytics3;
   const handleClick = useCallback(breakoutMode => {
     const {
       state,
       dispatch
     } = editorView;
     if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
+      var _api$analytics;
       setBreakoutMode(breakoutMode, isLivePage)(state, dispatch);
+      api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
+        action: ACTION.CHANGED_BREAKOUT_MODE,
+        actionSubject: ACTION_SUBJECT.ELEMENT,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          mode: breakoutMode,
+          nodeType: node === null || node === void 0 ? void 0 : node.type.name
+        }
+      });
     } else {
+      var _api$analytics2;
       removeBreakout(isLivePage)(state, dispatch);
+      api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent({
+        action: ACTION.CHANGED_BREAKOUT_MODE,
+        actionSubject: ACTION_SUBJECT.ELEMENT,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          mode: 'center',
+          nodeType: node === null || node === void 0 ? void 0 : node.type.name
+        }
+      });
     }
-  }, [editorView, isLivePage]);
+  }, [api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage, node === null || node === void 0 ? void 0 : node.type.name]);
   const {
     state
   } = editorView;

package/dist/esm/breakoutPlugin.js

@@ -191,7 +191,8 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     node: (_breakoutNode$node = breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node) !== null && _breakoutNode$node !== void 0 ? _breakoutNode$node : null,
     isLivePage: isEditMode,
     isBreakoutNodePresent: breakoutNodePresent,
-    breakoutMode: breakoutMode
+    breakoutMode: breakoutMode,
+    api: api
   }) : null;
 };
 export var breakoutPlugin = function breakoutPlugin(_ref4) {

package/dist/esm/pm-plugins/handle-key-down.js

@@ -32,34 +32,38 @@ var getAncestorResizableNode = function getAncestorResizableNode(view, breakoutR
   }
   return null;
 };
-export var handleKeyDown = function handleKeyDown(view, event) {
-  if (fg('platform_editor_breakout_resizing_hello_release')) {
-    var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
-    var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
-    if (metaKey && event.altKey && isBracketKey) {
-      var _view$state$schema$no = view.state.schema.nodes,
-        expand = _view$state$schema$no.expand,
-        codeBlock = _view$state$schema$no.codeBlock,
-        layoutSection = _view$state$schema$no.layoutSection;
-      var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
-      var result = getAncestorResizableNode(view, breakoutResizableNodes);
-      if (result) {
-        var node = result.node,
-          pos = result.pos;
-        var breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(function (mark) {
-          return mark.type.name === 'breakout';
-        });
-        if (breakoutMark) {
-          var step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
-          var newWidth = breakoutMark.attrs.width + step;
-          if (newWidth < akEditorFullWidthLayoutWidth && newWidth > akEditorDefaultLayoutWidth) {
-            setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos)(view.state, view.dispatch);
-            view.focus();
+export var handleKeyDown = function handleKeyDown(api) {
+  return function (view, event) {
+    if (fg('platform_editor_breakout_resizing_hello_release')) {
+      var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+      var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
+      if (metaKey && event.altKey && isBracketKey) {
+        var _view$state$schema$no = view.state.schema.nodes,
+          expand = _view$state$schema$no.expand,
+          codeBlock = _view$state$schema$no.codeBlock,
+          layoutSection = _view$state$schema$no.layoutSection;
+        var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
+        var result = getAncestorResizableNode(view, breakoutResizableNodes);
+        if (result) {
+          var node = result.node,
+            pos = result.pos;
+          var breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(function (mark) {
+            return mark.type.name === 'breakout';
+          });
+          if (breakoutMark) {
+            var step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
+            var newWidth = breakoutMark.attrs.width + step;
+            if (newWidth < akEditorFullWidthLayoutWidth && newWidth > akEditorDefaultLayoutWidth) {
+              var _api$editorViewMode;
+              var isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';
+              setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
+              view.focus();
+            }
+            return true;
           }
-          return true;
         }
       }
+      return false;
     }
-    return false;
-  }
+  };
 };

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

@@ -156,7 +156,12 @@ export function createResizerCallbacks(_ref2) {
         api: api,
         source: source
       });
-      setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
+      var isEditMode;
+      if (fg('platform_editor_breakout_resizing_hello_release')) {
+        var _api$editorViewMode;
+        isEditMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'edit';
+      }
+      setBreakoutWidth(newWidth, mode, pos, isEditMode)(view.state, view.dispatch);
       contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
       if (node && fg('platform_editor_breakout_resizing_hello_release')) {
         var resizedPayload = generateResizedEventPayload({

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

@@ -9,6 +9,7 @@ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalcu
 import { fg } from '@atlaskit/platform-feature-flags';
 import { handleKeyDown } from './handle-key-down';
 import { ResizingMarkView } from './resizing-mark-view';
+import { updateExpandedStateNew } from './utils/single-player-expand';
 var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
   var node = _ref.node,
     pos = _ref.pos,
@@ -22,14 +23,24 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
   var isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.depth) === 0;
   if (breakoutResizableNodes.has(node.type) && isTopLevelNode) {
     var breakout = newState.schema.marks.breakout;
+    var expand = newState.schema.nodes.expand;
     var breakoutMark = node.marks.find(function (mark) {
       return mark.type === breakout;
     });
+    var isExpand = node.type === expand;
     if (!breakoutMark) {
       var width = isFullWidthEnabled ? akEditorFullWidthLayoutWidth : akEditorDefaultLayoutWidth;
       updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
         width: width
       })]);
+      if (isExpand && fg('platform_editor_breakout_resizing_hello_release')) {
+        updateExpandedStateNew({
+          tr: updatedTr,
+          node: node,
+          pos: pos,
+          isLivePage: true
+        });
+      }
       updatedDocChanged = true;
     } else if ((breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === null || (breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === undefined) {
       var mode = breakoutMark.attrs.mode;
@@ -38,6 +49,14 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
         width: newWidth,
         mode: mode
       })]);
+      if (isExpand && fg('platform_editor_breakout_resizing_hello_release')) {
+        updateExpandedStateNew({
+          tr: updatedTr,
+          node: node,
+          pos: pos,
+          isLivePage: true
+        });
+      }
       updatedDocChanged = true;
     }
   }
@@ -90,9 +109,14 @@ export var createResizingPlugin = function createResizingPlugin(api, getIntl, no
           return new ResizingMarkView(mark, view, api, getIntl, nodeViewPortalProviderAPI);
         }
       },
-      handleKeyDown: handleKeyDown
+      handleKeyDown: handleKeyDown(api)
     },
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var _api$editorViewMode;
+      // if editor is in live-view mode don't send transactions
+      if ((api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) !== 'edit' && fg('platform_editor_breakout_resizing_hello_release')) {
+        return;
+      }
       var newTr = newState.tr;
       var hasDocChanged = false;
       var _newState$schema$node = newState.schema.nodes,

package/dist/esm/ui/LayoutButton.js

@@ -7,6 +7,7 @@ import { useCallback } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
@@ -53,6 +54,7 @@ function getBreakoutNodeElement(pluginState, selection, editorView) {
   return findParentDomRefOfType(pluginState.breakoutNode.node.type, editorView.domAtPos.bind(editorView))(selection);
 }
 var LayoutButton = function LayoutButton(_ref) {
+  var _api$analytics3;
   var formatMessage = _ref.intl.formatMessage,
     mountPoint = _ref.mountPoint,
     boundariesElement = _ref.boundariesElement,
@@ -61,16 +63,37 @@ var LayoutButton = function LayoutButton(_ref) {
     node = _ref.node,
     isLivePage = _ref.isLivePage,
     isBreakoutNodePresent = _ref.isBreakoutNodePresent,
-    breakoutModeProp = _ref.breakoutMode;
+    breakoutModeProp = _ref.breakoutMode,
+    api = _ref.api;
   var handleClick = useCallback(function (breakoutMode) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
+      var _api$analytics;
       setBreakoutMode(breakoutMode, isLivePage)(state, dispatch);
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+        action: ACTION.CHANGED_BREAKOUT_MODE,
+        actionSubject: ACTION_SUBJECT.ELEMENT,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          mode: breakoutMode,
+          nodeType: node === null || node === void 0 ? void 0 : node.type.name
+        }
+      });
     } else {
+      var _api$analytics2;
       removeBreakout(isLivePage)(state, dispatch);
+      api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.fireAnalyticsEvent({
+        action: ACTION.CHANGED_BREAKOUT_MODE,
+        actionSubject: ACTION_SUBJECT.ELEMENT,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          mode: 'center',
+          nodeType: node === null || node === void 0 ? void 0 : node.type.name
+        }
+      });
     }
-  }, [editorView, isLivePage]);
+  }, [api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage, node === null || node === void 0 ? void 0 : node.type.name]);
   var state = editorView.state;
   var exitCondition = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? !isBreakoutNodePresent : !node;
   if (exitCondition || !isBreakoutMarkAllowed(state)) {

package/dist/types/pm-plugins/handle-key-down.d.ts

@@ -1,2 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const handleKeyDown: (view: EditorView, event: KeyboardEvent) => boolean | undefined;
+import type { BreakoutPlugin } from '../breakoutPluginType';
+export declare const handleKeyDown: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined) => (view: EditorView, event: KeyboardEvent) => boolean | undefined;

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import type { WrappedComponentProps } from 'react-intl-next';
-import type { BreakoutMode } from '@atlaskit/editor-common/types';
+import type { BreakoutMode, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BreakoutPlugin } from '../breakoutPluginType';
 export interface Props {
     editorView: EditorView;
     mountPoint?: HTMLElement;
@@ -13,6 +14,7 @@ export interface Props {
     isLivePage?: boolean;
     isBreakoutNodePresent: boolean;
     breakoutMode: BreakoutMode | undefined;
+    api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
 }
 declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;

package/dist/types-ts4.5/pm-plugins/handle-key-down.d.ts

@@ -1,2 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const handleKeyDown: (view: EditorView, event: KeyboardEvent) => boolean | undefined;
+import type { BreakoutPlugin } from '../breakoutPluginType';
+export declare const handleKeyDown: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined) => (view: EditorView, event: KeyboardEvent) => boolean | undefined;

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import type { WrappedComponentProps } from 'react-intl-next';
-import type { BreakoutMode } from '@atlaskit/editor-common/types';
+import type { BreakoutMode, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BreakoutPlugin } from '../breakoutPluginType';
 export interface Props {
     editorView: EditorView;
     mountPoint?: HTMLElement;
@@ -13,6 +14,7 @@ export interface Props {
     isLivePage?: boolean;
     isBreakoutNodePresent: boolean;
     breakoutMode: BreakoutMode | undefined;
+    api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
 }
 declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.7.6",
+	"version": "2.8.1",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^106.9.0",
+		"@atlaskit/editor-common": "^107.0.0",
 		"@atlaskit/editor-plugin-block-controls": "^3.19.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",