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

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

@@ -9,6 +9,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { dragHandleDecoration, dropTargetDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
+import { handleMouseOver } from './handle-mouse-over';
 export const key = new PluginKey('blockControls');
 const destroyFn = api => {
   const scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
@@ -83,7 +84,7 @@ export const createPlugin = api => {
         return initialState;
       },
       apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$isDragging, _meta$editorHeight;
+        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight;
         if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
@@ -113,21 +114,45 @@ export const createPlugin = api => {
           }) => spec.id === 'drag-handle');
           decorations = decorations.remove(oldHandle);
         }
+        let isDecsMissing = false;
+        let isHandleMissing = false;
+        if (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(({
+            spec
+          }) => spec.id === 'drag-handle');
+          const decsLength = decorations.find().filter(({
+            spec
+          }) => 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
         const maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && !nodeCountChanged;
-        const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || resizerMeta === false || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+
+        // This addresses scenarios such as undoing table resizing,
+        // where a keyboard shortcut triggers a width change, and
+        // the node's actual width is then updated in a separate renderering cycle.
+        // The tr.meta.activeNode is triggered by the showDragHandleAt function during the mouse entry event
+        // (when the table node rerenders)
+        // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
+        const maybeNodeWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 ? 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);
+        const redrawDecorations = decorations === 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 = DecorationSet.create(newState.doc, []);
           const nodeDecs = nodeDecorations(newState);
-          const mouseWrapperDecs = mouseMoveWrapperDecorations(newState, api);
-          decorations = decorations.add(newState.doc, [...nodeDecs, ...mouseWrapperDecs]);
+          if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+            decorations = decorations.add(newState.doc, [...nodeDecs]);
+          } else {
+            const mouseWrapperDecs = mouseMoveWrapperDecorations(newState, api);
+            decorations = decorations.add(newState.doc, [...nodeDecs, ...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) {
             const newActiveNode = activeNode && tr.doc.nodeAt(tr.mapping.map(activeNode.pos));
             let nodeType = activeNode.nodeType;
             let anchorName = activeNode.anchorName;
@@ -197,7 +222,7 @@ export const createPlugin = api => {
         return {
           decorations,
           decorationState,
-          activeNode: isEmptyDoc ? null : (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : 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,
@@ -236,41 +261,50 @@ export const createPlugin = api => {
             return true;
           }
           return false;
+        },
+        mouseover: (view, event) => {
+          if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+            handleMouseOver(view, event, api);
+          }
+          return false;
         }
       }
     },
     view: editorView => {
       const dom = editorView.dom;
+      let resizeObserver;
+      if (!getBooleanFF('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;
 
-      // Use ResizeObserver to observe height changes
-      const resizeObserver = new ResizeObserver(rafSchedule(entries => {
-        const editorHeight = entries[0].contentBoxSize[0].blockSize;
-
-        // Update the plugin state when the height changes
-        const pluginState = key.getState(editorView.state);
-        if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
-          const isResizerResizing = !!dom.querySelector('.is-resizing');
-          const 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
-            });
+          // Update the plugin state when the height changes
+          const pluginState = key.getState(editorView.state);
+          if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
+            const isResizerResizing = !!dom.querySelector('.is-resizing');
+            const 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
+              });
+            }
+            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
       const pragmaticCleanup = destroyFn(api);
       return {
         destroy() {
-          resizeObserver.unobserve(dom);
+          if (!getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+            resizeObserver.unobserve(dom);
+          }
           pragmaticCleanup();
         }
       };

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

@@ -5,7 +5,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
+import { getBooleanFF } 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 { key } from '../pm-plugins/main';
@@ -74,7 +76,7 @@ export const DragHandle = ({
     }
   }, [anchorName, nodeType, view.dom]);
   const handleOnClick = useCallback(() => {
-    var _api$core, _api$core2;
+    var _api$core;
     setDragHandleSelected(!dragHandleSelected);
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
       tr
@@ -88,15 +90,15 @@ export const DragHandle = ({
       });
       return tr;
     });
-    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
-  }, [start, api, dragHandleSelected, setDragHandleSelected, nodeType]);
+    view.focus();
+  }, [start, api, view, dragHandleSelected, setDragHandleSelected, nodeType]);
 
   // handleMouseDown required along with onClick to ensure the correct selection
   // is set immediately when the drag handle is clicked. Otherwise browser native
   // drag and drop can take over and cause unpredictable behaviour.
   const handleMouseDown = useCallback(() => {
-    var _api$core3, _api$core4;
-    api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
+    var _api$core2;
+    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
       tr
     }) => {
       if (start === undefined) {
@@ -108,8 +110,33 @@ export const DragHandle = ({
       });
       return tr;
     });
