@atlaskit/editor-plugin-block-controls 1.5.12 → 1.5.16

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.5.16
+
+### Patch Changes
+
+- [#119383](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119383)
+  [`2db50d6540e1b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2db50d6540e1b) -
+  [ux] fix drag handles to respond to viewport narrowing
+- Updated dependencies
+
+## 1.5.15
+
+### Patch Changes
+
+- [#118866](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/118866)
+  [`77bd34b00632f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77bd34b00632f) -
+  [ux] [ED-23873] Add tooltip to drag handle
+
+## 1.5.14
+
+### Patch Changes
+
+- [#119010](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119010)
+  [`9853843dd0dc9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9853843dd0dc9) -
+  [ux] ED-23189 Update generic preview to match node dimensions
+
+## 1.5.13
+
+### Patch Changes
+
+- [#118724](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/118724)
+  [`6faf03a7723f3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6faf03a7723f3) -
+  [ED-23842] When clicking the drag handle, select mediaGroup if there are multiple child nodes
+
 ## 1.5.12
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -18,16 +18,17 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
     pmPlugins: function pmPlugins() {
       return [{
         name: 'blockControlsPmPlugin',
-        plugin: function plugin() {
-          return (0, _main.createPlugin)(api);
+        plugin: function plugin(_ref2) {
+          var getIntl = _ref2.getIntl;
+          return (0, _main.createPlugin)(api, getIntl);
         }
       }];
     },
     commands: {
       moveNode: function moveNode(start, to) {
-        return function (_ref2) {
+        return function (_ref3) {
           var _node$nodeSize, _api$analytics;
-          var tr = _ref2.tr;
+          var tr = _ref3.tr;
           var node = tr.doc.nodeAt(start);
           var resolvedNode = tr.doc.resolve(start);
           if (!node) {
@@ -58,8 +59,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType) {
-        return function (_ref3) {
-          var tr = _ref3.tr;
+        return function (_ref4) {
+          var tr = _ref4.tr;
           tr.setMeta(_main.key, {
             activeNode: {
               pos: pos,
@@ -71,8 +72,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       setNodeDragged: function setNodeDragged(pos, anchorName, nodeType) {
-        return function (_ref4) {
-          var tr = _ref4.tr;
+        return function (_ref5) {
+          var tr = _ref5.tr;
           if (pos === undefined) {
             return tr;
           }

package/dist/cjs/pm-plugins/decorations.js

@@ -8,6 +8,7 @@ exports.nodeDecorations = exports.mouseMoveWrapperDecorations = exports.emptyPar
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactIntlNext = require("react-intl-next");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _dragHandle = require("../ui/drag-handle");
@@ -135,7 +136,7 @@ var mouseMoveWrapperDecorations = exports.mouseMoveWrapperDecorations = function
   });
   return decs;
 };
-var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api) {
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api, getIntl) {
   return _view.Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('div');
     // Need to set it to inline to avoid text being split when merging two paragraphs
@@ -147,13 +148,15 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       // due to margins applied to other nodes eg. Headings
       element.style.clear = 'unset';
     }
-    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
+    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
+      value: getIntl()
+    }, /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
       view: view,
       api: api,
       getPos: getPos,
       anchorName: anchorName,
       nodeType: nodeType
-    }), element);
+    })), element);
     return element;
   }, {
     side: -1,

package/dist/cjs/pm-plugins/main.js

@@ -77,12 +77,14 @@ var initialState = {
   isDragging: false,
   isMenuOpen: false,
   editorHeight: 0,
+  editorWidthLeft: 0,
+  editorWidthRight: 0,
   isResizerResizing: false,
   isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
 var DRAG_AND_DROP_DOC_SIZE_LIMIT = 50;
-var createPlugin = exports.createPlugin = function createPlugin(api) {
+var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
   return new _safePlugin.SafePlugin({
     key: key,
     state: {
@@ -90,9 +92,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$isPMDragging;
+        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled === null) {
-          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
+          if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
           } else {
             initialState.isDocSizeLimitEnabled = false;
@@ -106,6 +108,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           isMenuOpen = currentState.isMenuOpen,
           decorationState = currentState.decorationState,
           editorHeight = currentState.editorHeight,
+          editorWidthLeft = currentState.editorWidthLeft,
+          editorWidthRight = currentState.editorWidthRight,
           isResizerResizing = currentState.isResizerResizing,
           isDragging = currentState.isDragging,
           isPMDragging = currentState.isPMDragging;
@@ -132,7 +136,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         }
         var isDecsMissing = false;
         var isHandleMissing = false;
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+        if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
           // Ensure decorations stay in sync when nodes are added or removed from the doc
           isHandleMissing = !(meta !== null && meta !== void 0 && meta.activeNode) && !decorations.find().some(function (_ref6) {
             var spec = _ref6.spec;
@@ -155,13 +159,13 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         // (when the table node rerenders)
         // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
         var maybeNodeWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
-        var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+        var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
           decorations = _view.DecorationSet.create(newState.doc, []);
           var nodeDecs = (0, _decorations.nodeDecorations)(newState);
-          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+          if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(nodeDecs));
           } else {
             var mouseWrapperDecs = (0, _decorations.mouseMoveWrapperDecorations)(newState, api);
@@ -191,7 +195,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
                 anchorName: anchorName
               };
             }
-            var draghandleDec = (0, _decorations.dragHandleDecoration)(activeNode.pos, anchorName, nodeType, api);
+            var draghandleDec = (0, _decorations.dragHandleDecoration)(activeNode.pos, anchorName, nodeType, api, getIntl);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
         }
@@ -203,10 +207,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle);
-          var decs = (0, _decorations.dragHandleDecoration)(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api);
+          var decs = (0, _decorations.dragHandleDecoration)(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api, getIntl);
           decorations = decorations.add(newState.doc, [decs]);
         }
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-ed-23816')) {
+        if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23816')) {
           var _activeNodeWithNewNod;
           // Remove previous drag handle widget and draw new drag handle widget when node type changes
           if (activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
@@ -215,7 +219,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
               return spec.id === 'drag-handle';
             });
             decorations = decorations.remove(_oldHandle2);
-            var _decs = (0, _decorations.dragHandleDecoration)(activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType, api);
+            var _decs = (0, _decorations.dragHandleDecoration)(activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType, api, getIntl);
             decorations = decorations.add(newState.doc, [_decs]);
           }
         }
@@ -265,7 +269,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
         // Map active node position when the document changes
         var mappedActiveNodePos;
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-ed-23816')) {
+        if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23816')) {
           mappedActiveNodePos = tr.docChanged && activeNode ? activeNodeWithNewNodeType || {
             pos: tr.mapping.map(activeNode.pos),
             anchorName: activeNode.anchorName,
@@ -285,6 +289,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
           editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
+          editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : currentState.editorWidthLeft,
+          editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : currentState.editorWidthRight,
           isResizerResizing: isResizerResizing,
           isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
           isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
@@ -322,7 +328,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           var draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
           var activeNode = state.tr.doc.nodeAt(pluginState.activeNode.pos);
           var isSameNode = draggable === activeNode;
-          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-ed-23892')) {
+          if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23892')) {
             var _event$target;
             var nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
             if (!nodeElement) {
@@ -354,7 +360,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           }
         },
         mouseover: function mouseover(view, event) {
-          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+          if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             (0, _handleMouseOver.handleMouseOver)(view, event, api);
           }
           return false;
@@ -379,10 +385,12 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
     },
     view: function view(editorView) {
       var dom = editorView.dom;
-      var resizeObserver;
-      if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+      var editorContentArea = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
+      var resizeObserverHeight;
+      var resizeObserverWidth;
+      if (!(0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
         // Use ResizeObserver to observe height changes
-        resizeObserver = new ResizeObserver((0, _rafSchd.default)(function (entries) {
+        resizeObserverHeight = new ResizeObserver((0, _rafSchd.default)(function (entries) {
           var editorHeight = entries[0].contentBoxSize[0].blockSize;
 
           // Update the plugin state when the height changes
@@ -401,16 +409,50 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
             editorView.dispatch(transaction);
           }
         }));
+
         // Start observing the editor DOM element
-        resizeObserver.observe(dom);
+        resizeObserverHeight.observe(dom);
+      }
+      if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+        // Use ResizeObserver to observe width changes
+        resizeObserverWidth = new ResizeObserver((0, _rafSchd.default)(function (entries) {
+          var editorContentArea = entries[0].target;
+          var editorWidthRight = editorContentArea.getBoundingClientRect().right;
+          var editorWidthLeft = editorContentArea.getBoundingClientRect().left;
+
+          // Update the plugin state when the height changes
+          var pluginState = key.getState(editorView.state);
+          if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
+            var isResizerResizing = !!dom.querySelector('.is-resizing');
+            var transaction = editorView.state.tr;
+            if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
+              transaction.setMeta('is-resizer-resizing', isResizerResizing);
+            }
+            if (!isResizerResizing) {
+              if ((0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23394')) {
+                transaction.setMeta(key, {
+                  editorWidthLeft: editorWidthLeft,
+                  editorWidthRight: editorWidthRight
+                });
+              }
+            }
+            editorView.dispatch(transaction);
+          }
+        }));
+        if (editorContentArea && (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23394')) {
+          resizeObserverWidth.observe(editorContentArea);
+        }
       }
 
       // Start pragmatic monitors
       var pragmaticCleanup = destroyFn(api);
       return {
         destroy: function destroy() {
-          if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
-            resizeObserver.unobserve(dom);
+          if (!(0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+            resizeObserverHeight.unobserve(dom);
+          }
+          if (editorContentArea && (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+            (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23394') && resizeObserverWidth.unobserve(editorContentArea);
           }
           pragmaticCleanup();
         }

package/dist/cjs/ui/drag-handle.js

@@ -8,13 +8,17 @@ exports.DragHandle = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _main = require("../pm-plugins/main");
 var _utils = require("../utils");
 var _dragHandlePositions = require("../utils/drag-handle-positions");
@@ -55,12 +59,13 @@ var selectedStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
 });
-var DragHandle = exports.DragHandle = function DragHandle(_ref) {
+var DragHandleInternal = function DragHandleInternal(_ref) {
   var view = _ref.view,
     api = _ref.api,
     getPos = _ref.getPos,
     anchorName = _ref.anchorName,
-    nodeType = _ref.nodeType;
+    nodeType = _ref.nodeType,
+    formatMessage = _ref.intl.formatMessage;
   var start = getPos();
   var buttonRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(768),
@@ -255,18 +260,35 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
-  return (0, _react2.jsx)("button", {
-    type: "button",
-    css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
-    ref: buttonRef
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: positionStyles,
-    onClick: handleOnClick,
-    onMouseDown: (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
-    "data-testid": "block-ctrl-drag-handle"
-  }, (0, _react2.jsx)(_dragHandler.default, {
-    label: "",
-    size: "medium"
-  }));
-};
+  var helpDescriptors = [{
+    description: formatMessage(_messages.blockControlsMessages.dragToMove)
+  }, {
+    description: formatMessage(_messages.blockControlsMessages.moveUp),
+    keymap: _keymaps.dragToMoveUp
+  }, {
+    description: formatMessage(_messages.blockControlsMessages.moveDown),
+    keymap: _keymaps.dragToMoveDown
+  }];
+  var renderButton = function renderButton() {
+    return (0, _react2.jsx)("button", {
+      type: "button",
+      css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
+      ref: buttonRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: positionStyles,
+      onClick: handleOnClick,
+      onMouseDown: (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+      "data-testid": "block-ctrl-drag-handle"
+    }, (0, _react2.jsx)(_dragHandler.default, {
+      label: "",
+      size: "medium"
+    }));
+  };
+  return (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') ? (0, _react2.jsx)(_tooltip.default, {
+    content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
+      helpDescriptors: helpDescriptors
+    })
+  }, renderButton()) : renderButton();
+};
+var DragHandle = exports.DragHandle = (0, _reactIntlNext.injectIntl)(DragHandleInternal);

package/dist/cjs/ui/drag-preview.js

@@ -7,26 +7,36 @@ exports.dragPreview = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var previewStyle = {
-  borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
+  borderColor: (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189') ? "var(--ds-border, ".concat(_colors.N30, ")") : "var(--ds-border-focused, ".concat(_colors.B200, ")"),
   borderStyle: 'solid',
   borderRadius: "var(--ds-border-radius-100, 3px)",
   borderWidth: "var(--ds-border-width-outline, 2px)",
-  backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
+  backgroundColor: (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189') ? "var(--ds-skeleton-subtle, ".concat(_colors.N20, ")") : "var(--ds-blanket-selected, #388BFF14)"
 };
 var dragPreview = exports.dragPreview = function dragPreview(container, dom, nodeType) {
-  var rect = dom.getBoundingClientRect();
-  container.style.width = "".concat(rect.width, "px");
-  container.style.height = "".concat(rect.height, "px");
+  var nodeContainer = dom;
   container.style.pointerEvents = 'none';
   var parent = document.createElement('div');
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+  if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
     parent.classList.add('block-ctrl-drag-preview');
   }
-  var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
   var embedCard = dom.querySelector('.embedCardView-content-wrap');
-  if (shouldBeGenericPreview || embedCard) {
+  var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension' || !!embedCard;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189')) {
+    var iframeContainer = dom.querySelector('iframe');
+    if (nodeType === 'embedCard') {
+      nodeContainer = dom.querySelector('.rich-media-item') || dom;
+    } else if (nodeType === 'extension' && iframeContainer) {
+      nodeContainer = iframeContainer;
+    }
+    shouldBeGenericPreview = nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!iframeContainer;
+  }
+  var nodeContainerRect = nodeContainer.getBoundingClientRect();
+  container.style.width = "".concat(nodeContainerRect.width, "px");
+  container.style.height = "".concat(nodeContainerRect.height, "px");
+  if (shouldBeGenericPreview) {
     parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
     parent.style.borderRadius = previewStyle.borderRadius;
     parent.style.backgroundColor = previewStyle.backgroundColor;
@@ -41,8 +51,8 @@ var dragPreview = exports.dragPreview = function dragPreview(container, dom, nod
     clonedDom.style.marginTop = '0';
     clonedDom.style.marginRight = '0';
     clonedDom.style.marginBottom = '0';
-    clonedDom.style.opacity = '0.4';
     clonedDom.style.boxShadow = 'none';
+    clonedDom.style.opacity = (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
     parent.appendChild(clonedDom);
   }
   container.appendChild(parent);

package/dist/cjs/utils/getSelection.js

@@ -16,10 +16,14 @@ var getSelection = exports.getSelection = function getSelection(tr, start) {
   // decisionList node is not selectable, but we want to select the whole node not just text
   if (isNodeSelection || (node === null || node === void 0 ? void 0 : node.type.name) === 'decisionList') {
     return new _state.NodeSelection($startPos);
-    // TODO: support multiple nodes selection
   } else if ((node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup' && node.childCount === 1) {
     var $mediaStartPos = tr.doc.resolve(start + 1);
     return new _state.NodeSelection($mediaStartPos);
+  } else if (
+  // Even though mediaGroup is not selectable,
+  // we need a quick way to make all child media nodes appear as selected without the need for a custom selection
+  (node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup' && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23842')) {
+    return new _state.NodeSelection($startPos);
   } else {
     // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
     // Find the first inline node in the node

package/dist/es2019/plugin.js

@@ -11,7 +11,9 @@ export const blockControlsPlugin = ({
   pmPlugins() {
     return [{
       name: 'blockControlsPmPlugin',
-      plugin: () => createPlugin(api)
+      plugin: ({
+        getIntl
+      }) => createPlugin(api, getIntl)
     }];
   },
   commands: {

package/dist/es2019/pm-plugins/decorations.js

@@ -1,5 +1,6 @@
 import { createElement } from 'react';
 import ReactDOM from 'react-dom';
+import { RawIntlProvider } from 'react-intl-next';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { DragHandle } from '../ui/drag-handle';
@@ -129,7 +130,7 @@ export const mouseMoveWrapperDecorations = (newState, api) => {
   });
   return decs;
 };
-export const dragHandleDecoration = (pos, anchorName, nodeType, api) => {
+export const dragHandleDecoration = (pos, anchorName, nodeType, api, getIntl) => {
   return Decoration.widget(pos, (view, getPos) => {
     const element = document.createElement('div');
     // Need to set it to inline to avoid text being split when merging two paragraphs
@@ -141,13 +142,15 @@ export const dragHandleDecoration = (pos, anchorName, nodeType, api) => {
       // due to margins applied to other nodes eg. Headings
       element.style.clear = 'unset';
     }
-    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+    ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+      value: getIntl()
+    }, /*#__PURE__*/createElement(DragHandle, {
       view,
       api,
       getPos,
       anchorName,
       nodeType
-    }), element);
+    })), element);
     return element;
   }, {
     side: -1,