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

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.29
+
+### Patch Changes
+
+- [#113919](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113919)
+  [`b23ee751fde25`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b23ee751fde25) -
+  [ux] fix : the page is not scrolled down when click on the handle of a long node
+- [#113848](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113848)
+  [`173e8cc6ecdb3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/173e8cc6ecdb3) -
+  ED-23779 fix undo caused wrong selector position
+
+## 1.4.28
+
+### Patch Changes
+
+- [#113750](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113750)
+  [`f0bb95b1231d8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f0bb95b1231d8) -
+  [ux] Fix drag handle pos for block and embed card nodes
+- [#114031](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114031)
+  [`a9de475bcf1f7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a9de475bcf1f7) -
+  Highlight whole node when selecting decistion list via drag handle
+- Updated dependencies
+
 ## 1.4.27
 
 ### Patch Changes

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

@@ -89,7 +89,7 @@ var createPlugin = exports.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;
         }
@@ -123,7 +123,15 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
         // 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 === _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 || 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 === _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;
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
@@ -204,7 +212,7 @@ var createPlugin = exports.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 ? 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,
@@ -248,15 +256,23 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
       var dom = editorView.dom;
 
       // Use ResizeObserver to observe height changes
-      var resizeObserver = new ResizeObserver((0, _rafSchd.default)(function () {
-        var editorHeight = dom.offsetHeight;
+      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)) {
-          editorView.dispatch(editorView.state.tr.setMeta(key, {
-            editorHeight: editorHeight
-          }));
+          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);
         }
       }));
 

package/dist/cjs/ui/consts.js

@@ -3,10 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dragHandleGap = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
+exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = 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 nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType) {
   if (nodeTypeExcludeList.includes(nodeType)) {

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

@@ -40,7 +40,8 @@ var dragHandleButtonStyles = (0, _react2.css)({
   borderRadius: _consts.DRAG_HANDLE_BORDER_RADIUS,
   color: "var(--ds-icon, #44546F)",
   cursor: 'grab',
-  zIndex: 2,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: _consts.DRAG_HANDLE_ZINDEX,
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
   },
@@ -60,14 +61,35 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     nodeType = _ref.nodeType;
   var start = getPos();
   var buttonRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(768),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    dragHandleSelected = _useState2[0],
-    setDragHandleSelected = _useState2[1];
+    blockCardWidth = _useState2[0],
+    setBlockCardWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    dragHandleSelected = _useState4[0],
+    setDragHandleSelected = _useState4[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
     featureFlagsState = _useSharedPluginState.featureFlagsState;
+  (0, _react.useEffect)(function () {
+    // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
+    if (nodeType === 'blockCard') {
+      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+      var container = dom === null || dom === void 0 ? void 0 : dom.querySelector('.datasourceView-content-inner-wrap');
+      if (container) {
+        var resizeObserver = new ResizeObserver(function (entries) {
+          var width = entries[0].contentBoxSize[0].inlineSize;
+          setBlockCardWidth(width);
+        });
+        resizeObserver.observe(container);
+        return function () {
+          return resizeObserver.unobserve(container);
+        };
+      }
+    }
+  }, [anchorName, nodeType, view.dom]);
   var handleOnClick = (0, _react.useCallback)(function () {
-    var _api$core, _api$core2;
+    var _api$core;
     setDragHandleSelected(!dragHandleSelected);
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
       var tr = _ref2.tr;
@@ -80,15 +102,15 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       });
       return tr;
     });
-    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === 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.
   var handleMouseDown = (0, _react.useCallback)(function () {
-    var _api$core3, _api$core4;
-    api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
+    var _api$core2;
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
       var tr = _ref3.tr;
       if (start === undefined) {
         return tr;
@@ -99,8 +121,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       });
       return tr;
     });
-    api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
-  }, [start, api, nodeType]);
+    view.focus();
+  }, [start, api, view, nodeType]);
   (0, _react.useEffect)(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -129,11 +151,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core5, _api$core6;
+        var _api$core3;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
+        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref6) {
           var _api$blockControls, _api$analytics;
           var tr = _ref6.tr;
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
@@ -141,6 +163,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           });
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
+          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.DRAGGED,
@@ -153,20 +176,34 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           })(tr);
           return tr;
         });
-        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.focus();
+        view.focus();
       }
     });
-  }, [api, start, view, anchorName, nodeType]);
+  }, [anchorName, api, nodeType, view, start]);
   var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var positionStyles = (0, _react.useMemo)(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
     var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
-    var hasResizer = anchorName.includes('table') || anchorName.includes('mediaSingle');
-    var isExtension = anchorName.includes('extension') || anchorName.includes('bodiedExtension');
-    var innerContainer = dom ? hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null : null;
+    var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
+    var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension';
+    var isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;
+    var isEmbedCard = nodeType === 'embedCard';
+    var innerContainer = null;
+    if (dom) {
+      if (isEmbedCard) {
+        innerContainer = dom.querySelector('.rich-media-item');
+      } else if (hasResizer) {
+        innerContainer = dom.querySelector('.resizer-item');
+      } else if (isExtension) {
+        innerContainer = dom.querySelector('.extension-container[data-layout]');
+      } else if (isBlockCard) {
+        //specific to datasource blockCard
+        innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
+      }
+    }
     if (supportsAnchor) {
       return {
-        left: hasResizer || isExtension ? (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, _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)")
       };
     }
@@ -174,7 +211,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       left: (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: (0, _dragHandlePositions.getTopPosition)(dom)
     };
-  }, [anchorName, view, nodeType, macroInteractionUpdates]);
+  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
   return (0, _react2.jsx)("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],

package/dist/cjs/ui/mouse-move-wrapper.js

@@ -10,6 +10,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
 var _dragHandlePositions = require("../utils/drag-handle-positions");
+var _consts = require("./consts");
 /** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -22,7 +23,8 @@ var basicStyles = (0, _react2.css)({
   zIndex: -1
 });
 var mouseMoveWrapperStyles = (0, _react2.css)({
-  zIndex: 1
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: _consts.DRAG_HANDLE_ZINDEX
 });
 var MouseMoveWrapper = exports.MouseMoveWrapper = function MouseMoveWrapper(_ref) {
   var view = _ref.view,

package/dist/cjs/utils/getSelection.js

@@ -11,7 +11,9 @@ var getSelection = exports.getSelection = function getSelection(tr, start) {
   var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
   var nodeSize = node ? node.nodeSize : 1;
   var $startPos = tr.doc.resolve(start);
-  if (isNodeSelection) {
+
+  // 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);
   } else {
     // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
@@ -30,7 +32,7 @@ var getSelection = exports.getSelection = function getSelection(tr, start) {
       return true;
     });
     var inlineNodeDepth = inlineNodePos - start;
-    return new _state.TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(start + nodeSize - inlineNodeDepth));
+    return new _state.TextSelection(tr.doc.resolve(start + nodeSize - inlineNodeDepth), tr.doc.resolve(inlineNodePos));
   }
 };
 var selectNode = exports.selectNode = function selectNode(tr, start, nodeType) {

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

@@ -83,7 +83,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;
         }
@@ -116,7 +116,15 @@ export const createPlugin = api => {
 
         // 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 || !!(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) {
@@ -197,7 +205,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 ? 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,
@@ -243,15 +251,23 @@ export const createPlugin = api => {
       const dom = editorView.dom;
 
       // Use ResizeObserver to observe height changes
-      const resizeObserver = new ResizeObserver(rafSchedule(() => {
-        const editorHeight = dom.offsetHeight;
+      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)) {
-          editorView.dispatch(editorView.state.tr.setMeta(key, {
-            editorHeight
-          }));
+          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);
         }
       }));
 

package/dist/es2019/ui/consts.js

@@ -1,6 +1,9 @@
+import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 export const DRAG_HANDLE_HEIGHT = 24;
 export const DRAG_HANDLE_WIDTH = 12;
 export const DRAG_HANDLE_BORDER_RADIUS = 4;
+export const DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer
+
 const nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 export const dragHandleGap = nodeType => {
   if (nodeTypeExcludeList.includes(nodeType)) {

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

@@ -11,7 +11,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/el
 import { key } from '../pm-plugins/main';
 import { selectNode } from '../utils';
 import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
-import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from './consts';
+import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap } from './consts';
 import { dragPreview } from './drag-preview';
 const dragHandleButtonStyles = css({
   position: 'absolute',
@@ -31,7 +31,8 @@ const dragHandleButtonStyles = css({
   borderRadius: DRAG_HANDLE_BORDER_RADIUS,
   color: "var(--ds-icon, #44546F)",
   cursor: 'grab',
-  zIndex: 2,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: DRAG_HANDLE_ZINDEX,
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
   },
@@ -52,12 +53,28 @@ export const DragHandle = ({
 }) => {
   const start = getPos();
   const buttonRef = useRef(null);
+  const [blockCardWidth, setBlockCardWidth] = useState(768);
   const [dragHandleSelected, setDragHandleSelected] = useState(false);
   const {
     featureFlagsState
   } = useSharedPluginState(api, ['featureFlags']);
+  useEffect(() => {
+    // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
+    if (nodeType === 'blockCard') {
+      const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
+      const container = dom === null || dom === void 0 ? void 0 : dom.querySelector('.datasourceView-content-inner-wrap');
+      if (container) {
+        const resizeObserver = new ResizeObserver(entries => {
+          const width = entries[0].contentBoxSize[0].inlineSize;
+          setBlockCardWidth(width);
+        });
+        resizeObserver.observe(container);
+        return () => resizeObserver.unobserve(container);
+      }
+    }
+  }, [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
@@ -71,15 +88,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) {
@@ -91,8 +108,8 @@ 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]);
   useEffect(() => {
     const element = buttonRef.current;
     if (!element) {
@@ -121,11 +138,11 @@ export const DragHandle = ({
         });
       },
       onDragStart() {
-        var _api$core5, _api$core6;
+        var _api$core3;
         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$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
           tr
         }) => {
           var _api$blockControls, _api$analytics;
@@ -134,6 +151,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,
@@ -146,20 +164,34 @@ 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();
       }
     });
-  }, [api, start, view, anchorName, nodeType]);
+  }, [anchorName, api, nodeType, view, start]);
   const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   const positionStyles = useMemo(() => {
     const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
     const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
-    const hasResizer = anchorName.includes('table') || anchorName.includes('mediaSingle');
-    const isExtension = anchorName.includes('extension') || anchorName.includes('bodiedExtension');
-    const innerContainer = dom ? hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null : null;
+    const hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
+    const isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension';
+    const isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;
+    const isEmbedCard = nodeType === 'embedCard';
+    let innerContainer = null;
+    if (dom) {
+      if (isEmbedCard) {
+        innerContainer = dom.querySelector('.rich-media-item');
+      } else if (hasResizer) {
+        innerContainer = dom.querySelector('.resizer-item');
+      } else if (isExtension) {
+        innerContainer = dom.querySelector('.extension-container[data-layout]');
+      } else if (isBlockCard) {
+        //specific to datasource blockCard
+        innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
+      }
+    }
     if (supportsAnchor) {
       return {
-        left: hasResizer || isExtension ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
+        left: hasResizer || isExtension || isBlockCard || isEmbedCard ? 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)`
       };
     }
@@ -167,7 +199,7 @@ export const DragHandle = ({
       left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: getTopPosition(dom)
     };
-  }, [anchorName, view, nodeType, macroInteractionUpdates]);
+  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
   return jsx("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],

package/dist/es2019/ui/mouse-move-wrapper.js

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { getTopPosition } from '../utils/drag-handle-positions';
+import { DRAG_HANDLE_ZINDEX } from './consts';
 const basicStyles = css({
   position: 'absolute',
   width: '100%',
@@ -13,7 +14,8 @@ const basicStyles = css({
   zIndex: -1
 });
 const mouseMoveWrapperStyles = css({
-  zIndex: 1
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: DRAG_HANDLE_ZINDEX
 });
 export const MouseMoveWrapper = ({
   view,

package/dist/es2019/utils/getSelection.js

@@ -5,7 +5,9 @@ export const getSelection = (tr, start) => {
   const isNodeSelection = node && NodeSelection.isSelectable(node);
   const nodeSize = node ? node.nodeSize : 1;
   const $startPos = tr.doc.resolve(start);
-  if (isNodeSelection) {
+
+  // decisionList node is not selectable, but we want to select the whole node not just text
+  if (isNodeSelection || (node === null || node === void 0 ? void 0 : node.type.name) === 'decisionList') {
     return new NodeSelection($startPos);
   } else {
     // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
@@ -24,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/main.js

@@ -82,7 +82,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;
         }
@@ -116,7 +116,15 @@ export var createPlugin = function createPlugin(api) {
 
         // 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 || !!(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) {
@@ -197,7 +205,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 ? 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,
@@ -241,15 +249,23 @@ export var createPlugin = function createPlugin(api) {
       var dom = editorView.dom;
 
       // Use ResizeObserver to observe height changes
-      var resizeObserver = new ResizeObserver(rafSchedule(function () {
-        var editorHeight = dom.offsetHeight;
+      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)) {
-          editorView.dispatch(editorView.state.tr.setMeta(key, {
-            editorHeight: editorHeight
-          }));
+          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);
         }
       }));
 

package/dist/esm/ui/consts.js

@@ -1,6 +1,9 @@
+import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 export var DRAG_HANDLE_HEIGHT = 24;
 export var DRAG_HANDLE_WIDTH = 12;
 export var DRAG_HANDLE_BORDER_RADIUS = 4;
+export var DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer
+
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 export var dragHandleGap = function dragHandleGap(nodeType) {
   if (nodeTypeExcludeList.includes(nodeType)) {

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

@@ -12,7 +12,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/el
 import { key } from '../pm-plugins/main';
 import { selectNode } from '../utils';
 import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
-import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from './consts';
+import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap } from './consts';
 import { dragPreview } from './drag-preview';
 var dragHandleButtonStyles = css({
   position: 'absolute',
@@ -32,7 +32,8 @@ var dragHandleButtonStyles = css({
   borderRadius: DRAG_HANDLE_BORDER_RADIUS,
   color: "var(--ds-icon, #44546F)",
   cursor: 'grab',
-  zIndex: 2,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: DRAG_HANDLE_ZINDEX,
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
   },
@@ -52,14 +53,35 @@ export var DragHandle = function DragHandle(_ref) {
     nodeType = _ref.nodeType;
   var start = getPos();
   var buttonRef = useRef(null);
-  var _useState = useState(false),
+  var _useState = useState(768),
     _useState2 = _slicedToArray(_useState, 2),
-    dragHandleSelected = _useState2[0],
-    setDragHandleSelected = _useState2[1];
+    blockCardWidth = _useState2[0],
+    setBlockCardWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dragHandleSelected = _useState4[0],
+    setDragHandleSelected = _useState4[1];
   var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
     featureFlagsState = _useSharedPluginState.featureFlagsState;
+  useEffect(function () {
+    // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
+    if (nodeType === 'blockCard') {
+      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+      var container = dom === null || dom === void 0 ? void 0 : dom.querySelector('.datasourceView-content-inner-wrap');
+      if (container) {
+        var resizeObserver = new ResizeObserver(function (entries) {
+          var width = entries[0].contentBoxSize[0].inlineSize;
+          setBlockCardWidth(width);
+        });
+        resizeObserver.observe(container);
+        return function () {
+          return resizeObserver.unobserve(container);
+        };
+      }
+    }
+  }, [anchorName, nodeType, view.dom]);
   var handleOnClick = useCallback(function () {
-    var _api$core, _api$core2;
+    var _api$core;
     setDragHandleSelected(!dragHandleSelected);
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
       var tr = _ref2.tr;
@@ -72,15 +94,15 @@ export var DragHandle = function DragHandle(_ref) {
       });
       return tr;
     });
-    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === 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.
   var handleMouseDown = useCallback(function () {
-    var _api$core3, _api$core4;
-    api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
+    var _api$core2;
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
       var tr = _ref3.tr;
       if (start === undefined) {
         return tr;
@@ -91,8 +113,8 @@ export var DragHandle = function DragHandle(_ref) {
       });
       return tr;
     });
-    api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
-  }, [start, api, nodeType]);
+    view.focus();
+  }, [start, api, view, nodeType]);
   useEffect(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -121,11 +143,11 @@ export var DragHandle = function DragHandle(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core5, _api$core6;
+        var _api$core3;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
+        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref6) {
           var _api$blockControls, _api$analytics;
           var tr = _ref6.tr;
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
@@ -133,6 +155,7 @@ export var DragHandle = function DragHandle(_ref) {
           });
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
+          tr.setMeta('scrollIntoView', false);
           api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
             eventType: EVENT_TYPE.UI,
             action: ACTION.DRAGGED,
@@ -145,20 +168,34 @@ export var DragHandle = function DragHandle(_ref) {
           })(tr);
           return tr;
         });
-        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.focus();
+        view.focus();
       }
     });
-  }, [api, start, view, anchorName, nodeType]);
+  }, [anchorName, api, nodeType, view, start]);
   var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var positionStyles = useMemo(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
     var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
-    var hasResizer = anchorName.includes('table') || anchorName.includes('mediaSingle');
-    var isExtension = anchorName.includes('extension') || anchorName.includes('bodiedExtension');
-    var innerContainer = dom ? hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null : null;
+    var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
+    var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension';
+    var isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;
+    var isEmbedCard = nodeType === 'embedCard';
+    var innerContainer = null;
+    if (dom) {
+      if (isEmbedCard) {
+        innerContainer = dom.querySelector('.rich-media-item');
+      } else if (hasResizer) {
+        innerContainer = dom.querySelector('.resizer-item');
+      } else if (isExtension) {
+        innerContainer = dom.querySelector('.extension-container[data-layout]');
+      } else if (isBlockCard) {
+        //specific to datasource blockCard
+        innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
+      }
+    }
     if (supportsAnchor) {
       return {
-        left: hasResizer || isExtension ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
+        left: hasResizer || isExtension || isBlockCard || isEmbedCard ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
         top: anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
@@ -166,7 +203,7 @@ export var DragHandle = function DragHandle(_ref) {
       left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: getTopPosition(dom)
     };
-  }, [anchorName, view, nodeType, macroInteractionUpdates]);
+  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
   return jsx("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],

package/dist/esm/ui/mouse-move-wrapper.js

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { getTopPosition } from '../utils/drag-handle-positions';
+import { DRAG_HANDLE_ZINDEX } from './consts';
 var basicStyles = css({
   position: 'absolute',
   width: '100%',
@@ -14,7 +15,8 @@ var basicStyles = css({
   zIndex: -1
 });
 var mouseMoveWrapperStyles = css({
-  zIndex: 1
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: DRAG_HANDLE_ZINDEX
 });
 export var MouseMoveWrapper = function MouseMoveWrapper(_ref) {
   var view = _ref.view,

package/dist/esm/utils/getSelection.js

@@ -5,7 +5,9 @@ export var getSelection = function getSelection(tr, start) {
   var isNodeSelection = node && NodeSelection.isSelectable(node);
   var nodeSize = node ? node.nodeSize : 1;
   var $startPos = tr.doc.resolve(start);
-  if (isNodeSelection) {
+
+  // decisionList node is not selectable, but we want to select the whole node not just text
+  if (isNodeSelection || (node === null || node === void 0 ? void 0 : node.type.name) === 'decisionList') {
     return new NodeSelection($startPos);
   } else {
     // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
@@ -24,7 +26,7 @@ export var getSelection = function getSelection(tr, start) {
       return true;
     });
     var 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 var selectNode = function selectNode(tr, start, nodeType) {

package/dist/types/ui/consts.d.ts

@@ -1,4 +1,5 @@
 export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_WIDTH = 12;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
+export declare const DRAG_HANDLE_ZINDEX: number;
 export declare const dragHandleGap: (nodeType: string) => 12 | 8;

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

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { type EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../types';
 export declare const DragHandle: ({ view, api, getPos, anchorName, nodeType, }: {
     view: EditorView;

package/dist/types/ui/mouse-move-wrapper.d.ts

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { type EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../types';
 export declare const MouseMoveWrapper: ({ view, api, anchorName, nodeType, getPos, }: {
     view: EditorView;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -1,4 +1,5 @@
 export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_WIDTH = 12;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
+export declare const DRAG_HANDLE_ZINDEX: number;
 export declare const dragHandleGap: (nodeType: string) => 12 | 8;

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

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { type EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../types';
 export declare const DragHandle: ({ view, api, getPos, anchorName, nodeType, }: {
     view: EditorView;

package/dist/types-ts4.5/ui/mouse-move-wrapper.d.ts

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { type EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../types';
 export declare const MouseMoveWrapper: ({ view, api, anchorName, nodeType, getPos, }: {
     view: EditorView;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.4.27",
+	"version": "1.4.29",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,13 +31,14 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^36.10.7",
-		"@atlaskit/editor-common": "^82.10.0",
-		"@atlaskit/editor-plugin-analytics": "^1.2.3",
+		"@atlaskit/adf-schema": "^37.0.0",
+		"@atlaskit/editor-common": "^82.13.0",
+		"@atlaskit/editor-plugin-analytics": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
 		"@atlaskit/editor-plugin-feature-flags": "^1.1.0",
 		"@atlaskit/editor-plugin-width": "^1.1.0",
 		"@atlaskit/editor-prosemirror": "4.0.1",
+		"@atlaskit/editor-shared-styles": "^2.12.0",
 		"@atlaskit/editor-tables": "^2.7.0",
 		"@atlaskit/icon": "^22.4.0",
 		"@atlaskit/platform-feature-flags": "^0.2.0",
@@ -45,7 +46,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.52.0",
+		"@atlaskit/tokens": "^1.53.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",