@atlaskit/editor-plugin-block-controls 9.1.13 → 9.1.16

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 9.1.16
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.1.15
+
+### Patch Changes
+
+- [`0eb1eed9871ef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0eb1eed9871ef) -
+  [ux] [EDITOR-6279] update the block menu experiment's code check to also check jira. this fixes
+  the transform behaviour on a moved node in jira.
+- Updated dependencies
+
+## 9.1.14
+
+### Patch Changes
+
+- [`7acd06d35fdd1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7acd06d35fdd1) -
+  Editor-5933: Fixed unable to create synced block from embed
+- Updated dependencies
+
 ## 9.1.13
 
 ### Patch Changes

package/dist/cjs/editor-commands/move-node.js

@@ -19,7 +19,6 @@ var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _utils3 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _main = require("../pm-plugins/main");
 var _analytics2 = require("../pm-plugins/utils/analytics");
@@ -333,7 +332,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
           tr: tr
         });
       }
-      var preservedSelection = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection : undefined;
+      var preservedSelection = (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection : undefined;
       if (preservedSelection) {
         var $from = tr.doc.resolve(Math.min(start, preservedSelection.from));
         var expandedRange = $from.blockRange(preservedSelection.$to);

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

@@ -46,7 +46,9 @@ var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, pare
   if (isLegacyContentMacroExtension) {
     return true;
   }
-  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) && !(0, _experiments.editorExperiment)('platform_editor_fix_selection_wrapped_media_embed', true, {
+    exposure: true
+  }) ? true : ignore_nodes.includes(node.type.name);
 };
 var getPositionBeforeNodeAtPos = function getPositionBeforeNodeAtPos(state, pos) {
   if (pos <= 0 || pos >= state.doc.nodeSize - 2) {

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

@@ -142,6 +142,36 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
         rootElement = parentElement;
       }
     }
+
+    // When platform_editor_fix_selection_wrapped_media_embed is enabled, a wrapped mediaSingle/embedCard and the
+    // paragraph(s) it floats next to both have anchor decorations. If the hovered rootElement
+    // is a paragraph whose adjacent DOM sibling is a wrapped mediaSingle/embedCard with an
+    // anchor, redirect the handle to the media node so only one handle shows (ED-26959).
+    // We check previousElementSibling (wrap-left: media precedes text in DOM) and
+    // nextElementSibling (wrap-right: media follows text in DOM).
+    // This must happen before anchorName is read so the correct node's handle is shown.
+    if ((0, _experiments.editorExperiment)('platform_editor_fix_selection_wrapped_media_embed', true, {
+      exposure: true
+    })) {
+      var _rootNodeType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
+      if (_rootNodeType === 'paragraph') {
+        var isWrappedMediaEmbedSibling = function isWrappedMediaEmbedSibling(sibling) {
+          if (!sibling || !sibling.getAttribute((0, _domAttrName.getAnchorAttrName)())) {
+            return false;
+          }
+          var siblingType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(sibling) : sibling.getAttribute('data-drag-handler-node-type');
+          var siblingLayout = sibling.getAttribute('layout') || '';
+          return (siblingType === 'mediaSingle' || siblingType === 'embedCard') && ['wrap-left', 'wrap-right'].includes(siblingLayout);
+        };
+        var prevSibling = rootElement.previousElementSibling;
+        var nextSibling = rootElement.nextElementSibling;
+        if (prevSibling && isWrappedMediaEmbedSibling(prevSibling)) {
+          rootElement = prevSibling;
+        } else if (nextSibling && isWrappedMediaEmbedSibling(nextSibling)) {
+          rootElement = nextSibling;
+        }
+      }
+    }
     var anchorName;
     if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       anchorName = rootElement.getAttribute((0, _domAttrName.getAnchorAttrName)());
@@ -160,12 +190,15 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;
     }
-
-    // We want to exlude handles from showing for wrapped nodes
-    // TODO: ED-26959 - We should be able remove these check if we decided to
-    // go we not decoration for wrapped image solution.
-    if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')) {
-      return false;
+    if (!(0, _experiments.editorExperiment)('platform_editor_fix_selection_wrapped_media_embed', true, {
+      exposure: true
+    })) {
+      // We want to exclude handles from showing for wrapped nodes
+      // TODO: ED-26959 - We should be able remove these check if we decided to
+      // go we not decoration for wrapped image solution.
+      if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')) {
+        return false;
+      }
     }
     var parentRootElement = rootElement.parentElement;
     var pos;

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -29,6 +29,7 @@ var DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 var DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
 var DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
