@atlaskit/editor-plugin-breakout 2.4.3 → 2.5.0

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 +13 -0
  2. package/dist/cjs/pm-plugins/get-guidelines.js +16 -4
  3. package/dist/cjs/pm-plugins/resizer-callbacks.js +10 -4
  4. package/dist/es2019/pm-plugins/get-guidelines.js +16 -5
  5. package/dist/es2019/pm-plugins/resizer-callbacks.js +8 -4
  6. package/dist/esm/pm-plugins/get-guidelines.js +16 -5
  7. package/dist/esm/pm-plugins/resizer-callbacks.js +10 -4
  8. package/dist/types/pm-plugins/get-guidelines.d.ts +1 -1
  9. package/dist/types-ts4.5/pm-plugins/get-guidelines.d.ts +1 -1
  10. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 2.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#163976](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163976)
8
+ [`668e81e097994`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/668e81e097994) -
9
+ [ux] [ED-28113] this change saves the width as 1800 when resizing to the fullWidth guideline under
10
+ the new resizing experience behind platform_editor_breakout_resizing
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 2.4.3
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/pm-plugins/get-guidelines.js CHANGED
@@ -1,9 +1,11 @@
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.getGuidelines = void 0;
8
+ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
7
9
  var _styles = require("@atlaskit/editor-common/styles");
8
10
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
9
11
  var WIDTHS = {
@@ -15,18 +17,28 @@ var GUIDELINE_KEYS = {
15
17
  wide: 'wide',
16
18
  fullWidth: 'full_width'
17
19
  };
20
+ var AK_NESTED_DND_GUTTER_OFFSET = 8;
18
21
  var roundToNearest = function roundToNearest(value) {
19
22
  var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
20
23
  return Math.round(value / interval) * interval;
21
24
  };
22
- var getGuidelines = exports.getGuidelines = function getGuidelines(isResizing, newWidth, getEditorWidth, nodeType) {
25
+ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (isResizing, newWidth, getEditorWidth, nodeType) {
23
26
  var guidelines = [];
24
27
  if (!isResizing) {
25
28
  return guidelines;
26
29
  }
27
30
  var innerPaddingOffset = 0;
28
- if (nodeType && nodeType.name === 'expand') {
29
- innerPaddingOffset = _styles.resizerHandleThumbWidth;
31
+ if (nodeType) {
32
+ switch (nodeType.name) {
33
+ case 'expand':
34
+ innerPaddingOffset = _styles.EXPAND_CONTAINER_PADDING + _styles.resizerHandleThumbWidth + AK_NESTED_DND_GUTTER_OFFSET;
35
+ break;
36
+ case 'layoutSection':
37
+ innerPaddingOffset = _styles.LAYOUT_COLUMN_PADDING + AK_NESTED_DND_GUTTER_OFFSET;
38
+ break;
39
+ default:
40
+ break;
41
+ }
30
42
  }
31
43
  var _ref = getEditorWidth() || {},
32
44
  width = _ref.width,
@@ -81,4 +93,4 @@ var getGuidelines = exports.getGuidelines = function getGuidelines(isResizing, n
81
93
  });
82
94
  }
83
95
  return guidelines;
84
- };
96
+ });
package/dist/cjs/pm-plugins/resizer-callbacks.js CHANGED
@@ -20,11 +20,13 @@ function getProposedWidth(_ref) {
20
20
  location = _ref.location,
21
21
  api = _ref.api;
22
22
  var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
23
- var proposedWidth = initialWidth + diffX;
24
23
 
25
24
  // TODO: ED-28024 - add snapping logic
26
25
 
27
26
  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
+
28
+ // the node width may be greater than the container width so we resize using the smaller value
29
+ var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
28
30
  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
29
31
  }
