@atlaskit/editor-plugin-breakout 2.7.0 → 2.7.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 (16) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/pm-plugins/get-guidelines.js +23 -6
  3. package/dist/cjs/pm-plugins/resizer-callbacks.js +8 -0
  4. package/dist/cjs/pm-plugins/resizing-mark-view.js +21 -7
  5. package/dist/cjs/pm-plugins/utils/analytics.js +16 -1
  6. package/dist/es2019/pm-plugins/get-guidelines.js +23 -6
  7. package/dist/es2019/pm-plugins/resizer-callbacks.js +9 -1
  8. package/dist/es2019/pm-plugins/resizing-mark-view.js +21 -7
  9. package/dist/es2019/pm-plugins/utils/analytics.js +16 -0
  10. package/dist/esm/pm-plugins/get-guidelines.js +23 -6
  11. package/dist/esm/pm-plugins/resizer-callbacks.js +9 -1
  12. package/dist/esm/pm-plugins/resizing-mark-view.js +21 -7
  13. package/dist/esm/pm-plugins/utils/analytics.js +15 -0
  14. package/dist/types/pm-plugins/utils/analytics.d.ts +5 -0
  15. package/dist/types-ts4.5/pm-plugins/utils/analytics.d.ts +5 -0
  16. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 2.7.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#168573](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/168573)
8
+ [`8c337a8701dfb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c337a8701dfb) -
9
+ Adds resized analytics for nodes that support breakout mark.
10
+ - [#169278](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169278)
11
+ [`3ff87a0248416`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3ff87a0248416) -
12
+ [ux] ED-28232 fix guidelines location on full width pages for new resizing experience behind
13
+ platform_editor_breakout_resizing
14
+ - Updated dependencies
15
+
16
+ ## 2.7.1
17
+
18
+ ### Patch Changes
19
+
20
+ - [#168578](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/168578)
21
+ [`41261a6eeacb3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/41261a6eeacb3) -
22
+ ED-28219 fix new resizing experience on full width pages
23
+ - Updated dependencies
24
+
3
25
  ## 2.7.0
4
26
 
5
27
  ### Minor Changes
package/dist/cjs/pm-plugins/get-guidelines.js CHANGED
@@ -8,6 +8,7 @@ exports.getGuidelines = void 0;
8
8
  var _memoizeOne = _interopRequireDefault(require("memoize-one"));
9
9
  var _styles = require("@atlaskit/editor-common/styles");
10
10
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
12
  var WIDTHS = {
12
13
  MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
13
14
  WIDE: _editorSharedStyles.akEditorCalculatedWideLayoutWidth,
@@ -44,23 +45,39 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
44
45
  var _ref = getEditorWidth() || {},
45
46
  width = _ref.width,
46
47
  lineLength = _ref.lineLength;
47
- // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
48
48
  var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding) : undefined;
49
- if (lineLength) {
49
+ if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
50
50
  guidelines.push({
51
51
  key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
52
52
  position: {
53
- x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
53
+ x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
54
54
  },
55
- active: newWidth === lineLength
55
+ active: newWidth === WIDTHS.MIN
56
56
  });
57
57
  guidelines.push({
58
58
  key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
59
59
  position: {
60
- x: roundToNearest(lineLength / 2 + innerPaddingOffset)
60
+ x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
61
61
  },
62
- active: newWidth === lineLength
62
+ active: newWidth === WIDTHS.MIN
63
63
  });
64
+ } else {
65
+ if (lineLength) {
66
+ guidelines.push({
67
+ key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
68
+ position: {
69
+ x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
70
+ },
71
+ active: newWidth === lineLength
72
+ });
73
+ guidelines.push({
74
+ key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
75
+ position: {
76
+ x: roundToNearest(lineLength / 2 + innerPaddingOffset)
77
+ },
78
+ active: newWidth === lineLength
79
+ });
80
+ }
64
81
  }
