@atlaskit/editor-plugin-block-controls 1.4.29 → 1.4.30

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.30
+
+### Patch Changes
+
+- [#114676](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114676)
+  [`8b085c84572b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b085c84572b0) -
+  remove mouse move wrapper under feature flag
+
 ## 1.4.29
 
 ### Patch Changes

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

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _dragHandle = require("../ui/drag-handle");
 var _dropTarget = require("../ui/drop-target");
 var _mouseMoveWrapper = require("../ui/mouse-move-wrapper");
@@ -26,6 +27,9 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     decs.push(_view.Decoration.widget(pos, function () {
       var element = document.createElement('div');
       element.setAttribute('data-blocks-drop-target-container', 'true');
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+        element.style.clear = 'unset';
+      }
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
         api: api,
         index: index
@@ -68,11 +72,17 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
 var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState) {
   var decs = [];
   newState.doc.descendants(function (node, pos, _parent, index) {
+    var _Decoration$node;
     var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
-    var style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '');
-    decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (0, _defineProperty2.default)({
+    var style;
+    if ((0, _platformFeatureFlags.getBooleanFF)('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;' : '');
+    }
+    decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
       style: style
-    }, 'data-drag-handler-anchor-name', anchorName)));
+    }, (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-node-type', node.type.name), _Decoration$node)));
     return false;
   });
   return decs;
@@ -117,6 +127,11 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     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')) {
+      // 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, {
       view: view,
       api: api,

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleMouseOver = void 0;
+var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
+  var _api$blockControls;
+  var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
+    isDragging = _ref.isDragging,
+    activeNode = _ref.activeNode;
+  // Most mouseover events don't fire during drag but some can slip through
+  // when the drag begins. This prevents those.
+  if (isDragging) {
+    return false;
+  }
+  var target = event.target;
+  if (target.classList.contains('ProseMirror')) {
+    return false;
+  }
+  var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
+  if (rootElement) {
+    var anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
+    if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
+      return false;
+    }
+    var pos = view.posAtDOM(rootElement, 0, 0);
+    var rootPos = view.state.doc.resolve(pos).start(1) - 1;
+    var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
+    if (nodeType) {
+      var _api$core, _api$blockControls2;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(rootPos, anchorName, nodeType));
+    }
+  }
+};

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

@@ -17,6 +17,7 @@ var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _decorations = require("./decorations");
+var _handleMouseOver = require("./handle-mouse-over");
 var key = exports.key = new _state.PluginKey('blockControls');
 var destroyFn = function destroyFn(api) {
   var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
@@ -120,6 +121,20 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           });
           decorations = decorations.remove(oldHandle);
         }
+        var isDecsMissing = false;
+        var isHandleMissing = false;
+        if ((0, _platformFeatureFlags.getBooleanFF)('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;
+            return spec.id === 'drag-handle';
+          });
+          var decsLength = decorations.find().filter(function (_ref7) {
+            var spec = _ref7.spec;
+            return spec.id !== 'drag-handle';
+          }).length;
+          isDecsMissing = !isDragging && decsLength !== newState.doc.childCount;
+        }
 
         // This is not targeted enough - it's trying to catch events like expand being set to breakout
         var maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && !nodeCountChanged;
@@ -131,18 +146,22 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         // (when the table node rerenders)
         // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
         var maybeNodeWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
-        var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+        var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
           decorations = _view.DecorationSet.create(newState.doc, []);
           var nodeDecs = (0, _decorations.nodeDecorations)(newState);
-          var mouseWrapperDecs = (0, _decorations.mouseMoveWrapperDecorations)(newState, api);
-          decorations = decorations.add(newState.doc, [].concat((0, _toConsumableArray2.default)(nodeDecs), (0, _toConsumableArray2.default)(mouseWrapperDecs)));
+          if ((0, _platformFeatureFlags.getBooleanFF)('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);
+            decorations = decorations.add(newState.doc, [].concat((0, _toConsumableArray2.default)(nodeDecs), (0, _toConsumableArray2.default)(mouseWrapperDecs)));
+          }
 
           // Note: Quite often the handle is not in the right position after a node is moved
           // it is safer for now to not show it when a node is moved
-          if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
+          if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
             var newActiveNode = activeNode && tr.doc.nodeAt(tr.mapping.map(activeNode.pos));
             var nodeType = activeNode.nodeType;
             var anchorName = activeNode.anchorName;
@@ -157,8 +176,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
         // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
         if (meta !== null && meta !== void 0 && meta.activeNode && (meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) && api) {
-          var _oldHandle = decorations.find().filter(function (_ref6) {
-            var spec = _ref6.spec;
+          var _oldHandle = decorations.find().filter(function (_ref8) {
+            var spec = _ref8.spec;
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle);
@@ -178,8 +197,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
         // Remove drop target decoration when dragging stops
         if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
-          var dropTargetDecs = decorations.find().filter(function (_ref7) {
-            var spec = _ref7.spec;
+          var dropTargetDecs = decorations.find().filter(function (_ref9) {
+            var spec = _ref9.spec;
             return spec.type === 'drop-target-decoration';
           });
           decorations = decorations.remove(dropTargetDecs);
@@ -187,9 +206,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
         // Map drop target decoration positions when the document changes
         if (tr.docChanged && isDragging) {
-          decorationState = decorationState.map(function (_ref8) {
-            var index = _ref8.index,
-              pos = _ref8.pos;
+          decorationState = decorationState.map(function (_ref10) {
+            var index = _ref10.index,
+              pos = _ref10.pos;
             return {
               index: index,
               pos: tr.mapping.map(pos)
@@ -212,7 +231,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         return {
           decorations: decorations,
           decorationState: decorationState,
-          activeNode: isEmptyDoc ? null : (_meta$activeNode2 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode2 !== void 0 ? _meta$activeNode2 : mappedActiveNodePos,
+          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode2 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode2 !== void 0 ? _meta$activeNode2 : mappedActiveNodePos,
           isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
           editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
@@ -249,41 +268,50 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
             return true;
           }
           return false;
+        },
+        mouseover: function mouseover(view, event) {
+          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+            (0, _handleMouseOver.handleMouseOver)(view, event, api);
+          }
+          return false;
         }
       }
     },
     view: function view(editorView) {
       var dom = editorView.dom;
+      var resizeObserver;
+      if (!(0, _platformFeatureFlags.getBooleanFF)('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;
 
-      // Use ResizeObserver to observe height changes
-      var resizeObserver = new ResizeObserver((0, _rafSchd.default)(function (entries) {
-        var editorHeight = entries[0].contentBoxSize[0].blockSize;
-
-        // Update the plugin state when the height changes
-        var pluginState = key.getState(editorView.state);
-        if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
-          var isResizerResizing = !!dom.querySelector('.is-resizing');
-          var transaction = editorView.state.tr;
-          if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
-            transaction.setMeta('is-resizer-resizing', isResizerResizing);
-          }
-          if (!isResizerResizing) {
-            transaction.setMeta(key, {
-              editorHeight: editorHeight
-            });
+          // Update the plugin state when the height changes
+          var pluginState = key.getState(editorView.state);
+          if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
+            var isResizerResizing = !!dom.querySelector('.is-resizing');
+            var transaction = editorView.state.tr;
+            if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
+              transaction.setMeta('is-resizer-resizing', isResizerResizing);
+            }
+            if (!isResizerResizing) {
+              transaction.setMeta(key, {
+                editorHeight: editorHeight
+              });
+            }
+            editorView.dispatch(transaction);
           }
-          editorView.dispatch(transaction);
-        }
-      }));
-
-      // Start observing the editor DOM element
-      resizeObserver.observe(dom);
+        }));
+        // Start observing the editor DOM element
+        resizeObserver.observe(dom);
+      }
 
       // Start pragmatic monitors
       var pragmaticCleanup = destroyFn(api);
       return {
         destroy: function destroy() {
-          resizeObserver.unobserve(dom);
+          if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+            resizeObserver.unobserve(dom);
+          }
           pragmaticCleanup();
         }
       };

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

@@ -10,7 +10,9 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
+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 _main = require("../pm-plugins/main");
@@ -123,6 +125,30 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     });
     view.focus();
   }, [start, api, view, nodeType]);
+
+  // TODO - This needs to be investigated further. Drag preview generation is not always working
+  // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
+  // but ensures the preview is generated correctly.
+  var handleMouseDownWrapperRemoved = (0, _react.useCallback)(function () {
+    var _api$core3;
+    api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref4) {
+      var tr = _ref4.tr;
+      if (start === undefined) {
+        return tr;
+      }
+      var node = tr.doc.nodeAt(start);
+      if (!node) {
+        return tr;
+      }
+      var $startPos = tr.doc.resolve(start + node.nodeSize);
+      var selection = new _state.TextSelection($startPos);
+      tr.setSelection(selection);
+      tr.setMeta(_main.key, {
+        pos: start
+      });
+      return tr;
+    });
+  }, [start, api]);
   (0, _react.useEffect)(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -136,11 +162,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
-        var nativeSetDragImage = _ref4.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref5) {
+        var nativeSetDragImage = _ref5.nativeSetDragImage;
         (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
-          render: function render(_ref5) {
-            var container = _ref5.container;
+          render: function render(_ref6) {
+            var container = _ref6.container;
             var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -151,13 +177,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core3;
+        var _api$core4;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref6) {
+        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref7) {
           var _api$blockControls, _api$analytics;
-          var tr = _ref6.tr;
+          var tr = _ref7.tr;
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
             tr: tr
           });
@@ -203,7 +229,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }
     if (supportsAnchor) {
       return {
-        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)"),
+        left: hasResizer || isExtension || isBlockCard || isEmbedCard ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? "calc(calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates)) : (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)")
       };
     }
@@ -220,7 +246,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     ,
     style: positionStyles,
     onClick: handleOnClick,
-    onMouseDown: handleMouseDown,
+    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: "",

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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, ")"),
@@ -20,6 +21,9 @@ var dragPreview = exports.dragPreview = function dragPreview(container, dom, nod
   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')) {
+    parent.classList.add('block-ctrl-drag-preview');
+  }
   var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
   var embedCard = dom.querySelector('.embedCardView-content-wrap');
   if (shouldBeGenericPreview || embedCard) {

package/dist/cjs/ui/drop-target.js

@@ -22,7 +22,8 @@ var styleDropTarget = (0, _react2.css)({
   position: 'absolute',
   width: '100%',
   left: '0',
-  display: 'block'
+  display: 'block',
+  zIndex: 1
 });
 var styleDropIndicator = (0, _react2.css)({
   height: '100%',

package/dist/cjs/ui/global-styles.js

@@ -5,9 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GlobalStylesWrapper = void 0;
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var extendedHoverZone = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    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
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-blocks-decoration-container="true"] + *::after': {
+    display: 'none'
+  }
+});
 var globalStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror-widget:first-child + *': {
@@ -17,6 +41,6 @@ var globalStyles = (0, _react.css)({
 });
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: globalStyles
+    styles: [globalStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') && extendedHoverZone]
   });
 };

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

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
@@ -18,6 +19,9 @@ export const dropTargetDecorations = (oldState, newState, api) => {
     decs.push(Decoration.widget(pos, () => {
       const element = document.createElement('div');
       element.setAttribute('data-blocks-drop-target-container', 'true');
+      if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+        element.style.clear = 'unset';
+      }
       ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
         api,
         index
@@ -61,10 +65,16 @@ export const nodeDecorations = newState => {
   const decs = [];
   newState.doc.descendants((node, pos, _parent, index) => {
     const anchorName = `--node-anchor-${node.type.name}-${index}`;
-    const style = `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}`;
+    let style;
+    if (getBooleanFF('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;' : ''}`;
+    }
     decs.push(Decoration.node(pos, pos + node.nodeSize, {
       style,
-      ['data-drag-handler-anchor-name']: anchorName
+      ['data-drag-handler-anchor-name']: anchorName,
+      ['data-drag-handler-node-type']: node.type.name
     }));
     return false;
   });
@@ -110,6 +120,11 @@ export const dragHandleDecoration = (pos, anchorName, nodeType, api) => {
     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')) {
+      // 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, {
       view,
       api,

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -0,0 +1,30 @@
+export const handleMouseOver = (view, event, api) => {
+  var _api$blockControls;
+  const {
+    isDragging,
+    activeNode
+  } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
+  // Most mouseover events don't fire during drag but some can slip through
+  // when the drag begins. This prevents those.
+  if (isDragging) {
+    return false;
+  }
+  const target = event.target;
+  if (target.classList.contains('ProseMirror')) {
+    return false;
+  }
+  const rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
+  if (rootElement) {
+    const anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
+    if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
+      return false;
+    }
+    const pos = view.posAtDOM(rootElement, 0, 0);
+    const rootPos = view.state.doc.resolve(pos).start(1) - 1;
+    const nodeType = rootElement.getAttribute('data-drag-handler-node-type');
+    if (nodeType) {
+      var _api$core, _api$blockControls2;
+      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(rootPos, anchorName, nodeType));
+    }
+  }
+};