@atlaskit/editor-common 116.24.3 → 116.24.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-common
 
+## 116.24.4
+
+### Patch Changes
+
+- [`f813190f05f57`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f813190f05f57) -
+  Update multi bodied extension chrome to match extension presentation.
+- Updated dependencies
+
 ## 116.24.3
 
 ### Patch Changes

package/dist/cjs/extensibility/Extension/Lozenge/ExtensionLabel.js

@@ -4,13 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getShouldShowBodiedMacroLabel = exports.ExtensionLabel = void 0;
+exports.ExtensionLabel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactIntl = require("react-intl");
 var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -117,32 +118,25 @@ var i18n = (0, _reactIntl.defineMessages)({
     description: 'Text in tooltip that tells user they can configure the specific macro.'
   }
 });
-var getShouldShowBodiedMacroLabel = exports.getShouldShowBodiedMacroLabel = function getShouldShowBodiedMacroLabel(isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, showUpdatedLivePages1PBodiedExtensionUI) {
-  // Bodied macros show the label by default except for the new live pages 1P bodied macro experience where we only show it on hover
-  if (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) {
-    return isNodeHovered;
-  }
-  if (!showLivePagesBodiedMacrosRendererView) {
-    return true;
-  } // Keep showing labels as usual for default experience for bodied macros
-  return !!(isNodeHovered && !showBodiedExtensionRendererView); // For the new live pages bodied macro experience, we only show the label on hover in the "edit" view
-};
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
   var text = _ref.text,
     extensionName = _ref.extensionName,
     customContainerStyles = _ref.customContainerStyles,
     isNodeNested = _ref.isNodeNested,
+    isNodeSelected = _ref.isNodeSelected,
     setIsNodeHovered = _ref.setIsNodeHovered,
     isBodiedMacro = _ref.isBodiedMacro,
     showUpdatedLivePages1PBodiedExtensionUI = _ref.showUpdatedLivePages1PBodiedExtensionUI,
     showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView,
     showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
-    _pluginInjectionApi = _ref.pluginInjectionApi;
+    _pluginInjectionApi = _ref.pluginInjectionApi,
+    isMultiBodiedMacro = _ref.isMultiBodiedMacro;
   var isInlineExtension = extensionName === 'inlineExtension';
   var showDefaultBodiedStyles = isBodiedMacro;
+  var shouldUseMultiBodiedMacroPresentation = isMultiBodiedMacro && (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension');
   var containerClassNames = (0, _classnames.default)({
-    bodied: isBodiedMacro
+    bodied: isBodiedMacro && !shouldUseMultiBodiedMacroPresentation
   });
   var labelClassNames = (0, _classnames.default)('extension-label', {
     nested: isNodeNested,
@@ -153,8 +147,8 @@ var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
     'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
     'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView,
     // Need this separate class since we don't ever want to show the label during view mode
-    'remove-left-margin': !isBodiedMacro && !isInlineExtension && !isNodeNested,
-    'remove-nested-left-margin': isNodeNested && !isBodiedMacro && !isInlineExtension
+    'remove-left-margin': (!isBodiedMacro || shouldUseMultiBodiedMacroPresentation) && !isInlineExtension && !isNodeNested,
+    'remove-nested-left-margin': isNodeNested && (!isBodiedMacro || shouldUseMultiBodiedMacroPresentation) && !isInlineExtension
   });
   var iconClassNames = (0, _classnames.default)({
     'extension-icon': true
@@ -206,12 +200,12 @@ var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
       }, tooltipProps, {
-        css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) && hideLabelStyles]
+        css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI || shouldUseMultiBodiedMacroPresentation && !isNodeSelected) && hideLabelStyles]
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
         className: labelClassNames
       }), text, (0, _react2.jsx)("span", {
-        css: [iconStyles, isBodiedMacro && bodiedMacroIconStyles]
+        css: [iconStyles, isBodiedMacro && !shouldUseMultiBodiedMacroPresentation && bodiedMacroIconStyles]
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
         className: iconClassNames,

package/dist/cjs/extensibility/Extension/Lozenge/LozengeComponent.js

@@ -32,13 +32,15 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
     customContainerStyles = _ref.customContainerStyles,
     isNodeHovered = _ref.isNodeHovered,
     isNodeNested = _ref.isNodeNested,
+    isNodeSelected = _ref.isNodeSelected,
     setIsNodeHovered = _ref.setIsNodeHovered,
     isBodiedMacro = _ref.isBodiedMacro,
     showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView,
     showUpdatedLivePages1PBodiedExtensionUI = _ref.showUpdatedLivePages1PBodiedExtensionUI,
     showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
     setShowBodiedExtensionRendererView = _ref.setShowBodiedExtensionRendererView,
-    pluginInjectionApi = _ref.pluginInjectionApi;
+    pluginInjectionApi = _ref.pluginInjectionApi,
+    isMultiBodiedMacro = _ref.isMultiBodiedMacro;
   var capitalizedTitle = capitalizeFirstLetter(title);
   if (showMacroInteractionDesignUpdates) {
     return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ExtensionLabel.ExtensionLabel, {
@@ -46,13 +48,15 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
       extensionName: extensionName,
       isNodeHovered: isNodeHovered,
       isNodeNested: isNodeNested,
+      isNodeSelected: isNodeSelected,
       customContainerStyles: customContainerStyles,
       setIsNodeHovered: setIsNodeHovered,
       isBodiedMacro: isBodiedMacro,
       showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
       showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
       showBodiedExtensionRendererView: showBodiedExtensionRendererView,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      isMultiBodiedMacro: isMultiBodiedMacro
     }), showLivePagesBodiedMacrosRendererView && isBodiedMacro && (0, _react2.jsx)(_EditToggle.EditToggle, {
       isNodeHovered: isNodeHovered,
       setIsNodeHovered: setIsNodeHovered,

package/dist/cjs/extensibility/Extension/Lozenge/index.js

@@ -59,7 +59,8 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
         showUpdatedLivePages1PBodiedExtensionUI = _this$props.showUpdatedLivePages1PBodiedExtensionUI,
         showBodiedExtensionRendererView = _this$props.showBodiedExtensionRendererView,
         setShowBodiedExtensionRendererView = _this$props.setShowBodiedExtensionRendererView,
-        pluginInjectionApi = _this$props.pluginInjectionApi;
+        pluginInjectionApi = _this$props.pluginInjectionApi,
+        isMultiBodiedMacro = _this$props.isMultiBodiedMacro;
       var _this$props$node$attr = _this.props.node.attrs,
         parameters = _this$props$node$attr.parameters,
         extensionKey = _this$props$node$attr.extensionKey;
@@ -83,7 +84,8 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
         showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
         showBodiedExtensionRendererView: showBodiedExtensionRendererView,
         setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        isMultiBodiedMacro: isMultiBodiedMacro
       });
     });
     return _this;