65
82
  guidelines.push({
66
83
  key: "".concat(GUIDELINE_KEYS.wide, "_left"),
package/dist/cjs/pm-plugins/resizer-callbacks.js CHANGED
@@ -126,6 +126,14 @@ function createResizerCallbacks(_ref2) {
126
126
  });
127
127
  (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos)(view.state, view.dispatch);
128
128
  contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
129
+ if (node && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
130
+ var resizedPayload = (0, _analytics.generateResizedEventPayload)({
131
+ node: node,
132
+ prevWidth: initialWidth,
133
+ newWidth: newWidth
134
+ });
135
+ payloads.push(resizedPayload);
136
+ }
129
137
  api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
130
138
  var _api$userIntent2;
131
139
  var tr = _ref6.tr;
package/dist/cjs/pm-plugins/resizing-mark-view.js CHANGED
@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
9
9
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
10
10
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
11
11
  var _styles = require("@atlaskit/editor-common/styles");
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  var _pragmaticResizer = require("./pragmatic-resizer");
13
14
  var _resizerCallbacks = require("./resizer-callbacks");
14
15
  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; }
@@ -44,14 +45,27 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
44
45
  contentDOM.style.gridRow = '1';
45
46
  contentDOM.style.gridColumn = '1';
46
47
  contentDOM.style.zIndex = '1';
47
- if (mark.attrs.width) {
48
- contentDOM.style.minWidth = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
49
- } else {
50
- if (mark.attrs.mode === 'wide') {
51
- contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
48
+ if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
49
+ if (mark.attrs.width) {
50
+ contentDOM.style.width = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
51
+ } else {
52
+ if (mark.attrs.mode === 'wide') {
53
+ contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
54
+ }
55
+ if (mark.attrs.mode === 'full-width') {
56
+ contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
57
+ }
52
58
  }
53
- if (mark.attrs.mode === 'full-width') {
54
- contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
59
+ } else {
60
+ if (mark.attrs.width) {
61
+ contentDOM.style.minWidth = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
62
+ } else {
63
+ if (mark.attrs.mode === 'wide') {
64
+ contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
65
+ }
66
+ if (mark.attrs.mode === 'full-width') {
67
+ contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
68
+ }
55
69
  }
56
70
  }
57
71
  dom.appendChild(contentDOM);
package/dist/cjs/pm-plugins/utils/analytics.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.generateResizeFrameRatePayloads = void 0;
6
+ exports.generateResizedEventPayload = exports.generateResizeFrameRatePayloads = void 0;
7
7
  var _analytics = require("@atlaskit/editor-common/analytics");
8
8
  var generateResizeFrameRatePayloads = exports.generateResizeFrameRatePayloads = function generateResizeFrameRatePayloads(props) {
9
9
  return props.frameRateSamples.map(function (frameRateSample, index) {
@@ -20,4 +20,19 @@ var generateResizeFrameRatePayloads = exports.generateResizeFrameRatePayloads =
20
20
  }
21
21
  };
22
22
  });
23
+ };
24
+ var generateResizedEventPayload = exports.generateResizedEventPayload = function generateResizedEventPayload(_ref) {
25
+ var node = _ref.node,
26
+ prevWidth = _ref.prevWidth,
27
+ newWidth = _ref.newWidth;
28
+ return {
29
+ action: _analytics.ACTION.RESIZED,
30
+ actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
31
+ eventType: _analytics.EVENT_TYPE.TRACK,
32
+ attributes: {
33
+ nodeType: node.type.name,
34
+ prevWidth: prevWidth,
35
+ newWidth: newWidth
36
+ }
37
+ };
23
38
  };
package/dist/es2019/pm-plugins/get-guidelines.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import memoizeOne from 'memoize-one';
2
2
  import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
3
3
  import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  const WIDTHS = {
5
6
  MIN: akEditorDefaultLayoutWidth,
6
7
  WIDE: akEditorCalculatedWideLayoutWidth,
@@ -35,23 +36,39 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
35
36
  width,
36
37
  lineLength
37
38
  } = getEditorWidth() || {};
38
- // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
39
39
  const fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
