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

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @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
+
+- [#117568](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117568)
+  [`b07c3e0b8dbf8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b07c3e0b8dbf8) -
+  Update drag handle position on divider node
+- Updated dependencies
+
 ## 1.5.11
 
 ### 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");
@@ -82,7 +83,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     var _Decoration$node2;
     var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
     var style;
-    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')) {
       style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;");
     } else {
       style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '');
@@ -135,25 +136,27 @@ 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
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
-    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')) {
       // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
       // 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/consts.js

@@ -3,17 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
+exports.topPositionAdjustment = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
 var DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_WIDTH = 12;
 var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
 var DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_ZINDEX = _editorSharedStyles.akRichMediaResizeZIndex + _editorSharedStyles.akEditorUnitZIndex; //place above legacy resizer
 
+var DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
+
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType) {
   if (nodeTypeExcludeList.includes(nodeType)) {
     return 12;
   }
   return 8;
+};
+var topPositionAdjustment = exports.topPositionAdjustment = function topPositionAdjustment(nodeType) {
+  switch (nodeType) {
+    case 'rule':
+      return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;
+    case 'table':
+      return DRAG_HANDLE_HEIGHT;
+    default:
+      return 0;
+  }
 };

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),
@@ -105,7 +110,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       });
       var resolvedMovingNode = tr.doc.resolve(start);
       var maybeNode = resolvedMovingNode.nodeAfter;
-      (0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
+      (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
         eventType: _analytics.EVENT_TYPE.UI,
         action: _analytics.ACTION.CLICKED,
@@ -242,31 +247,48 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     }
     if (supportsAnchor) {
-      return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
+      return (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
         left: hasResizer || isExtension || isEmbedCard ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
-        top: anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
+        top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       } : {
         left: hasResizer || isExtension || isBlockCard || isEmbedCard ? (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
-        top: anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
+        top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
     return {
       left: (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates),
-      top: (0, _dragHandlePositions.getTopPosition)(dom)
+      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.getBooleanFF)('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/ui/global-styles.js

@@ -18,19 +18,27 @@ var extendedHoverZone = (0, _react.css)({
     display: 'none !important'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-drag-handler-anchor-name]::after': {
-    content: '""',
-    position: 'absolute',
-    top: 0,
-    left: '-100%',
-    width: '100%',
-    height: '100%',
-    background: 'transparent',
-    cursor: 'default',
-    zIndex: -1
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: '-100%',
+      width: '100%',
+      height: '100%',
+      background: 'transparent',
+      cursor: 'default',
+      zIndex: -1
+    }
   },
+  // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-blocks-decoration-container="true"] + *::after': {
+  'hr[data-drag-handler-anchor-name]': {
+    overflow: 'visible'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-blocks-drag-handle-container="true"] + *::after': {
     display: 'none'
   }
 });

package/dist/cjs/utils/drag-handle-positions.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTopPosition = exports.getLeftPosition = void 0;
 var _consts = require("../ui/consts");
-var getTopPosition = exports.getTopPosition = function getTopPosition(dom) {
+var getTopPosition = exports.getTopPosition = function getTopPosition(dom, type) {
   if (!dom) {
     return 'auto';
   }
   var table = dom.querySelector('table');
   if (table) {
     return "".concat(dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
+  } else if (type === 'rule') {
+    return "".concat(dom.offsetTop - _consts.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, "px");
   } else {
     return "".concat(dom.offsetTop, "px");
   }

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,7 +1,8 @@
 import { createElement } from 'react';
 import ReactDOM from 'react-dom';
+import { RawIntlProvider } from 'react-intl-next';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
@@ -74,7 +75,7 @@ export const nodeDecorations = newState => {
   newState.doc.descendants((node, pos, _parent, index) => {
     const anchorName = `--node-anchor-${node.type.name}-${index}`;
     let style;
-    if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+    if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       style = `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}; position: relative; z-index: 1;`;
     } else {
       style = `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}`;
@@ -129,25 +130,27 @@ 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
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
-    if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+    if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
       // 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,