@atlaskit/editor-plugin-breakout 2.6.0 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-breakout
 
+## 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/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/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,

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/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/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/types/pm-plugins/pragmatic-resizer.d.ts

@@ -1,9 +1,14 @@
+import type { IntlShape, MessageDescriptor } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
-export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, }: {
+export declare const resizeHandleMessage: Record<string, MessageDescriptor>;
+export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, intl, nodeViewPortalProviderAPI, }: {
     target: HTMLElement;
     onDragStart: (args: BaseEventPayload<ElementDragType>) => void;
     onDrag: (args: BaseEventPayload<ElementDragType>) => void;
     onDrop: (args: BaseEventPayload<ElementDragType>) => void;
+    intl: IntlShape;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
 }) => {
     rightHandle: HTMLDivElement;
     leftHandle: HTMLDivElement;

package/dist/types/pm-plugins/resizing-mark-view.d.ts

@@ -1,3 +1,5 @@
+import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
@@ -9,16 +11,20 @@ export declare class ResizingMarkView implements NodeView {
     view: EditorView;
     mark: Mark;
     destroyFn: () => void;
+    intl: IntlShape;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     /**
      * 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: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined);
+    constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI);
     ignoreMutation(): boolean;
     destroy(): void;
 }

package/dist/types/pm-plugins/resizing-plugin.d.ts

@@ -1,7 +1,9 @@
+import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { BreakoutPlugin } from '../breakoutPluginType';
 import type { BreakoutPluginOptions } from '../breakoutPluginType';
 export declare const resizingPluginKey: PluginKey<any>;
-export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, options?: BreakoutPluginOptions) => SafePlugin<any>;
+export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions) => SafePlugin<any>;

package/dist/types-ts4.5/pm-plugins/pragmatic-resizer.d.ts

@@ -1,9 +1,14 @@
+import type { IntlShape, MessageDescriptor } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
-export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, }: {
+export declare const resizeHandleMessage: Record<string, MessageDescriptor>;
+export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onDrop, intl, nodeViewPortalProviderAPI, }: {
     target: HTMLElement;
     onDragStart: (args: BaseEventPayload<ElementDragType>) => void;
     onDrag: (args: BaseEventPayload<ElementDragType>) => void;
     onDrop: (args: BaseEventPayload<ElementDragType>) => void;
+    intl: IntlShape;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
 }) => {
     rightHandle: HTMLDivElement;
     leftHandle: HTMLDivElement;

package/dist/types-ts4.5/pm-plugins/resizing-mark-view.d.ts

@@ -1,3 +1,5 @@
+import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
@@ -9,16 +11,20 @@ export declare class ResizingMarkView implements NodeView {
     view: EditorView;
     mark: Mark;
     destroyFn: () => void;
+    intl: IntlShape;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     /**
      * 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: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined);
+    constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI);
     ignoreMutation(): boolean;
     destroy(): void;
 }

package/dist/types-ts4.5/pm-plugins/resizing-plugin.d.ts

@@ -1,7 +1,9 @@
+import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { BreakoutPlugin } from '../breakoutPluginType';
 import type { BreakoutPluginOptions } from '../breakoutPluginType';
 export declare const resizingPluginKey: PluginKey<any>;
-export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, options?: BreakoutPluginOptions) => SafePlugin<any>;
+export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions) => SafePlugin<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.6.0",
+	"version": "2.6.1",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,8 +34,8 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^106.3.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.15.0",
+		"@atlaskit/editor-common": "^106.4.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.16.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
@@ -50,10 +50,12 @@
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^5.14.0",
 		"@atlaskit/tokens": "^5.1.0",
+		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
-		"memoize-one": "^6.0.0"
+		"memoize-one": "^6.0.0",
+		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0",