@atlaskit/editor-plugin-breakout 2.5.0 → 2.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/pm-plugins/get-guidelines.js +5 -5
  3. package/dist/cjs/pm-plugins/pragmatic-resizer.js +74 -26
  4. package/dist/cjs/pm-plugins/resizer-callbacks.js +24 -9
  5. package/dist/cjs/pm-plugins/resizing-mark-view.js +7 -1
  6. package/dist/es2019/pm-plugins/get-guidelines.js +5 -5
  7. package/dist/es2019/pm-plugins/pragmatic-resizer.js +65 -25
  8. package/dist/es2019/pm-plugins/resizer-callbacks.js +24 -10
  9. package/dist/es2019/pm-plugins/resizing-mark-view.js +5 -1
  10. package/dist/esm/pm-plugins/get-guidelines.js +5 -5
  11. package/dist/esm/pm-plugins/pragmatic-resizer.js +73 -26
  12. package/dist/esm/pm-plugins/resizer-callbacks.js +25 -10
  13. package/dist/esm/pm-plugins/resizing-mark-view.js +7 -1
  14. package/dist/types/pm-plugins/pragmatic-resizer.d.ts +3 -2
  15. package/dist/types/pm-plugins/resizer-callbacks.d.ts +3 -1
  16. package/dist/types-ts4.5/pm-plugins/pragmatic-resizer.d.ts +3 -2
  17. package/dist/types-ts4.5/pm-plugins/resizer-callbacks.d.ts +3 -1
  18. package/package.json +7 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 2.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#164895](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164895)