package/dist/cjs/extensibility/MultiBodiedExtension/index.js

@@ -7,12 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _bindEventListener = require("bind-event-listener");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _file = _interopRequireDefault(require("@atlaskit/icon/core/file"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -63,6 +64,67 @@ var MultiBodiedExtensionFrames = function MultiBodiedExtensionFrames(_ref) {
     ref: articleRef
   });
 };
+var isSelectionInsideNode = function isSelectionInsideNode(selection, node, getPos) {
+  var nodeStartPosition = getPos();
+  if (typeof nodeStartPosition !== 'number' || !selection) {
+    return false;
+  }
+  var nodeEndPosition = nodeStartPosition + node.nodeSize;
+
+  /*
+  	selection starts within MBE ||
+  	selection ends within MBE ||
+  	selection includes MBE
+  */
+  return nodeStartPosition < selection.from && selection.from < nodeEndPosition || nodeStartPosition < selection.to && selection.to < nodeEndPosition || nodeStartPosition >= selection.from && selection.to >= nodeEndPosition;
+};
+var useIsSelectionInsideNode = function useIsSelectionInsideNode(editorView, node, getPos, enabled) {
+  var nodeRef = (0, _react.useRef)(node);
+  var _useState = (0, _react.useState)(function () {
+      return enabled && isSelectionInsideNode(editorView.state.selection, node, getPos);
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isSelectionInside = _useState2[0],
+    setIsSelectionInside = _useState2[1];
+  nodeRef.current = node;
+  (0, _react.useEffect)(function () {
+    if (!enabled) {
+      return;
+    }
+    var animationFrameId;
+    var updateSelectionInsideNode = function updateSelectionInsideNode() {
+      setIsSelectionInside(isSelectionInsideNode(editorView.state.selection, nodeRef.current, getPos));
+    };
+    var scheduleUpdateSelectionInsideNode = function scheduleUpdateSelectionInsideNode() {
+      if (animationFrameId !== undefined) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      animationFrameId = requestAnimationFrame(updateSelectionInsideNode);
+    };
+    var ownerDocument = editorView.dom.ownerDocument;
+    var unbindSelectionChange = (0, _bindEventListener.bind)(ownerDocument, {
+      listener: scheduleUpdateSelectionInsideNode,
+      type: 'selectionchange'
+    });
+    var unbindKeyUp = (0, _bindEventListener.bind)(editorView.dom, {
+      listener: scheduleUpdateSelectionInsideNode,
+      type: 'keyup'
+    });
+    var unbindMouseUp = (0, _bindEventListener.bind)(editorView.dom, {
+      listener: scheduleUpdateSelectionInsideNode,
+      type: 'mouseup'
+    });
+    return function () {
+      if (animationFrameId !== undefined) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      unbindSelectionChange();
+      unbindKeyUp();
+      unbindMouseUp();
+    };
+  }, [editorView, getPos, enabled]);
+  return enabled && isSelectionInside;
+};
 
 // Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
 var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates) {
@@ -122,10 +184,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     node: node,
     type: 'image'
   });
-  var _useState = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    activeChildIndex = _useState2[0],
-    setActiveChildIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activeChildIndex = _useState4[0],
+    setActiveChildIndex = _useState4[1];
   // Adding to avoid aliasing `this` for the callbacks
   var updateActiveChild = _react.default.useCallback(function (index) {
     if (typeof index !== 'number') {
@@ -175,8 +237,11 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
       breakoutStyles = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_calculateBreakoutSty), _calculateBreakoutSty));
     mbeWrapperStyles = breakoutStyles;
   }
