@atlaskit/editor-plugin-breakout 2.5.0 → 2.5.1

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 (10) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/pm-plugins/pragmatic-resizer.js +8 -3
  3. package/dist/cjs/pm-plugins/resizer-callbacks.js +12 -6
  4. package/dist/es2019/pm-plugins/pragmatic-resizer.js +6 -3
  5. package/dist/es2019/pm-plugins/resizer-callbacks.js +12 -6
  6. package/dist/esm/pm-plugins/pragmatic-resizer.js +8 -3
  7. package/dist/esm/pm-plugins/resizer-callbacks.js +12 -6
  8. package/dist/types/pm-plugins/resizer-callbacks.d.ts +3 -1
  9. package/dist/types-ts4.5/pm-plugins/resizer-callbacks.d.ts +3 -1
  10. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 2.5.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#164129](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164129)
8
+ [`ef34428363521`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef34428363521) -
9
+ [ux] ED-28058 fix left drag handle experience for new resizing under
10
+ platform_editor_breakout_resizing
11
+ - Updated dependencies
12
+
3
13
  ## 2.5.0
4
14
 
5
15
  ### Minor Changes
package/dist/cjs/pm-plugins/pragmatic-resizer.js CHANGED
@@ -11,7 +11,7 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
11
11
  var onDragStart = _ref.onDragStart,
12
12
  onDrag = _ref.onDrag,
13
13
  _onDrop = _ref.onDrop;
