@atlaskit/editor-plugin-breakout 2.6.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.7.0
+
+### Minor Changes
+
+- [#166997](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166997)
+  [`826de0a17dc7e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/826de0a17dc7e) -
+  Introduce new breakout oprational event in editor-common, export the type and use in
+  editor-plugin-breakout. Add performance measurement for FPS for resizing
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.6.1
+
+### Patch Changes
+
+- [#166490](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166490)
+  [`9f140155c14be`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9f140155c14be) -
+  [ux] Shows tooltip on the resize handle when it is hovered.
+- Updated dependencies
+
 ## 2.6.0
 
 ### Minor Changes

package/dist/cjs/breakoutPlugin.js

@@ -209,8 +209,10 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
       if ((0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true)) {
         return [{
           name: 'breakout-resizing',
-          plugin: function plugin() {
-            return (0, _resizingPlugin.createResizingPlugin)(api, options);
+          plugin: function plugin(_ref5) {
+            var getIntl = _ref5.getIntl,
+              nodeViewPortalProviderAPI = _ref5.nodeViewPortalProviderAPI;
+            return (0, _resizingPlugin.createResizingPlugin)(api, getIntl, nodeViewPortalProviderAPI, options);
           }
         }];
       }
@@ -241,11 +243,11 @@ var breakoutPlugin = exports.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/cjs/pm-plugins/pragmatic-resizer.js

@@ -1,20 +1,71 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createPragmaticResizer = void 0;
+exports.resizeHandleMessage = exports.createPragmaticResizer = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
+var _v = _interopRequireDefault(require("uuid/v4"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
-var createPragmaticResizer = exports.createPragmaticResizer = function createPragmaticResizer(_ref) {
-  var target = _ref.target,
-    _onDragStart = _ref.onDragStart,
-    onDrag = _ref.onDrag,
-    _onDrop = _ref.onDrop;
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var getNodeName = function getNodeName(nodeName) {
+  if (nodeName === 'layoutSection') {
+    return 'layout';
+  } else if (nodeName === 'codeBlock' || nodeName === 'expand') {
+    return nodeName;
+  } else {
+    return 'node';
+  }
+};
+var resizeHandleMessage = exports.resizeHandleMessage = {
+  expand: _messages.breakoutMessages.resizeExpand,
+  codeBlock: _messages.breakoutMessages.resizeCodeBlock,
+  layout: _messages.breakoutMessages.resizeLayout,
+  node: _messages.breakoutMessages.resizeElement
+};
+var RailWithTooltip = function RailWithTooltip(_ref) {
+  var rail = _ref.rail,
+    target = _ref.target,
+    intl = _ref.intl;
+  var _useState = (0, _react.useState)('node'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    nodeName = _useState2[0],
+    setNodeName = _useState2[1];
+  (0, _react.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.default.createElement(_tooltip.default, {
+    content: intl.formatMessage(resizeHandleMessage[nodeName]),
+    position: "mouse"
+  }, /*#__PURE__*/_react.default.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);
+      }
+    }
+  }));
+};
+var createPragmaticResizer = exports.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');
@@ -34,21 +85,45 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
     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 ((0, _platformFeatureFlags.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 = (0, _v.default)();
+      nodeViewPortalProviderAPI.render(function () {
+        return /*#__PURE__*/_react.default.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 (0, _adapter.draggable)({
       element: handleElement,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
-        var nativeSetDragImage = _ref2.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
+        var nativeSetDragImage = _ref3.nativeSetDragImage;
         (0, _disableNativeDragPreview.disableNativeDragPreview)({
           nativeSetDragImage: nativeSetDragImage
         });
@@ -92,7 +167,7 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
     })];
   };
   var unbindFns = [].concat((0, _toConsumableArray2.default)(registerEvents(target)), (0, _toConsumableArray2.default)(registerEvents(rightHandle.handleHitBox)), (0, _toConsumableArray2.default)(registerEvents(leftHandle.handleHitBox)), (0, _toConsumableArray2.default)(registerEvents(rightHandle.rail)), (0, _toConsumableArray2.default)(registerEvents(leftHandle.rail)));
-  var destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left')];
+  var destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left')].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release') ? [rightHandle.destroyTooltip, leftHandle.destroyTooltip] : []));
   return {
     rightHandle: rightHandle.handle,
     leftHandle: leftHandle.handle,

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

@@ -10,6 +10,8 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
 var _getGuidelines = require("./get-guidelines");
 var _resizingMarkView = require("./resizing-mark-view");
+var _analytics = require("./utils/analytics");
+var _measureFramerate2 = require("./utils/measure-framerate");
 var RESIZE_RATIO = 2;
 var SNAP_GAP = 10;
 var WIDTHS = {
@@ -48,22 +50,38 @@ function createResizerCallbacks(_ref2) {
     api = _ref2.api;
   var node = null;
   var guidelines = [];
+  var _measureFramerate = (0, _measureFramerate2.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 ((0, _platformFeatureFlags.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 ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        countFrames();
+      }
       var initialWidth = mark.attrs.width;
       var newWidth = getProposedWidth({
         initialWidth: initialWidth,
@@ -77,10 +95,19 @@ function createResizerCallbacks(_ref2) {
       });
       contentDOM.style.setProperty(_resizingMarkView.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 ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        var frameRateSamples = endMeasure();
+        payloads = (0, _analytics.generateResizeFrameRatePayloads)({
+          docSize: view.state.doc.nodeSize,
+          frameRateSamples: (0, _measureFramerate2.reduceResizeFrameRateSamples)(frameRateSamples),
+          originalNode: node
+        });
+      }
       var isResizedToFullWidth = !!guidelines.find(function (guideline) {
         return guideline.key.includes('full_width') && guideline.active;
       });
@@ -99,8 +126,19 @@ function createResizerCallbacks(_ref2) {
       });
       (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos)(view.state, view.dispatch);
       contentDOM.style.removeProperty(_resizingMarkView.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/cjs/pm-plugins/resizing-mark-view.js

@@ -19,12 +19,14 @@ var ResizingMarkView = exports.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) {
     (0, _classCallCheck2.default)(this, ResizingMarkView);
     var dom = document.createElement('div');
     var contentDOM = document.createElement('div');
@@ -60,9 +62,14 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
       mark: mark,
       api: api
     });
-    var _createPragmaticResiz = (0, _pragmaticResizer.createPragmaticResizer)(_objectSpread({
+    this.intl = getIntl();
+    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
+    var _createPragmaticResiz = (0, _pragmaticResizer.createPragmaticResizer)(_objectSpread(_objectSpread({
         target: contentDOM
-      }, callbacks)),
+      }, callbacks), {}, {
+        intl: this.intl,
+        nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
+      })),
       leftHandle = _createPragmaticResiz.leftHandle,
       rightHandle = _createPragmaticResiz.rightHandle,
       destroy = _createPragmaticResiz.destroy;

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

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

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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) {
+    return {
+      action: _analytics.ACTION.RESIZED_PERF_SAMPLING,
+      actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+      eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        nodeType: props.originalNode.type.name,
+        frameRate: frameRateSample,
+        nodeSize: props.originalNode.nodeSize,
+        docSize: props.docSize,
+        isInitialSample: index === 0
+      }
+    };
+  });
+};

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

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.reduceResizeFrameRateSamples = exports.measureFramerate = void 0;
+/**
+ * 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)
+ */
+
+var reduceResizeFrameRateSamples = exports.reduceResizeFrameRateSamples = function reduceResizeFrameRateSamples(frameRateSamples) {
+  if (frameRateSamples.length > 1) {
+    var frameRateSum = frameRateSamples.reduce(function (sum, frameRate, index) {
+      if (index === 0) {
+        return sum;
+      } else {
+        return sum + frameRate;
+      }
+    }, 0);
+    var 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]
+ */
+var measureFramerate = exports.measureFramerate = function measureFramerate(config) {
+  var _ref = config || {},
+    _ref$maxSamples = _ref.maxSamples,
+    maxSamples = _ref$maxSamples === void 0 ? 10 : _ref$maxSamples,
+    _ref$minFrames = _ref.minFrames,
+    minFrames = _ref$minFrames === void 0 ? 5 : _ref$minFrames,
+    _ref$minTimeMs = _ref.minTimeMs,
+    minTimeMs = _ref$minTimeMs === void 0 ? 500 : _ref$minTimeMs,
+    _ref$sampleRateMs = _ref.sampleRateMs,
+    sampleRateMs = _ref$sampleRateMs === void 0 ? 1000 : _ref$sampleRateMs,
+    _ref$timeoutMs = _ref.timeoutMs,
+    timeoutMs = _ref$timeoutMs === void 0 ? 200 : _ref$timeoutMs;
+  var frameCount = 0;
+  var lastTime = 0;
+  var timeoutId;
+  var frameRateSamples = [];
+  var startMeasure = function 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]
+   */
+  var endMeasure = function endMeasure() {
+    var samples = frameRateSamples;
+    frameRateSamples = [];
+    return samples;
+  };
+  var sampleFrameRate = function sampleFrameRate() {
+    var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var currentTime = performance.now();
+    var deltaTime = currentTime - lastTime - delay;
+    var isValidSample = deltaTime > minTimeMs && frameCount >= minFrames;
+    if (isValidSample) {
+      var 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);
+   * };
+   */
+  var countFrames = function 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(function () {
+        return sampleFrameRate(timeoutMs);
+      }, timeoutMs);
+    }
+  };
+  return {
+    startMeasure: startMeasure,
+    endMeasure: endMeasure,
+    countFrames: countFrames
+  };
+};

package/dist/es2019/breakoutPlugin.js

@@ -195,7 +195,10 @@ export const breakoutPlugin = ({
     if (editorExperiment('platform_editor_breakout_resizing', true)) {
       return [{
         name: 'breakout-resizing',
-        plugin: () => createResizingPlugin(api, options)
+        plugin: ({
+          getIntl,
+          nodeViewPortalProviderAPI
+        }) => createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options)
       }];
     }
     return [{

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

@@ -1,12 +1,58 @@
+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';
+import Tooltip from '@atlaskit/tooltip';
+const getNodeName = nodeName => {
+  if (nodeName === 'layoutSection') {
+    return 'layout';
+  } else if (nodeName === 'codeBlock' || nodeName === 'expand') {
+    return nodeName;
+  } else {
+    return 'node';
+  }
+};
+export const resizeHandleMessage = {
+  expand: messages.resizeExpand,
+  codeBlock: messages.resizeCodeBlock,
+  layout: messages.resizeLayout,
+  node: messages.resizeElement
+};
+const RailWithTooltip = ({
+  rail,
+  target,
+  intl
+}) => {
+  const [nodeName, setNodeName] = useState('node');
+  useLayoutEffect(() => {
+    const node = target.querySelector('[data-prosemirror-node-name]');
+    const 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: el => {
+      if (el && rail.parentNode !== el) {
+        el.appendChild(rail);
+      }
+    }
+  }));
+};
 export const createPragmaticResizer = ({
   target,
   onDragStart,
   onDrag,
-  onDrop
+  onDrop,
+  intl,
+  nodeViewPortalProviderAPI
 }) => {
   let state = 'default';
   const createHandle = side => {
@@ -27,13 +73,33 @@ export const createPragmaticResizer = ({
     const thumb = document.createElement('div');
     thumb.classList.add('pm-breakout-resize-handle-thumb');
     rail.appendChild(thumb);
-    handle.appendChild(rail);
-    handle.appendChild(handleHitBox);
-    return {
-      handle,
-      rail,
-      handleHitBox
-    };
+    if (fg('platform_editor_breakout_resizing_hello_release')) {
+      const tooltipContainer = document.createElement('div');
+      tooltipContainer.classList.add('pm-breakout-resize-handle-rail-wrapper');
+      handle.appendChild(tooltipContainer);
+      handle.appendChild(handleHitBox);
+      const key = uuid();
+      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/React.createElement(RailWithTooltip, {
+        rail: rail,
+        target: target,
+        intl: intl
+      }), tooltipContainer, key);
+      return {
+        handle,
+        rail,
+        handleHitBox,
+        destroyTooltip: () => nodeViewPortalProviderAPI.remove(key)
+      };
+    } else {
+      handle.appendChild(rail);
+      handle.appendChild(handleHitBox);
+      return {
+        handle,
+        rail,
+        handleHitBox,
+        destroyTooltip: () => {}
+      };
+    }
   };
   const rightHandle = createHandle('right');
   const leftHandle = createHandle('left');
@@ -84,7 +150,7 @@ export const createPragmaticResizer = ({
     })];
   };
   const unbindFns = [...registerEvents(target), ...registerEvents(rightHandle.handleHitBox), ...registerEvents(leftHandle.handleHitBox), ...registerEvents(rightHandle.rail), ...registerEvents(leftHandle.rail)];
-  const destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left')];
+  const destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left'), ...(fg('platform_editor_breakout_resizing_hello_release') ? [rightHandle.destroyTooltip, leftHandle.destroyTooltip] : [])];
   return {
     rightHandle: rightHandle.handle,
     leftHandle: leftHandle.handle,