+  var shouldUseNativeTabsPresentation = (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension');
+  var isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseNativeTabsPresentation);
+  var isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
   var wrapperClassNames = (0, _classnames.default)('multiBodiedExtension--wrapper', 'extension-container', 'block', {
-    'with-border': showMacroInteractionDesignUpdates,
+    'with-border': showMacroInteractionDesignUpdates && (shouldUseNativeTabsPresentation ? isMultiBodiedExtensionActive : true),
     'with-danger-overlay': showMacroInteractionDesignUpdates,
     'with-padding-background-styles': showMacroInteractionDesignUpdates,
     'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested
@@ -198,7 +263,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     }
   };
   return (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && (0, _react2.jsx)(_Lozenge.default, {
-    isNodeSelected: isNodeSelected,
+    isNodeSelected: shouldUseNativeTabsPresentation ? isMultiBodiedExtensionActive : isNodeSelected,
     node: node,
     showMacroInteractionDesignUpdates: true,
     customContainerStyles: mbeWrapperStyles,
@@ -206,12 +271,13 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     isNodeNested: isNodeNested,
     setIsNodeHovered: setIsNodeHovered,
     isBodiedMacro: true,
+    isMultiBodiedMacro: shouldUseNativeTabsPresentation,
     pluginInjectionApi: pluginInjectionApi
   }), (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: wrapperClassNames,
     css: [/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
-    (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension') ? _styles.mbeExtensionWrapperCSSStyles : _styles.mbeExtensionWrapperCSSStylesOld, /* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage */
+    shouldUseNativeTabsPresentation ? _styles.mbeExtensionWrapperCSSStyles : _styles.mbeExtensionWrapperCSSStylesOld, /* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage */
     showMacroInteractionDesignUpdates && !isLivePageViewMode && hoverStyles],
     "data-testid": "multiBodiedExtension--wrapper-editor",
     "data-layout": node.attrs.layout
@@ -231,7 +297,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     onBlur: (0, _expValEquals.expValEquals)('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined
   }, (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension') ? _styles.overlayStyles : _styles.overlayStylesOld
+    css: shouldUseNativeTabsPresentation ? _styles.overlayStyles : _styles.overlayStylesOld
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: overlayClassNames,

package/dist/cjs/monitoring/error.js

@@ -28,7 +28,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "116.24.2";
+var packageVersion = "116.24.3";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "116.24.2";
+var packageVersion = "116.24.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/es2019/extensibility/Extension/Lozenge/ExtensionLabel.js

@@ -10,6 +10,7 @@ import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { FormattedMessage, defineMessages } from 'react-intl';
 import CustomizeIcon from '@atlaskit/icon/core/customize';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -108,33 +109,26 @@ const i18n = defineMessages({
     description: 'Text in tooltip that tells user they can configure the specific macro.'
   }
 });
-export const getShouldShowBodiedMacroLabel = (isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, showUpdatedLivePages1PBodiedExtensionUI) => {
-  // Bodied macros show the label by default except for the new live pages 1P bodied macro experience where we only show it on hover
-  if (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) {
-    return isNodeHovered;
-  }
-  if (!showLivePagesBodiedMacrosRendererView) {
-    return true;
-  } // Keep showing labels as usual for default experience for bodied macros
-  return !!(isNodeHovered && !showBodiedExtensionRendererView); // For the new live pages bodied macro experience, we only show the label on hover in the "edit" view
-};
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const ExtensionLabel = ({
   text,
   extensionName,
   customContainerStyles,
   isNodeNested,
+  isNodeSelected,
   setIsNodeHovered,
   isBodiedMacro,
   showUpdatedLivePages1PBodiedExtensionUI,
   showLivePagesBodiedMacrosRendererView,
   showBodiedExtensionRendererView,
-  pluginInjectionApi: _pluginInjectionApi
+  pluginInjectionApi: _pluginInjectionApi,
+  isMultiBodiedMacro
 }) => {
   const isInlineExtension = extensionName === 'inlineExtension';
   const showDefaultBodiedStyles = isBodiedMacro;
+  const shouldUseMultiBodiedMacroPresentation = isMultiBodiedMacro && fg('confluence_frontend_native_tabs_extension');
   const containerClassNames = classnames({
-    bodied: isBodiedMacro
+    bodied: isBodiedMacro && !shouldUseMultiBodiedMacroPresentation
   });
   const labelClassNames = classnames('extension-label', {
     nested: isNodeNested,
@@ -145,8 +139,8 @@ export const ExtensionLabel = ({
     'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
     'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView,
     // Need this separate class since we don't ever want to show the label during view mode
-    'remove-left-margin': !isBodiedMacro && !isInlineExtension && !isNodeNested,
-    'remove-nested-left-margin': isNodeNested && !isBodiedMacro && !isInlineExtension
+    'remove-left-margin': (!isBodiedMacro || shouldUseMultiBodiedMacroPresentation) && !isInlineExtension && !isNodeNested,
+    'remove-nested-left-margin': isNodeNested && (!isBodiedMacro || shouldUseMultiBodiedMacroPresentation) && !isInlineExtension
   });
   const iconClassNames = classnames({
     'extension-icon': true
@@ -195,12 +189,12 @@ export const ExtensionLabel = ({
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
     }, tooltipProps, {
-      css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) && hideLabelStyles]
+      css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI || shouldUseMultiBodiedMacroPresentation && !isNodeSelected) && hideLabelStyles]
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
       className: labelClassNames
     }), text, jsx("span", {
-      css: [iconStyles, isBodiedMacro && bodiedMacroIconStyles]
+      css: [iconStyles, isBodiedMacro && !shouldUseMultiBodiedMacroPresentation && bodiedMacroIconStyles]
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
       className: iconClassNames,

package/dist/es2019/extensibility/Extension/Lozenge/LozengeComponent.js

@@ -26,13 +26,15 @@ export const LozengeComponent = ({
   customContainerStyles,
   isNodeHovered,
   isNodeNested,
+  isNodeSelected,
   setIsNodeHovered,
   isBodiedMacro,
   showLivePagesBodiedMacrosRendererView,
   showUpdatedLivePages1PBodiedExtensionUI,
   showBodiedExtensionRendererView,
   setShowBodiedExtensionRendererView,
-  pluginInjectionApi
+  pluginInjectionApi,
+  isMultiBodiedMacro
 }) => {
   const capitalizedTitle = capitalizeFirstLetter(title);
   if (showMacroInteractionDesignUpdates) {
@@ -41,13 +43,15 @@ export const LozengeComponent = ({
       extensionName: extensionName,
       isNodeHovered: isNodeHovered,
       isNodeNested: isNodeNested,
+      isNodeSelected: isNodeSelected,
       customContainerStyles: customContainerStyles,
       setIsNodeHovered: setIsNodeHovered,
       isBodiedMacro: isBodiedMacro,
       showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
       showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
       showBodiedExtensionRendererView: showBodiedExtensionRendererView,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      isMultiBodiedMacro: isMultiBodiedMacro
     }), showLivePagesBodiedMacrosRendererView && isBodiedMacro && jsx(EditToggle, {
       isNodeHovered: isNodeHovered,
       setIsNodeHovered: setIsNodeHovered,

package/dist/es2019/extensibility/Extension/Lozenge/index.js

@@ -44,7 +44,8 @@ export default class ExtensionLozenge extends Component {
         showUpdatedLivePages1PBodiedExtensionUI,
         showBodiedExtensionRendererView,
         setShowBodiedExtensionRendererView,
-        pluginInjectionApi
+        pluginInjectionApi,
+        isMultiBodiedMacro
       } = this.props;
       const {
         parameters,
@@ -72,7 +73,8 @@ export default class ExtensionLozenge extends Component {
         showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
         showBodiedExtensionRendererView: showBodiedExtensionRendererView,
         setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        isMultiBodiedMacro: isMultiBodiedMacro
       });
     });
   }

package/dist/es2019/extensibility/MultiBodiedExtension/index.js

@@ -5,10 +5,11 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
 import { css, jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
 import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/core/file';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -52,6 +53,62 @@ const MultiBodiedExtensionFrames = ({
     ref: articleRef
   });
 };
+const isSelectionInsideNode = (selection, node, getPos) => {
+  const nodeStartPosition = getPos();
+  if (typeof nodeStartPosition !== 'number' || !selection) {
+    return false;
+  }
+  const nodeEndPosition = nodeStartPosition + node.nodeSize;
+
+  /*
+  	selection starts within MBE ||
+  	selection ends within MBE ||
+  	selection includes MBE
+  */
+  return nodeStartPosition < selection.from && selection.from < nodeEndPosition || nodeStartPosition < selection.to && selection.to < nodeEndPosition || nodeStartPosition >= selection.from && selection.to >= nodeEndPosition;
+};
+const useIsSelectionInsideNode = (editorView, node, getPos, enabled) => {
+  const nodeRef = useRef(node);
+  const [isSelectionInside, setIsSelectionInside] = useState(() => enabled && isSelectionInsideNode(editorView.state.selection, node, getPos));
+  nodeRef.current = node;
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    let animationFrameId;
+    const updateSelectionInsideNode = () => {
+      setIsSelectionInside(isSelectionInsideNode(editorView.state.selection, nodeRef.current, getPos));
+    };
+    const scheduleUpdateSelectionInsideNode = () => {
+      if (animationFrameId !== undefined) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      animationFrameId = requestAnimationFrame(updateSelectionInsideNode);
+    };
+    const ownerDocument = editorView.dom.ownerDocument;
+    const unbindSelectionChange = bind(ownerDocument, {
+      listener: scheduleUpdateSelectionInsideNode,
+      type: 'selectionchange'
+    });
+    const unbindKeyUp = bind(editorView.dom, {
+      listener: scheduleUpdateSelectionInsideNode,
+      type: 'keyup'
+    });
+    const unbindMouseUp = bind(editorView.dom, {
+      listener: scheduleUpdateSelectionInsideNode,
+      type: 'mouseup'
+    });
+    return () => {
+      if (animationFrameId !== undefined) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      unbindSelectionChange();
+      unbindKeyUp();
+      unbindMouseUp();
+    };
+  }, [editorView, getPos, enabled]);
+  return enabled && isSelectionInside;
+};
 
 // Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
 const getWrapperTitleContent = (imageData, title, showMacroInteractionDesignUpdates) => {
@@ -166,8 +223,11 @@ const MultiBodiedExtensionWithWidth = ({
     });
     mbeWrapperStyles = breakoutStyles;
   }
+  const shouldUseNativeTabsPresentation = fg('confluence_frontend_native_tabs_extension');
+  const isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseNativeTabsPresentation);
+  const isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
   const wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
-    'with-border': showMacroInteractionDesignUpdates,
+    'with-border': showMacroInteractionDesignUpdates && (shouldUseNativeTabsPresentation ? isMultiBodiedExtensionActive : true),
     'with-danger-overlay': showMacroInteractionDesignUpdates,
     'with-padding-background-styles': showMacroInteractionDesignUpdates,
     'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested
@@ -189,7 +249,7 @@ const MultiBodiedExtensionWithWidth = ({
     }
   };
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
-    isNodeSelected: isNodeSelected,
+    isNodeSelected: shouldUseNativeTabsPresentation ? isMultiBodiedExtensionActive : isNodeSelected,
     node: node,
     showMacroInteractionDesignUpdates: true,
     customContainerStyles: mbeWrapperStyles,
@@ -197,12 +257,13 @@ const MultiBodiedExtensionWithWidth = ({
     isNodeNested: isNodeNested,
     setIsNodeHovered: setIsNodeHovered,
     isBodiedMacro: true,
+    isMultiBodiedMacro: shouldUseNativeTabsPresentation,
     pluginInjectionApi: pluginInjectionApi
   }), jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: wrapperClassNames,
     css: [/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
-    fg('confluence_frontend_native_tabs_extension') ? mbeExtensionWrapperCSSStyles : mbeExtensionWrapperCSSStylesOld, /* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage */
+    shouldUseNativeTabsPresentation ? mbeExtensionWrapperCSSStyles : mbeExtensionWrapperCSSStylesOld, /* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage */
     showMacroInteractionDesignUpdates && !isLivePageViewMode && hoverStyles],
     "data-testid": "multiBodiedExtension--wrapper-editor",
     "data-layout": node.attrs.layout
@@ -218,7 +279,7 @@ const MultiBodiedExtensionWithWidth = ({
     onBlur: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? () => {} : undefined
   }, jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: fg('confluence_frontend_native_tabs_extension') ? overlayStyles : overlayStylesOld
+    css: shouldUseNativeTabsPresentation ? overlayStyles : overlayStylesOld
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: overlayClassNames,

package/dist/es2019/monitoring/error.js

@@ -14,7 +14,7 @@ const NETWORK_FAILURE_REGEX = /^network failure/i;
 const RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "116.24.2";
+const packageVersion = "116.24.3";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/ui/DropList/index.js

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "116.24.2";
+const packageVersion = "116.24.3";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/esm/extensibility/Extension/Lozenge/ExtensionLabel.js

@@ -10,6 +10,7 @@ import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { FormattedMessage, defineMessages } from 'react-intl';
 import CustomizeIcon from '@atlaskit/icon/core/customize';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -108,32 +109,25 @@ var i18n = defineMessages({
     description: 'Text in tooltip that tells user they can configure the specific macro.'
   }
 });
-export var getShouldShowBodiedMacroLabel = function getShouldShowBodiedMacroLabel(isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, showUpdatedLivePages1PBodiedExtensionUI) {
-  // Bodied macros show the label by default except for the new live pages 1P bodied macro experience where we only show it on hover
-  if (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) {
-    return isNodeHovered;
-  }
-  if (!showLivePagesBodiedMacrosRendererView) {
-    return true;
-  } // Keep showing labels as usual for default experience for bodied macros
-  return !!(isNodeHovered && !showBodiedExtensionRendererView); // For the new live pages bodied macro experience, we only show the label on hover in the "edit" view
-};
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export var ExtensionLabel = function ExtensionLabel(_ref) {
   var text = _ref.text,
     extensionName = _ref.extensionName,
     customContainerStyles = _ref.customContainerStyles,
     isNodeNested = _ref.isNodeNested,
+    isNodeSelected = _ref.isNodeSelected,
     setIsNodeHovered = _ref.setIsNodeHovered,
     isBodiedMacro = _ref.isBodiedMacro,
     showUpdatedLivePages1PBodiedExtensionUI = _ref.showUpdatedLivePages1PBodiedExtensionUI,
     showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView,
     showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
-    _pluginInjectionApi = _ref.pluginInjectionApi;
+    _pluginInjectionApi = _ref.pluginInjectionApi,
+    isMultiBodiedMacro = _ref.isMultiBodiedMacro;
   var isInlineExtension = extensionName === 'inlineExtension';
   var showDefaultBodiedStyles = isBodiedMacro;
+  var shouldUseMultiBodiedMacroPresentation = isMultiBodiedMacro && fg('confluence_frontend_native_tabs_extension');
   var containerClassNames = classnames({
-    bodied: isBodiedMacro
+    bodied: isBodiedMacro && !shouldUseMultiBodiedMacroPresentation
   });
   var labelClassNames = classnames('extension-label', {
     nested: isNodeNested,
@@ -144,8 +138,8 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
     'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
     'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView,
     // Need this separate class since we don't ever want to show the label during view mode
-    'remove-left-margin': !isBodiedMacro && !isInlineExtension && !isNodeNested,
-    'remove-nested-left-margin': isNodeNested && !isBodiedMacro && !isInlineExtension
+    'remove-left-margin': (!isBodiedMacro || shouldUseMultiBodiedMacroPresentation) && !isInlineExtension && !isNodeNested,
+    'remove-nested-left-margin': isNodeNested && (!isBodiedMacro || shouldUseMultiBodiedMacroPresentation) && !isInlineExtension
   });
   var iconClassNames = classnames({
     'extension-icon': true
@@ -197,12 +191,12 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
       }, tooltipProps, {
-        css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) && hideLabelStyles]
+        css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI || shouldUseMultiBodiedMacroPresentation && !isNodeSelected) && hideLabelStyles]
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
         className: labelClassNames
       }), text, jsx("span", {
-        css: [iconStyles, isBodiedMacro && bodiedMacroIconStyles]
+        css: [iconStyles, isBodiedMacro && !shouldUseMultiBodiedMacroPresentation && bodiedMacroIconStyles]
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
         className: iconClassNames,

package/dist/esm/extensibility/Extension/Lozenge/LozengeComponent.js

@@ -29,13 +29,15 @@ export var LozengeComponent = function LozengeComponent(_ref) {
     customContainerStyles = _ref.customContainerStyles,
     isNodeHovered = _ref.isNodeHovered,
     isNodeNested = _ref.isNodeNested,
+    isNodeSelected = _ref.isNodeSelected,
     setIsNodeHovered = _ref.setIsNodeHovered,
     isBodiedMacro = _ref.isBodiedMacro,
     showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView,
     showUpdatedLivePages1PBodiedExtensionUI = _ref.showUpdatedLivePages1PBodiedExtensionUI,
     showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
     setShowBodiedExtensionRendererView = _ref.setShowBodiedExtensionRendererView,
-    pluginInjectionApi = _ref.pluginInjectionApi;
+    pluginInjectionApi = _ref.pluginInjectionApi,
+    isMultiBodiedMacro = _ref.isMultiBodiedMacro;
   var capitalizedTitle = capitalizeFirstLetter(title);
   if (showMacroInteractionDesignUpdates) {
     return jsx(Fragment, null, jsx(ExtensionLabel, {
@@ -43,13 +45,15 @@ export var LozengeComponent = function LozengeComponent(_ref) {
       extensionName: extensionName,
       isNodeHovered: isNodeHovered,
       isNodeNested: isNodeNested,
+      isNodeSelected: isNodeSelected,
       customContainerStyles: customContainerStyles,
       setIsNodeHovered: setIsNodeHovered,
       isBodiedMacro: isBodiedMacro,
       showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
       showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
       showBodiedExtensionRendererView: showBodiedExtensionRendererView,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      isMultiBodiedMacro: isMultiBodiedMacro
     }), showLivePagesBodiedMacrosRendererView && isBodiedMacro && jsx(EditToggle, {
       isNodeHovered: isNodeHovered,
       setIsNodeHovered: setIsNodeHovered,

package/dist/esm/extensibility/Extension/Lozenge/index.js

@@ -54,7 +54,8 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
         showUpdatedLivePages1PBodiedExtensionUI = _this$props.showUpdatedLivePages1PBodiedExtensionUI,
         showBodiedExtensionRendererView = _this$props.showBodiedExtensionRendererView,
         setShowBodiedExtensionRendererView = _this$props.setShowBodiedExtensionRendererView,
-        pluginInjectionApi = _this$props.pluginInjectionApi;
+        pluginInjectionApi = _this$props.pluginInjectionApi,
+        isMultiBodiedMacro = _this$props.isMultiBodiedMacro;
       var _this$props$node$attr = _this.props.node.attrs,
         parameters = _this$props$node$attr.parameters,
         extensionKey = _this$props$node$attr.extensionKey;
@@ -78,7 +79,8 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
         showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
         showBodiedExtensionRendererView: showBodiedExtensionRendererView,
         setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        isMultiBodiedMacro: isMultiBodiedMacro
       });
     });
     return _this;

package/dist/esm/extensibility/MultiBodiedExtension/index.js

@@ -1,7 +1,7 @@
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["url"];
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
@@ -10,10 +10,11 @@ var _excluded = ["url"];
  * @jsx jsx
  */
 
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
 import { css, jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
 import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/core/file';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -56,6 +57,67 @@ var MultiBodiedExtensionFrames = function MultiBodiedExtensionFrames(_ref) {
     ref: articleRef
   });
 };
+var isSelectionInsideNode = function isSelectionInsideNode(selection, node, getPos) {
+  var nodeStartPosition = getPos();
+  if (typeof nodeStartPosition !== 'number' || !selection) {
+    return false;
+  }
+  var nodeEndPosition = nodeStartPosition + node.nodeSize;
+
+  /*
+  	selection starts within MBE ||
+  	selection ends within MBE ||
+  	selection includes MBE
+  */
+  return nodeStartPosition < selection.from && selection.from < nodeEndPosition || nodeStartPosition < selection.to && selection.to < nodeEndPosition || nodeStartPosition >= selection.from && selection.to >= nodeEndPosition;
+};
+var useIsSelectionInsideNode = function useIsSelectionInsideNode(editorView, node, getPos, enabled) {
+  var nodeRef = useRef(node);
+  var _useState = useState(function () {
+      return enabled && isSelectionInsideNode(editorView.state.selection, node, getPos);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSelectionInside = _useState2[0],
+    setIsSelectionInside = _useState2[1];
+  nodeRef.current = node;
+  useEffect(function () {
+    if (!enabled) {
+      return;
+    }
+    var animationFrameId;
+    var updateSelectionInsideNode = function updateSelectionInsideNode() {
+      setIsSelectionInside(isSelectionInsideNode(editorView.state.selection, nodeRef.current, getPos));
+    };
+    var scheduleUpdateSelectionInsideNode = function scheduleUpdateSelectionInsideNode() {
+      if (animationFrameId !== undefined) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      animationFrameId = requestAnimationFrame(updateSelectionInsideNode);
+    };
+    var ownerDocument = editorView.dom.ownerDocument;
+    var unbindSelectionChange = bind(ownerDocument, {
+      listener: scheduleUpdateSelectionInsideNode,
+      type: 'selectionchange'
+    });
+    var unbindKeyUp = bind(editorView.dom, {
+      listener: scheduleUpdateSelectionInsideNode,
+      type: 'keyup'
+    });
+    var unbindMouseUp = bind(editorView.dom, {
+      listener: scheduleUpdateSelectionInsideNode,
+      type: 'mouseup'
+    });
+    return function () {
+      if (animationFrameId !== undefined) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      unbindSelectionChange();
+      unbindKeyUp();
+      unbindMouseUp();
+    };
+  }, [editorView, getPos, enabled]);
+  return enabled && isSelectionInside;
+};
 
 // Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
 var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates) {
@@ -115,10 +177,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     node: node,
     type: 'image'
   });
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeChildIndex = _useState2[0],
-    setActiveChildIndex = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeChildIndex = _useState4[0],
+    setActiveChildIndex = _useState4[1];
   // Adding to avoid aliasing `this` for the callbacks
   var updateActiveChild = React.useCallback(function (index) {
     if (typeof index !== 'number') {
@@ -168,8 +230,11 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
       breakoutStyles = _extends({}, (_objectDestructuringEmpty(_calculateBreakoutSty), _calculateBreakoutSty));
     mbeWrapperStyles = breakoutStyles;
   }
+  var shouldUseNativeTabsPresentation = fg('confluence_frontend_native_tabs_extension');
+  var isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseNativeTabsPresentation);
+  var isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
   var wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
-    'with-border': showMacroInteractionDesignUpdates,
+    'with-border': showMacroInteractionDesignUpdates && (shouldUseNativeTabsPresentation ? isMultiBodiedExtensionActive : true),
     'with-danger-overlay': showMacroInteractionDesignUpdates,
     'with-padding-background-styles': showMacroInteractionDesignUpdates,
     'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested
@@ -191,7 +256,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     }
   };
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
-    isNodeSelected: isNodeSelected,
+    isNodeSelected: shouldUseNativeTabsPresentation ? isMultiBodiedExtensionActive : isNodeSelected,
     node: node,
     showMacroInteractionDesignUpdates: true,
     customContainerStyles: mbeWrapperStyles,
@@ -199,12 +264,13 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     isNodeNested: isNodeNested,
     setIsNodeHovered: setIsNodeHovered,
     isBodiedMacro: true,
+    isMultiBodiedMacro: shouldUseNativeTabsPresentation,
     pluginInjectionApi: pluginInjectionApi
   }), jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: wrapperClassNames,
     css: [/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
-    fg('confluence_frontend_native_tabs_extension') ? mbeExtensionWrapperCSSStyles : mbeExtensionWrapperCSSStylesOld, /* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage */
+    shouldUseNativeTabsPresentation ? mbeExtensionWrapperCSSStyles : mbeExtensionWrapperCSSStylesOld, /* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage */
     showMacroInteractionDesignUpdates && !isLivePageViewMode && hoverStyles],
     "data-testid": "multiBodiedExtension--wrapper-editor",
     "data-layout": node.attrs.layout
