@atlaskit/editor-plugin-breakout 2.6.0 → 2.7.0

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

@@ -3,6 +3,8 @@ 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 { measureFramerate, reduceResizeFrameRateSamples } from './utils/measure-framerate';
 const RESIZE_RATIO = 2;
 const SNAP_GAP = 10;
 const WIDTHS = {
@@ -42,15 +44,30 @@ export function createResizerCallbacks({
 }) {
   let node = null;
   let guidelines = [];
+  const {
+    startMeasure,
+    endMeasure,
+    countFrames
+  } = measureFramerate();
   const getEditorWidth = () => {
     var _api$width;
     return api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
   };
   return {
     onDragStart: () => {
-      var _api$userIntent;
-      api === null || api === void 0 ? void 0 : api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
-      view.dispatch(view.state.tr.setMeta('is-resizer-resizing', true));
+      if (fg('platform_editor_breakout_resizing_hello_release')) {
+        startMeasure();
+      }
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+        tr
+      }) => {
+        var _api$userIntent;
+        (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging')({
+          tr
+        });
+        tr.setMeta('is-resizer-resizing', true);
+        return tr;
+      });
       const pos = view.posAtDOM(dom, 0);
       node = view.state.doc.nodeAt(pos);
     },
@@ -59,6 +76,9 @@ export function createResizerCallbacks({
       source
     }) => {
       var _node, _api$guideline, _api$guideline$action;
+      if (fg('platform_editor_breakout_resizing_hello_release')) {
+        countFrames();
+      }
       const initialWidth = mark.attrs.width;
       const newWidth = getProposedWidth({
         initialWidth,
@@ -76,7 +96,16 @@ export function createResizerCallbacks({
       location,
       source
     }) {
-      var _api$guideline2, _api$guideline2$actio, _api$userIntent2;
+      var _api$guideline2, _api$guideline2$actio;
+      let payloads = [];
+      if (fg('platform_editor_breakout_resizing_hello_release')) {
+        const frameRateSamples = endMeasure();
+        payloads = generateResizeFrameRatePayloads({
+          docSize: view.state.doc.nodeSize,
+          frameRateSamples: reduceResizeFrameRateSamples(frameRateSamples),
+          originalNode: node
+        });
+      }
       const isResizedToFullWidth = !!guidelines.find(guideline => guideline.key.includes('full_width') && guideline.active);
       guidelines = getGuidelines(false, 0, getEditorWidth);
       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)({
@@ -93,8 +122,20 @@ export function createResizerCallbacks({
       });
       setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
-      view.dispatch(view.state.tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false));
-      api === null || api === void 0 ? void 0 : api.core.actions.execute((_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+        tr
+      }) => {
+        var _api$userIntent2;
+        (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default')({
+          tr
+        });
+        tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
+        payloads.forEach(payload => {
+          var _api$analytics, _api$analytics$action;
+          (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent(payload)(tr);
+        });
+        return tr;
+      });
     }
   };
 }

package/dist/es2019/pm-plugins/resizing-mark-view.js