14
- var registerHandle = function registerHandle(handleElement) {
14
+ var registerHandle = function registerHandle(handleElement, handleSide) {
15
15
  return (0, _adapter.draggable)({
16
16
  element: handleElement,
17
17
  onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
@@ -21,6 +21,11 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
21
21
  });
22
22
  _preventUnhandled.preventUnhandled.start();
23
23
  },
24
+ getInitialData: function getInitialData() {
25
+ return {
26
+ handleSide: handleSide
27
+ };
28
+ },
24
29
  onDragStart: onDragStart,
25
30
  onDrag: onDrag,
26
31
  onDrop: function onDrop(args) {
@@ -47,8 +52,8 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
47
52
  };
48
53
  var rightHandle = createHandle('right');
49
54
  var leftHandle = createHandle('left');
50
- var rightHandleCleanup = registerHandle(rightHandle);
51
- var leftHandleCleanup = registerHandle(leftHandle);
55
+ var rightHandleCleanup = registerHandle(rightHandle, 'right');
56
+ var leftHandleCleanup = registerHandle(leftHandle, 'left');
52
57
  return {
53
58
  rightHandle: rightHandle,
54
59
  leftHandle: leftHandle,
package/dist/cjs/pm-plugins/resizer-callbacks.js CHANGED
@@ -18,8 +18,10 @@ function getProposedWidth(_ref) {
18
18
  var _api$width$sharedStat;
19
19
  var initialWidth = _ref.initialWidth,
20
20
  location = _ref.location,
21
- api = _ref.api;
22
- var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
21
+ api = _ref.api,
22
+ source = _ref.source;
23
+ var directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
24
+ var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
23
25
 
24
26
  // TODO: ED-28024 - add snapping logic
25
27
 
@@ -51,12 +53,14 @@ function createResizerCallbacks(_ref2) {
51
53
  },
52
54
  onDrag: function onDrag(_ref3) {
53
55
  var _node, _api$guideline;
54
- var location = _ref3.location;
56
+ var location = _ref3.location,
57
+ source = _ref3.source;
55
58
  var initialWidth = mark.attrs.width;
56
59
  var newWidth = getProposedWidth({
57
60
  initialWidth: initialWidth,
58
61
  location: location,
59
- api: api
62
+ api: api,
63
+ source: source
60
64
  });
61
65
  guidelines = (0, _getGuidelines.getGuidelines)(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
62
66
  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 +70,8 @@ function createResizerCallbacks(_ref2) {
66
70
  },
67
71
  onDrop: function onDrop(_ref4) {
68
72
  var _api$guideline2, _api$userIntent2;
69
- var location = _ref4.location;
73
+ var location = _ref4.location,
74
+ source = _ref4.source;
70
75
  var isResizedToFullWidth = !!guidelines.find(function (guideline) {
71
76
  return guideline.key.includes('full_width') && guideline.active;
72
77
  });
@@ -80,7 +85,8 @@ function createResizerCallbacks(_ref2) {
80
85
  var newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
81
86
  initialWidth: initialWidth,
82
87
  location: location,
83
- api: api
88
+ api: api,
89
+ source: source
84
90
  });
85
91
  (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos)(view.state, view.dispatch);
86
92
  contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
package/dist/es2019/pm-plugins/pragmatic-resizer.js CHANGED
@@ -6,7 +6,7 @@ export const createPragmaticResizer = ({
6
6
  onDrag,
7
7
  onDrop
8
8
  }) => {
9
- const registerHandle = handleElement => {
9
+ const registerHandle = (handleElement, handleSide) => {
10
10
  return draggable({
11
11
  element: handleElement,
12
12
  onGenerateDragPreview: ({
@@ -17,6 +17,9 @@ export const createPragmaticResizer = ({
17
17
  });
18
18
  preventUnhandled.start();
19
19
  },
20
+ getInitialData: () => ({
21
+ handleSide
22
+ }),
20
23
  onDragStart,
21
24
  onDrag,
22
25
  onDrop(args) {
@@ -43,8 +46,8 @@ export const createPragmaticResizer = ({
43
46
  };
44
47
  const rightHandle = createHandle('right');
45
48
  const leftHandle = createHandle('left');
46
- const rightHandleCleanup = registerHandle(rightHandle);
47
- const leftHandleCleanup = registerHandle(leftHandle);
49
+ const rightHandleCleanup = registerHandle(rightHandle, 'right');
50
+ const leftHandleCleanup = registerHandle(leftHandle, 'left');
48
51
  return {
49
52
  rightHandle,
50
53
  leftHandle,
package/dist/es2019/pm-plugins/resizer-callbacks.js CHANGED
@@ -10,10 +10,12 @@ const WIDTHS = {
10
10
  export function getProposedWidth({
11
11
  initialWidth,
12
12
  location,
13
- api
13
+ api,
14
+ source
14
15
  }) {
15
16
  var _api$width$sharedStat, _api$width$sharedStat2;
16
- const diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
17
+ const directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
18
+ const diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
17
19
 
18
20
  // TODO: ED-28024 - add snapping logic
19
21
 
@@ -45,14 +47,16 @@ export function createResizerCallbacks({
45
47
  node = view.state.doc.nodeAt(pos);
46
48
  },
47
49
  onDrag: ({
48
- location
50
+ location,
51
+ source
49
52
  }) => {
50
53
  var _node, _api$guideline, _api$guideline$action;
51
54
  const initialWidth = mark.attrs.width;
52
55
  const newWidth = getProposedWidth({
53
56
  initialWidth,
54
57
  location,
55
- api
58
+ api,
59
+ source
56
60
  });
57
61
  guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
58
62
  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 +65,8 @@ export function createResizerCallbacks({
61
65
  contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
62
66
  },
63
67
  onDrop({
64
- location
68
+ location,
69
+ source
65
70
  }) {
66
71
  var _api$guideline2, _api$guideline2$actio, _api$userIntent2;
67
72
  const isResizedToFullWidth = !!guidelines.find(guideline => guideline.key.includes('full_width') && guideline.active);
@@ -75,7 +80,8 @@ export function createResizerCallbacks({
75
80
  const newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
76
81
  initialWidth,
77
82
  location,
78
- api
83
+ api,
84
+ source
79
85
  });
80
86
  setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
81
87
  contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
package/dist/esm/pm-plugins/pragmatic-resizer.js CHANGED
@@ -5,7 +5,7 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref) {
5
5
  var onDragStart = _ref.onDragStart,
6
6
  onDrag = _ref.onDrag,
7
7
  _onDrop = _ref.onDrop;
8
- var registerHandle = function registerHandle(handleElement) {
8
+ var registerHandle = function registerHandle(handleElement, handleSide) {
9
9
  return draggable({
10
10
  element: handleElement,
11
11
  onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
@@ -15,6 +15,11 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref) {
15
15
  });
16
16
  preventUnhandled.start();
17
17
  },
18
+ getInitialData: function getInitialData() {
19
+ return {
20
+ handleSide: handleSide
21
+ };
22
+ },
18
23
  onDragStart: onDragStart,
19
24
  onDrag: onDrag,
20
25
  onDrop: function onDrop(args) {
@@ -41,8 +46,8 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref) {
41
46
  };
42
47
  var rightHandle = createHandle('right');
43
48
  var leftHandle = createHandle('left');
44
- var rightHandleCleanup = registerHandle(rightHandle);
45
- var leftHandleCleanup = registerHandle(leftHandle);
49
+ var rightHandleCleanup = registerHandle(rightHandle, 'right');
50
+ var leftHandleCleanup = registerHandle(leftHandle, 'left');
46
51
  return {
47
52
  rightHandle: rightHandle,
48
53
  leftHandle: leftHandle,
package/dist/esm/pm-plugins/resizer-callbacks.js CHANGED
@@ -11,8 +11,10 @@ export function getProposedWidth(_ref) {
11
11
  var _api$width$sharedStat;
12
12
  var initialWidth = _ref.initialWidth,
13
13
  location = _ref.location,
14
- api = _ref.api;
15
- var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
14
+ api = _ref.api,
15
+ source = _ref.source;
16
+ var directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
17
+ var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
16
18
 
17
19
  // TODO: ED-28024 - add snapping logic
18
20
 
@@ -44,12 +46,14 @@ export function createResizerCallbacks(_ref2) {
44
46
  },
45
47
  onDrag: function onDrag(_ref3) {
46
48
  var _node, _api$guideline;
47
- var location = _ref3.location;
49
+ var location = _ref3.location,
50
+ source = _ref3.source;
48
51
  var initialWidth = mark.attrs.width;
49
52
  var newWidth = getProposedWidth({
50
53
  initialWidth: initialWidth,
51
54
  location: location,
52
- api: api
55
+ api: api,
56
+ source: source
53
57
  });
54
58
  guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
55
59
  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 +63,8 @@ export function createResizerCallbacks(_ref2) {
59
63
  },
60
64
  onDrop: function onDrop(_ref4) {
61
65
  var _api$guideline2, _api$userIntent2;
62
- var location = _ref4.location;
66
+ var location = _ref4.location,
67
+ source = _ref4.source;
63
68
  var isResizedToFullWidth = !!guidelines.find(function (guideline) {
64
69
  return guideline.key.includes('full_width') && guideline.active;
65
70
  });
@@ -73,7 +78,8 @@ export function createResizerCallbacks(_ref2) {
73
78
  var newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
74
79
  initialWidth: initialWidth,
75
80
  location: location,
76
- api: api
81
+ api: api,
82
+ source: source
77
83
  });
78
84
  setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
79
85
  contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
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/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.1",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -48,7 +48,7 @@
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.10.0",
52
52
  "@atlaskit/tokens": "^5.0.0",
53
53
  "@babel/runtime": "^7.0.0",
54
54
  "@emotion/react": "^11.7.1",