@atlaskit/editor-plugin-breakout 2.4.1 → 2.4.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.4.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.4.1
 
 ### Patch Changes

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.getGuidelines = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _resizerCallbacks = require("./resizer-callbacks");
+var WIDTHS = {
+  MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
+  MAX: _editorSharedStyles.akEditorFullWidthLayoutWidth
+};
 var GUIDELINE_KEYS = {
   lineLength: 'grid',
   wide: 'wide',
@@ -30,7 +33,7 @@ var getGuidelines = exports.getGuidelines = function getGuidelines(isResizing, n
     lineLength = _ref.lineLength;
   // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
   var wide = _editorSharedStyles.akEditorCalculatedWideLayoutWidth;
-  var fullWidth = width ? Math.min(_resizerCallbacks.WIDTHS.MAX, width - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding) : undefined;
+  var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding) : undefined;
   if (lineLength) {
     guidelines.push({
       key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPragmaticResizer = void 0;
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
+var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
+var createPragmaticResizer = exports.createPragmaticResizer = function createPragmaticResizer(_ref) {
+  var onDragStart = _ref.onDragStart,
+    onDrag = _ref.onDrag,
+    _onDrop = _ref.onDrop;
+  var registerHandle = function registerHandle(handleElement) {
+    return (0, _adapter.draggable)({
+      element: handleElement,
+      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+        var nativeSetDragImage = _ref2.nativeSetDragImage;
+        (0, _disableNativeDragPreview.disableNativeDragPreview)({
+          nativeSetDragImage: nativeSetDragImage
+        });
+        _preventUnhandled.preventUnhandled.start();
+      },
+      onDragStart: onDragStart,
+      onDrag: onDrag,
+      onDrop: function onDrop(args) {
+        _preventUnhandled.preventUnhandled.stop();
+        _onDrop(args);
+      }
+    });
+  };
+  var createHandle = function createHandle(side) {
+    var handle = document.createElement('div');
+    handle.contentEditable = 'false';
+    handle.classList.add('pm-breakout-resize-handle');
+    if (side === 'left') {
+      handle.classList.add('pm-breakout-resize-handle-left');
+      handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
+    } else {
+      handle.classList.add('pm-breakout-resize-handle-right');
+      handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
+    }
+    var handleInner = document.createElement('div');
+    handleInner.classList.add('pm-breakout-resize-handle-inner');
+    handle.appendChild(handleInner);
+    return handle;
+  };
+  var rightHandle = createHandle('right');
+  var leftHandle = createHandle('left');
+  var rightHandleCleanup = registerHandle(rightHandle);
+  var leftHandleCleanup = registerHandle(leftHandle);
+  return {
+    rightHandle: rightHandle,
+    leftHandle: leftHandle,
+    destroy: function destroy() {
+      rightHandleCleanup();
+      leftHandleCleanup();
+    }
+  };
+};

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

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WIDTHS = void 0;
 exports.createResizerCallbacks = createResizerCallbacks;
+exports.getProposedWidth = getProposedWidth;
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
 var _getGuidelines = require("./get-guidelines");
 var _resizingMarkView = require("./resizing-mark-view");
 var RESIZE_RATIO = 2;
-var WIDTHS = exports.WIDTHS = {
-  MIN: 760,
-  MAX: 1800
+var WIDTHS = {
+  MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
+  MAX: _editorSharedStyles.akEditorFullWidthLayoutWidth
 };
 function getProposedWidth(_ref) {
   var _api$width$sharedStat;

package/dist/cjs/pm-plugins/resizing-mark-view.js

@@ -8,15 +8,9 @@ exports.ResizingMarkView = exports.LOCAL_RESIZE_PROPERTY = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _styles = require("@atlaskit/editor-common/styles");
-var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
-var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
+var _pragmaticResizer = require("./pragmatic-resizer");
 var _resizerCallbacks = require("./resizer-callbacks");
 var LOCAL_RESIZE_PROPERTY = exports.LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
-
-/**
- *
- */
 var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
   /**
    * Wrap node view in a resizing mark view
@@ -62,7 +56,7 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
       mark: mark,
       api: api
     });
-    var _createPragmaticResiz = createPragmaticResizer(callbacks),
+    var _createPragmaticResiz = (0, _pragmaticResizer.createPragmaticResizer)(callbacks),
       leftHandle = _createPragmaticResiz.leftHandle,
       rightHandle = _createPragmaticResiz.rightHandle,
       destroy = _createPragmaticResiz.destroy;
@@ -74,74 +68,15 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
     this.mark = mark;
     this.destroyFn = destroy;
   }
-
-  /**
-   *
-   * @example
-   */
   return (0, _createClass2.default)(ResizingMarkView, [{
     key: "ignoreMutation",
     value: function ignoreMutation() {
       return true;
     }
-
-    /**
-     *
-     * @example
-     */
   }, {
     key: "destroy",
     value: function destroy() {
       this.destroyFn();
     }
   }]);
-}();
-var createPragmaticResizer = function createPragmaticResizer(_ref) {
-  var onDragStart = _ref.onDragStart,
-    onDrag = _ref.onDrag,
-    _onDrop = _ref.onDrop;
-  var registerHandle = function registerHandle(handleElement) {
-    return (0, _adapter.draggable)({
-      element: handleElement,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
-        var nativeSetDragImage = _ref2.nativeSetDragImage;
-        (0, _disableNativeDragPreview.disableNativeDragPreview)({
-          nativeSetDragImage: nativeSetDragImage
-        });
-        _preventUnhandled.preventUnhandled.start();
-      },
-      onDragStart: onDragStart,
-      onDrag: onDrag,
-      onDrop: function onDrop(args) {
-        _preventUnhandled.preventUnhandled.stop();
-        _onDrop(args);
-      }
-    });
-  };
-  var createHandle = function createHandle(side) {
-    var handle = document.createElement('div');
-    handle.contentEditable = 'false';
-    handle.classList.add('pm-breakout-resize-handle');
-    if (side === 'left') {
-      handle.classList.add('pm-breakout-resize-handle-left');
-    } else {
-      handle.classList.add('pm-breakout-resize-handle-right');
-    }
-    var handleInner = document.createElement('div');
-    handleInner.classList.add('pm-breakout-resize-handle-inner');
-    handle.appendChild(handleInner);
-    return handle;
-  };
-  var rightHandle = createHandle('right');
-  var leftHandle = createHandle('left');
-  var rightHandleCleanup = registerHandle(rightHandle);
-  var leftHandleCleanup = registerHandle(leftHandle);
-  return {
-    rightHandle: rightHandle,
-    leftHandle: leftHandle,
-    destroy: function destroy() {
-      rightHandleCleanup();
-      leftHandleCleanup();
-    }
-  };
-};
+}();

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

@@ -1,6 +1,9 @@
 import { resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { WIDTHS } from './resizer-callbacks';
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+const WIDTHS = {
+  MIN: akEditorDefaultLayoutWidth,
+  MAX: akEditorFullWidthLayoutWidth
+};
 const GUIDELINE_KEYS = {
   lineLength: 'grid',
   wide: 'wide',

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

@@ -0,0 +1,56 @@
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+export const createPragmaticResizer = ({
+  onDragStart,
+  onDrag,
+  onDrop
+}) => {
+  const registerHandle = handleElement => {
+    return draggable({
+      element: handleElement,
+      onGenerateDragPreview: ({
+        nativeSetDragImage
+      }) => {
+        disableNativeDragPreview({
+          nativeSetDragImage
+        });
+        preventUnhandled.start();
+      },
+      onDragStart,
+      onDrag,
+      onDrop(args) {
+        preventUnhandled.stop();
+        onDrop(args);
+      }
+    });
+  };
+  const createHandle = side => {
+    const handle = document.createElement('div');
+    handle.contentEditable = 'false';
+    handle.classList.add('pm-breakout-resize-handle');
+    if (side === 'left') {
+      handle.classList.add('pm-breakout-resize-handle-left');
+      handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
+    } else {
+      handle.classList.add('pm-breakout-resize-handle-right');
+      handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
+    }
+    const handleInner = document.createElement('div');
+    handleInner.classList.add('pm-breakout-resize-handle-inner');
+    handle.appendChild(handleInner);
+    return handle;
+  };
+  const rightHandle = createHandle('right');
+  const leftHandle = createHandle('left');
+  const rightHandleCleanup = registerHandle(rightHandle);
+  const leftHandleCleanup = registerHandle(leftHandle);
+  return {
+    rightHandle,
+    leftHandle,
+    destroy: () => {
+      rightHandleCleanup();
+      leftHandleCleanup();
+    }
+  };
+};

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

@@ -1,13 +1,13 @@
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
 import { getGuidelines } from './get-guidelines';
 import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
 const RESIZE_RATIO = 2;
-export const WIDTHS = {
-  MIN: 760,
-  MAX: 1800
+const WIDTHS = {
+  MIN: akEditorDefaultLayoutWidth,
+  MAX: akEditorFullWidthLayoutWidth
 };
-function getProposedWidth({
+export function getProposedWidth({
   initialWidth,
   location,
   api

package/dist/es2019/pm-plugins/resizing-mark-view.js

@@ -1,13 +1,7 @@
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
-import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { createPragmaticResizer } from './pragmatic-resizer';
 import { createResizerCallbacks } from './resizer-callbacks';
 export const LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
-
-/**
- *
- */
 export class ResizingMarkView {
   /**
    * Wrap node view in a resizing mark view
@@ -65,71 +59,10 @@ export class ResizingMarkView {
     this.mark = mark;
     this.destroyFn = destroy;
   }
-
-  /**
-   *
-   * @example
-   */
   ignoreMutation() {
     return true;
   }
-
-  /**
-   *
-   * @example
-   */
   destroy() {
     this.destroyFn();
   }
-}
-const createPragmaticResizer = ({
-  onDragStart,
-  onDrag,
-  onDrop
-}) => {
-  const registerHandle = handleElement => {
-    return draggable({
-      element: handleElement,
-      onGenerateDragPreview: ({
-        nativeSetDragImage
-      }) => {
-        disableNativeDragPreview({
-          nativeSetDragImage
-        });
-        preventUnhandled.start();
-      },
-      onDragStart,
-      onDrag,
-      onDrop(args) {
-        preventUnhandled.stop();
-        onDrop(args);
-      }
-    });
-  };
-  const createHandle = side => {
-    const handle = document.createElement('div');
-    handle.contentEditable = 'false';
-    handle.classList.add('pm-breakout-resize-handle');
-    if (side === 'left') {
-      handle.classList.add('pm-breakout-resize-handle-left');
-    } else {
-      handle.classList.add('pm-breakout-resize-handle-right');
-    }
-    const handleInner = document.createElement('div');
-    handleInner.classList.add('pm-breakout-resize-handle-inner');
-    handle.appendChild(handleInner);
-    return handle;
-  };
-  const rightHandle = createHandle('right');
-  const leftHandle = createHandle('left');
-  const rightHandleCleanup = registerHandle(rightHandle);
-  const leftHandleCleanup = registerHandle(leftHandle);
-  return {
-    rightHandle,
-    leftHandle,
-    destroy: () => {
-      rightHandleCleanup();
-      leftHandleCleanup();
-    }
-  };
-};
+}

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

@@ -1,6 +1,9 @@
 import { resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { WIDTHS } from './resizer-callbacks';
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+var WIDTHS = {
+  MIN: akEditorDefaultLayoutWidth,
+  MAX: akEditorFullWidthLayoutWidth
+};
 var GUIDELINE_KEYS = {
   lineLength: 'grid',
   wide: 'wide',

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

@@ -0,0 +1,54 @@
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+export var createPragmaticResizer = function createPragmaticResizer(_ref) {
+  var onDragStart = _ref.onDragStart,
+    onDrag = _ref.onDrag,
+    _onDrop = _ref.onDrop;
+  var registerHandle = function registerHandle(handleElement) {
+    return draggable({
+      element: handleElement,
+      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+        var nativeSetDragImage = _ref2.nativeSetDragImage;
+        disableNativeDragPreview({
+          nativeSetDragImage: nativeSetDragImage
+        });
+        preventUnhandled.start();
+      },
+      onDragStart: onDragStart,
+      onDrag: onDrag,
+      onDrop: function onDrop(args) {
+        preventUnhandled.stop();
+        _onDrop(args);
+      }
+    });
+  };
+  var createHandle = function createHandle(side) {
+    var handle = document.createElement('div');
+    handle.contentEditable = 'false';
+    handle.classList.add('pm-breakout-resize-handle');
+    if (side === 'left') {
+      handle.classList.add('pm-breakout-resize-handle-left');
+      handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
+    } else {
+      handle.classList.add('pm-breakout-resize-handle-right');
+      handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
+    }
+    var handleInner = document.createElement('div');
+    handleInner.classList.add('pm-breakout-resize-handle-inner');
+    handle.appendChild(handleInner);
+    return handle;
+  };
+  var rightHandle = createHandle('right');
+  var leftHandle = createHandle('left');
+  var rightHandleCleanup = registerHandle(rightHandle);
+  var leftHandleCleanup = registerHandle(leftHandle);
+  return {
+    rightHandle: rightHandle,
+    leftHandle: leftHandle,
+    destroy: function destroy() {
+      rightHandleCleanup();
+      leftHandleCleanup();
+    }
+  };
+};

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

@@ -1,13 +1,13 @@
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
 import { getGuidelines } from './get-guidelines';
 import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
 var RESIZE_RATIO = 2;
-export var WIDTHS = {
-  MIN: 760,
-  MAX: 1800
+var WIDTHS = {
+  MIN: akEditorDefaultLayoutWidth,
+  MAX: akEditorFullWidthLayoutWidth
 };
-function getProposedWidth(_ref) {
+export function getProposedWidth(_ref) {
   var _api$width$sharedStat;
   var initialWidth = _ref.initialWidth,
     location = _ref.location,

package/dist/esm/pm-plugins/resizing-mark-view.js

@@ -1,15 +1,9 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
-import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { createPragmaticResizer } from './pragmatic-resizer';
 import { createResizerCallbacks } from './resizer-callbacks';
 export var LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
-
-/**
- *
- */
 export var ResizingMarkView = /*#__PURE__*/function () {
   /**
    * Wrap node view in a resizing mark view
@@ -67,74 +61,15 @@ export var ResizingMarkView = /*#__PURE__*/function () {
     this.mark = mark;
     this.destroyFn = destroy;
   }
-
-  /**
-   *
-   * @example
-   */
   return _createClass(ResizingMarkView, [{
     key: "ignoreMutation",
     value: function ignoreMutation() {
       return true;
     }
-
-    /**
-     *
-     * @example
-     */
   }, {
     key: "destroy",
     value: function destroy() {
       this.destroyFn();
     }
   }]);
-}();
-var createPragmaticResizer = function createPragmaticResizer(_ref) {
-  var onDragStart = _ref.onDragStart,
-    onDrag = _ref.onDrag,
-    _onDrop = _ref.onDrop;
-  var registerHandle = function registerHandle(handleElement) {
-    return draggable({
-      element: handleElement,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
-        var nativeSetDragImage = _ref2.nativeSetDragImage;
-        disableNativeDragPreview({
-          nativeSetDragImage: nativeSetDragImage
-        });
-        preventUnhandled.start();
-      },
-      onDragStart: onDragStart,
-      onDrag: onDrag,
-      onDrop: function onDrop(args) {
-        preventUnhandled.stop();
-        _onDrop(args);
-      }
-    });
-  };
-  var createHandle = function createHandle(side) {
-    var handle = document.createElement('div');
-    handle.contentEditable = 'false';
-    handle.classList.add('pm-breakout-resize-handle');
-    if (side === 'left') {
-      handle.classList.add('pm-breakout-resize-handle-left');
-    } else {
-      handle.classList.add('pm-breakout-resize-handle-right');
-    }
-    var handleInner = document.createElement('div');
-    handleInner.classList.add('pm-breakout-resize-handle-inner');
-    handle.appendChild(handleInner);
-    return handle;
-  };
-  var rightHandle = createHandle('right');
-  var leftHandle = createHandle('left');
-  var rightHandleCleanup = registerHandle(rightHandle);
-  var leftHandleCleanup = registerHandle(leftHandle);
-  return {
-    rightHandle: rightHandle,
-    leftHandle: leftHandle,
-    destroy: function destroy() {
-      rightHandleCleanup();
-      leftHandleCleanup();
-    }
-  };
-};
+}();

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

@@ -0,0 +1,10 @@
+import type { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
+export declare const createPragmaticResizer: ({ onDragStart, onDrag, onDrop, }: {
+    onDragStart: () => void;
+    onDrag: (args: BaseEventPayload<ElementDragType>) => void;
+    onDrop: (args: BaseEventPayload<ElementDragType>) => void;
+}) => {
+    rightHandle: HTMLDivElement;
+    leftHandle: HTMLDivElement;
+    destroy: () => void;
+};

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

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

package/dist/types/pm-plugins/resizing-mark-view.d.ts

@@ -3,9 +3,6 @@ import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { BreakoutPlugin } from '../breakoutPluginType';
 export declare const LOCAL_RESIZE_PROPERTY = "--local-resizing-width";
-/**
- *
- */
 export declare class ResizingMarkView implements NodeView {
     dom: HTMLElement;
     contentDOM: HTMLElement;
@@ -22,14 +19,6 @@ export declare class ResizingMarkView implements NodeView {
      * ```
      */
     constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined);
-    /**
-     *
-     * @example
-     */
     ignoreMutation(): boolean;
-    /**
-     *
-     * @example
-     */
     destroy(): void;
 }

package/dist/types-ts4.5/pm-plugins/pragmatic-resizer.d.ts

@@ -0,0 +1,10 @@
+import type { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
+export declare const createPragmaticResizer: ({ onDragStart, onDrag, onDrop, }: {
+    onDragStart: () => void;
+    onDrag: (args: BaseEventPayload<ElementDragType>) => void;
+    onDrop: (args: BaseEventPayload<ElementDragType>) => void;
+}) => {
+    rightHandle: HTMLDivElement;
+    leftHandle: HTMLDivElement;
+    destroy: () => void;
+};

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

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

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

@@ -3,9 +3,6 @@ import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { BreakoutPlugin } from '../breakoutPluginType';
 export declare const LOCAL_RESIZE_PROPERTY = "--local-resizing-width";
-/**
- *
- */
 export declare class ResizingMarkView implements NodeView {
     dom: HTMLElement;
     contentDOM: HTMLElement;
@@ -22,14 +19,6 @@ export declare class ResizingMarkView implements NodeView {
      * ```
      */
     constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined);
-    /**
-     *
-     * @example
-     */
     ignoreMutation(): boolean;
-    /**
-     *
-     * @example
-     */
     destroy(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.4.1",
+	"version": "2.4.2",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
-		"@atlaskit/editor-plugin-interaction": "^1.1.0",
+		"@atlaskit/editor-plugin-interaction": "^2.0.0",
 		"@atlaskit/editor-plugin-user-intent": "^0.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -48,8 +48,8 @@
 		"@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.6.0",
-		"@atlaskit/tokens": "^4.9.0",
+		"@atlaskit/tmp-editor-statsig": "^5.7.0",
+		"@atlaskit/tokens": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},