40
- if (lineLength) {
40
+ if (fg('platform_editor_breakout_resizing_hello_release')) {
41
41
  guidelines.push({
42
42
  key: `${GUIDELINE_KEYS.lineLength}_left`,
43
43
  position: {
44
- x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
44
+ x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
45
45
  },
46
- active: newWidth === lineLength
46
+ active: newWidth === WIDTHS.MIN
47
47
  });
48
48
  guidelines.push({
49
49
  key: `${GUIDELINE_KEYS.lineLength}_right`,
50
50
  position: {
51
- x: roundToNearest(lineLength / 2 + innerPaddingOffset)
51
+ x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
52
52
  },
53
- active: newWidth === lineLength
53
+ active: newWidth === WIDTHS.MIN
54
54
  });
55
+ } else {
56
+ if (lineLength) {
57
+ guidelines.push({
58
+ key: `${GUIDELINE_KEYS.lineLength}_left`,
59
+ position: {
60
+ x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
61
+ },
62
+ active: newWidth === lineLength
63
+ });
64
+ guidelines.push({
65
+ key: `${GUIDELINE_KEYS.lineLength}_right`,
66
+ position: {
67
+ x: roundToNearest(lineLength / 2 + innerPaddingOffset)
68
+ },
69
+ active: newWidth === lineLength
70
+ });
71
+ }
55
72
  }
56
73
  guidelines.push({
57
74
  key: `${GUIDELINE_KEYS.wide}_left`,
package/dist/es2019/pm-plugins/resizer-callbacks.js CHANGED
@@ -3,7 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
3
3
  import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
4
4
  import { getGuidelines } from './get-guidelines';
5
5
  import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
6
- import { generateResizeFrameRatePayloads } from './utils/analytics';
6
+ import { generateResizeFrameRatePayloads, generateResizedEventPayload } from './utils/analytics';
7
7
  import { measureFramerate, reduceResizeFrameRateSamples } from './utils/measure-framerate';
8
8
  const RESIZE_RATIO = 2;
9
9
  const SNAP_GAP = 10;
@@ -122,6 +122,14 @@ export function createResizerCallbacks({
122
122
  });
123
123
  setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
124
124
  contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
125
+ if (node && fg('platform_editor_breakout_resizing_hello_release')) {
126
+ const resizedPayload = generateResizedEventPayload({
127
+ node,
128
+ prevWidth: initialWidth,
129
+ newWidth
130
+ });
131
+ payloads.push(resizedPayload);
132
+ }
125
133
  api === null || api === void 0 ? void 0 : api.core.actions.execute(({
126
134
  tr
127
135
  }) => {
package/dist/es2019/pm-plugins/resizing-mark-view.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
2
3
  import { createPragmaticResizer } from './pragmatic-resizer';
3
4
  import { createResizerCallbacks } from './resizer-callbacks';
4
5
  export const LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
@@ -31,14 +32,27 @@ export class ResizingMarkView {
31
32
  contentDOM.style.gridRow = '1';
32
33
  contentDOM.style.gridColumn = '1';
33
34
  contentDOM.style.zIndex = '1';
34
- if (mark.attrs.width) {
35
- contentDOM.style.minWidth = `min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
36
- } else {
37
- if (mark.attrs.mode === 'wide') {
38
- contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
35
+ if (fg('platform_editor_breakout_resizing_hello_release')) {
36
+ if (mark.attrs.width) {
37
+ contentDOM.style.width = `min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
38
+ } else {
39
+ if (mark.attrs.mode === 'wide') {
40
+ contentDOM.style.width = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
41
+ }
42
+ if (mark.attrs.mode === 'full-width') {
43
+ contentDOM.style.width = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
44
+ }
39
45
  }
40
- if (mark.attrs.mode === 'full-width') {
41
- contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
46
+ } else {
47
+ if (mark.attrs.width) {
48
+ contentDOM.style.minWidth = `min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
49
+ } else {
50
+ if (mark.attrs.mode === 'wide') {
51
+ contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
52
+ }
53
+ if (mark.attrs.mode === 'full-width') {
54
+ contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
55
+ }
42
56
  }
43
57
  }
44
58
  dom.appendChild(contentDOM);
package/dist/es2019/pm-plugins/utils/analytics.js CHANGED
@@ -12,4 +12,20 @@ export const generateResizeFrameRatePayloads = props => {
12
12
  isInitialSample: index === 0
13
13
  }
14
14
  }));
15
+ };
16
+ export const generateResizedEventPayload = ({
17
+ node,
18
+ prevWidth,
19
+ newWidth
20
+ }) => {
21
+ return {
22
+ action: ACTION.RESIZED,
23
+ actionSubject: ACTION_SUBJECT.ELEMENT,
24
+ eventType: EVENT_TYPE.TRACK,
25
+ attributes: {
26
+ nodeType: node.type.name,
27
+ prevWidth,
28
+ newWidth
29
+ }
30
+ };
15
31
  };
package/dist/esm/pm-plugins/get-guidelines.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import memoizeOne from 'memoize-one';
2
2
  import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
3
3
  import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  var WIDTHS = {
5
6
  MIN: akEditorDefaultLayoutWidth,
6
7
  WIDE: akEditorCalculatedWideLayoutWidth,
@@ -37,23 +38,39 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
37
38
  var _ref = getEditorWidth() || {},
38
39
  width = _ref.width,
39
40
  lineLength = _ref.lineLength;
40
- // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
41
41
  var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
42
- if (lineLength) {
42
+ if (fg('platform_editor_breakout_resizing_hello_release')) {
43
43
  guidelines.push({
44
44
  key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
45
45
  position: {
46
- x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
46
+ x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
47
47
  },
48
- active: newWidth === lineLength
48
+ active: newWidth === WIDTHS.MIN
49
49
  });
50
50
  guidelines.push({
51
51
  key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
52
52
  position: {
53
- x: roundToNearest(lineLength / 2 + innerPaddingOffset)
53
+ x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
54
54
  },
55
- active: newWidth === lineLength
55
+ active: newWidth === WIDTHS.MIN
56
56
  });
57
+ } else {
58
+ if (lineLength) {
59
+ guidelines.push({
60
+ key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
61
+ position: {
62
+ x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
63
+ },
64
+ active: newWidth === lineLength
65
+ });
66
+ guidelines.push({
67
+ key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
68
+ position: {
69
+ x: roundToNearest(lineLength / 2 + innerPaddingOffset)
70
+ },
71
+ active: newWidth === lineLength
72
+ });
73
+ }
57
74
  }
58
75
  guidelines.push({
59
76
  key: "".concat(GUIDELINE_KEYS.wide, "_left"),
package/dist/esm/pm-plugins/resizer-callbacks.js CHANGED
@@ -3,7 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
3
3
  import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
4
4
  import { getGuidelines } from './get-guidelines';
5
5
  import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
6
- import { generateResizeFrameRatePayloads } from './utils/analytics';
6
+ import { generateResizeFrameRatePayloads, generateResizedEventPayload } from './utils/analytics';
7
7
  import { measureFramerate, reduceResizeFrameRateSamples } from './utils/measure-framerate';
8
8
  var RESIZE_RATIO = 2;
9
9
  var SNAP_GAP = 10;
@@ -119,6 +119,14 @@ export function createResizerCallbacks(_ref2) {
119
119
  });
120
120
  setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
121
121
  contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
122
+ if (node && fg('platform_editor_breakout_resizing_hello_release')) {
123
+ var resizedPayload = generateResizedEventPayload({
124
+ node: node,
125
+ prevWidth: initialWidth,
126
+ newWidth: newWidth
127
+ });
128
+ payloads.push(resizedPayload);
129
+ }
122
130
  api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
123
131
  var _api$userIntent2;
124
132
  var tr = _ref6.tr;
package/dist/esm/pm-plugins/resizing-mark-view.js CHANGED
@@ -4,6 +4,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
4
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
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; }
6
6
  import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
7
+ import { fg } from '@atlaskit/platform-feature-flags';
7
8
  import { createPragmaticResizer } from './pragmatic-resizer';
8
9
  import { createResizerCallbacks } from './resizer-callbacks';
9
10
  export var LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
@@ -37,14 +38,27 @@ export var ResizingMarkView = /*#__PURE__*/function () {
37
38
  contentDOM.style.gridRow = '1';
38
39
  contentDOM.style.gridColumn = '1';
39
40
  contentDOM.style.zIndex = '1';
40
- if (mark.attrs.width) {
41
- contentDOM.style.minWidth = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
42
- } else {
43
- if (mark.attrs.mode === 'wide') {
44
- contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
41
+ if (fg('platform_editor_breakout_resizing_hello_release')) {
42
+ if (mark.attrs.width) {
43
+ contentDOM.style.width = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
44
+ } else {
45
+ if (mark.attrs.mode === 'wide') {
46
+ contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
47
+ }
48
+ if (mark.attrs.mode === 'full-width') {
49
+ contentDOM.style.width = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
50
+ }
45
51
  }
46
- if (mark.attrs.mode === 'full-width') {
47
- contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
52
+ } else {
53
+ if (mark.attrs.width) {
54
+ contentDOM.style.minWidth = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
55
+ } else {
56
+ if (mark.attrs.mode === 'wide') {
57
+ contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
58
+ }
59
+ if (mark.attrs.mode === 'full-width') {
60
+ contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
61
+ }
48
62
  }
49
63
  }
50
64
  dom.appendChild(contentDOM);
package/dist/esm/pm-plugins/utils/analytics.js CHANGED
@@ -14,4 +14,19 @@ export var generateResizeFrameRatePayloads = function generateResizeFrameRatePay
14
14
  }
15
15
  };
16
16
  });
17
+ };
18
+ export var generateResizedEventPayload = function generateResizedEventPayload(_ref) {
19
+ var node = _ref.node,
20
+ prevWidth = _ref.prevWidth,
21
+ newWidth = _ref.newWidth;
22
+ return {
23
+ action: ACTION.RESIZED,
24
+ actionSubject: ACTION_SUBJECT.ELEMENT,
25
+ eventType: EVENT_TYPE.TRACK,
26
+ attributes: {
27
+ nodeType: node.type.name,
28
+ prevWidth: prevWidth,
29
+ newWidth: newWidth
30
+ }
31
+ };
17
32
  };
package/dist/types/pm-plugins/utils/analytics.d.ts CHANGED
@@ -5,3 +5,8 @@ export declare const generateResizeFrameRatePayloads: (props: {
5
5
  frameRateSamples: number[];
6
6
  originalNode: PMNode;
7
7
  }) => BreakoutEventPayload[];
8
+ export declare const generateResizedEventPayload: ({ node, prevWidth, newWidth, }: {
9
+ node: PMNode;
10
+ prevWidth: number;
11
+ newWidth: number;
12
+ }) => BreakoutEventPayload;
package/dist/types-ts4.5/pm-plugins/utils/analytics.d.ts CHANGED
@@ -5,3 +5,8 @@ export declare const generateResizeFrameRatePayloads: (props: {
5
5
  frameRateSamples: number[];
6
6
  originalNode: PMNode;
7
7
  }) => BreakoutEventPayload[];
8
+ export declare const generateResizedEventPayload: ({ node, prevWidth, newWidth, }: {
9
+ node: PMNode;
10
+ prevWidth: number;
11
+ newWidth: number;
12
+ }) => BreakoutEventPayload;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "2.7.0",
3
+ "version": "2.7.2",
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": "^6.0.0",
51
+ "@atlaskit/tmp-editor-statsig": "^6.1.0",
52
52
  "@atlaskit/tokens": "^5.1.0",
53
53
  "@atlaskit/tooltip": "^20.3.0",
54
54
  "@babel/runtime": "^7.0.0",