@@ -224,7 +290,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     onBlur: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined
   }, jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: fg('confluence_frontend_native_tabs_extension') ? overlayStyles : overlayStylesOld
+    css: shouldUseNativeTabsPresentation ? overlayStyles : overlayStylesOld
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: overlayClassNames,

package/dist/esm/monitoring/error.js

@@ -20,7 +20,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "116.24.2";
+var packageVersion = "116.24.3";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/ui/DropList/index.js

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "116.24.2";
+var packageVersion = "116.24.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/dist/types/extensibility/Extension/Lozenge/ExtensionLabel.d.ts

@@ -5,13 +5,14 @@
 import { type CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
 import type { ExtensionsPluginInjectionAPI } from '../../types';
-export declare const getShouldShowBodiedMacroLabel: (isBodiedMacro: boolean | undefined, isNodeHovered: boolean | undefined, showLivePagesBodiedMacrosRendererView: boolean | undefined, showBodiedExtensionRendererView: boolean | undefined, showUpdatedLivePages1PBodiedExtensionUI: boolean | undefined) => boolean | undefined;
 type ExtensionLabelProps = {
     customContainerStyles?: CSSProperties;
     extensionName: string;
     isBodiedMacro?: boolean;
+    isMultiBodiedMacro?: boolean;
     isNodeHovered?: boolean;
     isNodeNested?: boolean;
+    isNodeSelected?: boolean;
     pluginInjectionApi?: ExtensionsPluginInjectionAPI;
     setIsNodeHovered?: (isHovered: boolean) => void;
     showBodiedExtensionRendererView?: boolean;
@@ -19,5 +20,5 @@ type ExtensionLabelProps = {
     showUpdatedLivePages1PBodiedExtensionUI?: boolean;
     text: string;
 };
-export declare const ExtensionLabel: ({ text, extensionName, customContainerStyles, isNodeNested, setIsNodeHovered, isBodiedMacro, showUpdatedLivePages1PBodiedExtensionUI, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, pluginInjectionApi: _pluginInjectionApi, }: ExtensionLabelProps) => jsx.JSX.Element;
+export declare const ExtensionLabel: ({ text, extensionName, customContainerStyles, isNodeNested, isNodeSelected, setIsNodeHovered, isBodiedMacro, showUpdatedLivePages1PBodiedExtensionUI, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, pluginInjectionApi: _pluginInjectionApi, isMultiBodiedMacro, }: ExtensionLabelProps) => jsx.JSX.Element;
 export {};

package/dist/types/extensibility/Extension/Lozenge/LozengeComponent.d.ts

@@ -11,6 +11,7 @@ type LozengeComponentProps = {
     customContainerStyles?: CSSProperties;
     extensionName: string;
     isBodiedMacro?: boolean;
+    isMultiBodiedMacro?: boolean;
     isNodeHovered?: boolean;
     isNodeNested?: boolean;
     isNodeSelected?: boolean;
@@ -26,5 +27,5 @@ type LozengeComponentProps = {
     showUpdatedLivePages1PBodiedExtensionUI?: boolean;
     title: string;
 };
-export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, isNodeNested, setIsNodeHovered, isBodiedMacro, showLivePagesBodiedMacrosRendererView, showUpdatedLivePages1PBodiedExtensionUI, showBodiedExtensionRendererView, setShowBodiedExtensionRendererView, pluginInjectionApi, }: LozengeComponentProps) => jsx.JSX.Element;
+export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, isNodeNested, isNodeSelected, setIsNodeHovered, isBodiedMacro, showLivePagesBodiedMacrosRendererView, showUpdatedLivePages1PBodiedExtensionUI, showBodiedExtensionRendererView, setShowBodiedExtensionRendererView, pluginInjectionApi, isMultiBodiedMacro, }: LozengeComponentProps) => jsx.JSX.Element;
 export {};