-    api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.focus();
-  }, [start, api, nodeType]);
+    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.
+  const handleMouseDownWrapperRemoved = useCallback(() => {
+    var _api$core3;
+    api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
+      tr
+    }) => {
+      if (start === undefined) {
+        return tr;
+      }
+      const node = tr.doc.nodeAt(start);
+      if (!node) {
+        return tr;
+      }
+      const $startPos = tr.doc.resolve(start + node.nodeSize);
+      const selection = new TextSelection($startPos);
+      tr.setSelection(selection);
+      tr.setMeta(key, {
+        pos: start
+      });
+      return tr;
+    });
+  }, [start, api]);
   useEffect(() => {
     const element = buttonRef.current;
     if (!element) {
@@ -138,11 +165,11 @@ export const DragHandle = ({
         });
       },
       onDragStart() {
-        var _api$core5, _api$core6;
+        var _api$core4;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
+        api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
           tr
         }) => {
           var _api$blockControls, _api$analytics;
@@ -151,6 +178,7 @@ export const DragHandle = ({
           });
           const resolvedMovingNode = tr.doc.resolve(start);
           const maybeNode = resolvedMovingNode.nodeAfter;
+          tr.setMeta('scrollIntoView', false);
           api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
             eventType: EVENT_TYPE.UI,
             action: ACTION.DRAGGED,
@@ -163,7 +191,7 @@ export const DragHandle = ({
           })(tr);
           return tr;
         });
-        api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.focus();
+        view.focus();
       }
     });
   }, [anchorName, api, nodeType, view, start]);
@@ -190,7 +218,7 @@ export const DragHandle = ({
     }
     if (supportsAnchor) {
       return {
-        left: hasResizer || isExtension || isBlockCard || isEmbedCard ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
+        left: hasResizer || isExtension || isBlockCard || isEmbedCard ? getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? `calc(calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates)}` : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
         top: anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
       };
     }
@@ -207,7 +235,7 @@ export const DragHandle = ({
     ,
     style: positionStyles,
     onClick: handleOnClick,
-    onMouseDown: handleMouseDown,
+    onMouseDown: getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
     "data-testid": "block-ctrl-drag-handle"
   }, jsx(DragHandlerIcon, {
     label: "",

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

@@ -1,3 +1,4 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B200 } from '@atlaskit/theme/colors';
 const previewStyle = {
   borderColor: `var(--ds-border-focused, ${B200})`,
@@ -14,6 +15,9 @@ export const dragPreview = (container, dom, nodeType) => {
   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')) {
+    parent.classList.add('block-ctrl-drag-preview');
+  }
   const shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
   const embedCard = dom.querySelector('.embedCardView-content-wrap');
   if (shouldBeGenericPreview || embedCard) {

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

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

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

@@ -1,6 +1,30 @@
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+const extendedHoverZone = 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'
+  }
+});
 const globalStyles = 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 + *': {
@@ -10,6 +34,6 @@ const globalStyles = css({
 });
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
-    styles: globalStyles
+    styles: [globalStyles, getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') && extendedHoverZone]
   });
 };