8
+ [`e8158addf8fda`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8158addf8fda) -
9
+ Add platform_editor_breakout_resizing_hello_release fg - add snapping logic for pragmatic resizer
10
+ - Updated dependencies
11
+
12
+ ## 2.5.1
13
+
14
+ ### Patch Changes
15
+
16
+ - [#164129](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164129)
17
+ [`ef34428363521`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef34428363521) -
18
+ [ux] ED-28058 fix left drag handle experience for new resizing under
19
+ platform_editor_breakout_resizing
20
+ - Updated dependencies
21
+
3
22
  ## 2.5.0
4
23
 
5
24
  ### Minor Changes
package/dist/cjs/pm-plugins/get-guidelines.js CHANGED
@@ -10,6 +10,7 @@ var _styles = require("@atlaskit/editor-common/styles");
10
10
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
11
  var WIDTHS = {
12
12
  MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
13
+ WIDE: _editorSharedStyles.akEditorCalculatedWideLayoutWidth,
13
14
  MAX: _editorSharedStyles.akEditorFullWidthLayoutWidth
14
15
  };
15
16
  var GUIDELINE_KEYS = {
@@ -44,7 +45,6 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
44
45
  width = _ref.width,
45
46
  lineLength = _ref.lineLength;
46
47
  // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
47
- var wide = _editorSharedStyles.akEditorCalculatedWideLayoutWidth;
48
48
  var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding) : undefined;
49
49
  if (lineLength) {
50
50
  guidelines.push({
@@ -65,16 +65,16 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
65
65
  guidelines.push({
66
66
  key: "".concat(GUIDELINE_KEYS.wide, "_left"),
67
67
  position: {
68
- x: -roundToNearest(wide / 2 + innerPaddingOffset)
68
+ x: -roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
69
69
  },
70
- active: newWidth === wide
70
+ active: newWidth === WIDTHS.WIDE
71
71
  });
72
72
  guidelines.push({
73
73
  key: "".concat(GUIDELINE_KEYS.wide, "_right"),
74
74
  position: {
75
- x: roundToNearest(wide / 2 + innerPaddingOffset)
75
+ x: roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
76
76
  },
77
- active: newWidth === wide
77
+ active: newWidth === WIDTHS.WIDE
78
78
  });
79
79
  if (fullWidth) {
80
80
  guidelines.push({
package/dist/cjs/pm-plugins/pragmatic-resizer.js CHANGED
@@ -1,17 +1,50 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
6
7
  exports.createPragmaticResizer = void 0;
8
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
+ var _bindEventListener = require("bind-event-listener");
7
10
  var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
8
11
  var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
9
12
  var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
10
13
  var createPragmaticResizer = exports.createPragmaticResizer = function createPragmaticResizer(_ref) {
11
- var onDragStart = _ref.onDragStart,
14
+ var target = _ref.target,
15
+ _onDragStart = _ref.onDragStart,
12
16
  onDrag = _ref.onDrag,
13
17
  _onDrop = _ref.onDrop;
14
- var registerHandle = function registerHandle(handleElement) {
18
+ var state = 'default';
19
+ var createHandle = function createHandle(side) {
20
+ var handle = document.createElement('div');
21
+ handle.contentEditable = 'false';
22
+ handle.classList.add('pm-breakout-resize-handle-container');
23
+ var rail = document.createElement('div');
24
+ rail.classList.add('pm-breakout-resize-handle-rail');
25
+ if (side === 'left') {
26
+ handle.classList.add('pm-breakout-resize-handle-container--left');
27
+ handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
28
+ } else {
29
+ handle.classList.add('pm-breakout-resize-handle-container--right');
30
+ handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
31
+ }
32
+ var handleHitBox = document.createElement('div');
33
+ handleHitBox.classList.add('pm-breakout-resize-handle-hit-box');
34
+ var thumb = document.createElement('div');
35
+ thumb.classList.add('pm-breakout-resize-handle-thumb');
36
+ rail.appendChild(thumb);
37
+ handle.appendChild(rail);
38
+ handle.appendChild(handleHitBox);
39
+ return {
40
+ handle: handle,
41
+ rail: rail,
42
+ handleHitBox: handleHitBox
43
+ };
44
+ };
45
+ var rightHandle = createHandle('right');
46
+ var leftHandle = createHandle('left');
47
+ var registerHandle = function registerHandle(handleElement, handleSide) {
15
48
  return (0, _adapter.draggable)({
16
49
  element: handleElement,
17
50
  onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
@@ -21,40 +54,55 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
21
54
  });
22
55
  _preventUnhandled.preventUnhandled.start();
23
56
  },
24
- onDragStart: onDragStart,
57
+ getInitialData: function getInitialData() {
58
+ return {
59
+ handleSide: handleSide
60
+ };
61
+ },
62
+ onDragStart: function onDragStart(args) {
63
+ state = 'resizing';
64
+ handleElement.classList.add('pm-breakout-resize-handle-container--active');
65
+ _onDragStart(args);
66
+ },
25
67
  onDrag: onDrag,
26
68
  onDrop: function onDrop(args) {
27
69
  _preventUnhandled.preventUnhandled.stop();
70
+ state = 'default';
71
+ handleElement.classList.remove('pm-breakout-resize-handle-container--active');
28
72
  _onDrop(args);
29
73
  }
30
74
  });
31
75
  };
32
- var createHandle = function createHandle(side) {
33
- var handle = document.createElement('div');
34
- handle.contentEditable = 'false';
35
- handle.classList.add('pm-breakout-resize-handle');
36
- if (side === 'left') {
37
- handle.classList.add('pm-breakout-resize-handle-left');
38
- handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
39
- } else {
40
- handle.classList.add('pm-breakout-resize-handle-right');
41
- handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
42
- }
43
- var handleInner = document.createElement('div');
44
- handleInner.classList.add('pm-breakout-resize-handle-inner');
45
- handle.appendChild(handleInner);
46
- return handle;
76
+ var registerEvents = function registerEvents(element) {
77
+ return [(0, _bindEventListener.bind)(element, {
78
+ type: 'mouseenter',
79
+ listener: function listener() {
80
+ rightHandle.rail.style.setProperty('opacity', '1');
81
+ leftHandle.rail.style.setProperty('opacity', '1');
82
+ }
83
+ }), (0, _bindEventListener.bind)(element, {
84
+ type: 'mouseleave',
85
+ listener: function listener() {
86
+ if (state === 'resizing') {
87
+ return;
88
+ }
89
+ rightHandle.rail.style.removeProperty('opacity');
90
+ leftHandle.rail.style.removeProperty('opacity');
91
+ }
92
+ })];
47
93
  };
48
- var rightHandle = createHandle('right');
49
- var leftHandle = createHandle('left');
50
- var rightHandleCleanup = registerHandle(rightHandle);
51
- var leftHandleCleanup = registerHandle(leftHandle);
94
+ 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)));
95
+ var destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left')];
52
96
  return {
53
- rightHandle: rightHandle,
54
- leftHandle: leftHandle,
97
+ rightHandle: rightHandle.handle,
98
+ leftHandle: leftHandle.handle,
55
99
  destroy: function destroy() {
56
- rightHandleCleanup();
57
- leftHandleCleanup();
100
+ destroyFns.forEach(function (destroyFn) {
101
+ return destroyFn();
102
+ });
103
+ unbindFns.forEach(function (unbindFn) {
104
+ return unbindFn();
105
+ });
58
106
  }
59
107
  };
60
108
  };
package/dist/cjs/pm-plugins/resizer-callbacks.js CHANGED
@@ -6,27 +6,38 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.createResizerCallbacks = createResizerCallbacks;
7
7
  exports.getProposedWidth = getProposedWidth;
8
8
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
9
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
9
10
  var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
10
11
  var _getGuidelines = require("./get-guidelines");
11
12
  var _resizingMarkView = require("./resizing-mark-view");
12
13
  var RESIZE_RATIO = 2;
14
+ var SNAP_GAP = 10;
13
15
  var WIDTHS = {
14
16
  MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
17
+ WIDE: _editorSharedStyles.akEditorCalculatedWideLayoutWidth,
15
18
  MAX: _editorSharedStyles.akEditorFullWidthLayoutWidth
16
19
  };
17
20
  function getProposedWidth(_ref) {
18
21
  var _api$width$sharedStat;
19
22
  var initialWidth = _ref.initialWidth,
20
23
  location = _ref.location,
21
- api = _ref.api;
22
- var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
23
-
24
- // TODO: ED-28024 - add snapping logic
25
-
24
+ api = _ref.api,
25
+ source = _ref.source;
26
+ var directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
27
+ var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
26
28
  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;
27
29
 
28
30
  // the node width may be greater than the container width so we resize using the smaller value
29
31
  var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
32
+ if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
33
+ var snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.MAX)];
34
+ for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
35
+ var snapPoint = _snapPoints[_i];
36
+ if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
37
+ return snapPoint;
38
+ }
39
+ }
40
+ }
30
41
  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