package/dist/types/extensibility/Extension/Lozenge/index.d.ts

@@ -10,6 +10,7 @@ import type { ExtensionsPluginInjectionAPI } from '../../types';
 export interface Props {
     customContainerStyles?: CSSProperties;
     isBodiedMacro?: boolean;
+    isMultiBodiedMacro?: boolean;
     isNodeHovered?: boolean;
     isNodeNested?: boolean;
     isNodeSelected?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "116.24.3",
+	"version": "116.24.4",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
 		"@atlaskit/editor-tables": "^3.0.0",
 		"@atlaskit/editor-toolbar": "^2.1.0",
 		"@atlaskit/editor-toolbar-model": "^1.1.0",
-		"@atlaskit/emoji": "^71.7.0",
+		"@atlaskit/emoji": "^71.8.0",
 		"@atlaskit/icon": "^36.2.0",
 		"@atlaskit/link": "^4.1.0",
 		"@atlaskit/link-datasource": "^6.1.0",
@@ -80,7 +80,7 @@
 		"@atlaskit/task-decision": "^21.4.0",
 		"@atlaskit/teams-app-config": "^2.1.0",
 		"@atlaskit/textfield": "^9.1.0",
-		"@atlaskit/tmp-editor-statsig": "^124.0.0",
+		"@atlaskit/tmp-editor-statsig": "^124.1.0",
 		"@atlaskit/tokens": "^15.5.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/width-detector": "^6.2.0",
@@ -123,7 +123,7 @@
 		"@atlaskit/media-core": "^38.0.0",
 		"@atlassian/a11y-jest-testing": "^0.13.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
-		"@atlassian/testing-library": "^0.10.0",
+		"@atlassian/testing-library": "^0.11.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^16.3.0",