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

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 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
+
+- [#113232](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113232)
+  [`0a1d7a1348305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0a1d7a1348305) -
+  [ux] Fix drag previews when media is nested in the node
+- [#113423](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113423)
+  [`e22e9f7eadce7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e22e9f7eadce7) -
+  Fix text spliting when deleting paragraph
+- Updated dependencies
+
 ## 1.4.26
 
 ### Patch Changes

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

@@ -113,6 +113,8 @@ var mouseMoveWrapperDecorations = exports.mouseMoveWrapperDecorations = function
 var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api) {
   return _view.Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('div');
+    // Need to set it to inline to avoid text being split when merging two paragraphs
+    element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {

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

@@ -248,15 +248,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,12 +61,33 @@ 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;
     setDragHandleSelected(!dragHandleSelected);
@@ -156,17 +178,31 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.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 +210,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/drag-preview.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dragPreview = void 0;
-//
+var _colors = require("@atlaskit/theme/colors");
 var previewStyle = {
-  borderColor: "var(--ds-border-focused, #388BFF)",
+  borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
   borderStyle: 'solid',
-  borderRadius: "var(--ds-border-radius-100, 4px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
   borderWidth: "var(--ds-border-width-outline, 2px)",
   backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
 };
@@ -21,23 +21,26 @@ var dragPreview = exports.dragPreview = function dragPreview(container, dom, nod
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
   var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
-  if (shouldBeGenericPreview) {
+  var embedCard = dom.querySelector('.embedCardView-content-wrap');
+  if (shouldBeGenericPreview || embedCard) {
     parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
     parent.style.borderRadius = previewStyle.borderRadius;
     parent.style.backgroundColor = previewStyle.backgroundColor;
     parent.style.height = '100%';
     parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
-  }
-  var resizer = dom.querySelector('.resizer-item');
-  var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!shouldBeGenericPreview);
+  } else {
+    var resizer = dom.querySelector('.resizer-item');
+    var clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ? resizer.cloneNode(true) : dom.cloneNode(true);
 
-  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
-  clonedDom.style.marginLeft = '0';
-  clonedDom.style.marginTop = '0';
-  clonedDom.style.marginRight = '0';
-  clonedDom.style.marginBottom = '0';
-  clonedDom.style.opacity = '0.4';
-  parent.appendChild(clonedDom);
+    // Remove any margin from the cloned element to ensure is doesn't position incorrectly
+    clonedDom.style.marginLeft = '0';
+    clonedDom.style.marginTop = '0';
+    clonedDom.style.marginRight = '0';
+    clonedDom.style.marginBottom = '0';
+    clonedDom.style.opacity = '0.4';
+    clonedDom.style.boxShadow = 'none';
+    parent.appendChild(clonedDom);
+  }
   container.appendChild(parent);
   var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
   var scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;

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

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

@@ -106,6 +106,8 @@ export const mouseMoveWrapperDecorations = (newState, api) => {
 export const dragHandleDecoration = (pos, anchorName, nodeType, api) => {
   return Decoration.widget(pos, (view, getPos) => {
     const element = document.createElement('div');
+    // Need to set it to inline to avoid text being split when merging two paragraphs
+    element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {

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

@@ -243,15 +243,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,10 +53,26 @@ 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;
     setDragHandleSelected(!dragHandleSelected);
@@ -149,17 +166,31 @@ export const DragHandle = ({
         api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.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 +198,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/drag-preview.js

@@ -1,8 +1,8 @@
-//
+import { B200 } from '@atlaskit/theme/colors';
 const previewStyle = {
-  borderColor: "var(--ds-border-focused, #388BFF)",
+  borderColor: `var(--ds-border-focused, ${B200})`,
   borderStyle: 'solid',
-  borderRadius: "var(--ds-border-radius-100, 4px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
   borderWidth: "var(--ds-border-width-outline, 2px)",
   backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
 };
@@ -15,23 +15,26 @@ export const dragPreview = (container, dom, nodeType) => {
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
   const shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
-  if (shouldBeGenericPreview) {
+  const embedCard = dom.querySelector('.embedCardView-content-wrap');
+  if (shouldBeGenericPreview || embedCard) {
     parent.style.border = `${previewStyle.borderWidth} ${previewStyle.borderStyle} ${previewStyle.borderColor}`;
     parent.style.borderRadius = previewStyle.borderRadius;
     parent.style.backgroundColor = previewStyle.backgroundColor;
     parent.style.height = '100%';
     parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
-  }
-  const resizer = dom.querySelector('.resizer-item');
-  const clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!shouldBeGenericPreview);
+  } else {
+    const resizer = dom.querySelector('.resizer-item');
+    const clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ? resizer.cloneNode(true) : dom.cloneNode(true);
 
-  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
-  clonedDom.style.marginLeft = '0';
-  clonedDom.style.marginTop = '0';
-  clonedDom.style.marginRight = '0';
-  clonedDom.style.marginBottom = '0';
-  clonedDom.style.opacity = '0.4';
-  parent.appendChild(clonedDom);
+    // Remove any margin from the cloned element to ensure is doesn't position incorrectly
+    clonedDom.style.marginLeft = '0';
+    clonedDom.style.marginTop = '0';
+    clonedDom.style.marginRight = '0';
+    clonedDom.style.marginBottom = '0';
+    clonedDom.style.opacity = '0.4';
+    clonedDom.style.boxShadow = 'none';
+    parent.appendChild(clonedDom);
+  }
   container.appendChild(parent);
   const scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
   const scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;

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

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

@@ -106,6 +106,8 @@ export var mouseMoveWrapperDecorations = function mouseMoveWrapperDecorations(ne
 export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api) {
   return Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('div');
+    // Need to set it to inline to avoid text being split when merging two paragraphs
+    element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {

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

@@ -241,15 +241,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,12 +53,33 @@ 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;
     setDragHandleSelected(!dragHandleSelected);
@@ -148,17 +170,31 @@ export var DragHandle = function DragHandle(_ref) {
         api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.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 +202,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/drag-preview.js

@@ -1,8 +1,8 @@
-//
+import { B200 } from '@atlaskit/theme/colors';
 var previewStyle = {
-  borderColor: "var(--ds-border-focused, #388BFF)",
+  borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
   borderStyle: 'solid',
-  borderRadius: "var(--ds-border-radius-100, 4px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
   borderWidth: "var(--ds-border-width-outline, 2px)",
   backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
 };
@@ -15,23 +15,26 @@ export var dragPreview = function dragPreview(container, dom, nodeType) {
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
   var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
-  if (shouldBeGenericPreview) {
+  var embedCard = dom.querySelector('.embedCardView-content-wrap');
+  if (shouldBeGenericPreview || embedCard) {
     parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
     parent.style.borderRadius = previewStyle.borderRadius;
     parent.style.backgroundColor = previewStyle.backgroundColor;
     parent.style.height = '100%';
     parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
-  }
-  var resizer = dom.querySelector('.resizer-item');
-  var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!shouldBeGenericPreview);
+  } else {
+    var resizer = dom.querySelector('.resizer-item');
+    var clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ? resizer.cloneNode(true) : dom.cloneNode(true);
 
-  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
-  clonedDom.style.marginLeft = '0';
-  clonedDom.style.marginTop = '0';
-  clonedDom.style.marginRight = '0';
-  clonedDom.style.marginBottom = '0';
-  clonedDom.style.opacity = '0.4';
-  parent.appendChild(clonedDom);
+    // Remove any margin from the cloned element to ensure is doesn't position incorrectly
+    clonedDom.style.marginLeft = '0';
+    clonedDom.style.marginTop = '0';
+    clonedDom.style.marginRight = '0';
+    clonedDom.style.marginBottom = '0';
+    clonedDom.style.opacity = '0.4';
+    clonedDom.style.boxShadow = 'none';
+    parent.appendChild(clonedDom);
+  }
   container.appendChild(parent);
   var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
   var scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;

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

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.26",
+	"version": "1.4.28",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,20 +31,22 @@
 		".": "./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.12.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",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
-		"@atlaskit/tokens": "^1.51.0",
+		"@atlaskit/theme": "^12.11.0",
+		"@atlaskit/tokens": "^1.53.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",