31
42
  }
32
43
  function createResizerCallbacks(_ref2) {
@@ -51,12 +62,14 @@ function createResizerCallbacks(_ref2) {
51
62
  },
52
63
  onDrag: function onDrag(_ref3) {
53
64
  var _node, _api$guideline;
54
- var location = _ref3.location;
65
+ var location = _ref3.location,
66
+ source = _ref3.source;
55
67
  var initialWidth = mark.attrs.width;
56
68
  var newWidth = getProposedWidth({
57
69
  initialWidth: initialWidth,
58
70
  location: location,
59
- api: api
71
+ api: api,
72
+ source: source
60
73
  });
61
74
  guidelines = (0, _getGuidelines.getGuidelines)(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
62
75
  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)({
@@ -66,7 +79,8 @@ function createResizerCallbacks(_ref2) {
66
79
  },
67
80
  onDrop: function onDrop(_ref4) {
68
81
  var _api$guideline2, _api$userIntent2;
69
- var location = _ref4.location;
82
+ var location = _ref4.location,
83
+ source = _ref4.source;
70
84
  var isResizedToFullWidth = !!guidelines.find(function (guideline) {
71
85
  return guideline.key.includes('full_width') && guideline.active;
72
86
  });
@@ -80,7 +94,8 @@ function createResizerCallbacks(_ref2) {
80
94
  var newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
81
95
  initialWidth: initialWidth,
82
96
  location: location,
83
- api: api
97
+ api: api,
98
+ source: source
84
99
  });
85
100
  (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos)(view.state, view.dispatch);
86
101
  contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
package/dist/cjs/pm-plugins/resizing-mark-view.js CHANGED
@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.ResizingMarkView = exports.LOCAL_RESIZE_PROPERTY = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
8
9
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
9
10
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
10
11
  var _styles = require("@atlaskit/editor-common/styles");
11
12
  var _pragmaticResizer = require("./pragmatic-resizer");
12
13
  var _resizerCallbacks = require("./resizer-callbacks");
14
+ 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; }
15
+ 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; }
13
16
  var LOCAL_RESIZE_PROPERTY = exports.LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
14
17
  var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
15
18
  /**
@@ -38,6 +41,7 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
38
41
  // contentDOM - styles
39
42
  contentDOM.style.gridRow = '1';
40
43
  contentDOM.style.gridColumn = '1';
44
+ contentDOM.style.zIndex = '1';
41
45
  if (mark.attrs.width) {
42
46
  contentDOM.style.minWidth = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
43
47
  } else {
@@ -56,7 +60,9 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
56
60
  mark: mark,
57
61
  api: api
58
62
  });
59
- var _createPragmaticResiz = (0, _pragmaticResizer.createPragmaticResizer)(callbacks),
63
+ var _createPragmaticResiz = (0, _pragmaticResizer.createPragmaticResizer)(_objectSpread({
64
+ target: contentDOM
65
+ }, callbacks)),
60
66
  leftHandle = _createPragmaticResiz.leftHandle,
61
67
  rightHandle = _createPragmaticResiz.rightHandle,
62
68
  destroy = _createPragmaticResiz.destroy;
package/dist/es2019/pm-plugins/get-guidelines.js CHANGED
@@ -3,6 +3,7 @@ import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidt
3
3
  import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
4
4
  const WIDTHS = {
5
5
  MIN: akEditorDefaultLayoutWidth,
6
+ WIDE: akEditorCalculatedWideLayoutWidth,
6
7
  MAX: akEditorFullWidthLayoutWidth
7
8
  };
8
9
  const GUIDELINE_KEYS = {
@@ -35,7 +36,6 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
35
36
  lineLength
36
37
  } = getEditorWidth() || {};
37
38
  // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
38
- const wide = akEditorCalculatedWideLayoutWidth;
39
39
  const fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
40
40
  if (lineLength) {
41
41
  guidelines.push({
@@ -56,16 +56,16 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
56
56
  guidelines.push({
57
57
  key: `${GUIDELINE_KEYS.wide}_left`,
58
58
  position: {
59
- x: -roundToNearest(wide / 2 + innerPaddingOffset)
59
+ x: -roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
60
60
  },
61
- active: newWidth === wide
61
+ active: newWidth === WIDTHS.WIDE
62
62
  });
63
63
  guidelines.push({
64
64
  key: `${GUIDELINE_KEYS.wide}_right`,
65
65
  position: {
66
- x: roundToNearest(wide / 2 + innerPaddingOffset)
66
+ x: roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
67
67
  },
68
- active: newWidth === wide
68
+ active: newWidth === WIDTHS.WIDE
69
69
  });
70
70
  if (fullWidth) {
71
71
  guidelines.push({
package/dist/es2019/pm-plugins/pragmatic-resizer.js CHANGED
@@ -1,12 +1,43 @@
1
+ import { bind } from 'bind-event-listener';
1
2
  import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
2
3
  import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
3
4
  import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
4
5
  export const createPragmaticResizer = ({
6
+ target,
5
7
  onDragStart,
6
8
  onDrag,
7
9
  onDrop
8
10
  }) => {
9
- const registerHandle = handleElement => {
11
+ let state = 'default';
12
+ const createHandle = side => {
13
+ const handle = document.createElement('div');
14
+ handle.contentEditable = 'false';
15
+ handle.classList.add('pm-breakout-resize-handle-container');
16
+ const rail = document.createElement('div');
17
+ rail.classList.add('pm-breakout-resize-handle-rail');
18
+ if (side === 'left') {
19
+ handle.classList.add('pm-breakout-resize-handle-container--left');
20
+ handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
21
+ } else {
22
+ handle.classList.add('pm-breakout-resize-handle-container--right');
23
+ handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
24
+ }
25
+ const handleHitBox = document.createElement('div');
26
+ handleHitBox.classList.add('pm-breakout-resize-handle-hit-box');
27
+ const thumb = document.createElement('div');
28
+ thumb.classList.add('pm-breakout-resize-handle-thumb');
29
+ rail.appendChild(thumb);
30
+ handle.appendChild(rail);
31
+ handle.appendChild(handleHitBox);
32
+ return {
33
+ handle,
34
+ rail,
35
+ handleHitBox
36
+ };
37
+ };
38
+ const rightHandle = createHandle('right');
39
+ const leftHandle = createHandle('left');
40
+ const registerHandle = (handleElement, handleSide) => {
10
41
  return draggable({
11
42
  element: handleElement,
12
43
  onGenerateDragPreview: ({
@@ -17,40 +48,49 @@ export const createPragmaticResizer = ({
17
48
  });
18
49
  preventUnhandled.start();
19
50
  },
20
- onDragStart,
51
+ getInitialData: () => ({
52
+ handleSide
53
+ }),
54
+ onDragStart(args) {
55
+ state = 'resizing';
56
+ handleElement.classList.add('pm-breakout-resize-handle-container--active');
57
+ onDragStart(args);
58
+ },
21
59
  onDrag,
22
60
  onDrop(args) {
23
61
  preventUnhandled.stop();
62
+ state = 'default';
63
+ handleElement.classList.remove('pm-breakout-resize-handle-container--active');
24
64
  onDrop(args);
25
65
  }
26
66
  });
27
67
  };
28
- const createHandle = side => {
29
- const handle = document.createElement('div');
30
- handle.contentEditable = 'false';
31
- handle.classList.add('pm-breakout-resize-handle');
32
- if (side === 'left') {
33
- handle.classList.add('pm-breakout-resize-handle-left');
34
- handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
35
- } else {
36
- handle.classList.add('pm-breakout-resize-handle-right');
37
- handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
38
- }
39
- const handleInner = document.createElement('div');
40
- handleInner.classList.add('pm-breakout-resize-handle-inner');
41
- handle.appendChild(handleInner);
42
- return handle;
68
+ const registerEvents = element => {
69
+ return [bind(element, {
70
+ type: 'mouseenter',
71
+ listener: () => {
72
+ rightHandle.rail.style.setProperty('opacity', '1');
73
+ leftHandle.rail.style.setProperty('opacity', '1');
74
+ }
75
+ }), bind(element, {
76
+ type: 'mouseleave',
77
+ listener: () => {
78
+ if (state === 'resizing') {
79
+ return;
80
+ }
81
+ rightHandle.rail.style.removeProperty('opacity');
82
+ leftHandle.rail.style.removeProperty('opacity');
83
+ }
84
+ })];
43
85
  };
44
- const rightHandle = createHandle('right');
45
- const leftHandle = createHandle('left');
46
- const rightHandleCleanup = registerHandle(rightHandle);
47
- const leftHandleCleanup = registerHandle(leftHandle);
86
+ const unbindFns = [...registerEvents(target), ...registerEvents(rightHandle.handleHitBox), ...registerEvents(leftHandle.handleHitBox), ...registerEvents(rightHandle.rail), ...registerEvents(leftHandle.rail)];
87
+ const destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left')];
48
88
  return {
49
- rightHandle,
50
- leftHandle,
89
+ rightHandle: rightHandle.handle,
90
+ leftHandle: leftHandle.handle,
51
91
  destroy: () => {
52
- rightHandleCleanup();
53
- leftHandleCleanup();
92
+ destroyFns.forEach(destroyFn => destroyFn());
93
+ unbindFns.forEach(unbindFn => unbindFn());
54
94
  }
55
95
  };
56
96
  };
package/dist/es2019/pm-plugins/resizer-callbacks.js CHANGED
@@ -1,26 +1,36 @@
1
- import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
1
+ import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
2
3
  import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
3
4
  import { getGuidelines } from './get-guidelines';
4
5
  import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
5
6
  const RESIZE_RATIO = 2;
7
+ const SNAP_GAP = 10;
6
8
  const WIDTHS = {
7
9
  MIN: akEditorDefaultLayoutWidth,
10
+ WIDE: akEditorCalculatedWideLayoutWidth,
8
11
  MAX: akEditorFullWidthLayoutWidth
9
12
  };
10
13
  export function getProposedWidth({
11
14
  initialWidth,
12
15
  location,
13
- api
16
+ api,
17
+ source
14
18
  }) {
15
19
  var _api$width$sharedStat, _api$width$sharedStat2;
16
- const diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
17
-
18
- // TODO: ED-28024 - add snapping logic
19
-
20
+ const directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
21
+ const diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
20
22
  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;
21
23
 
22
24
  // the node width may be greater than the container width so we resize using the smaller value
23
25
  const proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
26
+ if (fg('platform_editor_breakout_resizing_hello_release')) {
27
+ const snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.MAX)];
28
+ for (const snapPoint of snapPoints) {
29
+ if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
30
+ return snapPoint;
31
+ }
32
+ }
33
+ }
24
34
  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
25
35
  }
26
36
  export function createResizerCallbacks({
@@ -45,14 +55,16 @@ export function createResizerCallbacks({
45
55
  node = view.state.doc.nodeAt(pos);
46
56
  },
47
57
  onDrag: ({
48
- location
58
+ location,
59
+ source
49
60
  }) => {
50
61
  var _node, _api$guideline, _api$guideline$action;
51
62
  const initialWidth = mark.attrs.width;
52
63
  const newWidth = getProposedWidth({
53
64
  initialWidth,
54
65
  location,
55
- api
66
+ api,
67
+ source
56
68
  });
57
69
  guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
58
70
  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)({
@@ -61,7 +73,8 @@ export function createResizerCallbacks({
61
73
  contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
62
74
  },
63
75
  onDrop({
64
- location
76
+ location,
77
+ source
65
78
  }) {
66
79
  var _api$guideline2, _api$guideline2$actio, _api$userIntent2;
67
80
  const isResizedToFullWidth = !!guidelines.find(guideline => guideline.key.includes('full_width') && guideline.active);
@@ -75,7 +88,8 @@ export function createResizerCallbacks({
75
88
  const newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
76
89
  initialWidth,
77
90
  location,
78
- api
91
+ api,
92
+ source
79
93
  });
80
94
  setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
81
95
  contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
package/dist/es2019/pm-plugins/resizing-mark-view.js CHANGED
@@ -28,6 +28,7 @@ export class ResizingMarkView {
28
28
  // contentDOM - styles
29
29
  contentDOM.style.gridRow = '1';
30
30
  contentDOM.style.gridColumn = '1';
31
+ contentDOM.style.zIndex = '1';
31
32
  if (mark.attrs.width) {
32
33
  contentDOM.style.minWidth = `min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
33
34
  } else {
@@ -50,7 +51,10 @@ export class ResizingMarkView {
50
51
  leftHandle,
51
52
  rightHandle,
52
53
  destroy
53
- } = createPragmaticResizer(callbacks);
54
+ } = createPragmaticResizer({
55
+ target: contentDOM,
56
+ ...callbacks
57
+ });
54
58
  dom.prepend(leftHandle);
55
59
  dom.appendChild(rightHandle);
56
60
  this.dom = dom;
package/dist/esm/pm-plugins/get-guidelines.js CHANGED
@@ -3,6 +3,7 @@ import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidt
3
3
  import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
4
4
  var WIDTHS = {
5
5
  MIN: akEditorDefaultLayoutWidth,
6
+ WIDE: akEditorCalculatedWideLayoutWidth,
6
7
  MAX: akEditorFullWidthLayoutWidth
7
8
  };
8
9
  var GUIDELINE_KEYS = {
@@ -37,7 +38,6 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
37
38
  width = _ref.width,
38
39
  lineLength = _ref.lineLength;
39
40
  // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
40
- var wide = akEditorCalculatedWideLayoutWidth;
41
41
  var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
42
42
  if (lineLength) {
43
43
  guidelines.push({
@@ -58,16 +58,16 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
58
58
  guidelines.push({
59
59
  key: "".concat(GUIDELINE_KEYS.wide, "_left"),
60
60
  position: {
61
- x: -roundToNearest(wide / 2 + innerPaddingOffset)
61
+ x: -roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
62
62
  },
63
- active: newWidth === wide
63
+ active: newWidth === WIDTHS.WIDE
64
64
  });
65
65
  guidelines.push({
66
66
  key: "".concat(GUIDELINE_KEYS.wide, "_right"),
67
67
  position: {
68
- x: roundToNearest(wide / 2 + innerPaddingOffset)
68
+ x: roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
69
69
  },
70
- active: newWidth === wide
70
+ active: newWidth === WIDTHS.WIDE
71
71
  });
72
72
  if (fullWidth) {
73
73
  guidelines.push({
package/dist/esm/pm-plugins/pragmatic-resizer.js CHANGED
@@ -1,11 +1,43 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
+ import { bind } from 'bind-event-listener';
1
3
  import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
2
4
  import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
3
5
  import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
4
6
  export var createPragmaticResizer = function createPragmaticResizer(_ref) {
5
- var onDragStart = _ref.onDragStart,
7
+ var target = _ref.target,
8
+ _onDragStart = _ref.onDragStart,
6
9
  onDrag = _ref.onDrag,
7
10
  _onDrop = _ref.onDrop;
8
- var registerHandle = function registerHandle(handleElement) {
11
+ var state = 'default';
12
+ var createHandle = function createHandle(side) {
13
+ var handle = document.createElement('div');
14
+ handle.contentEditable = 'false';
15
+ handle.classList.add('pm-breakout-resize-handle-container');
16
+ var rail = document.createElement('div');
17
+ rail.classList.add('pm-breakout-resize-handle-rail');
18
+ if (side === 'left') {
19
+ handle.classList.add('pm-breakout-resize-handle-container--left');
20
+ handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
21
+ } else {
22
+ handle.classList.add('pm-breakout-resize-handle-container--right');
23
+ handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
24
+ }
25
+ var handleHitBox = document.createElement('div');
26
+ handleHitBox.classList.add('pm-breakout-resize-handle-hit-box');
27
+ var thumb = document.createElement('div');
28
+ thumb.classList.add('pm-breakout-resize-handle-thumb');
29
+ rail.appendChild(thumb);
30
+ handle.appendChild(rail);
31
+ handle.appendChild(handleHitBox);
32
+ return {
33
+ handle: handle,
34
+ rail: rail,
35
+ handleHitBox: handleHitBox
36
+ };
37
+ };
38
+ var rightHandle = createHandle('right');
39
+ var leftHandle = createHandle('left');
40
+ var registerHandle = function registerHandle(handleElement, handleSide) {
9
41
  return draggable({
10
42
  element: handleElement,
11
43
  onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
@@ -15,40 +47,55 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref) {
15
47
  });
16
48
  preventUnhandled.start();
17
49
  },
18
- onDragStart: onDragStart,
50
+ getInitialData: function getInitialData() {
51
+ return {
52
+ handleSide: handleSide
53
+ };
54
+ },
55
+ onDragStart: function onDragStart(args) {
56
+ state = 'resizing';
57
+ handleElement.classList.add('pm-breakout-resize-handle-container--active');
58
+ _onDragStart(args);
59
+ },
19
60
  onDrag: onDrag,
20
61
  onDrop: function onDrop(args) {
21
62
  preventUnhandled.stop();
63
+ state = 'default';
64
+ handleElement.classList.remove('pm-breakout-resize-handle-container--active');
22
65
  _onDrop(args);
23
66
  }
24
67
  });
25
68
  };
26
- var createHandle = function createHandle(side) {
27
- var handle = document.createElement('div');
28
- handle.contentEditable = 'false';
29
- handle.classList.add('pm-breakout-resize-handle');
30
- if (side === 'left') {
31
- handle.classList.add('pm-breakout-resize-handle-left');
32
- handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
33
- } else {
34
- handle.classList.add('pm-breakout-resize-handle-right');
35
- handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
36
- }
37
- var handleInner = document.createElement('div');
38
- handleInner.classList.add('pm-breakout-resize-handle-inner');
39
- handle.appendChild(handleInner);
40
- return handle;
69
+ var registerEvents = function registerEvents(element) {
70
+ return [bind(element, {
71
+ type: 'mouseenter',
72
+ listener: function listener() {
73
+ rightHandle.rail.style.setProperty('opacity', '1');
74
+ leftHandle.rail.style.setProperty('opacity', '1');
75
+ }
76
+ }), bind(element, {
77
+ type: 'mouseleave',
78
+ listener: function listener() {
79
+ if (state === 'resizing') {
80
+ return;
81
+ }
82
+ rightHandle.rail.style.removeProperty('opacity');
83
+ leftHandle.rail.style.removeProperty('opacity');
84
+ }
85
+ })];
41
86
  };
42
- var rightHandle = createHandle('right');
43
- var leftHandle = createHandle('left');
44
- var rightHandleCleanup = registerHandle(rightHandle);
45
- var leftHandleCleanup = registerHandle(leftHandle);
87
+ var unbindFns = [].concat(_toConsumableArray(registerEvents(target)), _toConsumableArray(registerEvents(rightHandle.handleHitBox)), _toConsumableArray(registerEvents(leftHandle.handleHitBox)), _toConsumableArray(registerEvents(rightHandle.rail)), _toConsumableArray(registerEvents(leftHandle.rail)));
88
+ var destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left')];
46
89
  return {
47
- rightHandle: rightHandle,
48
- leftHandle: leftHandle,
90
+ rightHandle: rightHandle.handle,
91
+ leftHandle: leftHandle.handle,
49
92
  destroy: function destroy() {
50
- rightHandleCleanup();
51
- leftHandleCleanup();
93
+ destroyFns.forEach(function (destroyFn) {
94
+ return destroyFn();
95
+ });
96
+ unbindFns.forEach(function (unbindFn) {
97
+ return unbindFn();
98
+ });
52
99
  }
53
100
  };
54
101
  };
package/dist/esm/pm-plugins/resizer-callbacks.js CHANGED
@@ -1,25 +1,36 @@
1
- import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
1
+ import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
2
3
  import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
3
4
  import { getGuidelines } from './get-guidelines';
4
5
  import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
5
6
  var RESIZE_RATIO = 2;
7
+ var SNAP_GAP = 10;
6
8
  var WIDTHS = {
7
9
  MIN: akEditorDefaultLayoutWidth,
10
+ WIDE: akEditorCalculatedWideLayoutWidth,
8
11
  MAX: akEditorFullWidthLayoutWidth
9
12
  };
10
13
  export function getProposedWidth(_ref) {
11
14
  var _api$width$sharedStat;
12
15
  var initialWidth = _ref.initialWidth,
13
16
  location = _ref.location,
14
- api = _ref.api;
15
- var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
16
-
17
- // TODO: ED-28024 - add snapping logic
18
-
17
+ api = _ref.api,
18
+ source = _ref.source;
19
+ var directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
20
+ var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
19
21
  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;
20
22
 
21
23
  // the node width may be greater than the container width so we resize using the smaller value
22
24
  var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
25
+ if (fg('platform_editor_breakout_resizing_hello_release')) {
26
+ var snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.MAX)];
27
+ for (var _i = 0, _snapPoints = snapPoints; _i < _snapPoints.length; _i++) {
28
+ var snapPoint = _snapPoints[_i];
29
+ if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
30
+ return snapPoint;
31
+ }
32
+ }
33
+ }
23
34
  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
24
35
  }
25
36
  export function createResizerCallbacks(_ref2) {
@@ -44,12 +55,14 @@ export function createResizerCallbacks(_ref2) {
44
55
  },
45
56
  onDrag: function onDrag(_ref3) {
46
57
  var _node, _api$guideline;
47
- var location = _ref3.location;
58
+ var location = _ref3.location,
59
+ source = _ref3.source;
48
60
  var initialWidth = mark.attrs.width;
49
61
  var newWidth = getProposedWidth({
50
62
  initialWidth: initialWidth,
51
63
  location: location,
52
- api: api
64
+ api: api,
65
+ source: source
53
66
  });
54
67
  guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
55
68
  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)({
@@ -59,7 +72,8 @@ export function createResizerCallbacks(_ref2) {
59
72
  },
60
73
  onDrop: function onDrop(_ref4) {
61
74
  var _api$guideline2, _api$userIntent2;
62
- var location = _ref4.location;
75
+ var location = _ref4.location,
76
+ source = _ref4.source;
63
77
  var isResizedToFullWidth = !!guidelines.find(function (guideline) {
64
78
  return guideline.key.includes('full_width') && guideline.active;
65
79
  });
@@ -73,7 +87,8 @@ export function createResizerCallbacks(_ref2) {
73
87
  var newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
74
88
  initialWidth: initialWidth,
75
89
  location: location,
76
- api: api
90
+ api: api,
91
+ source: source
77
92
  });
78
93
  setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
79
94
  contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
package/dist/esm/pm-plugins/resizing-mark-view.js CHANGED
@@ -1,5 +1,8 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
1
2
  import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
3
  import _createClass from "@babel/runtime/helpers/createClass";
4
+ 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; }
5
+ 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; }
3
6
  import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
4
7
  import { createPragmaticResizer } from './pragmatic-resizer';
5
8
  import { createResizerCallbacks } from './resizer-callbacks';
@@ -31,6 +34,7 @@ export var ResizingMarkView = /*#__PURE__*/function () {
31
34
  // contentDOM - styles
32
35
  contentDOM.style.gridRow = '1';
33
36
  contentDOM.style.gridColumn = '1';
37
+ contentDOM.style.zIndex = '1';
34
38
  if (mark.attrs.width) {
35
39
  contentDOM.style.minWidth = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
36
40
  } else {
@@ -49,7 +53,9 @@ export var ResizingMarkView = /*#__PURE__*/function () {
49
53
  mark: mark,
50
54
  api: api
51
55
  });
52
- var _createPragmaticResiz = createPragmaticResizer(callbacks),
56
+ var _createPragmaticResiz = createPragmaticResizer(_objectSpread({
57
+ target: contentDOM
58
+ }, callbacks)),
53
59
  leftHandle = _createPragmaticResiz.leftHandle,
54
60
  rightHandle = _createPragmaticResiz.rightHandle,
55
61
  destroy = _createPragmaticResiz.destroy;
package/dist/types/pm-plugins/pragmatic-resizer.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
2
- export declare const createPragmaticResizer: ({ onDragStart, onDrag, onDrop, }: {
3
- onDragStart: () => void;
2
+ export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, }: {
3
+ target: HTMLElement;
4
+ onDragStart: (args: BaseEventPayload<ElementDragType>) => void;
4
5
  onDrag: (args: BaseEventPayload<ElementDragType>) => void;
5
6
  onDrop: (args: BaseEventPayload<ElementDragType>) => void;
6
7
  }) => {
package/dist/types/pm-plugins/resizer-callbacks.d.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
2
2
  import { Mark } from '@atlaskit/editor-prosemirror/model';
3
3
  import { EditorView } from '@atlaskit/editor-prosemirror/view';
4
+ import { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
4
5
  import { BaseEventPayload, DragLocationHistory, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
5
6
  import { BreakoutPlugin } from '../breakoutPluginType';
6
- export declare function getProposedWidth({ initialWidth, location, api, }: {
7
+ export declare function getProposedWidth({ initialWidth, location, api, source, }: {
7
8
  initialWidth: number;
8
9
  location: DragLocationHistory;
9
10
  api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
11
+ source: ElementDragPayload;
10
12
  }): number;
11
13
  export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
12
14
  dom: HTMLElement;
package/dist/types-ts4.5/pm-plugins/pragmatic-resizer.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
2
- export declare const createPragmaticResizer: ({ onDragStart, onDrag, onDrop, }: {
3
- onDragStart: () => void;
2
+ export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, }: {
3
+ target: HTMLElement;
4
+ onDragStart: (args: BaseEventPayload<ElementDragType>) => void;
4
5
  onDrag: (args: BaseEventPayload<ElementDragType>) => void;
5
6
  onDrop: (args: BaseEventPayload<ElementDragType>) => void;
6
7
  }) => {
package/dist/types-ts4.5/pm-plugins/resizer-callbacks.d.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
2
2
  import { Mark } from '@atlaskit/editor-prosemirror/model';
3
3
  import { EditorView } from '@atlaskit/editor-prosemirror/view';
4
+ import { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
4
5
  import { BaseEventPayload, DragLocationHistory, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
5
6
  import { BreakoutPlugin } from '../breakoutPluginType';
6
- export declare function getProposedWidth({ initialWidth, location, api, }: {
7
+ export declare function getProposedWidth({ initialWidth, location, api, source, }: {
7
8
  initialWidth: number;
8
9
  location: DragLocationHistory;
9
10
  api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
11
+ source: ElementDragPayload;
10
12
  }): number;
11
13
  export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
12
14
  dom: HTMLElement;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "2.5.0",
3
+ "version": "2.5.2",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,7 +34,7 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@atlaskit/adf-schema": "^47.6.0",
37
- "@atlaskit/editor-common": "^106.1.0",
37
+ "@atlaskit/editor-common": "^106.3.0",
38
38
  "@atlaskit/editor-plugin-block-controls": "^3.15.0",
39
39
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
40
40
  "@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
@@ -48,10 +48,11 @@
48
48
  "@atlaskit/platform-feature-flags": "^1.1.0",
49
49
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
50
50
  "@atlaskit/theme": "^18.0.0",
51
- "@atlaskit/tmp-editor-statsig": "^5.8.0",
51
+ "@atlaskit/tmp-editor-statsig": "^5.13.0",
52
52
  "@atlaskit/tokens": "^5.0.0",
53
53
  "@babel/runtime": "^7.0.0",
54
54
  "@emotion/react": "^11.7.1",
55
+ "bind-event-listener": "^3.0.0",
55
56
  "memoize-one": "^6.0.0"
56
57
  },
57
58
  "peerDependencies": {
@@ -113,6 +114,9 @@
113
114
  },
114
115
  "platform_editor_hide_expand_selection_states": {
115
116
  "type": "boolean"
117
+ },
118
+ "platform_editor_breakout_resizing_hello_release": {
119
+ "type": "boolean"
116
120
  }
117
121
  }
118
122
  }