@atlaskit/editor-plugin-breakout 2.4.3 → 2.5.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.5.1
+
+### Patch Changes
+
+- [#164129](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164129)
+  [`ef34428363521`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef34428363521) -
+  [ux] ED-28058 fix left drag handle experience for new resizing under
+  platform_editor_breakout_resizing
+- Updated dependencies
+
+## 2.5.0
+
+### Minor Changes
+
+- [#163976](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163976)
+  [`668e81e097994`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/668e81e097994) -
+  [ux] [ED-28113] this change saves the width as 1800 when resizing to the fullWidth guideline under
+  the new resizing experience behind platform_editor_breakout_resizing
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.4.3
 
 ### Patch Changes

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

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getGuidelines = void 0;
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var WIDTHS = {
@@ -15,18 +17,28 @@ var GUIDELINE_KEYS = {
   wide: 'wide',
   fullWidth: 'full_width'
 };
+var AK_NESTED_DND_GUTTER_OFFSET = 8;
 var roundToNearest = function roundToNearest(value) {
   var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
   return Math.round(value / interval) * interval;
 };
-var getGuidelines = exports.getGuidelines = function getGuidelines(isResizing, newWidth, getEditorWidth, nodeType) {
+var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (isResizing, newWidth, getEditorWidth, nodeType) {
   var guidelines = [];
   if (!isResizing) {
     return guidelines;
   }
   var innerPaddingOffset = 0;
-  if (nodeType && nodeType.name === 'expand') {
-    innerPaddingOffset = _styles.resizerHandleThumbWidth;
+  if (nodeType) {
+    switch (nodeType.name) {
+      case 'expand':
+        innerPaddingOffset = _styles.EXPAND_CONTAINER_PADDING + _styles.resizerHandleThumbWidth + AK_NESTED_DND_GUTTER_OFFSET;
+        break;
+      case 'layoutSection':
+        innerPaddingOffset = _styles.LAYOUT_COLUMN_PADDING + AK_NESTED_DND_GUTTER_OFFSET;
+        break;
+      default:
+        break;
+    }
   }
   var _ref = getEditorWidth() || {},
     width = _ref.width,
@@ -81,4 +93,4 @@ var getGuidelines = exports.getGuidelines = function getGuidelines(isResizing, n
     });
   }
   return guidelines;
-};
+});

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

@@ -11,7 +11,7 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
   var onDragStart = _ref.onDragStart,
     onDrag = _ref.onDrag,
     _onDrop = _ref.onDrop;
-  var registerHandle = function registerHandle(handleElement) {
+  var registerHandle = function registerHandle(handleElement, handleSide) {
     return (0, _adapter.draggable)({
       element: handleElement,
       onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
@@ -21,6 +21,11 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
         });
         _preventUnhandled.preventUnhandled.start();
       },
+      getInitialData: function getInitialData() {
+        return {
+          handleSide: handleSide
+        };
+      },
       onDragStart: onDragStart,
       onDrag: onDrag,
       onDrop: function onDrop(args) {
@@ -47,8 +52,8 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
   };
   var rightHandle = createHandle('right');
   var leftHandle = createHandle('left');
-  var rightHandleCleanup = registerHandle(rightHandle);
-  var leftHandleCleanup = registerHandle(leftHandle);
+  var rightHandleCleanup = registerHandle(rightHandle, 'right');
+  var leftHandleCleanup = registerHandle(leftHandle, 'left');
   return {
     rightHandle: rightHandle,
     leftHandle: leftHandle,

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

@@ -18,13 +18,17 @@ function getProposedWidth(_ref) {
   var _api$width$sharedStat;
   var initialWidth = _ref.initialWidth,
     location = _ref.location,
-    api = _ref.api;
-  var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
-  var proposedWidth = initialWidth + diffX;
+    api = _ref.api,
+    source = _ref.source;
+  var directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
+  var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
 
   // TODO: ED-28024 - add snapping logic
 
   var containerWidth = ((api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0) - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding;
+
+  // the node width may be greater than the container width so we resize using the smaller value
+  var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
   return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
 }
 function createResizerCallbacks(_ref2) {
@@ -34,6 +38,7 @@ function createResizerCallbacks(_ref2) {
     mark = _ref2.mark,
     api = _ref2.api;
   var node = null;
+  var guidelines = [];
   var getEditorWidth = function getEditorWidth() {
     var _api$width;
     return api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
@@ -48,14 +53,16 @@ function createResizerCallbacks(_ref2) {
     },
     onDrag: function onDrag(_ref3) {
       var _node, _api$guideline;
-      var location = _ref3.location;
+      var location = _ref3.location,
+        source = _ref3.source;
       var initialWidth = mark.attrs.width;
       var newWidth = getProposedWidth({
         initialWidth: initialWidth,
         location: location,
-        api: api
+        api: api,
+        source: source
       });
-      var guidelines = (0, _getGuidelines.getGuidelines)(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
+      guidelines = (0, _getGuidelines.getGuidelines)(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
       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
       });
@@ -63,18 +70,23 @@ function createResizerCallbacks(_ref2) {
     },
     onDrop: function onDrop(_ref4) {
       var _api$guideline2, _api$userIntent2;
-      var location = _ref4.location;
-      var guidelines = (0, _getGuidelines.getGuidelines)(false, 0, getEditorWidth);
+      var location = _ref4.location,
+        source = _ref4.source;
+      var isResizedToFullWidth = !!guidelines.find(function (guideline) {
+        return guideline.key.includes('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)({
         guidelines: guidelines
       });
       var pos = view.posAtDOM(dom, 0);
       var mode = mark.attrs.mode;
       var initialWidth = mark.attrs.width;
-      var newWidth = getProposedWidth({
+      var newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
         initialWidth: initialWidth,
         location: location,
-        api: api
+        api: api,
+        source: source
       });
       (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);

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

@@ -1,4 +1,5 @@
-import { resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
+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';
 const WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
@@ -9,15 +10,25 @@ const GUIDELINE_KEYS = {
   wide: 'wide',
   fullWidth: 'full_width'
 };
+const AK_NESTED_DND_GUTTER_OFFSET = 8;
 const roundToNearest = (value, interval = 0.5) => Math.round(value / interval) * interval;
-export const getGuidelines = (isResizing, newWidth, getEditorWidth, nodeType) => {
+export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, nodeType) => {
   const guidelines = [];
   if (!isResizing) {
     return guidelines;
   }
   let innerPaddingOffset = 0;
-  if (nodeType && nodeType.name === 'expand') {
-    innerPaddingOffset = resizerHandleThumbWidth;
+  if (nodeType) {
+    switch (nodeType.name) {
+      case 'expand':
+        innerPaddingOffset = EXPAND_CONTAINER_PADDING + resizerHandleThumbWidth + AK_NESTED_DND_GUTTER_OFFSET;
+        break;
+      case 'layoutSection':
+        innerPaddingOffset = LAYOUT_COLUMN_PADDING + AK_NESTED_DND_GUTTER_OFFSET;
+        break;
+      default:
+        break;
+    }
   }
   const {
     width,
@@ -73,4 +84,4 @@ export const getGuidelines = (isResizing, newWidth, getEditorWidth, nodeType) =>
     });
   }
   return guidelines;
-};
+});

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

@@ -6,7 +6,7 @@ export const createPragmaticResizer = ({
   onDrag,
   onDrop
 }) => {
-  const registerHandle = handleElement => {
+  const registerHandle = (handleElement, handleSide) => {
     return draggable({
       element: handleElement,
       onGenerateDragPreview: ({
@@ -17,6 +17,9 @@ export const createPragmaticResizer = ({
         });
         preventUnhandled.start();
       },
+      getInitialData: () => ({
+        handleSide
+      }),
       onDragStart,
       onDrag,
       onDrop(args) {
@@ -43,8 +46,8 @@ export const createPragmaticResizer = ({
   };
   const rightHandle = createHandle('right');
   const leftHandle = createHandle('left');
-  const rightHandleCleanup = registerHandle(rightHandle);
-  const leftHandleCleanup = registerHandle(leftHandle);
+  const rightHandleCleanup = registerHandle(rightHandle, 'right');
+  const leftHandleCleanup = registerHandle(leftHandle, 'left');
   return {
     rightHandle,
     leftHandle,

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

@@ -10,15 +10,19 @@ const WIDTHS = {
 export function getProposedWidth({
   initialWidth,
   location,
-  api
+  api,
+  source
 }) {
   var _api$width$sharedStat, _api$width$sharedStat2;
-  const diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
-  const proposedWidth = initialWidth + diffX;
+  const directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
+  const diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
 
   // TODO: ED-28024 - add snapping logic
 
   const containerWidth = ((api === null || api === void 0 ? void 0 : (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 ? void 0 : (_api$width$sharedStat2 = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width) || 0) - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding;
+
+  // the node width may be greater than the container width so we resize using the smaller value
+  const proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
   return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
 }
 export function createResizerCallbacks({
@@ -29,6 +33,7 @@ export function createResizerCallbacks({
   api
 }) {
   let node = null;
+  let guidelines = [];
   const getEditorWidth = () => {
     var _api$width;
     return api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
@@ -42,36 +47,41 @@ export function createResizerCallbacks({
       node = view.state.doc.nodeAt(pos);
     },
     onDrag: ({
-      location
+      location,
+      source
     }) => {
       var _node, _api$guideline, _api$guideline$action;
       const initialWidth = mark.attrs.width;
       const newWidth = getProposedWidth({
         initialWidth,
         location,
-        api
+        api,
+        source
       });
-      const guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
+      guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
       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
       });
       contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
     },
     onDrop({
-      location
+      location,
+      source
     }) {
       var _api$guideline2, _api$guideline2$actio, _api$userIntent2;
-      const guidelines = getGuidelines(false, 0, getEditorWidth);
+      const isResizedToFullWidth = !!guidelines.find(guideline => guideline.key.includes('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
       });
       const pos = view.posAtDOM(dom, 0);
       const mode = mark.attrs.mode;
       const initialWidth = mark.attrs.width;
-      const newWidth = getProposedWidth({
+      const newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
         initialWidth,
         location,
-        api
+        api,
+        source
       });
       setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);

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

@@ -1,4 +1,5 @@
-import { resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
+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';
 var WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
@@ -9,18 +10,28 @@ var GUIDELINE_KEYS = {
   wide: 'wide',
   fullWidth: 'full_width'
 };
+var AK_NESTED_DND_GUTTER_OFFSET = 8;
 var roundToNearest = function roundToNearest(value) {
   var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
   return Math.round(value / interval) * interval;
 };
-export var getGuidelines = function getGuidelines(isResizing, newWidth, getEditorWidth, nodeType) {
+export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorWidth, nodeType) {
   var guidelines = [];
   if (!isResizing) {
     return guidelines;
   }
   var innerPaddingOffset = 0;
-  if (nodeType && nodeType.name === 'expand') {
-    innerPaddingOffset = resizerHandleThumbWidth;
+  if (nodeType) {
+    switch (nodeType.name) {
+      case 'expand':
+        innerPaddingOffset = EXPAND_CONTAINER_PADDING + resizerHandleThumbWidth + AK_NESTED_DND_GUTTER_OFFSET;
+        break;
+      case 'layoutSection':
+        innerPaddingOffset = LAYOUT_COLUMN_PADDING + AK_NESTED_DND_GUTTER_OFFSET;
+        break;
+      default:
+        break;
+    }
   }
   var _ref = getEditorWidth() || {},
     width = _ref.width,
@@ -75,4 +86,4 @@ export var getGuidelines = function getGuidelines(isResizing, newWidth, getEdito
     });
   }
   return guidelines;
-};
+});

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

@@ -5,7 +5,7 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref) {
   var onDragStart = _ref.onDragStart,
     onDrag = _ref.onDrag,
     _onDrop = _ref.onDrop;
-  var registerHandle = function registerHandle(handleElement) {
+  var registerHandle = function registerHandle(handleElement, handleSide) {
     return draggable({
       element: handleElement,
       onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
@@ -15,6 +15,11 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref) {
         });
         preventUnhandled.start();
       },
+      getInitialData: function getInitialData() {
+        return {
+          handleSide: handleSide
+        };
+      },
       onDragStart: onDragStart,
       onDrag: onDrag,
       onDrop: function onDrop(args) {
@@ -41,8 +46,8 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref) {
   };
   var rightHandle = createHandle('right');
   var leftHandle = createHandle('left');
-  var rightHandleCleanup = registerHandle(rightHandle);
-  var leftHandleCleanup = registerHandle(leftHandle);
+  var rightHandleCleanup = registerHandle(rightHandle, 'right');
+  var leftHandleCleanup = registerHandle(leftHandle, 'left');
   return {
     rightHandle: rightHandle,
     leftHandle: leftHandle,

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

@@ -11,13 +11,17 @@ export function getProposedWidth(_ref) {
   var _api$width$sharedStat;
   var initialWidth = _ref.initialWidth,
     location = _ref.location,
-    api = _ref.api;
-  var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
-  var proposedWidth = initialWidth + diffX;
+    api = _ref.api,
+    source = _ref.source;
+  var directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
+  var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
 
   // TODO: ED-28024 - add snapping logic
 
   var containerWidth = ((api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0) - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding;
+
+  // the node width may be greater than the container width so we resize using the smaller value
+  var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
   return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
 }
 export function createResizerCallbacks(_ref2) {
@@ -27,6 +31,7 @@ export function createResizerCallbacks(_ref2) {
     mark = _ref2.mark,
     api = _ref2.api;
   var node = null;
+  var guidelines = [];
   var getEditorWidth = function getEditorWidth() {
     var _api$width;
     return api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
@@ -41,14 +46,16 @@ export function createResizerCallbacks(_ref2) {
     },
     onDrag: function onDrag(_ref3) {
       var _node, _api$guideline;
-      var location = _ref3.location;
+      var location = _ref3.location,
+        source = _ref3.source;
       var initialWidth = mark.attrs.width;
       var newWidth = getProposedWidth({
         initialWidth: initialWidth,
         location: location,
-        api: api
+        api: api,
+        source: source
       });
-      var guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
+      guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
       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
       });
@@ -56,18 +63,23 @@ export function createResizerCallbacks(_ref2) {
     },
     onDrop: function onDrop(_ref4) {
       var _api$guideline2, _api$userIntent2;
-      var location = _ref4.location;
-      var guidelines = getGuidelines(false, 0, getEditorWidth);
+      var location = _ref4.location,
+        source = _ref4.source;
+      var isResizedToFullWidth = !!guidelines.find(function (guideline) {
+        return guideline.key.includes('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)({
         guidelines: guidelines
       });
       var pos = view.posAtDOM(dom, 0);
       var mode = mark.attrs.mode;
       var initialWidth = mark.attrs.width;
-      var newWidth = getProposedWidth({
+      var newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
         initialWidth: initialWidth,
         location: location,
-        api: api
+        api: api,
+        source: source
       });
       setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);

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

@@ -1,4 +1,4 @@
 import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { NodeType } from '@atlaskit/editor-prosemirror/model';
-export declare const getGuidelines: (isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[];
+export declare const getGuidelines: import("memoize-one").MemoizedFn<(isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[]>;

package/dist/types/pm-plugins/resizer-callbacks.d.ts

@@ -1,12 +1,14 @@
 import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Mark } from '@atlaskit/editor-prosemirror/model';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { BaseEventPayload, DragLocationHistory, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
 import { BreakoutPlugin } from '../breakoutPluginType';
-export declare function getProposedWidth({ initialWidth, location, api, }: {
+export declare function getProposedWidth({ initialWidth, location, api, source }: {
     initialWidth: number;
     location: DragLocationHistory;
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
+    source: ElementDragPayload;
 }): number;
 export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
     dom: HTMLElement;

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

@@ -1,4 +1,4 @@
 import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { NodeType } from '@atlaskit/editor-prosemirror/model';
-export declare const getGuidelines: (isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[];
+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/resizer-callbacks.d.ts

@@ -1,12 +1,14 @@
 import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Mark } from '@atlaskit/editor-prosemirror/model';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { BaseEventPayload, DragLocationHistory, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
 import { BreakoutPlugin } from '../breakoutPluginType';
-export declare function getProposedWidth({ initialWidth, location, api, }: {
+export declare function getProposedWidth({ initialWidth, location, api, source }: {
     initialWidth: number;
     location: DragLocationHistory;
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
+    source: ElementDragPayload;
 }): number;
 export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
     dom: HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.4.3",
+	"version": "2.5.1",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -48,10 +48,11 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.8.0",
+		"@atlaskit/tmp-editor-statsig": "^5.10.0",
 		"@atlaskit/tokens": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@emotion/react": "^11.7.1",
+		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0",