@atlaskit/editor-plugin-breakout 2.7.1 → 2.7.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.7.2
+
+### Patch Changes
+
+- [#168573](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/168573)
+  [`8c337a8701dfb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c337a8701dfb) -
+  Adds resized analytics for nodes that support breakout mark.
+- [#169278](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169278)
+  [`3ff87a0248416`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3ff87a0248416) -
+  [ux] ED-28232 fix guidelines location on full width pages for new resizing experience behind
+  platform_editor_breakout_resizing
+- Updated dependencies
+
 ## 2.7.1
 
 ### Patch Changes

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

@@ -8,6 +8,7 @@ exports.getGuidelines = void 0;
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var WIDTHS = {
   MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
   WIDE: _editorSharedStyles.akEditorCalculatedWideLayoutWidth,
@@ -44,23 +45,39 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
   var _ref = getEditorWidth() || {},
     width = _ref.width,
     lineLength = _ref.lineLength;
-  // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
   var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding) : undefined;
-  if (lineLength) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
     guidelines.push({
       key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
       position: {
-        x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
+        x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
       },
-      active: newWidth === lineLength
+      active: newWidth === WIDTHS.MIN
     });
     guidelines.push({
       key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
       position: {
-        x: roundToNearest(lineLength / 2 + innerPaddingOffset)
+        x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
       },
-      active: newWidth === lineLength
+      active: newWidth === WIDTHS.MIN
     });
+  } else {
+    if (lineLength) {
+      guidelines.push({
+        key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
+        position: {
+          x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
+        },
+        active: newWidth === lineLength
+      });
+      guidelines.push({
+        key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
+        position: {
+          x: roundToNearest(lineLength / 2 + innerPaddingOffset)
+        },
+        active: newWidth === lineLength
+      });
+    }
   }
   guidelines.push({
     key: "".concat(GUIDELINE_KEYS.wide, "_left"),

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

@@ -126,6 +126,14 @@ function createResizerCallbacks(_ref2) {
       });
       (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
+      if (node && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        var resizedPayload = (0, _analytics.generateResizedEventPayload)({
+          node: node,
+          prevWidth: initialWidth,
+          newWidth: newWidth
+        });
+        payloads.push(resizedPayload);
+      }
       api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
         var _api$userIntent2;
         var tr = _ref6.tr;

package/dist/cjs/pm-plugins/utils/analytics.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateResizeFrameRatePayloads = void 0;
+exports.generateResizedEventPayload = exports.generateResizeFrameRatePayloads = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var generateResizeFrameRatePayloads = exports.generateResizeFrameRatePayloads = function generateResizeFrameRatePayloads(props) {
   return props.frameRateSamples.map(function (frameRateSample, index) {
@@ -20,4 +20,19 @@ var generateResizeFrameRatePayloads = exports.generateResizeFrameRatePayloads =
       }
     };
   });
+};
+var generateResizedEventPayload = exports.generateResizedEventPayload = function generateResizedEventPayload(_ref) {
+  var node = _ref.node,
+    prevWidth = _ref.prevWidth,
+    newWidth = _ref.newWidth;
+  return {
+    action: _analytics.ACTION.RESIZED,
+    actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: {
+      nodeType: node.type.name,
+      prevWidth: prevWidth,
+      newWidth: newWidth
+    }
+  };
 };

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

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

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

@@ -3,7 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
 import { getGuidelines } from './get-guidelines';
 import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
-import { generateResizeFrameRatePayloads } from './utils/analytics';
+import { generateResizeFrameRatePayloads, generateResizedEventPayload } from './utils/analytics';
 import { measureFramerate, reduceResizeFrameRateSamples } from './utils/measure-framerate';
 const RESIZE_RATIO = 2;
 const SNAP_GAP = 10;
@@ -122,6 +122,14 @@ export function createResizerCallbacks({
       });
       setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
+      if (node && fg('platform_editor_breakout_resizing_hello_release')) {
+        const resizedPayload = generateResizedEventPayload({
+          node,
+          prevWidth: initialWidth,
+          newWidth
+        });
+        payloads.push(resizedPayload);
+      }
       api === null || api === void 0 ? void 0 : api.core.actions.execute(({
         tr
       }) => {

package/dist/es2019/pm-plugins/utils/analytics.js

@@ -12,4 +12,20 @@ export const generateResizeFrameRatePayloads = props => {
       isInitialSample: index === 0
     }
   }));
+};
+export const generateResizedEventPayload = ({
+  node,
+  prevWidth,
+  newWidth
+}) => {
+  return {
+    action: ACTION.RESIZED,
+    actionSubject: ACTION_SUBJECT.ELEMENT,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      nodeType: node.type.name,
+      prevWidth,
+      newWidth
+    }
+  };
 };

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

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

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

@@ -3,7 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
 import { getGuidelines } from './get-guidelines';
 import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
-import { generateResizeFrameRatePayloads } from './utils/analytics';
+import { generateResizeFrameRatePayloads, generateResizedEventPayload } from './utils/analytics';
 import { measureFramerate, reduceResizeFrameRateSamples } from './utils/measure-framerate';
 var RESIZE_RATIO = 2;
 var SNAP_GAP = 10;
@@ -119,6 +119,14 @@ export function createResizerCallbacks(_ref2) {
       });
       setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
+      if (node && fg('platform_editor_breakout_resizing_hello_release')) {
+        var resizedPayload = generateResizedEventPayload({
+          node: node,
+          prevWidth: initialWidth,
+          newWidth: newWidth
+        });
+        payloads.push(resizedPayload);
+      }
       api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
         var _api$userIntent2;
         var tr = _ref6.tr;

package/dist/esm/pm-plugins/utils/analytics.js

@@ -14,4 +14,19 @@ export var generateResizeFrameRatePayloads = function generateResizeFrameRatePay
       }
     };
   });
+};
+export var generateResizedEventPayload = function generateResizedEventPayload(_ref) {
+  var node = _ref.node,
+    prevWidth = _ref.prevWidth,
+    newWidth = _ref.newWidth;
+  return {
+    action: ACTION.RESIZED,
+    actionSubject: ACTION_SUBJECT.ELEMENT,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      nodeType: node.type.name,
+      prevWidth: prevWidth,
+      newWidth: newWidth
+    }
+  };
 };

package/dist/types/pm-plugins/utils/analytics.d.ts

@@ -5,3 +5,8 @@ export declare const generateResizeFrameRatePayloads: (props: {
     frameRateSamples: number[];
     originalNode: PMNode;
 }) => BreakoutEventPayload[];
+export declare const generateResizedEventPayload: ({ node, prevWidth, newWidth, }: {
+    node: PMNode;
+    prevWidth: number;
+    newWidth: number;
+}) => BreakoutEventPayload;

package/dist/types-ts4.5/pm-plugins/utils/analytics.d.ts

@@ -5,3 +5,8 @@ export declare const generateResizeFrameRatePayloads: (props: {
     frameRateSamples: number[];
     originalNode: PMNode;
 }) => BreakoutEventPayload[];
+export declare const generateResizedEventPayload: ({ node, prevWidth, newWidth, }: {
+    node: PMNode;
+    prevWidth: number;
+    newWidth: number;
+}) => BreakoutEventPayload;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.7.1",
+	"version": "2.7.2",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^6.0.0",
+		"@atlaskit/tmp-editor-statsig": "^6.1.0",
 		"@atlaskit/tokens": "^5.1.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",