+var DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = 8;
 
 /** We only want to shift-select nodes that are at the top level of a document.
  *  This is because funky things happen when selecting inside of tableCells, but we
@@ -106,13 +107,16 @@ var getNestedNodeLeftPaddingMargin = exports.getNestedNodeLeftPaddingMargin = fu
       return "".concat(_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_NARROW_GAP, "px");
   }
 };
-var topPositionAdjustment = exports.topPositionAdjustment = function topPositionAdjustment(nodeType) {
+var topPositionAdjustment = exports.topPositionAdjustment = function topPositionAdjustment(nodeType, layout) {
   if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
     switch (nodeType) {
       case 'layoutSection':
         return DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT;
     }
   }
+  if ((nodeType === 'mediaSingle' || nodeType === 'embedCard') && layout && ['wrap-left', 'wrap-right'].includes(layout) && (0, _experiments.editorExperiment)('platform_editor_fix_selection_wrapped_media_embed', true)) {
+    return DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT;
+  }
   switch (nodeType) {
     case 'rule':
       return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;

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

@@ -855,7 +855,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
-        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start)+ ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType), "px)")
+        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
       }, bottom);
     }
     var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
@@ -901,7 +901,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
-        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType), "px)")
+        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
       }, bottom);
     }
     var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};

package/dist/es2019/editor-commands/move-node.js

@@ -11,7 +11,6 @@ import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
 import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { key } from '../pm-plugins/main';
 import { attachMoveNodeAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
@@ -334,7 +333,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
       tr
     });
   }
-  const preservedSelection = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection : undefined;
+  const preservedSelection = editorExperiment('platform_editor_block_menu', true) ? api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection : undefined;
   if (preservedSelection) {
     const $from = tr.doc.resolve(Math.min(start, preservedSelection.from));
     const expandedRange = $from.blockRange(preservedSelection.$to);

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

@@ -38,7 +38,9 @@ const shouldIgnoreNode = (node, ignore_nodes, depth, parent) => {
   if (isLegacyContentMacroExtension) {
     return true;
   }
-  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) && !editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true, {
+    exposure: true
+  }) ? true : ignore_nodes.includes(node.type.name);
 };
 const getPositionBeforeNodeAtPos = (state, pos) => {
   if (pos <= 0 || pos >= state.doc.nodeSize - 2) {

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

@@ -134,6 +134,36 @@ export const handleMouseOver = (view, event, api) => {
         rootElement = parentElement;
       }
     }
+
+    // When platform_editor_fix_selection_wrapped_media_embed is enabled, a wrapped mediaSingle/embedCard and the
+    // paragraph(s) it floats next to both have anchor decorations. If the hovered rootElement
+    // is a paragraph whose adjacent DOM sibling is a wrapped mediaSingle/embedCard with an
+    // anchor, redirect the handle to the media node so only one handle shows (ED-26959).
+    // We check previousElementSibling (wrap-left: media precedes text in DOM) and
+    // nextElementSibling (wrap-right: media follows text in DOM).
+    // This must happen before anchorName is read so the correct node's handle is shown.
+    if (editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true, {
+      exposure: true
+    })) {
+      const rootNodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
+      if (rootNodeType === 'paragraph') {
+        const isWrappedMediaEmbedSibling = sibling => {
+          if (!sibling || !sibling.getAttribute(getAnchorAttrName())) {
+            return false;
+          }
+          const siblingType = isNativeAnchorSupported ? getTypeNameFromDom(sibling) : sibling.getAttribute('data-drag-handler-node-type');
+          const siblingLayout = sibling.getAttribute('layout') || '';
+          return (siblingType === 'mediaSingle' || siblingType === 'embedCard') && ['wrap-left', 'wrap-right'].includes(siblingLayout);
+        };
+        const prevSibling = rootElement.previousElementSibling;
+        const nextSibling = rootElement.nextElementSibling;
+        if (prevSibling && isWrappedMediaEmbedSibling(prevSibling)) {
+          rootElement = prevSibling;
+        } else if (nextSibling && isWrappedMediaEmbedSibling(nextSibling)) {
+          rootElement = nextSibling;
+        }
+      }
+    }
     let anchorName;
     if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       anchorName = rootElement.getAttribute(getAnchorAttrName());
@@ -152,12 +182,15 @@ export const handleMouseOver = (view, event, api) => {
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;
     }
-
-    // We want to exlude handles from showing for wrapped nodes
-    // TODO: ED-26959 - We should be able remove these check if we decided to
-    // go we not decoration for wrapped image solution.
-    if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')) {
-      return false;
+    if (!editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true, {
+      exposure: true
+    })) {
+      // We want to exclude handles from showing for wrapped nodes
+      // TODO: ED-26959 - We should be able remove these check if we decided to
+      // go we not decoration for wrapped image solution.
+      if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')) {
+        return false;
+      }
     }
     const parentRootElement = rootElement.parentElement;
     let pos;

package/dist/es2019/ui/consts.js

@@ -20,6 +20,7 @@ export const DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 export const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 export const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
 export const DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
+export const DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = 8;
 
 /** We only want to shift-select nodes that are at the top level of a document.
  *  This is because funky things happen when selecting inside of tableCells, but we
@@ -97,13 +98,16 @@ export const getNestedNodeLeftPaddingMargin = nodeType => {
       return `${DRAG_HANDLE_WIDTH + DRAG_HANDLE_NARROW_GAP}px`;
   }
 };
-export const topPositionAdjustment = nodeType => {
+export const topPositionAdjustment = (nodeType, layout) => {
   if (editorExperiment('advanced_layouts', true)) {
     switch (nodeType) {
       case 'layoutSection':
         return DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT;
     }
   }
+  if ((nodeType === 'mediaSingle' || nodeType === 'embedCard') && layout && ['wrap-left', 'wrap-right'].includes(layout) && editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true)) {
+    return DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT;
+  }
   switch (nodeType) {
     case 'rule':
       return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;

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

@@ -833,7 +833,7 @@ export const DragHandle = ({
       const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
       return {
         left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start)+ ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType)}px)`,
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || '')}px)`,
         ...bottom
       };
     }
@@ -881,7 +881,7 @@ export const DragHandle = ({
       const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
       return {
         left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType)}px)`,
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || '')}px)`,
         ...bottom
       };
     }

package/dist/esm/editor-commands/move-node.js

@@ -14,7 +14,6 @@ import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
 import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { key } from '../pm-plugins/main';
 import { attachMoveNodeAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
@@ -327,7 +326,7 @@ export var moveNode = function moveNode(api) {
           tr: tr
         });
       }
-      var preservedSelection = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection : undefined;
+      var preservedSelection = editorExperiment('platform_editor_block_menu', true) ? api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection : undefined;
       if (preservedSelection) {
         var $from = tr.doc.resolve(Math.min(start, preservedSelection.from));
         var expandedRange = $from.blockRange(preservedSelection.$to);

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

@@ -39,7 +39,9 @@ var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, pare
   if (isLegacyContentMacroExtension) {
     return true;
   }
-  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) && !editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true, {
+    exposure: true
+  }) ? true : ignore_nodes.includes(node.type.name);
 };
 var getPositionBeforeNodeAtPos = function getPositionBeforeNodeAtPos(state, pos) {
   if (pos <= 0 || pos >= state.doc.nodeSize - 2) {

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

@@ -135,6 +135,36 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
         rootElement = parentElement;
       }
     }
+
+    // When platform_editor_fix_selection_wrapped_media_embed is enabled, a wrapped mediaSingle/embedCard and the
+    // paragraph(s) it floats next to both have anchor decorations. If the hovered rootElement
+    // is a paragraph whose adjacent DOM sibling is a wrapped mediaSingle/embedCard with an
+    // anchor, redirect the handle to the media node so only one handle shows (ED-26959).
+    // We check previousElementSibling (wrap-left: media precedes text in DOM) and
+    // nextElementSibling (wrap-right: media follows text in DOM).
+    // This must happen before anchorName is read so the correct node's handle is shown.
+    if (editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true, {
+      exposure: true
+    })) {
+      var _rootNodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
+      if (_rootNodeType === 'paragraph') {
+        var isWrappedMediaEmbedSibling = function isWrappedMediaEmbedSibling(sibling) {
+          if (!sibling || !sibling.getAttribute(getAnchorAttrName())) {
+            return false;
+          }
+          var siblingType = isNativeAnchorSupported ? getTypeNameFromDom(sibling) : sibling.getAttribute('data-drag-handler-node-type');
+          var siblingLayout = sibling.getAttribute('layout') || '';
+          return (siblingType === 'mediaSingle' || siblingType === 'embedCard') && ['wrap-left', 'wrap-right'].includes(siblingLayout);
+        };
+        var prevSibling = rootElement.previousElementSibling;
+        var nextSibling = rootElement.nextElementSibling;
+        if (prevSibling && isWrappedMediaEmbedSibling(prevSibling)) {
+          rootElement = prevSibling;
+        } else if (nextSibling && isWrappedMediaEmbedSibling(nextSibling)) {
+          rootElement = nextSibling;
+        }
+      }
+    }
     var anchorName;
     if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       anchorName = rootElement.getAttribute(getAnchorAttrName());
@@ -153,12 +183,15 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;
     }
-
-    // We want to exlude handles from showing for wrapped nodes
-    // TODO: ED-26959 - We should be able remove these check if we decided to
-    // go we not decoration for wrapped image solution.
-    if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')) {
-      return false;
+    if (!editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true, {
+      exposure: true
+    })) {
+      // We want to exclude handles from showing for wrapped nodes
+      // TODO: ED-26959 - We should be able remove these check if we decided to
+      // go we not decoration for wrapped image solution.
+      if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')) {
+        return false;
+      }
     }
     var parentRootElement = rootElement.parentElement;
     var pos;

package/dist/esm/ui/consts.js

@@ -22,6 +22,7 @@ export var DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 export var DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 export var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
 export var DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
+export var DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = 8;
 
 /** We only want to shift-select nodes that are at the top level of a document.
  *  This is because funky things happen when selecting inside of tableCells, but we
@@ -99,13 +100,16 @@ export var getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMar
       return "".concat(DRAG_HANDLE_WIDTH + DRAG_HANDLE_NARROW_GAP, "px");
   }
 };
-export var topPositionAdjustment = function topPositionAdjustment(nodeType) {
+export var topPositionAdjustment = function topPositionAdjustment(nodeType, layout) {
   if (editorExperiment('advanced_layouts', true)) {
     switch (nodeType) {
       case 'layoutSection':
         return DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT;
     }
   }
+  if ((nodeType === 'mediaSingle' || nodeType === 'embedCard') && layout && ['wrap-left', 'wrap-right'].includes(layout) && editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true)) {
+    return DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT;
+  }
   switch (nodeType) {
     case 'rule':
       return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;

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

@@ -851,7 +851,7 @@ export var DragHandle = function DragHandle(_ref) {
       var bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start)+ ").concat(topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType), "px)")
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
       }, bottom);
     }
     var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
@@ -897,7 +897,7 @@ export var DragHandle = function DragHandle(_ref) {
       var bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType), "px)")
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
       }, bottom);
     }
     var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};

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

@@ -16,6 +16,7 @@ export declare const DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 export declare const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
 export declare const DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
+export declare const DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = 8;
 /** We only want to shift-select nodes that are at the top level of a document.
  *  This is because funky things happen when selecting inside of tableCells, but we
  *  also want to avoid heavily nested cases to descope potential corner cases.
@@ -35,7 +36,7 @@ export declare const QUICK_INSERT_LEFT_OFFSET = 16;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
 export declare const rootElementGap: (nodeType: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "24px" | "8px" | "16px" | "20px" | "28px" | "40px";
-export declare const topPositionAdjustment: (nodeType: string) => number;
+export declare const topPositionAdjustment: (nodeType: string, layout?: string) => number;
 export declare const dropTargetMarginMap: {
     [key: number]: string;
 };

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

@@ -16,6 +16,7 @@ export declare const DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 export declare const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
 export declare const DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
+export declare const DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = 8;
 /** We only want to shift-select nodes that are at the top level of a document.
  *  This is because funky things happen when selecting inside of tableCells, but we
  *  also want to avoid heavily nested cases to descope potential corner cases.
@@ -35,7 +36,7 @@ export declare const QUICK_INSERT_LEFT_OFFSET = 16;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
 export declare const rootElementGap: (nodeType: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "24px" | "8px" | "16px" | "20px" | "28px" | "40px";
-export declare const topPositionAdjustment: (nodeType: string) => number;
+export declare const topPositionAdjustment: (nodeType: string, layout?: string) => number;
 export declare const dropTargetMarginMap: {
     [key: number]: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "9.1.13",
+	"version": "9.1.16",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/theme": "^23.0.0",
-		"@atlaskit/tmp-editor-statsig": "^59.1.0",
+		"@atlaskit/tmp-editor-statsig": "^61.0.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@babel/runtime": "^7.0.0",