@atlaskit/editor-common 115.2.0 → 115.2.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-common
 
+## 115.2.1
+
+### Patch Changes
+
+- [`0d8f232a9fc98`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d8f232a9fc98) -
+  Add selection options to MBE changeActive API and prevent unwanted node selection when clicking
+  extension UI elements
+- [`f3f55d3ebf702`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f3f55d3ebf702) -
+  Gate MBE style and gap cursor changes behind confluence_frontend_native_tabs_extension feature
+  flag
+
 ## 115.2.0
 
 ### Minor Changes

package/dist/cjs/extensibility/MultiBodiedExtension/action-api.js

@@ -23,35 +23,45 @@ var useMultiBodiedExtensionActions = exports.useMultiBodiedExtensionActions = fu
     childrenContainer = _ref.childrenContainer;
   var actions = _react.default.useMemo(function () {
     return {
-      changeActive: function changeActive(index) {
-        var _possiblyMbeNode$type;
+      changeActive: function changeActive(index, options) {
+        var _options$selection, _possiblyMbeNode$type;
         var state = editorView.state,
           dispatch = editorView.dispatch;
         var updateActiveChildResult = updateActiveChild(index);
         if (eventDispatcher) {
           (0, _utils.sendMBEAnalyticsEvent)(_analytics.ACTION.CHANGE_ACTIVE, node, eventDispatcher);
         }
-        // On selection of a childFrame, we need to change the focus/selection to the end of the target child Frame
+        var selection = (_options$selection = options === null || options === void 0 ? void 0 : options.selection) !== null && _options$selection !== void 0 ? _options$selection : 'none';
+        if (selection === 'none') {
+          return updateActiveChildResult;
+        }
         var pos = getPos();
         if (typeof pos !== 'number') {
           return updateActiveChildResult;
         }
         var possiblyMbeNode = state.doc.nodeAt(pos);
-        var desiredPos = pos;
         if (possiblyMbeNode && (possiblyMbeNode === null || possiblyMbeNode === void 0 || (_possiblyMbeNode$type = possiblyMbeNode.type) === null || _possiblyMbeNode$type === void 0 ? void 0 : _possiblyMbeNode$type.name) === 'multiBodiedExtension' && possiblyMbeNode !== null && possiblyMbeNode !== void 0 && possiblyMbeNode.content) {
           var _possiblyMbeNode$cont;
           if (index < 0 || index >= (possiblyMbeNode === null || possiblyMbeNode === void 0 || (_possiblyMbeNode$cont = possiblyMbeNode.content) === null || _possiblyMbeNode$cont === void 0 ? void 0 : _possiblyMbeNode$cont.childCount)) {
             var _possiblyMbeNode$cont2;
             throw new Error("Index out of bounds: valid range is 0-".concat((possiblyMbeNode === null || possiblyMbeNode === void 0 || (_possiblyMbeNode$cont2 = possiblyMbeNode.content) === null || _possiblyMbeNode$cont2 === void 0 ? void 0 : _possiblyMbeNode$cont2.childCount) - 1, " inclusive"));
           }
-          for (var i = 0; i <= index && i < (possiblyMbeNode === null || possiblyMbeNode === void 0 || (_possiblyMbeNode$cont3 = possiblyMbeNode.content) === null || _possiblyMbeNode$cont3 === void 0 ? void 0 : _possiblyMbeNode$cont3.childCount); i++) {
+          var desiredPos = pos;
+          for (var i = 0; i < index && i < (possiblyMbeNode === null || possiblyMbeNode === void 0 || (_possiblyMbeNode$cont3 = possiblyMbeNode.content) === null || _possiblyMbeNode$cont3 === void 0 ? void 0 : _possiblyMbeNode$cont3.childCount); i++) {
             var _possiblyMbeNode$cont3, _possiblyMbeNode$cont4;
             desiredPos += (possiblyMbeNode === null || possiblyMbeNode === void 0 || (_possiblyMbeNode$cont4 = possiblyMbeNode.content) === null || _possiblyMbeNode$cont4 === void 0 || (_possiblyMbeNode$cont4 = _possiblyMbeNode$cont4.child(i)) === null || _possiblyMbeNode$cont4 === void 0 ? void 0 : _possiblyMbeNode$cont4.nodeSize) || 0;
           }
-          /* desiredPos gives the cursor at the end of last child of the current frame, in case of paragraph nodes, this will be the end of the paragraph
-           * Performing -1 brings the cursor inside the paragraph, similar to a user click, so any pasted text will be inside the last paragraph rather than a new line
-           */
-          dispatch(state.tr.setSelection(new _state.TextSelection(state.doc.resolve(desiredPos - 1))));
+          var targetFrame = possiblyMbeNode.content.child(index);
+          if (selection === 'start') {
+            // +1 moves past the extensionFrame opening token; TextSelection.near() finds
+            // the nearest valid text cursor position from there.
+            dispatch(state.tr.setSelection(_state.TextSelection.near(state.doc.resolve(desiredPos + 1))));
+          } else {
+            // Place cursor at the end of the target frame's content.
+            // -1 bias searches backward from the frame's closing token.
+            dispatch(state.tr.setSelection(_state.TextSelection.near(state.doc.resolve(desiredPos + targetFrame.nodeSize), -1)));
+          }
+          editorView.focus();
         }
         return updateActiveChildResult;
       },

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

@@ -15,6 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _file = _interopRequireDefault(require("@atlaskit/icon/core/file"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _hooks = require("../../hooks");
 var _MultiBodiedExtension = require("../../ui/MultiBodiedExtension");
@@ -58,6 +59,7 @@ var MultiBodiedExtensionFrames = function MultiBodiedExtensionFrames(_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--frames",
     "data-testid": "multiBodiedExtension--frames",
+    "data-multibodiedextension-frames": true,
     ref: articleRef
   });
 };
@@ -209,9 +211,9 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
   }), (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-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    _styles.mbeExtensionWrapperCSSStyles, showMacroInteractionDesignUpdates && !isLivePageViewMode && (0, _expValEquals.expValEquals)('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles],
+    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 */
+    showMacroInteractionDesignUpdates && !isLivePageViewMode && (0, _expValEquals.expValEquals)('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles],
     "data-testid": "multiBodiedExtension--wrapper-editor",
     "data-layout": node.attrs.layout
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -230,7 +232,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: _styles.overlayStyles
+    css: (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension') ? _styles.overlayStyles : _styles.overlayStylesOld
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: overlayClassNames,
@@ -242,6 +244,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     ,
     css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
     "data-testid": "multiBodiedExtension--container",
+    "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex
   }, allowBodiedOverride ? (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -3,15 +3,55 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.overlayStyles = exports.mbeExtensionWrapperCSSStyles = void 0;
+exports.overlayStylesOld = exports.overlayStyles = exports.mbeExtensionWrapperCSSStylesOld = exports.mbeExtensionWrapperCSSStyles = void 0;
 var _react = require("@emotion/react");
 var _styles = require("../Extension/styles");
 /* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
+/* eslint-disable @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766 */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // Wrapper the extension title and extensionContainer
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var mbeExtensionWrapperCSSStyles = exports.mbeExtensionWrapperCSSStyles = (0, _react.css)(_styles.wrapperDefault, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-margin-styles': {
+    marginTop: "var(--ds-space-300, 24px)",
+    marginLeft: "var(--ds-space-negative-250, -20px)",
+    marginRight: "var(--ds-space-negative-250, -20px)"
+  },
+  cursor: 'pointer',
+  marginTop: "var(--ds-space-250, 20px)",
+  marginBottom: "var(--ds-space-200, 16px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.extension-title': {
+    display: 'flex',
+    alignItems: 'center',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    lineHeight: '16px !important',
+    marginBottom: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginLeft: "var(--ds-space-050, 4px)".concat(" !important"),
+    marginRight: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    paddingTop: "var(--ds-space-100, 8px)".concat(" !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-border': {
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-hover-border': {
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-padding-background-styles': {
+    padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-250, 20px)"),
+    background: 'transparent'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+var mbeExtensionWrapperCSSStylesOld = exports.mbeExtensionWrapperCSSStylesOld = (0, _react.css)(_styles.wrapperDefault, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-margin-styles': {
     marginTop: 0,
@@ -25,7 +65,7 @@ var mbeExtensionWrapperCSSStyles = exports.mbeExtensionWrapperCSSStyles = (0, _r
   '.extension-title': {
     display: 'flex',
     alignItems: 'center',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     lineHeight: '16px !important',
     marginBottom: "var(--ds-space-100, 8px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
@@ -51,6 +91,23 @@ var mbeExtensionWrapperCSSStyles = exports.mbeExtensionWrapperCSSStyles = (0, _r
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var overlayStyles = exports.overlayStyles = (0, _react.css)({
+  borderRadius: "var(--ds-radius-small, 3px)",
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  opacity: 0,
+  pointerEvents: 'none',
+  transition: 'opacity 0.3s',
+  zIndex: 1,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-margin': {
+    marginTop: "var(--ds-space-negative-100, -8px)",
+    marginLeft: "var(--ds-space-negative-250, -20px)"
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var overlayStylesOld = exports.overlayStylesOld = (0, _react.css)({
   borderRadius: "var(--ds-radius-small, 3px)",
   position: 'absolute',
   width: '100%',

package/dist/cjs/extensibility/extensionNodeView.js

@@ -236,16 +236,29 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
     }
 
     /**
-     * When interacting with input elements inside an extension's body, the events
-     * bubble up to the editor and get handled by it. This almost always gets in the way
-     * of being able to actually interact with said input in the extension, i.e.
-     * typing inside a text field (in an extension body) will print the text in the editor
-     * content area instead. This change prevents the editor view from trying to handle these events,
-     * when the target of the event is an input element, so the extension can.
+     * Prevents ProseMirror from handling events that belong to the extension's React UI.
+     *
+     * For multibodied extensions: the node consists of a React app (e.g. tab bar) that controls
+     * frames, and the editable frames themselves. Events inside frames must reach ProseMirror
+     * for normal editing; events in the surrounding React app (buttons, navigation) are stopped
+     * so ProseMirror doesn't create a NodeSelection on the entire node.
+     *
+     * For other extensions: input/textarea events are stopped so users can interact
+     * with form elements inside the extension body without the editor intercepting them.
      */
   }, {
     key: "stopEvent",
     value: function stopEvent(event) {
+      if (this.node.type.name === 'multiBodiedExtension') {
+        var target = event.target;
+        if (target instanceof Element) {
+          if (target.closest('[data-multibodiedextension-frames]')) {
+            return false;
+          }
+          return !!target.closest('[data-multiBodiedExtension-container]');
+        }
+        return false;
+      }
       if ((0, _platformFeatureFlags.fg)('forge-ui-extensionnodeview-stop-event-for-textarea')) {
         return event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement;
       }

package/dist/cjs/monitoring/error.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 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 = "115.1.0";
+var packageVersion = "115.2.0";
 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 = "115.1.0";
+var packageVersion = "115.2.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.sharedMultiBodiedExtensionStyles = exports.removeMarginsAndBorder = void 0;
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
 /**
  * @jsxRuntime classic
@@ -68,6 +69,33 @@ var mbeNavigation = (0, _react.css)({
   }
 });
 var extensionFrameContent = (0, _react.css)({
+  display: 'block',
+  minHeight: '100px',
+  background: 'transparent',
+  borderBottomLeftRadius: "var(--ds-radius-small, 3px)",
+  borderBottomRightRadius: "var(--ds-radius-small, 3px)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)",
+  cursor: 'initial',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.pm-table-with-controls': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginLeft: "var(--ds-space-150, 12px)".concat(" !important"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    paddingRight: "var(--ds-space-150, 12px)".concat(" !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.bodiedExtensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginTop: "var(--ds-space-150, 12px)".concat(" !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.extensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginTop: "var(--ds-space-100, 8px)".concat(" !important")
+  }
+});
+var extensionFrameContentOld = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   padding: "var(--ds-space-100, 8px)".concat(" !important"),
   display: 'block',
@@ -108,5 +136,7 @@ var removeMarginsAndBorder = exports.removeMarginsAndBorder = (0, _react.css)({
 var sharedMultiBodiedExtensionStyles = exports.sharedMultiBodiedExtensionStyles = {
   mbeExtensionContainer: mbeExtensionContainer,
   mbeNavigation: mbeNavigation,
-  extensionFrameContent: extensionFrameContent
+  get extensionFrameContent() {
+    return (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension') ? extensionFrameContent : extensionFrameContentOld;
+  }
 };

package/dist/es2019/extensibility/MultiBodiedExtension/action-api.js

@@ -14,8 +14,8 @@ export const useMultiBodiedExtensionActions = ({
 }) => {
   const actions = React.useMemo(() => {
     return {
-      changeActive(index) {
-        var _possiblyMbeNode$type;
+      changeActive(index, options) {
+        var _options$selection, _possiblyMbeNode$type;
         const {
           state,
           dispatch
@@ -24,27 +24,37 @@ export const useMultiBodiedExtensionActions = ({
         if (eventDispatcher) {
           sendMBEAnalyticsEvent(ACTION.CHANGE_ACTIVE, node, eventDispatcher);
         }
-        // On selection of a childFrame, we need to change the focus/selection to the end of the target child Frame
+        const selection = (_options$selection = options === null || options === void 0 ? void 0 : options.selection) !== null && _options$selection !== void 0 ? _options$selection : 'none';
+        if (selection === 'none') {
+          return updateActiveChildResult;
+        }
         const pos = getPos();
         if (typeof pos !== 'number') {
           return updateActiveChildResult;
         }
         const possiblyMbeNode = state.doc.nodeAt(pos);
-        let desiredPos = pos;
         if (possiblyMbeNode && (possiblyMbeNode === null || possiblyMbeNode === void 0 ? void 0 : (_possiblyMbeNode$type = possiblyMbeNode.type) === null || _possiblyMbeNode$type === void 0 ? void 0 : _possiblyMbeNode$type.name) === 'multiBodiedExtension' && possiblyMbeNode !== null && possiblyMbeNode !== void 0 && possiblyMbeNode.content) {
           var _possiblyMbeNode$cont;
           if (index < 0 || index >= (possiblyMbeNode === null || possiblyMbeNode === void 0 ? void 0 : (_possiblyMbeNode$cont = possiblyMbeNode.content) === null || _possiblyMbeNode$cont === void 0 ? void 0 : _possiblyMbeNode$cont.childCount)) {
             var _possiblyMbeNode$cont2;
             throw new Error(`Index out of bounds: valid range is 0-${(possiblyMbeNode === null || possiblyMbeNode === void 0 ? void 0 : (_possiblyMbeNode$cont2 = possiblyMbeNode.content) === null || _possiblyMbeNode$cont2 === void 0 ? void 0 : _possiblyMbeNode$cont2.childCount) - 1} inclusive`);
           }
-          for (let i = 0; i <= index && i < (possiblyMbeNode === null || possiblyMbeNode === void 0 ? void 0 : (_possiblyMbeNode$cont3 = possiblyMbeNode.content) === null || _possiblyMbeNode$cont3 === void 0 ? void 0 : _possiblyMbeNode$cont3.childCount); i++) {
+          let desiredPos = pos;
+          for (let i = 0; i < index && i < (possiblyMbeNode === null || possiblyMbeNode === void 0 ? void 0 : (_possiblyMbeNode$cont3 = possiblyMbeNode.content) === null || _possiblyMbeNode$cont3 === void 0 ? void 0 : _possiblyMbeNode$cont3.childCount); i++) {
             var _possiblyMbeNode$cont3, _possiblyMbeNode$cont4, _possiblyMbeNode$cont5;
             desiredPos += (possiblyMbeNode === null || possiblyMbeNode === void 0 ? void 0 : (_possiblyMbeNode$cont4 = possiblyMbeNode.content) === null || _possiblyMbeNode$cont4 === void 0 ? void 0 : (_possiblyMbeNode$cont5 = _possiblyMbeNode$cont4.child(i)) === null || _possiblyMbeNode$cont5 === void 0 ? void 0 : _possiblyMbeNode$cont5.nodeSize) || 0;
           }
-          /* desiredPos gives the cursor at the end of last child of the current frame, in case of paragraph nodes, this will be the end of the paragraph
-           * Performing -1 brings the cursor inside the paragraph, similar to a user click, so any pasted text will be inside the last paragraph rather than a new line
-           */
-          dispatch(state.tr.setSelection(new TextSelection(state.doc.resolve(desiredPos - 1))));
+          const targetFrame = possiblyMbeNode.content.child(index);
+          if (selection === 'start') {
+            // +1 moves past the extensionFrame opening token; TextSelection.near() finds
+            // the nearest valid text cursor position from there.
+            dispatch(state.tr.setSelection(TextSelection.near(state.doc.resolve(desiredPos + 1))));
+          } else {
+            // Place cursor at the end of the target frame's content.
+            // -1 bias searches backward from the frame's closing token.
+            dispatch(state.tr.setSelection(TextSelection.near(state.doc.resolve(desiredPos + targetFrame.nodeSize), -1)));
+          }
+          editorView.focus();
         }
         return updateActiveChildResult;
       },

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

@@ -11,6 +11,7 @@ import React, { Fragment, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/core/file';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useSharedPluginStateWithSelector } from '../../hooks';
 import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
@@ -18,7 +19,7 @@ import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import ExtensionLozenge from '../Extension/Lozenge';
 import { shouldExtensionBreakout } from '../utils/should-extension-breakout';
 import { useMultiBodiedExtensionActions } from './action-api';
-import { mbeExtensionWrapperCSSStyles, overlayStyles } from './styles';
+import { mbeExtensionWrapperCSSStyles, mbeExtensionWrapperCSSStylesOld, overlayStyles, overlayStylesOld } from './styles';
 const getContainerCssExtendedStyles = (activeChildIndex, showMacroInteractionDesignUpdates) =>
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, {
@@ -47,6 +48,7 @@ const MultiBodiedExtensionFrames = ({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--frames",
     "data-testid": "multiBodiedExtension--frames",
+    "data-multibodiedextension-frames": true,
     ref: articleRef
   });
 };
@@ -200,9 +202,9 @@ const MultiBodiedExtensionWithWidth = ({
   }), jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: wrapperClassNames,
-    css: [
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    mbeExtensionWrapperCSSStyles, showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles],
+    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 */
+    showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles],
     "data-testid": "multiBodiedExtension--wrapper-editor",
     "data-layout": node.attrs.layout
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -217,7 +219,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: overlayStyles
+    css: fg('confluence_frontend_native_tabs_extension') ? overlayStyles : overlayStylesOld
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: overlayClassNames,
@@ -229,6 +231,7 @@ const MultiBodiedExtensionWithWidth = ({
     ,
     css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
     "data-testid": "multiBodiedExtension--container",
+    "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex
   }, allowBodiedOverride ? jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -1,4 +1,5 @@
 /* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
+/* eslint-disable @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766 */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { wrapperDefault } from '../Extension/styles';
@@ -6,6 +7,45 @@ import { wrapperDefault } from '../Extension/styles';
 // Wrapper the extension title and extensionContainer
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 export const mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-margin-styles': {
+    marginTop: "var(--ds-space-300, 24px)",
+    marginLeft: "var(--ds-space-negative-250, -20px)",
+    marginRight: "var(--ds-space-negative-250, -20px)"
+  },
+  cursor: 'pointer',
+  marginTop: "var(--ds-space-250, 20px)",
+  marginBottom: "var(--ds-space-200, 16px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.extension-title': {
+    display: 'flex',
+    alignItems: 'center',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    lineHeight: '16px !important',
+    marginBottom: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginLeft: `${"var(--ds-space-050, 4px)"} !important`,
+    marginRight: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    paddingTop: `${"var(--ds-space-100, 8px)"} !important`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-border': {
+    boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-hover-border': {
+    boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8C8F97)"}`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-padding-background-styles': {
+    padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-250, 20px)"}`,
+    background: 'transparent'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+export const mbeExtensionWrapperCSSStylesOld = css(wrapperDefault, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-margin-styles': {
     marginTop: 0,
@@ -19,7 +59,7 @@ export const mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
   '.extension-title': {
     display: 'flex',
     alignItems: 'center',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     lineHeight: '16px !important',
     marginBottom: "var(--ds-space-100, 8px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
@@ -45,6 +85,23 @@ export const mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const overlayStyles = css({
+  borderRadius: "var(--ds-radius-small, 3px)",
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  opacity: 0,
+  pointerEvents: 'none',
+  transition: 'opacity 0.3s',
+  zIndex: 1,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-margin': {
+    marginTop: "var(--ds-space-negative-100, -8px)",
+    marginLeft: "var(--ds-space-negative-250, -20px)"
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const overlayStylesOld = css({
   borderRadius: "var(--ds-radius-small, 3px)",
   position: 'absolute',
   width: '100%',

package/dist/es2019/extensibility/extensionNodeView.js

@@ -196,14 +196,27 @@ export class ExtensionNode extends ReactNodeView {
   }
 
   /**
-   * When interacting with input elements inside an extension's body, the events
-   * bubble up to the editor and get handled by it. This almost always gets in the way
-   * of being able to actually interact with said input in the extension, i.e.
-   * typing inside a text field (in an extension body) will print the text in the editor
-   * content area instead. This change prevents the editor view from trying to handle these events,
-   * when the target of the event is an input element, so the extension can.
+   * Prevents ProseMirror from handling events that belong to the extension's React UI.
+   *
+   * For multibodied extensions: the node consists of a React app (e.g. tab bar) that controls
+   * frames, and the editable frames themselves. Events inside frames must reach ProseMirror
+   * for normal editing; events in the surrounding React app (buttons, navigation) are stopped
+   * so ProseMirror doesn't create a NodeSelection on the entire node.
+   *
+   * For other extensions: input/textarea events are stopped so users can interact
+   * with form elements inside the extension body without the editor intercepting them.
    */
   stopEvent(event) {
+    if (this.node.type.name === 'multiBodiedExtension') {
+      const target = event.target;
+      if (target instanceof Element) {
+        if (target.closest('[data-multibodiedextension-frames]')) {
+          return false;
+        }
+        return !!target.closest('[data-multiBodiedExtension-container]');
+      }
+      return false;
+    }
     if (fg('forge-ui-extensionnodeview-stop-event-for-textarea')) {
       return event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement;
     }

package/dist/es2019/monitoring/error.js

@@ -4,7 +4,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 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 = "115.1.0";
+const packageVersion = "115.2.0";
 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 = "115.1.0";
+const packageVersion = "115.2.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

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

@@ -6,6 +6,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 // Wraps the navigation bar and extensionFrames
 const mbeExtensionContainer = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
@@ -61,6 +62,33 @@ const mbeNavigation = css({
   }
 });
 const extensionFrameContent = css({
+  display: 'block',
+  minHeight: '100px',
+  background: 'transparent',
+  borderBottomLeftRadius: "var(--ds-radius-small, 3px)",
+  borderBottomRightRadius: "var(--ds-radius-small, 3px)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)",
+  cursor: 'initial',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.pm-table-with-controls': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginLeft: `${"var(--ds-space-150, 12px)"} !important`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    paddingRight: `${"var(--ds-space-150, 12px)"} !important`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.bodiedExtensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginTop: `${"var(--ds-space-150, 12px)"} !important`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.extensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginTop: `${"var(--ds-space-100, 8px)"} !important`
+  }
+});
+const extensionFrameContentOld = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   padding: `${"var(--ds-space-100, 8px)"} !important`,
   display: 'block',
@@ -101,5 +129,7 @@ export const removeMarginsAndBorder = css({
 export const sharedMultiBodiedExtensionStyles = {
   mbeExtensionContainer,
   mbeNavigation,
-  extensionFrameContent
+  get extensionFrameContent() {
+    return fg('confluence_frontend_native_tabs_extension') ? extensionFrameContent : extensionFrameContentOld;
+  }
 };

package/dist/esm/extensibility/MultiBodiedExtension/action-api.js

@@ -16,35 +16,45 @@ export var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActi
     childrenContainer = _ref.childrenContainer;
   var actions = React.useMemo(function () {
     return {
-      changeActive: function changeActive(index) {
-        var _possiblyMbeNode$type;
+      changeActive: function changeActive(index, options) {
+        var _options$selection, _possiblyMbeNode$type;
         var state = editorView.state,
           dispatch = editorView.dispatch;
         var updateActiveChildResult = updateActiveChild(index);
         if (eventDispatcher) {
           sendMBEAnalyticsEvent(ACTION.CHANGE_ACTIVE, node, eventDispatcher);
         }
-        // On selection of a childFrame, we need to change the focus/selection to the end of the target child Frame
+        var selection = (_options$selection = options === null || options === void 0 ? void 0 : options.selection) !== null && _options$selection !== void 0 ? _options$selection : 'none';
+        if (selection === 'none') {
+          return updateActiveChildResult;
+        }
         var pos = getPos();
         if (typeof pos !== 'number') {
           return updateActiveChildResult;
         }
         var possiblyMbeNode = state.doc.nodeAt(pos);
-        var desiredPos = pos;
         if (possiblyMbeNode && (possiblyMbeNode === null || possiblyMbeNode === void 0 || (_possiblyMbeNode$type = possiblyMbeNode.type) === null || _possiblyMbeNode$type === void 0 ? void 0 : _possiblyMbeNode$type.name) === 'multiBodiedExtension' && possiblyMbeNode !== null && possiblyMbeNode !== void 0 && possiblyMbeNode.content) {
           var _possiblyMbeNode$cont;
           if (index < 0 || index >= (possiblyMbeNode === null || possiblyMbeNode === void 0 || (_possiblyMbeNode$cont = possiblyMbeNode.content) === null || _possiblyMbeNode$cont === void 0 ? void 0 : _possiblyMbeNode$cont.childCount)) {
             var _possiblyMbeNode$cont2;
             throw new Error("Index out of bounds: valid range is 0-".concat((possiblyMbeNode === null || possiblyMbeNode === void 0 || (_possiblyMbeNode$cont2 = possiblyMbeNode.content) === null || _possiblyMbeNode$cont2 === void 0 ? void 0 : _possiblyMbeNode$cont2.childCount) - 1, " inclusive"));
           }
-          for (var i = 0; i <= index && i < (possiblyMbeNode === null || possiblyMbeNode === void 0 || (_possiblyMbeNode$cont3 = possiblyMbeNode.content) === null || _possiblyMbeNode$cont3 === void 0 ? void 0 : _possiblyMbeNode$cont3.childCount); i++) {
+          var desiredPos = pos;
+          for (var i = 0; i < index && i < (possiblyMbeNode === null || possiblyMbeNode === void 0 || (_possiblyMbeNode$cont3 = possiblyMbeNode.content) === null || _possiblyMbeNode$cont3 === void 0 ? void 0 : _possiblyMbeNode$cont3.childCount); i++) {
             var _possiblyMbeNode$cont3, _possiblyMbeNode$cont4;
             desiredPos += (possiblyMbeNode === null || possiblyMbeNode === void 0 || (_possiblyMbeNode$cont4 = possiblyMbeNode.content) === null || _possiblyMbeNode$cont4 === void 0 || (_possiblyMbeNode$cont4 = _possiblyMbeNode$cont4.child(i)) === null || _possiblyMbeNode$cont4 === void 0 ? void 0 : _possiblyMbeNode$cont4.nodeSize) || 0;
           }
-          /* desiredPos gives the cursor at the end of last child of the current frame, in case of paragraph nodes, this will be the end of the paragraph
-           * Performing -1 brings the cursor inside the paragraph, similar to a user click, so any pasted text will be inside the last paragraph rather than a new line
-           */
-          dispatch(state.tr.setSelection(new TextSelection(state.doc.resolve(desiredPos - 1))));
+          var targetFrame = possiblyMbeNode.content.child(index);
+          if (selection === 'start') {
+            // +1 moves past the extensionFrame opening token; TextSelection.near() finds
+            // the nearest valid text cursor position from there.
+            dispatch(state.tr.setSelection(TextSelection.near(state.doc.resolve(desiredPos + 1))));
+          } else {
+            // Place cursor at the end of the target frame's content.
+            // -1 bias searches backward from the frame's closing token.
+            dispatch(state.tr.setSelection(TextSelection.near(state.doc.resolve(desiredPos + targetFrame.nodeSize), -1)));
+          }
+          editorView.focus();
         }
         return updateActiveChildResult;
       },

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

@@ -16,6 +16,7 @@ import React, { Fragment, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/core/file';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useSharedPluginStateWithSelector } from '../../hooks';
 import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
@@ -23,7 +24,7 @@ import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import ExtensionLozenge from '../Extension/Lozenge';
 import { shouldExtensionBreakout } from '../utils/should-extension-breakout';
 import { useMultiBodiedExtensionActions } from './action-api';
-import { mbeExtensionWrapperCSSStyles, overlayStyles } from './styles';
+import { mbeExtensionWrapperCSSStyles, mbeExtensionWrapperCSSStylesOld, overlayStyles, overlayStylesOld } from './styles';
 var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates) {
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -51,6 +52,7 @@ var MultiBodiedExtensionFrames = function MultiBodiedExtensionFrames(_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--frames",
     "data-testid": "multiBodiedExtension--frames",
+    "data-multibodiedextension-frames": true,
     ref: articleRef
   });
 };
@@ -202,9 +204,9 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
   }), jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: wrapperClassNames,
-    css: [
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    mbeExtensionWrapperCSSStyles, showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles],
+    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 */
+    showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles],
     "data-testid": "multiBodiedExtension--wrapper-editor",
     "data-layout": node.attrs.layout
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -223,7 +225,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: overlayStyles
+    css: fg('confluence_frontend_native_tabs_extension') ? overlayStyles : overlayStylesOld
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: overlayClassNames,
@@ -235,6 +237,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     ,
     css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
     "data-testid": "multiBodiedExtension--container",
+    "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex
   }, allowBodiedOverride ? jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -1,4 +1,5 @@
 /* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
+/* eslint-disable @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766 */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { wrapperDefault } from '../Extension/styles';
@@ -6,6 +7,45 @@ import { wrapperDefault } from '../Extension/styles';
 // Wrapper the extension title and extensionContainer
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 export var mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-margin-styles': {
+    marginTop: "var(--ds-space-300, 24px)",
+    marginLeft: "var(--ds-space-negative-250, -20px)",
+    marginRight: "var(--ds-space-negative-250, -20px)"
+  },
+  cursor: 'pointer',
+  marginTop: "var(--ds-space-250, 20px)",
+  marginBottom: "var(--ds-space-200, 16px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.extension-title': {
+    display: 'flex',
+    alignItems: 'center',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    lineHeight: '16px !important',
+    marginBottom: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginLeft: "var(--ds-space-050, 4px)".concat(" !important"),
+    marginRight: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    paddingTop: "var(--ds-space-100, 8px)".concat(" !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-border': {
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-hover-border': {
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-padding-background-styles': {
+    padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-250, 20px)"),
+    background: 'transparent'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+export var mbeExtensionWrapperCSSStylesOld = css(wrapperDefault, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-margin-styles': {
     marginTop: 0,
@@ -19,7 +59,7 @@ export var mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
   '.extension-title': {
     display: 'flex',
     alignItems: 'center',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     lineHeight: '16px !important',
     marginBottom: "var(--ds-space-100, 8px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
@@ -45,6 +85,23 @@ export var mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var overlayStyles = css({
+  borderRadius: "var(--ds-radius-small, 3px)",
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  opacity: 0,
+  pointerEvents: 'none',
+  transition: 'opacity 0.3s',
+  zIndex: 1,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-margin': {
+    marginTop: "var(--ds-space-negative-100, -8px)",
+    marginLeft: "var(--ds-space-negative-250, -20px)"
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var overlayStylesOld = css({
   borderRadius: "var(--ds-radius-small, 3px)",
   position: 'absolute',
   width: '100%',

package/dist/esm/extensibility/extensionNodeView.js

@@ -228,16 +228,29 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
     }
 
     /**
-     * When interacting with input elements inside an extension's body, the events
-     * bubble up to the editor and get handled by it. This almost always gets in the way
-     * of being able to actually interact with said input in the extension, i.e.
-     * typing inside a text field (in an extension body) will print the text in the editor
-     * content area instead. This change prevents the editor view from trying to handle these events,
-     * when the target of the event is an input element, so the extension can.
+     * Prevents ProseMirror from handling events that belong to the extension's React UI.
+     *
+     * For multibodied extensions: the node consists of a React app (e.g. tab bar) that controls
+     * frames, and the editable frames themselves. Events inside frames must reach ProseMirror
+     * for normal editing; events in the surrounding React app (buttons, navigation) are stopped
+     * so ProseMirror doesn't create a NodeSelection on the entire node.
+     *
+     * For other extensions: input/textarea events are stopped so users can interact
+     * with form elements inside the extension body without the editor intercepting them.
      */
   }, {
     key: "stopEvent",
     value: function stopEvent(event) {
+      if (this.node.type.name === 'multiBodiedExtension') {
+        var target = event.target;
+        if (target instanceof Element) {
+          if (target.closest('[data-multibodiedextension-frames]')) {
+            return false;
+          }
+          return !!target.closest('[data-multiBodiedExtension-container]');
+        }
+        return false;
+      }
       if (fg('forge-ui-extensionnodeview-stop-event-for-textarea')) {
         return event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement;
       }

package/dist/esm/monitoring/error.js

@@ -10,7 +10,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 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 = "115.1.0";
+var packageVersion = "115.2.0";
 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 = "115.1.0";
+var packageVersion = "115.2.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

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

@@ -6,6 +6,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 // Wraps the navigation bar and extensionFrames
 var mbeExtensionContainer = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
@@ -61,6 +62,33 @@ var mbeNavigation = css({
   }
 });
 var extensionFrameContent = css({
+  display: 'block',
+  minHeight: '100px',
+  background: 'transparent',
+  borderBottomLeftRadius: "var(--ds-radius-small, 3px)",
+  borderBottomRightRadius: "var(--ds-radius-small, 3px)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)",
+  cursor: 'initial',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.pm-table-with-controls': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginLeft: "var(--ds-space-150, 12px)".concat(" !important"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    paddingRight: "var(--ds-space-150, 12px)".concat(" !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.bodiedExtensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginTop: "var(--ds-space-150, 12px)".concat(" !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.extensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginTop: "var(--ds-space-100, 8px)".concat(" !important")
+  }
+});
+var extensionFrameContentOld = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   padding: "var(--ds-space-100, 8px)".concat(" !important"),
   display: 'block',
@@ -101,5 +129,7 @@ export var removeMarginsAndBorder = css({
 export var sharedMultiBodiedExtensionStyles = {
   mbeExtensionContainer: mbeExtensionContainer,
   mbeNavigation: mbeNavigation,
-  extensionFrameContent: extensionFrameContent
+  get extensionFrameContent() {
+    return fg('confluence_frontend_native_tabs_extension') ? extensionFrameContent : extensionFrameContentOld;
+  }
 };

package/dist/types/extensibility/MultiBodiedExtension/styles.d.ts

@@ -1,3 +1,5 @@
 import type { SerializedStyles } from '@emotion/react';
 export declare const mbeExtensionWrapperCSSStyles: SerializedStyles;
+export declare const mbeExtensionWrapperCSSStylesOld: SerializedStyles;
 export declare const overlayStyles: SerializedStyles;
+export declare const overlayStylesOld: SerializedStyles;

package/dist/types/extensibility/extensionNodeView.d.ts

@@ -55,12 +55,15 @@ export declare class ExtensionNode<AdditionalParams = unknown> extends ReactNode
     init(): this;
     update(node: PmNode, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource, validUpdate?: (currentNode: PmNode, newNode: PmNode) => boolean): boolean;
     /**
-     * When interacting with input elements inside an extension's body, the events
-     * bubble up to the editor and get handled by it. This almost always gets in the way
-     * of being able to actually interact with said input in the extension, i.e.
-     * typing inside a text field (in an extension body) will print the text in the editor
-     * content area instead. This change prevents the editor view from trying to handle these events,
-     * when the target of the event is an input element, so the extension can.
+     * Prevents ProseMirror from handling events that belong to the extension's React UI.
+     *
+     * For multibodied extensions: the node consists of a React app (e.g. tab bar) that controls
+     * frames, and the editable frames themselves. Events inside frames must reach ProseMirror
+     * for normal editing; events in the surrounding React app (buttons, navigation) are stopped
+     * so ProseMirror doesn't create a NodeSelection on the entire node.
+     *
+     * For other extensions: input/textarea events are stopped so users can interact
+     * with form elements inside the extension body without the editor intercepting them.
      */
     stopEvent(event: Event): boolean;
     getContentDOM(): {

package/dist/types/extensions/types/extension-handler.d.ts

@@ -43,9 +43,13 @@ export interface ExtensionHandlers<T extends Parameters = any> {
 export type ReferenceEntity = {
     [prop: string]: ADFEntity | Object;
 };
+export type ChangeActiveOptions = {
+    /** Controls cursor placement after switching frames. Defaults to 'none'. */
+    selection?: 'none' | 'start' | 'end';
+};
 export type MultiBodiedExtensionActions = {
     addChild: () => boolean;
-    changeActive: (index: number) => boolean;
+    changeActive: (index: number, options?: ChangeActiveOptions) => boolean;
     getChildren: () => Array<ADFEntity>;
     getChildrenContainer: () => React.ReactNode;
     getChildrenCount: () => number;

package/dist/types/ui/MultiBodiedExtension/index.d.ts

@@ -5,7 +5,7 @@
 import type { SerializedStyles } from '@emotion/react';
 export declare const removeMarginsAndBorder: SerializedStyles;
 export declare const sharedMultiBodiedExtensionStyles: {
+    extensionFrameContent: SerializedStyles;
     mbeExtensionContainer: SerializedStyles;
     mbeNavigation: SerializedStyles;
-    extensionFrameContent: SerializedStyles;
 };

package/dist/types-ts4.5/extensibility/MultiBodiedExtension/styles.d.ts

@@ -1,3 +1,5 @@
 import type { SerializedStyles } from '@emotion/react';
 export declare const mbeExtensionWrapperCSSStyles: SerializedStyles;
+export declare const mbeExtensionWrapperCSSStylesOld: SerializedStyles;
 export declare const overlayStyles: SerializedStyles;
+export declare const overlayStylesOld: SerializedStyles;

package/dist/types-ts4.5/extensibility/extensionNodeView.d.ts

@@ -55,12 +55,15 @@ export declare class ExtensionNode<AdditionalParams = unknown> extends ReactNode
     init(): this;
     update(node: PmNode, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource, validUpdate?: (currentNode: PmNode, newNode: PmNode) => boolean): boolean;
     /**
-     * When interacting with input elements inside an extension's body, the events
-     * bubble up to the editor and get handled by it. This almost always gets in the way
-     * of being able to actually interact with said input in the extension, i.e.
-     * typing inside a text field (in an extension body) will print the text in the editor
-     * content area instead. This change prevents the editor view from trying to handle these events,
-     * when the target of the event is an input element, so the extension can.
+     * Prevents ProseMirror from handling events that belong to the extension's React UI.
+     *
+     * For multibodied extensions: the node consists of a React app (e.g. tab bar) that controls
+     * frames, and the editable frames themselves. Events inside frames must reach ProseMirror
+     * for normal editing; events in the surrounding React app (buttons, navigation) are stopped
+     * so ProseMirror doesn't create a NodeSelection on the entire node.
+     *
+     * For other extensions: input/textarea events are stopped so users can interact
+     * with form elements inside the extension body without the editor intercepting them.
      */
     stopEvent(event: Event): boolean;
     getContentDOM(): {

package/dist/types-ts4.5/extensions/types/extension-handler.d.ts

@@ -43,9 +43,13 @@ export interface ExtensionHandlers<T extends Parameters = any> {
 export type ReferenceEntity = {
     [prop: string]: ADFEntity | Object;
 };
+export type ChangeActiveOptions = {
+    /** Controls cursor placement after switching frames. Defaults to 'none'. */
+    selection?: 'none' | 'start' | 'end';
+};
 export type MultiBodiedExtensionActions = {
     addChild: () => boolean;
-    changeActive: (index: number) => boolean;
+    changeActive: (index: number, options?: ChangeActiveOptions) => boolean;
     getChildren: () => Array<ADFEntity>;
     getChildrenContainer: () => React.ReactNode;
     getChildrenCount: () => number;

package/dist/types-ts4.5/ui/MultiBodiedExtension/index.d.ts

@@ -5,7 +5,7 @@
 import type { SerializedStyles } from '@emotion/react';
 export declare const removeMarginsAndBorder: SerializedStyles;
 export declare const sharedMultiBodiedExtensionStyles: {
+    extensionFrameContent: SerializedStyles;
     mbeExtensionContainer: SerializedStyles;
     mbeNavigation: SerializedStyles;
-    extensionFrameContent: SerializedStyles;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "115.2.0",
+	"version": "115.2.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"