30
32
  function createResizerCallbacks(_ref2) {
@@ -34,6 +36,7 @@ function createResizerCallbacks(_ref2) {
34
36
  mark = _ref2.mark,
35
37
  api = _ref2.api;
36
38
  var node = null;
39
+ var guidelines = [];
37
40
  var getEditorWidth = function getEditorWidth() {
38
41
  var _api$width;
39
42
  return api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
@@ -55,7 +58,7 @@ function createResizerCallbacks(_ref2) {
55
58
  location: location,
56
59
  api: api
57
60
  });
58
- var guidelines = (0, _getGuidelines.getGuidelines)(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
61
+ guidelines = (0, _getGuidelines.getGuidelines)(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
59
62
  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)({
60
63
  guidelines: guidelines
61
64
  });
@@ -64,14 +67,17 @@ function createResizerCallbacks(_ref2) {
64
67
  onDrop: function onDrop(_ref4) {
65
68
  var _api$guideline2, _api$userIntent2;
66
69
  var location = _ref4.location;
67
- var guidelines = (0, _getGuidelines.getGuidelines)(false, 0, getEditorWidth);
70
+ var isResizedToFullWidth = !!guidelines.find(function (guideline) {
71
+ return guideline.key.includes('full_width') && guideline.active;
72
+ });
73
+ guidelines = (0, _getGuidelines.getGuidelines)(false, 0, getEditorWidth);
68
74
  api === null || api === void 0 || (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 || (_api$guideline2 = _api$guideline2.actions) === null || _api$guideline2 === void 0 || _api$guideline2.displayGuideline(view)({
69
75
  guidelines: guidelines
70
76
  });
71
77
  var pos = view.posAtDOM(dom, 0);
72
78
  var mode = mark.attrs.mode;
73
79
  var initialWidth = mark.attrs.width;
74
- var newWidth = getProposedWidth({
80
+ var newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
75
81
  initialWidth: initialWidth,
76
82
  location: location,
77
83
  api: api
package/dist/es2019/pm-plugins/get-guidelines.js CHANGED
@@ -1,4 +1,5 @@
1
- import { resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
1
+ import memoizeOne from 'memoize-one';
2
+ import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
2
3
  import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
3
4
  const WIDTHS = {
4
5
  MIN: akEditorDefaultLayoutWidth,
@@ -9,15 +10,25 @@ const GUIDELINE_KEYS = {
9
10
  wide: 'wide',
10
11
  fullWidth: 'full_width'
11
12
  };
13
+ const AK_NESTED_DND_GUTTER_OFFSET = 8;
12
14
  const roundToNearest = (value, interval = 0.5) => Math.round(value / interval) * interval;
13
- export const getGuidelines = (isResizing, newWidth, getEditorWidth, nodeType) => {
15
+ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, nodeType) => {
14
16
  const guidelines = [];
15
17
  if (!isResizing) {
16
18
  return guidelines;
17
19
  }
18
20
  let innerPaddingOffset = 0;
19
- if (nodeType && nodeType.name === 'expand') {
20
- innerPaddingOffset = resizerHandleThumbWidth;
21
+ if (nodeType) {
22
+ switch (nodeType.name) {
23
+ case 'expand':
24
+ innerPaddingOffset = EXPAND_CONTAINER_PADDING + resizerHandleThumbWidth + AK_NESTED_DND_GUTTER_OFFSET;
25
+ break;
26
+ case 'layoutSection':
27
+ innerPaddingOffset = LAYOUT_COLUMN_PADDING + AK_NESTED_DND_GUTTER_OFFSET;
28
+ break;
29
+ default:
30
+ break;
31
+ }
21
32
  }
22
33
  const {
23
34
  width,
@@ -73,4 +84,4 @@ export const getGuidelines = (isResizing, newWidth, getEditorWidth, nodeType) =>
73
84
  });
74
85
  }
75
86
  return guidelines;
76
- };
87
+ });
package/dist/es2019/pm-plugins/resizer-callbacks.js CHANGED
@@ -14,11 +14,13 @@ export function getProposedWidth({
14
14
  }) {
15
15
  var _api$width$sharedStat, _api$width$sharedStat2;
16
16
  const diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
17
- const proposedWidth = initialWidth + diffX;
18
17
 
19
18
  // TODO: ED-28024 - add snapping logic
20
19
 
21
20
  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
+
22
+ // the node width may be greater than the container width so we resize using the smaller value
23
+ const proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
22
24
  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
23
25
  }
24
26
  export function createResizerCallbacks({
@@ -29,6 +31,7 @@ export function createResizerCallbacks({
29
31
  api
30
32
  }) {
31
33
  let node = null;
34
+ let guidelines = [];
32
35
  const getEditorWidth = () => {
33
36
  var _api$width;
34
37
  return api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
@@ -51,7 +54,7 @@ export function createResizerCallbacks({
51
54
  location,
52
55
  api
53
56
  });
54
- const guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
57
+ guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
55
58
  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)({
56
59
  guidelines
57
60
  });
@@ -61,14 +64,15 @@ export function createResizerCallbacks({
61
64
  location
62
65
  }) {
63
66
  var _api$guideline2, _api$guideline2$actio, _api$userIntent2;
64
- const guidelines = getGuidelines(false, 0, getEditorWidth);
67
+ const isResizedToFullWidth = !!guidelines.find(guideline => guideline.key.includes('full_width') && guideline.active);
68
+ guidelines = getGuidelines(false, 0, getEditorWidth);
65
69
  api === null || api === void 0 ? void 0 : (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 ? void 0 : (_api$guideline2$actio = _api$guideline2.actions) === null || _api$guideline2$actio === void 0 ? void 0 : _api$guideline2$actio.displayGuideline(view)({
66
70
  guidelines
67
71
  });
68
72
  const pos = view.posAtDOM(dom, 0);
69
73
  const mode = mark.attrs.mode;
70
74
  const initialWidth = mark.attrs.width;
71
- const newWidth = getProposedWidth({
75
+ const newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
72
76
  initialWidth,
73
77
  location,
74
78
  api
package/dist/esm/pm-plugins/get-guidelines.js CHANGED
@@ -1,4 +1,5 @@
1
- import { resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
1
+ import memoizeOne from 'memoize-one';
2
+ import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
2
3
  import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
3
4
  var WIDTHS = {
4
5
  MIN: akEditorDefaultLayoutWidth,
@@ -9,18 +10,28 @@ var GUIDELINE_KEYS = {
9
10
  wide: 'wide',
10
11
  fullWidth: 'full_width'
11
12
  };
13
+ var AK_NESTED_DND_GUTTER_OFFSET = 8;
12
14
  var roundToNearest = function roundToNearest(value) {
13
15
  var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
14
16
  return Math.round(value / interval) * interval;
15
17
  };
16
- export var getGuidelines = function getGuidelines(isResizing, newWidth, getEditorWidth, nodeType) {
18
+ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorWidth, nodeType) {
17
19
  var guidelines = [];
18
20
  if (!isResizing) {
19
21
  return guidelines;
20
22
  }
21
23
  var innerPaddingOffset = 0;
22
- if (nodeType && nodeType.name === 'expand') {
23
- innerPaddingOffset = resizerHandleThumbWidth;
24
+ if (nodeType) {
25
+ switch (nodeType.name) {
26
+ case 'expand':
27
+ innerPaddingOffset = EXPAND_CONTAINER_PADDING + resizerHandleThumbWidth + AK_NESTED_DND_GUTTER_OFFSET;
28
+ break;
29
+ case 'layoutSection':
30
+ innerPaddingOffset = LAYOUT_COLUMN_PADDING + AK_NESTED_DND_GUTTER_OFFSET;
31
+ break;
32
+ default:
33
+ break;
34
+ }
24
35
  }
25
36
  var _ref = getEditorWidth() || {},
26
37
  width = _ref.width,
@@ -75,4 +86,4 @@ export var getGuidelines = function getGuidelines(isResizing, newWidth, getEdito
75
86
  });
76
87
  }
77
88
  return guidelines;
78
- };
89
+ });
package/dist/esm/pm-plugins/resizer-callbacks.js CHANGED
@@ -13,11 +13,13 @@ export function getProposedWidth(_ref) {
13
13
  location = _ref.location,
14
14
  api = _ref.api;
15
15
  var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
16
- var proposedWidth = initialWidth + diffX;
17
16
 
18
17
  // TODO: ED-28024 - add snapping logic
19
18
 
20
19
  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
+
21
+ // the node width may be greater than the container width so we resize using the smaller value
22
+ var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
21
23
  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
22
24
  }
23
25
  export function createResizerCallbacks(_ref2) {
@@ -27,6 +29,7 @@ export function createResizerCallbacks(_ref2) {
27
29
  mark = _ref2.mark,
28
30
  api = _ref2.api;
29
31
  var node = null;
32
+ var guidelines = [];
30
33
  var getEditorWidth = function getEditorWidth() {
31
34
  var _api$width;
32
35
  return api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
@@ -48,7 +51,7 @@ export function createResizerCallbacks(_ref2) {
48
51
  location: location,
49
52
  api: api
50
53
  });
51
- var guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
54
+ guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
52
55
  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)({
53
56
  guidelines: guidelines
54
57
  });
@@ -57,14 +60,17 @@ export function createResizerCallbacks(_ref2) {
57
60
  onDrop: function onDrop(_ref4) {
58
61
  var _api$guideline2, _api$userIntent2;
59
62
  var location = _ref4.location;
60
- var guidelines = getGuidelines(false, 0, getEditorWidth);
63
+ var isResizedToFullWidth = !!guidelines.find(function (guideline) {
64
+ return guideline.key.includes('full_width') && guideline.active;
65
+ });
66
+ guidelines = getGuidelines(false, 0, getEditorWidth);
61
67
  api === null || api === void 0 || (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 || (_api$guideline2 = _api$guideline2.actions) === null || _api$guideline2 === void 0 || _api$guideline2.displayGuideline(view)({
62
68
  guidelines: guidelines
63
69
  });
64
70
  var pos = view.posAtDOM(dom, 0);
65
71
  var mode = mark.attrs.mode;
66
72
  var initialWidth = mark.attrs.width;
67
- var newWidth = getProposedWidth({
73
+ var newWidth = isResizedToFullWidth ? WIDTHS.MAX : getProposedWidth({
68
74
  initialWidth: initialWidth,
69
75
  location: location,
70
76
  api: api
package/dist/types/pm-plugins/get-guidelines.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
2
2
  import { EditorContainerWidth } from '@atlaskit/editor-common/types';
3
3
  import { NodeType } from '@atlaskit/editor-prosemirror/model';
4
- export declare const getGuidelines: (isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[];
4
+ export declare const getGuidelines: import("memoize-one").MemoizedFn<(isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[]>;
package/dist/types-ts4.5/pm-plugins/get-guidelines.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
2
2
  import { EditorContainerWidth } from '@atlaskit/editor-common/types';
3
3
  import { NodeType } from '@atlaskit/editor-prosemirror/model';
4
- export declare const getGuidelines: (isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[];
4
+ export declare const getGuidelines: import("memoize-one").MemoizedFn<(isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[]>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "2.4.3",
3
+ "version": "2.5.0",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -51,7 +51,8 @@
51
51
  "@atlaskit/tmp-editor-statsig": "^5.8.0",
52
52
  "@atlaskit/tokens": "^5.0.0",
53
53
  "@babel/runtime": "^7.0.0",
54
- "@emotion/react": "^11.7.1"
54
+ "@emotion/react": "^11.7.1",
55
+ "memoize-one": "^6.0.0"
55
56
  },
56
57
  "peerDependencies": {
57
58
  "react": "^18.2.0",