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

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 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

@@ -82,7 +82,7 @@ var initialState = {
   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: {
@@ -92,7 +92,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
       apply: function apply(tr, currentState, oldState, newState) {
         var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _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;
@@ -132,7 +132,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;
@@ -161,7 +161,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         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 +191,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 +203,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 +215,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 +265,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,
@@ -322,7 +322,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 +354,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;
@@ -380,7 +380,7 @@ 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')) {
+      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) {
           var editorHeight = entries[0].contentBoxSize[0].blockSize;
@@ -409,7 +409,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
       var pragmaticCleanup = destroyFn(api);
       return {
         destroy: function destroy() {
-          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')) {
             resizeObserver.unobserve(dom);
           }
           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,

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

@@ -5,7 +5,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -76,7 +76,7 @@ const initialState = {
   isPMDragging: false
 };
 const DRAG_AND_DROP_DOC_SIZE_LIMIT = 50;
-export const createPlugin = api => {
+export const createPlugin = (api, getIntl) => {
   return new SafePlugin({
     key,
     state: {
@@ -86,7 +86,7 @@ export const createPlugin = api => {
       apply(tr, currentState, oldState, newState) {
         var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled === null) {
-          if (getBooleanFF('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
+          if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
           } else {
             initialState.isDocSizeLimitEnabled = false;
@@ -125,7 +125,7 @@ export const createPlugin = api => {
         }
         let isDecsMissing = false;
         let isHandleMissing = false;
-        if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+        if (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(({
             spec
@@ -152,7 +152,7 @@ export const createPlugin = api => {
         if (redrawDecorations && !isResizerResizing && api) {
           decorations = DecorationSet.create(newState.doc, []);
           const nodeDecs = nodeDecorations(newState);
-          if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+          if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             decorations = decorations.add(newState.doc, [...nodeDecs]);
           } else {
             const mouseWrapperDecs = mouseMoveWrapperDecorations(newState, api);
@@ -182,7 +182,7 @@ export const createPlugin = api => {
                 anchorName
               };
             }
-            const draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api);
+            const draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api, getIntl);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
         }
@@ -193,10 +193,10 @@ export const createPlugin = api => {
             spec
           }) => spec.id === 'drag-handle');
           decorations = decorations.remove(oldHandle);
-          const decs = dragHandleDecoration(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api);
+          const decs = dragHandleDecoration(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api, getIntl);
           decorations = decorations.add(newState.doc, [decs]);
         }
-        if (getBooleanFF('platform.editor.elements.drag-and-drop-ed-23816')) {
+        if (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) {
@@ -204,7 +204,7 @@ export const createPlugin = api => {
               spec
             }) => spec.id === 'drag-handle');
             decorations = decorations.remove(oldHandle);
-            const decs = dragHandleDecoration(activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType, api);
+            const decs = dragHandleDecoration(activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType, api, getIntl);
             decorations = decorations.add(newState.doc, [decs]);
           }
         }
@@ -254,7 +254,7 @@ export const createPlugin = api => {
 
         // Map active node position when the document changes
         let mappedActiveNodePos;
-        if (getBooleanFF('platform.editor.elements.drag-and-drop-ed-23816')) {
+        if (fg('platform.editor.elements.drag-and-drop-ed-23816')) {
           mappedActiveNodePos = tr.docChanged && activeNode ? activeNodeWithNewNodeType || {
             pos: tr.mapping.map(activeNode.pos),
             anchorName: activeNode.anchorName,
@@ -313,7 +313,7 @@ export const createPlugin = api => {
           const draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
           const activeNode = state.tr.doc.nodeAt(pluginState.activeNode.pos);
           let isSameNode = draggable === activeNode;
-          if (getBooleanFF('platform.editor.elements.drag-and-drop-ed-23892')) {
+          if (fg('platform.editor.elements.drag-and-drop-ed-23892')) {
             var _event$target;
             const nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
             if (!nodeElement) {
@@ -347,7 +347,7 @@ export const createPlugin = api => {
           }
         },
         mouseover: (view, event) => {
-          if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+          if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             handleMouseOver(view, event, api);
           }
           return false;
@@ -374,7 +374,7 @@ export const createPlugin = api => {
     view: editorView => {
       const dom = editorView.dom;
       let resizeObserver;
-      if (!getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+      if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
         // Use ResizeObserver to observe height changes
         resizeObserver = new ResizeObserver(rafSchedule(entries => {
           const editorHeight = entries[0].contentBoxSize[0].blockSize;
@@ -403,7 +403,7 @@ export const createPlugin = api => {
       const pragmaticCleanup = destroyFn(api);
       return {
         destroy() {
-          if (!getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+          if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             resizeObserver.unobserve(dom);
           }
           pragmaticCleanup();

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

@@ -3,13 +3,17 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { dragToMoveDown, dragToMoveUp, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
+import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
 import { selectNode } from '../utils';
 import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
@@ -46,12 +50,15 @@ const selectedStyles = css({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
 });
-export const DragHandle = ({
+const DragHandleInternal = ({
   view,
   api,
   getPos,
   anchorName,
-  nodeType
+  nodeType,
+  intl: {
+    formatMessage
+  }
 }) => {
   const start = getPos();
   const buttonRef = useRef(null);
@@ -244,7 +251,16 @@ export const DragHandle = ({
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
-  return jsx("button", {
+  const helpDescriptors = [{
+    description: formatMessage(blockControlsMessages.dragToMove)
+  }, {
+    description: formatMessage(blockControlsMessages.moveUp),
+    keymap: dragToMoveUp
+  }, {
+    description: formatMessage(blockControlsMessages.moveDown),
+    keymap: dragToMoveDown
+  }];
+  const renderButton = () => jsx("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
     ref: buttonRef
@@ -258,4 +274,10 @@ export const DragHandle = ({
     label: "",
     size: "medium"
   }));
-};
+  return fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
+    content: jsx(TooltipContentWithMultipleShortcuts, {
+      helpDescriptors: helpDescriptors
+    })
+  }, renderButton()) : renderButton();
+};
+export const DragHandle = injectIntl(DragHandleInternal);

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

@@ -1,26 +1,36 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B200 } from '@atlaskit/theme/colors';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { B200, N20, N30 } from '@atlaskit/theme/colors';
 const previewStyle = {
-  borderColor: `var(--ds-border-focused, ${B200})`,
+  borderColor: fg('platform_editor_elements_drag_and_drop_ed_23189') ? `var(--ds-border, ${N30})` : `var(--ds-border-focused, ${B200})`,
   borderStyle: 'solid',
   borderRadius: "var(--ds-border-radius-100, 3px)",
   borderWidth: "var(--ds-border-width-outline, 2px)",
-  backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
+  backgroundColor: fg('platform_editor_elements_drag_and_drop_ed_23189') ? `var(--ds-skeleton-subtle, ${N20})` : "var(--ds-blanket-selected, #388BFF14)"
 };
 export const dragPreview = (container, dom, nodeType) => {
-  const rect = dom.getBoundingClientRect();
-  container.style.width = `${rect.width}px`;
-  container.style.height = `${rect.height}px`;
+  let nodeContainer = dom;
   container.style.pointerEvents = 'none';
   const parent = document.createElement('div');
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
-  if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+  if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
     parent.classList.add('block-ctrl-drag-preview');
   }
-  const shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
   const embedCard = dom.querySelector('.embedCardView-content-wrap');
-  if (shouldBeGenericPreview || embedCard) {
+  let shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension' || !!embedCard;
+  if (fg('platform_editor_elements_drag_and_drop_ed_23189')) {
+    const 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;
+  }
+  const nodeContainerRect = nodeContainer.getBoundingClientRect();
+  container.style.width = `${nodeContainerRect.width}px`;
+  container.style.height = `${nodeContainerRect.height}px`;
+  if (shouldBeGenericPreview) {
     parent.style.border = `${previewStyle.borderWidth} ${previewStyle.borderStyle} ${previewStyle.borderColor}`;
     parent.style.borderRadius = previewStyle.borderRadius;
     parent.style.backgroundColor = previewStyle.backgroundColor;
@@ -35,8 +45,8 @@ export const dragPreview = (container, dom, nodeType) => {
     clonedDom.style.marginTop = '0';
     clonedDom.style.marginRight = '0';
     clonedDom.style.marginBottom = '0';
-    clonedDom.style.opacity = '0.4';
     clonedDom.style.boxShadow = 'none';
+    clonedDom.style.opacity = fg('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
     parent.appendChild(clonedDom);
   }
   container.appendChild(parent);

package/dist/es2019/utils/getSelection.js

@@ -10,10 +10,14 @@ export const 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 NodeSelection($startPos);
-    // TODO: support multiple nodes selection
   } else if ((node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup' && node.childCount === 1) {
     const $mediaStartPos = tr.doc.resolve(start + 1);
     return new 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' && fg('platform_editor_element_drag_and_drop_ed_23842')) {
+    return new 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/esm/plugin.js

@@ -11,16 +11,17 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'blockControlsPmPlugin',
-        plugin: function plugin() {
-          return createPlugin(api);
+        plugin: function plugin(_ref2) {
+          var getIntl = _ref2.getIntl;
+          return 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) {
@@ -51,8 +52,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         };
       },
       showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType) {
-        return function (_ref3) {
-          var tr = _ref3.tr;
+        return function (_ref4) {
+          var tr = _ref4.tr;
           tr.setMeta(key, {
             activeNode: {
               pos: pos,
@@ -64,8 +65,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         };
       },
       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/esm/pm-plugins/decorations.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -128,7 +129,7 @@ export var mouseMoveWrapperDecorations = function mouseMoveWrapperDecorations(ne
   });
   return decs;
 };
-export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api) {
+export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api, getIntl) {
   return 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
@@ -140,13 +141,15 @@ export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName,
       // 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: view,
       api: api,
       getPos: getPos,
       anchorName: anchorName,
       nodeType: nodeType
-    }), element);
+    })), element);
     return element;
   }, {
     side: -1,

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

@@ -6,7 +6,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -75,7 +75,7 @@ var initialState = {
   isPMDragging: false
 };
 var DRAG_AND_DROP_DOC_SIZE_LIMIT = 50;
-export var createPlugin = function createPlugin(api) {
+export var createPlugin = function createPlugin(api, getIntl) {
   return new SafePlugin({
     key: key,
     state: {
@@ -85,7 +85,7 @@ export var createPlugin = function createPlugin(api) {
       apply: function apply(tr, currentState, oldState, newState) {
         var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled === null) {
-          if (getBooleanFF('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
+          if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
           } else {
             initialState.isDocSizeLimitEnabled = false;
@@ -125,7 +125,7 @@ export var createPlugin = function createPlugin(api) {
         }
         var isDecsMissing = false;
         var isHandleMissing = false;
-        if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+        if (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;
@@ -154,7 +154,7 @@ export var createPlugin = function createPlugin(api) {
         if (redrawDecorations && !isResizerResizing && api) {
           decorations = DecorationSet.create(newState.doc, []);
           var nodeDecs = nodeDecorations(newState);
-          if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+          if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             decorations = decorations.add(newState.doc, _toConsumableArray(nodeDecs));
           } else {
             var mouseWrapperDecs = mouseMoveWrapperDecorations(newState, api);
@@ -184,7 +184,7 @@ export var createPlugin = function createPlugin(api) {
                 anchorName: anchorName
               };
             }
-            var draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api);
+            var draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api, getIntl);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
         }
@@ -196,10 +196,10 @@ export var createPlugin = function createPlugin(api) {
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle);
-          var decs = dragHandleDecoration(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api);
+          var decs = dragHandleDecoration(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api, getIntl);
           decorations = decorations.add(newState.doc, [decs]);
         }
-        if (getBooleanFF('platform.editor.elements.drag-and-drop-ed-23816')) {
+        if (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) {
@@ -208,7 +208,7 @@ export var createPlugin = function createPlugin(api) {
               return spec.id === 'drag-handle';
             });
             decorations = decorations.remove(_oldHandle2);
-            var _decs = dragHandleDecoration(activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType, api);
+            var _decs = dragHandleDecoration(activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType, api, getIntl);
             decorations = decorations.add(newState.doc, [_decs]);
           }
         }
@@ -258,7 +258,7 @@ export var createPlugin = function createPlugin(api) {
 
         // Map active node position when the document changes
         var mappedActiveNodePos;
-        if (getBooleanFF('platform.editor.elements.drag-and-drop-ed-23816')) {
+        if (fg('platform.editor.elements.drag-and-drop-ed-23816')) {
           mappedActiveNodePos = tr.docChanged && activeNode ? activeNodeWithNewNodeType || {
             pos: tr.mapping.map(activeNode.pos),
             anchorName: activeNode.anchorName,
@@ -315,7 +315,7 @@ export var 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 (getBooleanFF('platform.editor.elements.drag-and-drop-ed-23892')) {
+          if (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) {
@@ -347,7 +347,7 @@ export var createPlugin = function createPlugin(api) {
           }
         },
         mouseover: function mouseover(view, event) {
-          if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+          if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             handleMouseOver(view, event, api);
           }
           return false;
@@ -373,7 +373,7 @@ export var createPlugin = function createPlugin(api) {
     view: function view(editorView) {
       var dom = editorView.dom;
       var resizeObserver;
-      if (!getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+      if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
         // Use ResizeObserver to observe height changes
         resizeObserver = new ResizeObserver(rafSchedule(function (entries) {
           var editorHeight = entries[0].contentBoxSize[0].blockSize;
@@ -402,7 +402,7 @@ export var createPlugin = function createPlugin(api) {
       var pragmaticCleanup = destroyFn(api);
       return {
         destroy: function destroy() {
-          if (!getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+          if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             resizeObserver.unobserve(dom);
           }
           pragmaticCleanup();

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

@@ -4,13 +4,17 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { dragToMoveDown, dragToMoveUp, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
+import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
 import { selectNode } from '../utils';
 import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
@@ -47,12 +51,13 @@ var selectedStyles = css({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
 });
-export var 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 = useRef(null);
   var _useState = useState(768),
@@ -247,18 +252,35 @@ export var DragHandle = function DragHandle(_ref) {
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
-  return 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: fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
-    "data-testid": "block-ctrl-drag-handle"
-  }, jsx(DragHandlerIcon, {
-    label: "",
-    size: "medium"
-  }));
-};
+  var helpDescriptors = [{
+    description: formatMessage(blockControlsMessages.dragToMove)
+  }, {
+    description: formatMessage(blockControlsMessages.moveUp),
+    keymap: dragToMoveUp
+  }, {
+    description: formatMessage(blockControlsMessages.moveDown),
+    keymap: dragToMoveDown
+  }];
+  var renderButton = function renderButton() {
+    return 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: fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+      "data-testid": "block-ctrl-drag-handle"
+    }, jsx(DragHandlerIcon, {
+      label: "",
+      size: "medium"
+    }));
+  };
+  return fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
+    content: jsx(TooltipContentWithMultipleShortcuts, {
+      helpDescriptors: helpDescriptors
+    })
+  }, renderButton()) : renderButton();
+};
+export var DragHandle = injectIntl(DragHandleInternal);

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

@@ -1,26 +1,36 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B200 } from '@atlaskit/theme/colors';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { B200, N20, N30 } from '@atlaskit/theme/colors';
 var previewStyle = {
-  borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
+  borderColor: fg('platform_editor_elements_drag_and_drop_ed_23189') ? "var(--ds-border, ".concat(N30, ")") : "var(--ds-border-focused, ".concat(B200, ")"),
   borderStyle: 'solid',
   borderRadius: "var(--ds-border-radius-100, 3px)",
   borderWidth: "var(--ds-border-width-outline, 2px)",
-  backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
+  backgroundColor: fg('platform_editor_elements_drag_and_drop_ed_23189') ? "var(--ds-skeleton-subtle, ".concat(N20, ")") : "var(--ds-blanket-selected, #388BFF14)"
 };
 export var 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 (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+  if (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 (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;
@@ -35,8 +45,8 @@ export var dragPreview = function dragPreview(container, dom, nodeType) {
     clonedDom.style.marginTop = '0';
     clonedDom.style.marginRight = '0';
     clonedDom.style.marginBottom = '0';
-    clonedDom.style.opacity = '0.4';
     clonedDom.style.boxShadow = 'none';
+    clonedDom.style.opacity = fg('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
     parent.appendChild(clonedDom);
   }
   container.appendChild(parent);

package/dist/esm/utils/getSelection.js

@@ -10,10 +10,14 @@ export var 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 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 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' && fg('platform_editor_element_drag_and_drop_ed_23842')) {
+    return new 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/types/pm-plugins/decorations.d.ts

@@ -1,3 +1,4 @@
+import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
@@ -17,4 +18,4 @@ export declare const nodeDecorations: (newState: EditorState) => Decoration[];
  * And show the drag handle
  */
 export declare const mouseMoveWrapperDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => Decoration[];
-export declare const dragHandleDecoration: (pos: number, anchorName: string, nodeType: string, api: ExtractInjectionAPI<BlockControlsPlugin>) => Decoration;
+export declare const dragHandleDecoration: (pos: number, anchorName: string, nodeType: string, api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape) => Decoration;

package/dist/types/pm-plugins/main.d.ts

@@ -1,10 +1,11 @@
+import { type IntlShape } from 'react-intl-next';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, PluginState } from '../types';
 export declare const key: PluginKey<PluginState>;
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => SafePlugin<PluginState | {
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => SafePlugin<PluginState | {
     decorations: DecorationSet;
     decorationState: import("../types").DecorationState;
     activeNode: any;

package/dist/types/ui/drag-handle.d.ts

@@ -1,11 +1,20 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
+import { type WrappedComponentProps } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../types';
-export declare const DragHandle: ({ view, api, getPos, anchorName, nodeType, }: {
+export declare const DragHandle: import("react").FC<import("react-intl-next").WithIntlProps<{
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     getPos: () => number | undefined;
     anchorName: string;
     nodeType: string;
-}) => jsx.JSX.Element;
+} & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<{
+        view: EditorView;
+        api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+        getPos: () => number | undefined;
+        anchorName: string;
+        nodeType: string;
+    } & WrappedComponentProps>;
+};

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

@@ -1,3 +1,4 @@
+import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
@@ -17,4 +18,4 @@ export declare const nodeDecorations: (newState: EditorState) => Decoration[];
  * And show the drag handle
  */
 export declare const mouseMoveWrapperDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => Decoration[];
-export declare const dragHandleDecoration: (pos: number, anchorName: string, nodeType: string, api: ExtractInjectionAPI<BlockControlsPlugin>) => Decoration;
+export declare const dragHandleDecoration: (pos: number, anchorName: string, nodeType: string, api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape) => Decoration;

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

@@ -1,10 +1,11 @@
+import { type IntlShape } from 'react-intl-next';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, PluginState } from '../types';
 export declare const key: PluginKey<PluginState>;
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => SafePlugin<PluginState | {
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => SafePlugin<PluginState | {
     decorations: DecorationSet;
     decorationState: import("../types").DecorationState;
     activeNode: any;

package/dist/types-ts4.5/ui/drag-handle.d.ts

@@ -1,11 +1,20 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
+import { type WrappedComponentProps } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../types';
-export declare const DragHandle: ({ view, api, getPos, anchorName, nodeType, }: {
+export declare const DragHandle: import("react").FC<import("react-intl-next").WithIntlProps<{
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     getPos: () => number | undefined;
     anchorName: string;
     nodeType: string;
-}) => jsx.JSX.Element;
+} & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<{
+        view: EditorView;
+        api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+        getPos: () => number | undefined;
+        anchorName: string;
+        nodeType: string;
+    } & WrappedComponentProps>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.5.12",
+	"version": "1.5.15",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,21 +32,22 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^39.0.3",
-		"@atlaskit/editor-common": "^84.1.0",
+		"@atlaskit/editor-common": "^84.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
 		"@atlaskit/editor-plugin-feature-flags": "^1.1.0",
 		"@atlaskit/editor-plugin-width": "^1.1.0",
 		"@atlaskit/editor-prosemirror": "4.0.1",
-		"@atlaskit/editor-shared-styles": "^2.12.0",
+		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.7.0",
-		"@atlaskit/icon": "^22.5.0",
+		"@atlaskit/icon": "^22.6.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/tokens": "^1.53.0",
+		"@atlaskit/tooltip": "^18.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -54,7 +55,8 @@
 	},
 	"peerDependencies": {
 		"react": "^16.8.0",
-		"react-dom": "^16.8.0"
+		"react-dom": "^16.8.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"techstack": {
 		"@atlassian/frontend": {
@@ -117,11 +119,20 @@
 		"platform.editor.elements.drag-and-drop-ed-23905": {
 			"type": "boolean"
 		},
+		"platform_editor_elements_drag_and_drop_ed_23189": {
+			"type": "boolean"
+		},
 		"platform.editor.elements.drag-and-drop-ed-23932": {
 			"type": "boolean"
 		},
 		"platform_editor_elements_dnd_ed_23674": {
 			"type": "boolean"
+		},
+		"platform_editor_element_drag_and_drop_ed_23873": {
+			"type": "boolean"
+		},
+		"platform_editor_element_drag_and_drop_ed_23842": {
+			"type": "boolean"
 		}
 	}
 }