package/dist/es2019/utils/getSelection.js

@@ -26,7 +26,7 @@ export const getSelection = (tr, start) => {
       return true;
     });
     const inlineNodeDepth = inlineNodePos - start;
-    return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(start + nodeSize - inlineNodeDepth));
+    return new TextSelection(tr.doc.resolve(start + nodeSize - inlineNodeDepth), tr.doc.resolve(inlineNodePos));
   }
 };
 export const selectNode = (tr, start, nodeType) => {

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

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -19,6 +20,9 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
     decs.push(Decoration.widget(pos, function () {
       var 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: api,
         index: index
@@ -61,11 +65,17 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
 export var 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(Decoration.node(pos, pos + node.nodeSize, _defineProperty({
+    var style;
+    if (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(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
       style: style
-    }, 'data-drag-handler-anchor-name', anchorName)));
+    }, _defineProperty(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node, 'data-drag-handler-node-type', node.type.name), _Decoration$node)));
     return false;
   });
   return decs;
@@ -110,6 +120,11 @@ export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName,
     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: view,
       api: api,

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

@@ -0,0 +1,29 @@
+export var 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/esm/pm-plugins/main.js

@@ -10,6 +10,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { dragHandleDecoration, dropTargetDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
+import { handleMouseOver } from './handle-mouse-over';
 export var key = new PluginKey('blockControls');
 var destroyFn = function destroyFn(api) {
   var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
@@ -82,7 +83,7 @@ export var createPlugin = function createPlugin(api) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$isDragging, _meta$editorHeight;
+        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight;
         if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
@@ -113,21 +114,47 @@ export var createPlugin = function createPlugin(api) {
           });
           decorations = decorations.remove(oldHandle);
         }
+        var isDecsMissing = false;
+        var isHandleMissing = false;
+        if (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;
-        var redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || resizerMeta === false || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+
+        // This addresses scenarios such as undoing table resizing,
+        // where a keyboard shortcut triggers a width change, and
+        // the node's actual width is then updated in a separate renderering cycle.
+        // The tr.meta.activeNode is triggered by the showDragHandleAt function during the mouse entry event
+        // (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 === 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 = DecorationSet.create(newState.doc, []);
           var nodeDecs = nodeDecorations(newState);
-          var mouseWrapperDecs = mouseMoveWrapperDecorations(newState, api);
-          decorations = decorations.add(newState.doc, [].concat(_toConsumableArray(nodeDecs), _toConsumableArray(mouseWrapperDecs)));
+          if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+            decorations = decorations.add(newState.doc, _toConsumableArray(nodeDecs));
+          } else {
+            var mouseWrapperDecs = mouseMoveWrapperDecorations(newState, api);
+            decorations = decorations.add(newState.doc, [].concat(_toConsumableArray(nodeDecs), _toConsumableArray(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;
@@ -142,8 +169,8 @@ export var 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);
@@ -163,8 +190,8 @@ export var 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);
@@ -172,9 +199,9 @@ export var 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)
@@ -197,7 +224,7 @@ export var createPlugin = function createPlugin(api) {
         return {
           decorations: decorations,
           decorationState: decorationState,
-          activeNode: isEmptyDoc ? null : (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : 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,
@@ -234,41 +261,50 @@ export var createPlugin = function createPlugin(api) {
             return true;
           }
           return false;
+        },
+        mouseover: function mouseover(view, event) {
+          if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+            handleMouseOver(view, event, api);
+          }
+          return false;
         }
       }
     },
     view: function view(editorView) {
       var dom = editorView.dom;
+      var resizeObserver;
+      if (!getBooleanFF('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;
 
-      // Use ResizeObserver to observe height changes
-      var resizeObserver = new ResizeObserver(rafSchedule(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 (!getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+            resizeObserver.unobserve(dom);
+          }
           pragmaticCleanup();
         }
       };