@@ -7,12 +7,14 @@ export class ResizingMarkView {
    * Wrap node view in a resizing mark view
    * @param {Mark} mark - The breakout mark to resize
    * @param {EditorView} view - The editor view
-   * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - the pluginInjectionAPI
+   * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - The pluginInjectionAPI
+   * @param {Function} getIntl - () => IntlShape
+   * @param {PortalProviderAPI} - The nodeViewPortalProviderAPI
    * @example
    * ```ts
    * ```
    */
-  constructor(mark, view, api) {
+  constructor(mark, view, api, getIntl, nodeViewPortalProviderAPI) {
     const dom = document.createElement('div');
     const contentDOM = document.createElement('div');
     contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
@@ -47,13 +49,17 @@ export class ResizingMarkView {
       mark,
       api
     });
+    this.intl = getIntl();
+    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
     const {
       leftHandle,
       rightHandle,
       destroy
     } = createPragmaticResizer({
       target: contentDOM,
-      ...callbacks
+      ...callbacks,
+      intl: this.intl,
+      nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
     });
     dom.prepend(leftHandle);
     dom.appendChild(rightHandle);

package/dist/es2019/pm-plugins/resizing-plugin.js

@@ -44,13 +44,13 @@ const addBreakoutToResizableNode = ({
   };
 };
 export const resizingPluginKey = new PluginKey('breakout-resizing');
-export const createResizingPlugin = (api, options) => {
+export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, options) => {
   return new SafePlugin({
     key: resizingPluginKey,
     props: {
       markViews: {
         breakout: (mark, view) => {
-          return new ResizingMarkView(mark, view, api);
+          return new ResizingMarkView(mark, view, api, getIntl, nodeViewPortalProviderAPI);
         }
       },
       handleKeyDown

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

@@ -0,0 +1,15 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+export const generateResizeFrameRatePayloads = props => {
+  return props.frameRateSamples.map((frameRateSample, index) => ({
+    action: ACTION.RESIZED_PERF_SAMPLING,
+    actionSubject: ACTION_SUBJECT.ELEMENT,
+    eventType: EVENT_TYPE.OPERATIONAL,
+    attributes: {
+      nodeType: props.originalNode.type.name,
+      frameRate: frameRateSample,
+      nodeSize: props.originalNode.nodeSize,
+      docSize: props.docSize,
+      isInitialSample: index === 0
+    }
+  }));
+};

package/dist/es2019/pm-plugins/utils/measure-framerate.js

@@ -0,0 +1,109 @@
+/**
+ * Measure the FPS of a resizing component.
+ *
+ * This is a simplified version of the `useMeasureFramerate` hook from `editor-plugin-table`.
+ * (packages/editor/editor-plugin-table/src/pm-plugins/utils/analytics.ts)
+ */
+
+export const reduceResizeFrameRateSamples = frameRateSamples => {
+  if (frameRateSamples.length > 1) {
+    const frameRateSum = frameRateSamples.reduce((sum, frameRate, index) => {
+      if (index === 0) {
+        return sum;
+      } else {
+        return sum + frameRate;
+      }
+    }, 0);
+    const averageFrameRate = Math.round(frameRateSum / (frameRateSamples.length - 1));
+    return [frameRateSamples[0], averageFrameRate];
+  } else {
+    return frameRateSamples;
+  }
+};
+/**
+ * Measures the framerate of a component over a given time period.
+ * @param {object} [config] - Configuration options for framerate measurement.
+ * @returns {object} An object containing startMeasure, endMeasure, and countFrames methods.
+ * @example
+ * const { startMeasure, endMeasure, countFrames } = measureFramerate();
+ * startMeasure();
+ * // ... animation loop with countFrames() calls
+ * const samples = endMeasure(); // [60, 58, 62]
+ */
+export const measureFramerate = config => {
+  const {
+    maxSamples = 10,
+    minFrames = 5,
+    minTimeMs = 500,
+    sampleRateMs = 1000,
+    timeoutMs = 200
+  } = config || {};
+  let frameCount = 0;
+  let lastTime = 0;
+  let timeoutId;
+  let frameRateSamples = [];
+  const startMeasure = () => {
+    frameCount = 0;
+    lastTime = performance.now();
+  };
+
+  /**
+   * Returns an array of frame rate samples as integers.
+   * @returns {number[]} An array of frame rate samples as integers.
+   * @example
+   * const samples = endMeasure(); // [60, 58, 62]
+   */
+  const endMeasure = () => {
+    const samples = frameRateSamples;
+    frameRateSamples = [];
+    return samples;
+  };
+  const sampleFrameRate = (delay = 0) => {
+    const currentTime = performance.now();
+    const deltaTime = currentTime - lastTime - delay;
+    const isValidSample = deltaTime > minTimeMs && frameCount >= minFrames;
+    if (isValidSample) {
+      const frameRate = Math.round(frameCount / (deltaTime / 1000));
+      frameRateSamples.push(frameRate);
+    }
+    frameCount = 0;
+    lastTime = 0;
+  };
+
+  /**
+   * Counts the number of frames that occur within a given time period. Intended to be called
+   * inside a `requestAnimationFrame` callback.
+   * @example
+   * const animate = () => {
+   *   countFrames();
+   *   requestAnimationFrame(animate);
+   * };
+   */
+  const countFrames = () => {
+    if (frameRateSamples.length >= maxSamples && timeoutId) {
+      clearTimeout(timeoutId);
+      return;
+    }
+
+    /**
+     * Allows us to keep counting frames even if `startMeasure` is not called
+     */
+    if (lastTime === 0) {
+      lastTime = performance.now();
+    }
+    frameCount++;
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    if (performance.now() - lastTime > sampleRateMs) {
+      sampleFrameRate();
+    } else {
+      timeoutId = setTimeout(() => sampleFrameRate(timeoutMs), timeoutMs);
+    }
+  };
+  return {
+    startMeasure,
+    endMeasure,
+    countFrames
+  };
+};

package/dist/esm/breakoutPlugin.js

@@ -200,8 +200,10 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
       if (editorExperiment('platform_editor_breakout_resizing', true)) {
         return [{
           name: 'breakout-resizing',
-          plugin: function plugin() {
-            return createResizingPlugin(api, options);
+          plugin: function plugin(_ref5) {
+            var getIntl = _ref5.getIntl,
+              nodeViewPortalProviderAPI = _ref5.nodeViewPortalProviderAPI;
+            return createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options);
           }
         }];
       }
@@ -232,11 +234,11 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
       }
       return pluginState;
     },
-    contentComponent: function contentComponent(_ref5) {
-      var editorView = _ref5.editorView,
-        popupsMountPoint = _ref5.popupsMountPoint,
-        popupsBoundariesElement = _ref5.popupsBoundariesElement,
-        popupsScrollableElement = _ref5.popupsScrollableElement;
+    contentComponent: function contentComponent(_ref6) {
+      var editorView = _ref6.editorView,
+        popupsMountPoint = _ref6.popupsMountPoint,
+        popupsBoundariesElement = _ref6.popupsBoundariesElement,
+        popupsScrollableElement = _ref6.popupsScrollableElement;
       // This is a bit crappy, but should be resolved once we move to a static schema.
       if (options && !options.allowBreakoutButton) {
         return null;

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

@@ -1,13 +1,62 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useLayoutEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import uuid from 'uuid/v4';
+import { breakoutMessages as messages } from '@atlaskit/editor-common/messages';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
-export var createPragmaticResizer = function createPragmaticResizer(_ref) {
-  var target = _ref.target,
-    _onDragStart = _ref.onDragStart,
-    onDrag = _ref.onDrag,
-    _onDrop = _ref.onDrop;
+import Tooltip from '@atlaskit/tooltip';
+var getNodeName = function getNodeName(nodeName) {
+  if (nodeName === 'layoutSection') {
+    return 'layout';
+  } else if (nodeName === 'codeBlock' || nodeName === 'expand') {
+    return nodeName;
+  } else {
+    return 'node';
+  }
+};
+export var resizeHandleMessage = {
+  expand: messages.resizeExpand,
+  codeBlock: messages.resizeCodeBlock,
+  layout: messages.resizeLayout,
+  node: messages.resizeElement
+};
+var RailWithTooltip = function RailWithTooltip(_ref) {
+  var rail = _ref.rail,
+    target = _ref.target,
+    intl = _ref.intl;
+  var _useState = useState('node'),
+    _useState2 = _slicedToArray(_useState, 2),
+    nodeName = _useState2[0],
+    setNodeName = _useState2[1];
+  useLayoutEffect(function () {
+    var node = target.querySelector('[data-prosemirror-node-name]');
+    var name = getNodeName(node === null || node === void 0 ? void 0 : node.dataset.prosemirrorNodeName);
+    setNodeName(name);
+  }, [target]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: intl.formatMessage(resizeHandleMessage[nodeName]),
+    position: "mouse"
+  }, /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "pm-breakout-resize-handle-rail-inside-tooltip",
+    ref: function ref(el) {
+      if (el && rail.parentNode !== el) {
+        el.appendChild(rail);
+      }
+    }
+  }));
+};
+export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
+  var target = _ref2.target,
+    _onDragStart = _ref2.onDragStart,
+    onDrag = _ref2.onDrag,
+    _onDrop = _ref2.onDrop,
+    intl = _ref2.intl,
+    nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
   var state = 'default';
   var createHandle = function createHandle(side) {
     var handle = document.createElement('div');
@@ -27,21 +76,45 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref) {
     var thumb = document.createElement('div');
     thumb.classList.add('pm-breakout-resize-handle-thumb');
     rail.appendChild(thumb);
-    handle.appendChild(rail);
-    handle.appendChild(handleHitBox);
-    return {
-      handle: handle,
-      rail: rail,
-      handleHitBox: handleHitBox
-    };
+    if (fg('platform_editor_breakout_resizing_hello_release')) {
+      var tooltipContainer = document.createElement('div');
+      tooltipContainer.classList.add('pm-breakout-resize-handle-rail-wrapper');
+      handle.appendChild(tooltipContainer);
+      handle.appendChild(handleHitBox);
+      var key = uuid();
+      nodeViewPortalProviderAPI.render(function () {
+        return /*#__PURE__*/React.createElement(RailWithTooltip, {
+          rail: rail,
+          target: target,
+          intl: intl
+        });
+      }, tooltipContainer, key);
+      return {
+        handle: handle,
+        rail: rail,
+        handleHitBox: handleHitBox,
+        destroyTooltip: function destroyTooltip() {
+          return nodeViewPortalProviderAPI.remove(key);
+        }
+      };
+    } else {
+      handle.appendChild(rail);
+      handle.appendChild(handleHitBox);
+      return {
+        handle: handle,
+        rail: rail,
+        handleHitBox: handleHitBox,
+        destroyTooltip: function destroyTooltip() {}
+      };
+    }
   };
   var rightHandle = createHandle('right');
   var leftHandle = createHandle('left');
   var registerHandle = function registerHandle(handleElement, handleSide) {
     return draggable({
       element: handleElement,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
-        var nativeSetDragImage = _ref2.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
+        var nativeSetDragImage = _ref3.nativeSetDragImage;
         disableNativeDragPreview({
           nativeSetDragImage: nativeSetDragImage
         });
@@ -85,7 +158,7 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref) {
     })];
   };
   var unbindFns = [].concat(_toConsumableArray(registerEvents(target)), _toConsumableArray(registerEvents(rightHandle.handleHitBox)), _toConsumableArray(registerEvents(leftHandle.handleHitBox)), _toConsumableArray(registerEvents(rightHandle.rail)), _toConsumableArray(registerEvents(leftHandle.rail)));
-  var destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left')];
+  var destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left')].concat(_toConsumableArray(fg('platform_editor_breakout_resizing_hello_release') ? [rightHandle.destroyTooltip, leftHandle.destroyTooltip] : []));
   return {
     rightHandle: rightHandle.handle,
     leftHandle: leftHandle.handle,

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

@@ -3,6 +3,8 @@ 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 { measureFramerate, reduceResizeFrameRateSamples } from './utils/measure-framerate';
 var RESIZE_RATIO = 2;
 var SNAP_GAP = 10;
 var WIDTHS = {
@@ -41,22 +43,38 @@ export function createResizerCallbacks(_ref2) {
     api = _ref2.api;
   var node = null;
   var guidelines = [];
+  var _measureFramerate = measureFramerate(),
+    startMeasure = _measureFramerate.startMeasure,
+    endMeasure = _measureFramerate.endMeasure,
+    countFrames = _measureFramerate.countFrames;
   var getEditorWidth = function getEditorWidth() {
     var _api$width;
     return api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
   };
   return {
     onDragStart: function onDragStart() {
-      var _api$userIntent;
-      api === null || api === void 0 || api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
-      view.dispatch(view.state.tr.setMeta('is-resizer-resizing', true));
+      if (fg('platform_editor_breakout_resizing_hello_release')) {
+        startMeasure();
+      }
+      api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+        var _api$userIntent;
+        var tr = _ref3.tr;
+        (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('dragging')({
+          tr: tr
+        });
+        tr.setMeta('is-resizer-resizing', true);
+        return tr;
+      });
       var pos = view.posAtDOM(dom, 0);
       node = view.state.doc.nodeAt(pos);
     },
-    onDrag: function onDrag(_ref3) {
+    onDrag: function onDrag(_ref4) {
       var _node, _api$guideline;
-      var location = _ref3.location,
-        source = _ref3.source;
+      var location = _ref4.location,
+        source = _ref4.source;
+      if (fg('platform_editor_breakout_resizing_hello_release')) {
+        countFrames();
+      }
       var initialWidth = mark.attrs.width;
       var newWidth = getProposedWidth({
         initialWidth: initialWidth,
@@ -70,10 +88,19 @@ export function createResizerCallbacks(_ref2) {
       });
       contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
     },
-    onDrop: function onDrop(_ref4) {
-      var _api$guideline2, _api$userIntent2;
-      var location = _ref4.location,
-        source = _ref4.source;
+    onDrop: function onDrop(_ref5) {
+      var _api$guideline2;
+      var location = _ref5.location,
+        source = _ref5.source;
+      var payloads = [];
+      if (fg('platform_editor_breakout_resizing_hello_release')) {
+        var frameRateSamples = endMeasure();
+        payloads = generateResizeFrameRatePayloads({
+          docSize: view.state.doc.nodeSize,
+          frameRateSamples: reduceResizeFrameRateSamples(frameRateSamples),
+          originalNode: node
+        });
+      }
       var isResizedToFullWidth = !!guidelines.find(function (guideline) {
         return guideline.key.includes('full_width') && guideline.active;
       });
@@ -92,8 +119,19 @@ export function createResizerCallbacks(_ref2) {
       });
       setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
-      view.dispatch(view.state.tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false));
-      api === null || api === void 0 || api.core.actions.execute((_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));
+      api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
+        var _api$userIntent2;
+        var tr = _ref6.tr;
+        (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent('default')({
+          tr: tr
+        });
+        tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
+        payloads.forEach(function (payload) {
+          var _api$analytics;
+          (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent(payload)(tr);
+        });
+        return tr;
+      });
     }
   };
 }

package/dist/esm/pm-plugins/resizing-mark-view.js

@@ -12,12 +12,14 @@ export var ResizingMarkView = /*#__PURE__*/function () {
    * Wrap node view in a resizing mark view
    * @param {Mark} mark - The breakout mark to resize
    * @param {EditorView} view - The editor view
-   * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - the pluginInjectionAPI
+   * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - The pluginInjectionAPI
+   * @param {Function} getIntl - () => IntlShape
+   * @param {PortalProviderAPI} - The nodeViewPortalProviderAPI
    * @example
    * ```ts
    * ```
    */
-  function ResizingMarkView(mark, view, api) {
+  function ResizingMarkView(mark, view, api, getIntl, nodeViewPortalProviderAPI) {
     _classCallCheck(this, ResizingMarkView);
     var dom = document.createElement('div');
     var contentDOM = document.createElement('div');
@@ -53,9 +55,14 @@ export var ResizingMarkView = /*#__PURE__*/function () {
       mark: mark,
       api: api
     });
-    var _createPragmaticResiz = createPragmaticResizer(_objectSpread({
+    this.intl = getIntl();
+    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
+    var _createPragmaticResiz = createPragmaticResizer(_objectSpread(_objectSpread({
         target: contentDOM
-      }, callbacks)),
+      }, callbacks), {}, {
+        intl: this.intl,
+        nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
+      })),
       leftHandle = _createPragmaticResiz.leftHandle,
       rightHandle = _createPragmaticResiz.rightHandle,
       destroy = _createPragmaticResiz.destroy;

package/dist/esm/pm-plugins/resizing-plugin.js

@@ -43,13 +43,13 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
   };
 };
 export var resizingPluginKey = new PluginKey('breakout-resizing');
-export var createResizingPlugin = function createResizingPlugin(api, options) {
+export var createResizingPlugin = function createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options) {
   return new SafePlugin({
     key: resizingPluginKey,
     props: {
       markViews: {
         breakout: function breakout(mark, view) {
-          return new ResizingMarkView(mark, view, api);
+          return new ResizingMarkView(mark, view, api, getIntl, nodeViewPortalProviderAPI);
         }
       },
       handleKeyDown: handleKeyDown

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

@@ -0,0 +1,17 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+export var generateResizeFrameRatePayloads = function generateResizeFrameRatePayloads(props) {
+  return props.frameRateSamples.map(function (frameRateSample, index) {
+    return {
+      action: ACTION.RESIZED_PERF_SAMPLING,
+      actionSubject: ACTION_SUBJECT.ELEMENT,
+      eventType: EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        nodeType: props.originalNode.type.name,
+        frameRate: frameRateSample,
+        nodeSize: props.originalNode.nodeSize,
+        docSize: props.docSize,
+        isInitialSample: index === 0
+      }
+    };
+  });
+};