@atlaskit/editor-plugin-breakout 2.5.1 → 2.5.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.5.2
+
+### Patch Changes
+
+- [#164895](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164895)
+  [`e8158addf8fda`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8158addf8fda) -
+  Add platform_editor_breakout_resizing_hello_release fg - add snapping logic for pragmatic resizer
+- Updated dependencies
+
 ## 2.5.1
 
 ### Patch Changes

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

@@ -10,6 +10,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var WIDTHS = {
   MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
+  WIDE: _editorSharedStyles.akEditorCalculatedWideLayoutWidth,
   MAX: _editorSharedStyles.akEditorFullWidthLayoutWidth
 };
 var GUIDELINE_KEYS = {
@@ -44,7 +45,6 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
     width = _ref.width,
     lineLength = _ref.lineLength;
   // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
-  var wide = _editorSharedStyles.akEditorCalculatedWideLayoutWidth;
   var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding) : undefined;
   if (lineLength) {
     guidelines.push({
@@ -65,16 +65,16 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
   guidelines.push({
     key: "".concat(GUIDELINE_KEYS.wide, "_left"),
     position: {
-      x: -roundToNearest(wide / 2 + innerPaddingOffset)
+      x: -roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
     },
-    active: newWidth === wide
+    active: newWidth === WIDTHS.WIDE
   });
   guidelines.push({
     key: "".concat(GUIDELINE_KEYS.wide, "_right"),
     position: {
-      x: roundToNearest(wide / 2 + innerPaddingOffset)
+      x: roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
     },
-    active: newWidth === wide
+    active: newWidth === WIDTHS.WIDE
   });
   if (fullWidth) {
     guidelines.push({

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

@@ -1,16 +1,49 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createPragmaticResizer = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _bindEventListener = require("bind-event-listener");
 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,
+  var target = _ref.target,
+    _onDragStart = _ref.onDragStart,
     onDrag = _ref.onDrag,
     _onDrop = _ref.onDrop;
+  var state = 'default';
+  var createHandle = function createHandle(side) {
+    var handle = document.createElement('div');
+    handle.contentEditable = 'false';
+    handle.classList.add('pm-breakout-resize-handle-container');
+    var rail = document.createElement('div');
+    rail.classList.add('pm-breakout-resize-handle-rail');
+    if (side === 'left') {
+      handle.classList.add('pm-breakout-resize-handle-container--left');
+      handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
+    } else {
+      handle.classList.add('pm-breakout-resize-handle-container--right');
+      handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
+    }
+    var handleHitBox = document.createElement('div');
+    handleHitBox.classList.add('pm-breakout-resize-handle-hit-box');
+    var thumb = document.createElement('div');
+    thumb.classList.add('pm-breakout-resize-handle-thumb');
+    rail.appendChild(thumb);
+    handle.appendChild(rail);
+    handle.appendChild(handleHitBox);
+    return {
+      handle: handle,
+      rail: rail,
+      handleHitBox: handleHitBox
+    };
+  };
+  var rightHandle = createHandle('right');
+  var leftHandle = createHandle('left');
   var registerHandle = function registerHandle(handleElement, handleSide) {
     return (0, _adapter.draggable)({
       element: handleElement,
@@ -26,40 +59,50 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
           handleSide: handleSide
         };
       },
-      onDragStart: onDragStart,
+      onDragStart: function onDragStart(args) {
+        state = 'resizing';
+        handleElement.classList.add('pm-breakout-resize-handle-container--active');
+        _onDragStart(args);
+      },
       onDrag: onDrag,
       onDrop: function onDrop(args) {
         _preventUnhandled.preventUnhandled.stop();
+        state = 'default';
+        handleElement.classList.remove('pm-breakout-resize-handle-container--active');
         _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 registerEvents = function registerEvents(element) {
+    return [(0, _bindEventListener.bind)(element, {
+      type: 'mouseenter',
+      listener: function listener() {
+        rightHandle.rail.style.setProperty('opacity', '1');
+        leftHandle.rail.style.setProperty('opacity', '1');
+      }
+    }), (0, _bindEventListener.bind)(element, {
+      type: 'mouseleave',
+      listener: function listener() {
+        if (state === 'resizing') {
+          return;
+        }
+        rightHandle.rail.style.removeProperty('opacity');
+        leftHandle.rail.style.removeProperty('opacity');
+      }
+    })];
   };
-  var rightHandle = createHandle('right');
-  var leftHandle = createHandle('left');
-  var rightHandleCleanup = registerHandle(rightHandle, 'right');
-  var leftHandleCleanup = registerHandle(leftHandle, 'left');
+  var unbindFns = [].concat((0, _toConsumableArray2.default)(registerEvents(target)), (0, _toConsumableArray2.default)(registerEvents(rightHandle.handleHitBox)), (0, _toConsumableArray2.default)(registerEvents(leftHandle.handleHitBox)), (0, _toConsumableArray2.default)(registerEvents(rightHandle.rail)), (0, _toConsumableArray2.default)(registerEvents(leftHandle.rail)));
+  var destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left')];
   return {
-    rightHandle: rightHandle,
-    leftHandle: leftHandle,
+    rightHandle: rightHandle.handle,
+    leftHandle: leftHandle.handle,
     destroy: function destroy() {
-      rightHandleCleanup();
-      leftHandleCleanup();
+      destroyFns.forEach(function (destroyFn) {
+        return destroyFn();
+      });
+      unbindFns.forEach(function (unbindFn) {
+        return unbindFn();
+      });
     }
   };
 };

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

@@ -6,12 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.createResizerCallbacks = createResizerCallbacks;
 exports.getProposedWidth = getProposedWidth;
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
 var _getGuidelines = require("./get-guidelines");
 var _resizingMarkView = require("./resizing-mark-view");
 var RESIZE_RATIO = 2;
+var SNAP_GAP = 10;
 var WIDTHS = {
   MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
+  WIDE: _editorSharedStyles.akEditorCalculatedWideLayoutWidth,
   MAX: _editorSharedStyles.akEditorFullWidthLayoutWidth
 };
 function getProposedWidth(_ref) {
@@ -22,13 +25,19 @@ function getProposedWidth(_ref) {
     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;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+    var snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.MAX)];
+    for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
+      var snapPoint = _snapPoints[_i];
+      if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
+        return snapPoint;
+      }
+    }
+  }
   return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
 }
 function createResizerCallbacks(_ref2) {

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

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ResizingMarkView = exports.LOCAL_RESIZE_PROPERTY = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _pragmaticResizer = require("./pragmatic-resizer");
 var _resizerCallbacks = require("./resizer-callbacks");
+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 LOCAL_RESIZE_PROPERTY = exports.LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
 var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
   /**
@@ -38,6 +41,7 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
     // contentDOM - styles
     contentDOM.style.gridRow = '1';
     contentDOM.style.gridColumn = '1';
+    contentDOM.style.zIndex = '1';
     if (mark.attrs.width) {
       contentDOM.style.minWidth = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
     } else {
@@ -56,7 +60,9 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
       mark: mark,
       api: api
     });
-    var _createPragmaticResiz = (0, _pragmaticResizer.createPragmaticResizer)(callbacks),
+    var _createPragmaticResiz = (0, _pragmaticResizer.createPragmaticResizer)(_objectSpread({
+        target: contentDOM
+      }, callbacks)),
       leftHandle = _createPragmaticResiz.leftHandle,
       rightHandle = _createPragmaticResiz.rightHandle,
       destroy = _createPragmaticResiz.destroy;

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

@@ -3,6 +3,7 @@ import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidt
 import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 const WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
+  WIDE: akEditorCalculatedWideLayoutWidth,
   MAX: akEditorFullWidthLayoutWidth
 };
 const GUIDELINE_KEYS = {
@@ -35,7 +36,6 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
     lineLength
   } = getEditorWidth() || {};
   // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
-  const wide = akEditorCalculatedWideLayoutWidth;
   const fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
   if (lineLength) {
     guidelines.push({
@@ -56,16 +56,16 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
   guidelines.push({
     key: `${GUIDELINE_KEYS.wide}_left`,
     position: {
-      x: -roundToNearest(wide / 2 + innerPaddingOffset)
+      x: -roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
     },
-    active: newWidth === wide
+    active: newWidth === WIDTHS.WIDE
   });
   guidelines.push({
     key: `${GUIDELINE_KEYS.wide}_right`,
     position: {
-      x: roundToNearest(wide / 2 + innerPaddingOffset)
+      x: roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
     },
-    active: newWidth === wide
+    active: newWidth === WIDTHS.WIDE
   });
   if (fullWidth) {
     guidelines.push({

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

@@ -1,11 +1,42 @@
+import { bind } from 'bind-event-listener';
 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 = ({
+  target,
   onDragStart,
   onDrag,
   onDrop
 }) => {
+  let state = 'default';
+  const createHandle = side => {
+    const handle = document.createElement('div');
+    handle.contentEditable = 'false';
+    handle.classList.add('pm-breakout-resize-handle-container');
+    const rail = document.createElement('div');
+    rail.classList.add('pm-breakout-resize-handle-rail');
+    if (side === 'left') {
+      handle.classList.add('pm-breakout-resize-handle-container--left');
+      handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
+    } else {
+      handle.classList.add('pm-breakout-resize-handle-container--right');
+      handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
+    }
+    const handleHitBox = document.createElement('div');
+    handleHitBox.classList.add('pm-breakout-resize-handle-hit-box');
+    const thumb = document.createElement('div');
+    thumb.classList.add('pm-breakout-resize-handle-thumb');
+    rail.appendChild(thumb);
+    handle.appendChild(rail);
+    handle.appendChild(handleHitBox);
+    return {
+      handle,
+      rail,
+      handleHitBox
+    };
+  };
+  const rightHandle = createHandle('right');
+  const leftHandle = createHandle('left');
   const registerHandle = (handleElement, handleSide) => {
     return draggable({
       element: handleElement,
@@ -20,40 +51,46 @@ export const createPragmaticResizer = ({
       getInitialData: () => ({
         handleSide
       }),
-      onDragStart,
+      onDragStart(args) {
+        state = 'resizing';
+        handleElement.classList.add('pm-breakout-resize-handle-container--active');
+        onDragStart(args);
+      },
       onDrag,
       onDrop(args) {
         preventUnhandled.stop();
+        state = 'default';
+        handleElement.classList.remove('pm-breakout-resize-handle-container--active');
         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 registerEvents = element => {
+    return [bind(element, {
+      type: 'mouseenter',
+      listener: () => {
+        rightHandle.rail.style.setProperty('opacity', '1');
+        leftHandle.rail.style.setProperty('opacity', '1');
+      }
+    }), bind(element, {
+      type: 'mouseleave',
+      listener: () => {
+        if (state === 'resizing') {
+          return;
+        }
+        rightHandle.rail.style.removeProperty('opacity');
+        leftHandle.rail.style.removeProperty('opacity');
+      }
+    })];
   };
-  const rightHandle = createHandle('right');
-  const leftHandle = createHandle('left');
-  const rightHandleCleanup = registerHandle(rightHandle, 'right');
-  const leftHandleCleanup = registerHandle(leftHandle, 'left');
+  const unbindFns = [...registerEvents(target), ...registerEvents(rightHandle.handleHitBox), ...registerEvents(leftHandle.handleHitBox), ...registerEvents(rightHandle.rail), ...registerEvents(leftHandle.rail)];
+  const destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left')];
   return {
-    rightHandle,
-    leftHandle,
+    rightHandle: rightHandle.handle,
+    leftHandle: leftHandle.handle,
     destroy: () => {
-      rightHandleCleanup();
-      leftHandleCleanup();
+      destroyFns.forEach(destroyFn => destroyFn());
+      unbindFns.forEach(unbindFn => unbindFn());
     }
   };
 };

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

@@ -1,10 +1,13 @@
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+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';
 const RESIZE_RATIO = 2;
+const SNAP_GAP = 10;
 const WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
+  WIDE: akEditorCalculatedWideLayoutWidth,
   MAX: akEditorFullWidthLayoutWidth
 };
 export function getProposedWidth({
@@ -16,13 +19,18 @@ export function getProposedWidth({
   var _api$width$sharedStat, _api$width$sharedStat2;
   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;
+  if (fg('platform_editor_breakout_resizing_hello_release')) {
+    const snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.MAX)];
+    for (const snapPoint of snapPoints) {
+      if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
+        return snapPoint;
+      }
+    }
+  }
   return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
 }
 export function createResizerCallbacks({

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

@@ -28,6 +28,7 @@ export class ResizingMarkView {
     // contentDOM - styles
     contentDOM.style.gridRow = '1';
     contentDOM.style.gridColumn = '1';
+    contentDOM.style.zIndex = '1';
     if (mark.attrs.width) {
       contentDOM.style.minWidth = `min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
     } else {
@@ -50,7 +51,10 @@ export class ResizingMarkView {
       leftHandle,
       rightHandle,
       destroy
-    } = createPragmaticResizer(callbacks);
+    } = createPragmaticResizer({
+      target: contentDOM,
+      ...callbacks
+    });
     dom.prepend(leftHandle);
     dom.appendChild(rightHandle);
     this.dom = dom;

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

@@ -3,6 +3,7 @@ import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidt
 import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 var WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
+  WIDE: akEditorCalculatedWideLayoutWidth,
   MAX: akEditorFullWidthLayoutWidth
 };
 var GUIDELINE_KEYS = {
@@ -37,7 +38,6 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
     width = _ref.width,
     lineLength = _ref.lineLength;
   // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
-  var wide = akEditorCalculatedWideLayoutWidth;
   var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
   if (lineLength) {
     guidelines.push({
@@ -58,16 +58,16 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
   guidelines.push({
     key: "".concat(GUIDELINE_KEYS.wide, "_left"),
     position: {
-      x: -roundToNearest(wide / 2 + innerPaddingOffset)
+      x: -roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
     },
-    active: newWidth === wide
+    active: newWidth === WIDTHS.WIDE
   });
   guidelines.push({
     key: "".concat(GUIDELINE_KEYS.wide, "_right"),
     position: {
-      x: roundToNearest(wide / 2 + innerPaddingOffset)
+      x: roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
     },
-    active: newWidth === wide
+    active: newWidth === WIDTHS.WIDE
   });
   if (fullWidth) {
     guidelines.push({

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

@@ -1,10 +1,42 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { bind } from 'bind-event-listener';
 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,
+  var target = _ref.target,
+    _onDragStart = _ref.onDragStart,
     onDrag = _ref.onDrag,
     _onDrop = _ref.onDrop;
+  var state = 'default';
+  var createHandle = function createHandle(side) {
+    var handle = document.createElement('div');
+    handle.contentEditable = 'false';
+    handle.classList.add('pm-breakout-resize-handle-container');
+    var rail = document.createElement('div');
+    rail.classList.add('pm-breakout-resize-handle-rail');
+    if (side === 'left') {
+      handle.classList.add('pm-breakout-resize-handle-container--left');
+      handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
+    } else {
+      handle.classList.add('pm-breakout-resize-handle-container--right');
+      handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
+    }
+    var handleHitBox = document.createElement('div');
+    handleHitBox.classList.add('pm-breakout-resize-handle-hit-box');
+    var thumb = document.createElement('div');
+    thumb.classList.add('pm-breakout-resize-handle-thumb');
+    rail.appendChild(thumb);
+    handle.appendChild(rail);
+    handle.appendChild(handleHitBox);
+    return {
+      handle: handle,
+      rail: rail,
+      handleHitBox: handleHitBox
+    };
+  };
+  var rightHandle = createHandle('right');
+  var leftHandle = createHandle('left');
   var registerHandle = function registerHandle(handleElement, handleSide) {
     return draggable({
       element: handleElement,
@@ -20,40 +52,50 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref) {
           handleSide: handleSide
         };
       },
-      onDragStart: onDragStart,
+      onDragStart: function onDragStart(args) {
+        state = 'resizing';
+        handleElement.classList.add('pm-breakout-resize-handle-container--active');
+        _onDragStart(args);
+      },
       onDrag: onDrag,
       onDrop: function onDrop(args) {
         preventUnhandled.stop();
+        state = 'default';
+        handleElement.classList.remove('pm-breakout-resize-handle-container--active');
         _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 registerEvents = function registerEvents(element) {
+    return [bind(element, {
+      type: 'mouseenter',
+      listener: function listener() {
+        rightHandle.rail.style.setProperty('opacity', '1');
+        leftHandle.rail.style.setProperty('opacity', '1');
+      }
+    }), bind(element, {
+      type: 'mouseleave',
+      listener: function listener() {
+        if (state === 'resizing') {
+          return;
+        }
+        rightHandle.rail.style.removeProperty('opacity');
+        leftHandle.rail.style.removeProperty('opacity');
+      }
+    })];
   };
-  var rightHandle = createHandle('right');
-  var leftHandle = createHandle('left');
-  var rightHandleCleanup = registerHandle(rightHandle, 'right');
-  var leftHandleCleanup = registerHandle(leftHandle, 'left');
+  var unbindFns = [].concat(_toConsumableArray(registerEvents(target)), _toConsumableArray(registerEvents(rightHandle.handleHitBox)), _toConsumableArray(registerEvents(leftHandle.handleHitBox)), _toConsumableArray(registerEvents(rightHandle.rail)), _toConsumableArray(registerEvents(leftHandle.rail)));
+  var destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left')];
   return {
-    rightHandle: rightHandle,
-    leftHandle: leftHandle,
+    rightHandle: rightHandle.handle,
+    leftHandle: leftHandle.handle,
     destroy: function destroy() {
-      rightHandleCleanup();
-      leftHandleCleanup();
+      destroyFns.forEach(function (destroyFn) {
+        return destroyFn();
+      });
+      unbindFns.forEach(function (unbindFn) {
+        return unbindFn();
+      });
     }
   };
 };

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

@@ -1,10 +1,13 @@
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+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';
 var RESIZE_RATIO = 2;
+var SNAP_GAP = 10;
 var WIDTHS = {
   MIN: akEditorDefaultLayoutWidth,
+  WIDE: akEditorCalculatedWideLayoutWidth,
   MAX: akEditorFullWidthLayoutWidth
 };
 export function getProposedWidth(_ref) {
@@ -15,13 +18,19 @@ export function getProposedWidth(_ref) {
     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;
+  if (fg('platform_editor_breakout_resizing_hello_release')) {
+    var snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.MAX)];
+    for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
+      var snapPoint = _snapPoints[_i];
+      if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
+        return snapPoint;
+      }
+    }
+  }
   return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
 }
 export function createResizerCallbacks(_ref2) {

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

@@ -1,5 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+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 { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
 import { createPragmaticResizer } from './pragmatic-resizer';
 import { createResizerCallbacks } from './resizer-callbacks';
@@ -31,6 +34,7 @@ export var ResizingMarkView = /*#__PURE__*/function () {
     // contentDOM - styles
     contentDOM.style.gridRow = '1';
     contentDOM.style.gridColumn = '1';
+    contentDOM.style.zIndex = '1';
     if (mark.attrs.width) {
       contentDOM.style.minWidth = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
     } else {
@@ -49,7 +53,9 @@ export var ResizingMarkView = /*#__PURE__*/function () {
       mark: mark,
       api: api
     });
-    var _createPragmaticResiz = createPragmaticResizer(callbacks),
+    var _createPragmaticResiz = createPragmaticResizer(_objectSpread({
+        target: contentDOM
+      }, callbacks)),
       leftHandle = _createPragmaticResiz.leftHandle,
       rightHandle = _createPragmaticResiz.rightHandle,
       destroy = _createPragmaticResiz.destroy;

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

@@ -1,6 +1,7 @@
 import type { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
-export declare const createPragmaticResizer: ({ onDragStart, onDrag, onDrop, }: {
-    onDragStart: () => void;
+export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, }: {
+    target: HTMLElement;
+    onDragStart: (args: BaseEventPayload<ElementDragType>) => void;
     onDrag: (args: BaseEventPayload<ElementDragType>) => void;
     onDrop: (args: BaseEventPayload<ElementDragType>) => void;
 }) => {

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

@@ -4,7 +4,7 @@ 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, source }: {
+export declare function getProposedWidth({ initialWidth, location, api, source, }: {
     initialWidth: number;
     location: DragLocationHistory;
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;

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

@@ -1,6 +1,7 @@
 import type { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
-export declare const createPragmaticResizer: ({ onDragStart, onDrag, onDrop, }: {
-    onDragStart: () => void;
+export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, }: {
+    target: HTMLElement;
+    onDragStart: (args: BaseEventPayload<ElementDragType>) => void;
     onDrag: (args: BaseEventPayload<ElementDragType>) => void;
     onDrop: (args: BaseEventPayload<ElementDragType>) => void;
 }) => {

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

@@ -4,7 +4,7 @@ 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, source }: {
+export declare function getProposedWidth({ initialWidth, location, api, source, }: {
     initialWidth: number;
     location: DragLocationHistory;
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.5.1",
+	"version": "2.5.2",
 	"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.1.0",
+		"@atlaskit/editor-common": "^106.3.0",
 		"@atlaskit/editor-plugin-block-controls": "^3.15.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.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.10.0",
+		"@atlaskit/tmp-editor-statsig": "^5.13.0",
 		"@atlaskit/tokens": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
+		"bind-event-listener": "^3.0.0",
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
@@ -113,6 +114,9 @@
 		},
 		"platform_editor_hide_expand_selection_states": {
 			"type": "boolean"
+		},
+		"platform_editor_breakout_resizing_hello_release": {
+			"type": "boolean"
 		}
 	}
 }