@atlaskit/editor-plugin-block-controls 12.0.1 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 12.1.0
+
+### Minor Changes
+
+- [`5182f0ffac22f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5182f0ffac22f) -
+  Add keyboard shortcuts and danger preview to layout column menu actions.
+
+  Fix keyboard navigation in the layout column menu.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.0.2
+
+### Patch Changes
+
+- [`4c8035c5703fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4c8035c5703fd) -
+  Add multiBodiedExtension support to block controls
+
 ## 12.0.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations-drop-target-active.js

@@ -1,12 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getActiveDropTargetDecorations = exports.canMoveNodeOrSliceToPos = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorationsCommon = require("./decorations-common");
@@ -19,18 +23,17 @@ var _validation = require("./utils/validation");
  * List of parent node types that can have child nodes
  */
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
-var PARENT_WITH_END_DROP_TARGET_SYNC_BLOCK = [].concat(PARENT_WITH_END_DROP_TARGET, ['bodiedSyncBlock']);
 
 /**
  * List of node types that does not allow drop targets at before or after the node.
  */
 var NODE_WITH_NO_PARENT_POS = ['tableCell', 'tableHeader', 'layoutColumn'];
 var UNSUPPORTED_LAYOUT_CONTENT = ['syncBlock', 'bodiedSyncBlock'];
+var getContainerNodeTypes = (0, _memoizeOne.default)(function () {
+  return [].concat(PARENT_WITH_END_DROP_TARGET, (0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension') ? ['multiBodiedExtension'] : []), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_synced_block', true) ? ['bodiedSyncBlock'] : []));
+});
 var isContainerNode = function isContainerNode(node) {
-  if ((0, _experiments.editorExperiment)('platform_synced_block', true)) {
-    return PARENT_WITH_END_DROP_TARGET_SYNC_BLOCK.includes(node.type.name);
-  }
-  return PARENT_WITH_END_DROP_TARGET.includes(node.type.name);
+  return getContainerNodeTypes().includes(node.type.name);
 };
 var canMoveNodeOrSliceToPos = exports.canMoveNodeOrSliceToPos = function canMoveNodeOrSliceToPos(state, node, parent, index, $toPos, activeNode) {
   // For deciding to show drop targets or not when multiple nodes are selected

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

@@ -6,11 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.findDropTargetDecs = exports.dropTargetDecorations = exports.createLayoutDropTargetDecoration = exports.createDropTargetDecoration = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _uuid = _interopRequireDefault(require("uuid"));
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../ui/consts");
@@ -23,8 +26,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
-var PARENT_WITH_END_DROP_TARGET_NEXT = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension', 'bodiedSyncBlock'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
+var getParentTypesWithEndDropTarget = (0, _memoizeOne.default)(function () {
+  return [].concat(PARENT_WITH_END_DROP_TARGET, (0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension') ? ['multiBodiedExtension'] : []), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_synced_block', true) ? ['bodiedSyncBlock'] : []));
+});
 var shouldDescend = function shouldDescend(node) {
   return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
 };
@@ -197,6 +202,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
   var selectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
   var selectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
   var handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom && activeNodePos <= selectionTo;
+  var parentTypesWithEndDropTarget = getParentTypesWithEndDropTarget();
   newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var depth = 0;
     // drop target deco at the end position
@@ -244,7 +250,6 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       pushNodeStack(node, depth);
       return false; //not valid pos, so nested not valid either
     }
-    var parentTypesWithEndDropTarget = (0, _experiments.editorExperiment)('platform_synced_block', true) ? PARENT_WITH_END_DROP_TARGET_NEXT : PARENT_WITH_END_DROP_TARGET;
     var parentTypeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _utils.getBaseNodeTypeName)(parent.type) : parent.type.name;
     if (parent.lastChild === node && !(0, _utils.isEmptyParagraph)(node) && parentTypesWithEndDropTarget.includes(parentTypeName)) {
       endPos = pos + node.nodeSize;

package/dist/cjs/pm-plugins/quick-insert-calculate-position.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.calculatePosition = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../ui/consts");
 var _anchorName = require("../ui/utils/anchor-name");
 var _domAttrName = require("../ui/utils/dom-attr-name");
@@ -34,7 +35,7 @@ var calculatePosition = exports.calculatePosition = function calculatePosition(_
   });
   var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(safeAnchorName, "\"]"));
   var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
-  var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
+  var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension' || rootNodeType === 'multiBodiedExtension' && (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension');
   var isBlockCard = rootNodeType === 'blockCard';
   var isEmbedCard = rootNodeType === 'embedCard';
   var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;

package/dist/cjs/pm-plugins/utils/drag-handle-positions.js

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.shouldMaskNodeControls = exports.shouldBeSticky = exports.getTopPosition = exports.getNodeHeight = exports.getLeftPosition = exports.getControlHeightCSSValue = exports.getControlBottomCSSValue = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _styles = require("@atlaskit/editor-common/styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../../ui/consts");
 var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
@@ -59,8 +63,11 @@ var getLeftPosition = exports.getLeftPosition = function getLeftPosition(dom, ty
 var getNodeHeight = exports.getNodeHeight = function getNodeHeight(dom, anchor, anchorRectCache) {
   return (anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchor)) || (dom === null || dom === void 0 ? void 0 : dom.offsetHeight);
 };
+var getStickyNodes = (0, _memoizeOne.default)(function () {
+  return [].concat(STICKY_NODES, (0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension') ? ['multiBodiedExtension'] : []));
+});
 var shouldBeSticky = exports.shouldBeSticky = function shouldBeSticky(nodeType) {
-  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && STICKY_NODES.includes(nodeType);
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && getStickyNodes().includes(nodeType);
 };
 var getControlBottomCSSValue = exports.getControlBottomCSSValue = function getControlBottomCSSValue(anchor, isSticky, isTopLevelNode, isLayoutColumn) {
   return (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {

package/dist/cjs/ui/consts.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dropTargetMarginMap;
 var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
@@ -92,6 +93,11 @@ var getNestedNodeLeftPaddingMargin = exports.getNestedNodeLeftPaddingMargin = fu
   switch (nodeType) {
     case 'bodiedExtension':
       return '28px';
+    case 'multiBodiedExtension':
+      if ((0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension')) {
+        return '28px';
+      }
+      return "".concat(_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_NARROW_GAP, "px");
     case 'expand':
     case 'nestedExpand':
       return '24px';
@@ -234,6 +240,10 @@ var spacingBetweenNodesForPreview = exports.spacingBetweenNodesForPreview = {
     top: '0',
     bottom: '0'
   },
+  multiBodiedExtension: {
+    top: '0',
+    bottom: '0'
+  },
   extension: {
     top: '0',
     bottom: '0'
@@ -313,6 +323,10 @@ var nodeMargins = exports.nodeMargins = {
     top: 0,
     bottom: 0
   },
+  multiBodiedExtension: {
+    top: 0,
+    bottom: 0
+  },
   extension: {
     top: 12,
     bottom: 12

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

@@ -469,7 +469,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       if (nodeType === 'layoutColumn' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
         tr.setMeta('toggleLayoutColumnMenu', {
           anchorPos: startPos,
-          isOpen: true
+          isOpen: true,
+          openedViaKeyboard: false
         });
       }
       var resolvedStartPos = tr.doc.resolve(startPos);
@@ -523,7 +524,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       if (nodeType === 'layoutColumn' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
         tr.setMeta('toggleLayoutColumnMenu', {
           anchorPos: startPos,
-          isOpen: true
+          isOpen: true,
+          openedViaKeyboard: false
         });
       }
       var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
@@ -611,6 +613,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.startPreservingSelection()({
           tr: tr
         });
+        if (nodeType === 'layoutColumn' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+          tr.setMeta('toggleLayoutColumnMenu', {
+            anchorPos: startPos,
+            isOpen: true,
+            openedViaKeyboard: true
+          });
+        }
         var rootPos = (0, _experiments.editorExperiment)('platform_synced_block', true) ? tr.doc.resolve(startPos).before(1) : undefined;
         var triggerByNode = (0, _experiments.editorExperiment)('platform_synced_block', true) ? {
           nodeType: nodeType,
@@ -819,7 +828,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }) : anchorName;
     var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(safeAnchorName, "\"]"));
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
-    var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension';
+    var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension');
     var isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;
     var isEmbedCard = nodeType === 'embedCard';
     var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;

package/dist/cjs/ui/inline-drop-target.js

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -83,7 +84,7 @@ var getWidthOffset = function getWidthOffset(node, width, position) {
       return isLeftPosition ? "0.5*(var(--ak-editor--line-length) - ".concat(width, ")") : "-0.5*(var(--ak-editor--line-length) - ".concat(width, ")");
     }
   }
-  if (node.type.name === 'bodiedExtension' || node.type.name === 'extension') {
+  if (node.type.name === 'bodiedExtension' || node.type.name === 'extension' || node.type.name === 'multiBodiedExtension' && (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension')) {
     return '-12px';
   }
 };

package/dist/cjs/ui/quick-insert-button.js

@@ -191,7 +191,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     });
     var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(safeAnchorName, "\"]"));
     var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
-    var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
+    var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension' || rootNodeType === 'multiBodiedExtension' && (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension');
     var isBlockCard = rootNodeType === 'blockCard';
     var isEmbedCard = rootNodeType === 'embedCard';
     var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;

package/dist/es2019/pm-plugins/decorations-drop-target-active.js

@@ -1,6 +1,8 @@
+import memoizeOne from 'memoize-one';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNodeAnchor } from './decorations-common';
@@ -14,18 +16,15 @@ import { canMoveNodeToIndex, canMoveSliceToIndex, isInSameLayout } from './utils
  * List of parent node types that can have child nodes
  */
 const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
-const PARENT_WITH_END_DROP_TARGET_SYNC_BLOCK = [...PARENT_WITH_END_DROP_TARGET, 'bodiedSyncBlock'];
 
 /**
  * List of node types that does not allow drop targets at before or after the node.
  */
 const NODE_WITH_NO_PARENT_POS = ['tableCell', 'tableHeader', 'layoutColumn'];
 const UNSUPPORTED_LAYOUT_CONTENT = ['syncBlock', 'bodiedSyncBlock'];
+const getContainerNodeTypes = memoizeOne(() => [...PARENT_WITH_END_DROP_TARGET, ...(fg('confluence_frontend_native_tabs_extension') ? ['multiBodiedExtension'] : []), ...(editorExperiment('platform_synced_block', true) ? ['bodiedSyncBlock'] : [])]);
 const isContainerNode = node => {
-  if (editorExperiment('platform_synced_block', true)) {
-    return PARENT_WITH_END_DROP_TARGET_SYNC_BLOCK.includes(node.type.name);
-  }
-  return PARENT_WITH_END_DROP_TARGET.includes(node.type.name);
+  return getContainerNodeTypes().includes(node.type.name);
 };
 export const canMoveNodeOrSliceToPos = (state, node, parent, index, $toPos, activeNode) => {
   // For deciding to show drop targets or not when multiple nodes are selected

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

@@ -1,9 +1,11 @@
 import { createElement } from 'react';
+import memoizeOne from 'memoize-one';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { getBaseNodeTypeName, isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
@@ -14,8 +16,8 @@ import { maxLayoutColumnSupported } from './utils/consts';
 import { canMoveNodeToIndex, canMoveSliceToIndex, isInSameLayout } from './utils/validation';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
 const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
-const PARENT_WITH_END_DROP_TARGET_NEXT = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension', 'bodiedSyncBlock'];
 const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
+const getParentTypesWithEndDropTarget = memoizeOne(() => [...PARENT_WITH_END_DROP_TARGET, ...(fg('confluence_frontend_native_tabs_extension') ? ['multiBodiedExtension'] : []), ...(editorExperiment('platform_synced_block', true) ? ['bodiedSyncBlock'] : [])]);
 const shouldDescend = node => {
   return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
 };
@@ -186,6 +188,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
   const selectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
   const selectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
   const handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom && activeNodePos <= selectionTo;
+  const parentTypesWithEndDropTarget = getParentTypesWithEndDropTarget();
   newState.doc.nodesBetween(docFrom, docTo, (node, pos, parent, index) => {
     let depth = 0;
     // drop target deco at the end position
@@ -233,7 +236,6 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
       pushNodeStack(node, depth);
       return false; //not valid pos, so nested not valid either
     }
-    const parentTypesWithEndDropTarget = editorExperiment('platform_synced_block', true) ? PARENT_WITH_END_DROP_TARGET_NEXT : PARENT_WITH_END_DROP_TARGET;
     const parentTypeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(parent.type) : parent.type.name;
     if (parent.lastChild === node && !isEmptyParagraph(node) && parentTypesWithEndDropTarget.includes(parentTypeName)) {
       endPos = pos + node.nodeSize;

package/dist/es2019/pm-plugins/quick-insert-calculate-position.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from '../ui/consts';
 import { refreshAnchorName } from '../ui/utils/anchor-name';
 import { getAnchorAttrName } from '../ui/utils/dom-attr-name';
@@ -26,7 +27,7 @@ export const calculatePosition = ({
   });
   const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${safeAnchorName}"]`);
   const hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
-  const isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
+  const isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension' || rootNodeType === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension');
   const isBlockCard = rootNodeType === 'blockCard';
   const isEmbedCard = rootNodeType === 'embedCard';
   const isMacroInteractionUpdates = macroInteractionUpdates && isExtension;

package/dist/es2019/pm-plugins/utils/drag-handle-positions.js

@@ -1,4 +1,6 @@
+import memoizeOne from 'memoize-one';
 import { DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, dragHandleGap } from '../../ui/consts';
 const STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
@@ -51,8 +53,9 @@ export const getLeftPosition = (dom, type, innerContainer, macroInteractionUpdat
 
 // anchorRectCache seems to have a 100% cache miss rate
 export const getNodeHeight = (dom, anchor, anchorRectCache) => (anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchor)) || (dom === null || dom === void 0 ? void 0 : dom.offsetHeight);
+const getStickyNodes = memoizeOne(() => [...STICKY_NODES, ...(fg('confluence_frontend_native_tabs_extension') ? ['multiBodiedExtension'] : [])]);
 export const shouldBeSticky = nodeType => {
-  return editorExperiment('platform_editor_controls', 'variant1') && STICKY_NODES.includes(nodeType);
+  return editorExperiment('platform_editor_controls', 'variant1') && getStickyNodes().includes(nodeType);
 };
 export const getControlBottomCSSValue = (anchor, isSticky, isTopLevelNode, isLayoutColumn) => {
   return editorExperiment('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {

package/dist/es2019/ui/consts.js

@@ -1,6 +1,7 @@
 import { DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { breakoutResizableNodes as breakoutResizableNodesNew } from '@atlaskit/editor-common/utils';
 import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const DRAG_HANDLE_HEIGHT = 24;
 export const DRAG_HANDLE_BORDER_RADIUS = 4;
@@ -83,6 +84,11 @@ export const getNestedNodeLeftPaddingMargin = nodeType => {
   switch (nodeType) {
     case 'bodiedExtension':
       return '28px';
+    case 'multiBodiedExtension':
+      if (fg('confluence_frontend_native_tabs_extension')) {
+        return '28px';
+      }
+      return `${DRAG_HANDLE_WIDTH + DRAG_HANDLE_NARROW_GAP}px`;
     case 'expand':
     case 'nestedExpand':
       return '24px';
@@ -243,6 +249,10 @@ export const spacingBetweenNodesForPreview = {
     top: '0',
     bottom: '0'
   },
+  multiBodiedExtension: {
+    top: '0',
+    bottom: '0'
+  },
   extension: {
     top: '0',
     bottom: '0'
@@ -322,6 +332,10 @@ export const nodeMargins = {
     top: 0,
     bottom: 0
   },
+  multiBodiedExtension: {
+    top: 0,
+    bottom: 0
+  },
   extension: {
     top: 12,
     bottom: 12

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

@@ -444,7 +444,8 @@ export const DragHandle = ({
       if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
         tr.setMeta('toggleLayoutColumnMenu', {
           anchorPos: startPos,
-          isOpen: true
+          isOpen: true,
+          openedViaKeyboard: false
         });
       }
       const resolvedStartPos = tr.doc.resolve(startPos);
@@ -499,7 +500,8 @@ export const DragHandle = ({
       if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
         tr.setMeta('toggleLayoutColumnMenu', {
           anchorPos: startPos,
-          isOpen: true
+          isOpen: true,
+          openedViaKeyboard: false
         });
       }
       const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
@@ -587,6 +589,13 @@ export const DragHandle = ({
         api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.startPreservingSelection()({
           tr
         });
+        if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+          tr.setMeta('toggleLayoutColumnMenu', {
+            anchorPos: startPos,
+            isOpen: true,
+            openedViaKeyboard: true
+          });
+        }
         const rootPos = editorExperiment('platform_synced_block', true) ? tr.doc.resolve(startPos).before(1) : undefined;
         const triggerByNode = editorExperiment('platform_synced_block', true) ? {
           nodeType,
@@ -799,7 +808,7 @@ export const DragHandle = ({
     }) : anchorName;
     const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${safeAnchorName}"]`);
     const hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
-    const isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension';
+    const isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension');
     const isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;
     const isEmbedCard = nodeType === 'embedCard';
     const isMacroInteractionUpdates = macroInteractionUpdates && isExtension;

package/dist/es2019/ui/inline-drop-target.js

@@ -8,6 +8,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -72,7 +73,7 @@ const getWidthOffset = (node, width, position) => {
       return isLeftPosition ? `0.5*(var(--ak-editor--line-length) - ${width})` : `-0.5*(var(--ak-editor--line-length) - ${width})`;
     }
   }
-  if (node.type.name === 'bodiedExtension' || node.type.name === 'extension') {
+  if (node.type.name === 'bodiedExtension' || node.type.name === 'extension' || node.type.name === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension')) {
     return '-12px';
   }
 };

package/dist/es2019/ui/quick-insert-button.js

@@ -180,7 +180,7 @@ export const TypeAheadControl = ({
     });
     const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${safeAnchorName}"]`);
     const hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
-    const isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
+    const isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension' || rootNodeType === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension');
     const isBlockCard = rootNodeType === 'blockCard';
     const isEmbedCard = rootNodeType === 'embedCard';
     const isMacroInteractionUpdates = macroInteractionUpdates && isExtension;

package/dist/esm/pm-plugins/decorations-drop-target-active.js

@@ -1,6 +1,9 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import memoizeOne from 'memoize-one';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNodeAnchor } from './decorations-common';
@@ -14,18 +17,17 @@ import { canMoveNodeToIndex, canMoveSliceToIndex, isInSameLayout } from './utils
  * List of parent node types that can have child nodes
  */
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
-var PARENT_WITH_END_DROP_TARGET_SYNC_BLOCK = [].concat(PARENT_WITH_END_DROP_TARGET, ['bodiedSyncBlock']);
 
 /**
  * List of node types that does not allow drop targets at before or after the node.
  */
 var NODE_WITH_NO_PARENT_POS = ['tableCell', 'tableHeader', 'layoutColumn'];
 var UNSUPPORTED_LAYOUT_CONTENT = ['syncBlock', 'bodiedSyncBlock'];
+var getContainerNodeTypes = memoizeOne(function () {
+  return [].concat(PARENT_WITH_END_DROP_TARGET, _toConsumableArray(fg('confluence_frontend_native_tabs_extension') ? ['multiBodiedExtension'] : []), _toConsumableArray(editorExperiment('platform_synced_block', true) ? ['bodiedSyncBlock'] : []));
+});
 var isContainerNode = function isContainerNode(node) {
-  if (editorExperiment('platform_synced_block', true)) {
-    return PARENT_WITH_END_DROP_TARGET_SYNC_BLOCK.includes(node.type.name);
-  }
-  return PARENT_WITH_END_DROP_TARGET.includes(node.type.name);
+  return getContainerNodeTypes().includes(node.type.name);
 };
 export var canMoveNodeOrSliceToPos = function canMoveNodeOrSliceToPos(state, node, parent, index, $toPos, activeNode) {
   // For deciding to show drop targets or not when multiple nodes are selected

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

@@ -1,12 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { createElement } from 'react';
+import memoizeOne from 'memoize-one';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { getBaseNodeTypeName, isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
@@ -17,8 +20,10 @@ import { maxLayoutColumnSupported } from './utils/consts';
 import { canMoveNodeToIndex, canMoveSliceToIndex, isInSameLayout } from './utils/validation';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
-var PARENT_WITH_END_DROP_TARGET_NEXT = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension', 'bodiedSyncBlock'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
+var getParentTypesWithEndDropTarget = memoizeOne(function () {
+  return [].concat(PARENT_WITH_END_DROP_TARGET, _toConsumableArray(fg('confluence_frontend_native_tabs_extension') ? ['multiBodiedExtension'] : []), _toConsumableArray(editorExperiment('platform_synced_block', true) ? ['bodiedSyncBlock'] : []));
+});
 var shouldDescend = function shouldDescend(node) {
   return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
 };
@@ -191,6 +196,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
   var selectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
   var selectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
   var handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom && activeNodePos <= selectionTo;
+  var parentTypesWithEndDropTarget = getParentTypesWithEndDropTarget();
   newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var depth = 0;
     // drop target deco at the end position
@@ -238,7 +244,6 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
       pushNodeStack(node, depth);
       return false; //not valid pos, so nested not valid either
     }
-    var parentTypesWithEndDropTarget = editorExperiment('platform_synced_block', true) ? PARENT_WITH_END_DROP_TARGET_NEXT : PARENT_WITH_END_DROP_TARGET;
     var parentTypeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(parent.type) : parent.type.name;
     if (parent.lastChild === node && !isEmptyParagraph(node) && parentTypesWithEndDropTarget.includes(parentTypeName)) {
       endPos = pos + node.nodeSize;

package/dist/esm/pm-plugins/quick-insert-calculate-position.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { fg } from '@atlaskit/platform-feature-flags';
 import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from '../ui/consts';
 import { refreshAnchorName } from '../ui/utils/anchor-name';
 import { getAnchorAttrName } from '../ui/utils/dom-attr-name';
@@ -28,7 +29,7 @@ export var calculatePosition = function calculatePosition(_ref) {
   });
   var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
   var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
-  var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
+  var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension' || rootNodeType === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension');
   var isBlockCard = rootNodeType === 'blockCard';
   var isEmbedCard = rootNodeType === 'embedCard';
   var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;

package/dist/esm/pm-plugins/utils/drag-handle-positions.js

@@ -1,4 +1,7 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import memoizeOne from 'memoize-one';
 import { DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, dragHandleGap } from '../../ui/consts';
 var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
@@ -53,8 +56,11 @@ export var getLeftPosition = function getLeftPosition(dom, type, innerContainer,
 export var getNodeHeight = function getNodeHeight(dom, anchor, anchorRectCache) {
   return (anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchor)) || (dom === null || dom === void 0 ? void 0 : dom.offsetHeight);
 };
+var getStickyNodes = memoizeOne(function () {
+  return [].concat(STICKY_NODES, _toConsumableArray(fg('confluence_frontend_native_tabs_extension') ? ['multiBodiedExtension'] : []));
+});
 export var shouldBeSticky = function shouldBeSticky(nodeType) {
-  return editorExperiment('platform_editor_controls', 'variant1') && STICKY_NODES.includes(nodeType);
+  return editorExperiment('platform_editor_controls', 'variant1') && getStickyNodes().includes(nodeType);
 };
 export var getControlBottomCSSValue = function getControlBottomCSSValue(anchor, isSticky, isTopLevelNode, isLayoutColumn) {
   return editorExperiment('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {

package/dist/esm/ui/consts.js

@@ -3,6 +3,7 @@ var _dropTargetMarginMap;
 import { DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { breakoutResizableNodes as breakoutResizableNodesNew } from '@atlaskit/editor-common/utils';
 import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var DRAG_HANDLE_HEIGHT = 24;
 export var DRAG_HANDLE_BORDER_RADIUS = 4;
@@ -85,6 +86,11 @@ export var getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMar
   switch (nodeType) {
     case 'bodiedExtension':
       return '28px';
+    case 'multiBodiedExtension':
+      if (fg('confluence_frontend_native_tabs_extension')) {
+        return '28px';
+      }
+      return "".concat(DRAG_HANDLE_WIDTH + DRAG_HANDLE_NARROW_GAP, "px");
     case 'expand':
     case 'nestedExpand':
       return '24px';
@@ -227,6 +233,10 @@ export var spacingBetweenNodesForPreview = {
     top: '0',
     bottom: '0'
   },
+  multiBodiedExtension: {
+    top: '0',
+    bottom: '0'
+  },
   extension: {
     top: '0',
     bottom: '0'
@@ -306,6 +316,10 @@ export var nodeMargins = {
     top: 0,
     bottom: 0
   },
+  multiBodiedExtension: {
+    top: 0,
+    bottom: 0
+  },
   extension: {
     top: 12,
     bottom: 12

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

@@ -465,7 +465,8 @@ export var DragHandle = function DragHandle(_ref) {
       if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
         tr.setMeta('toggleLayoutColumnMenu', {
           anchorPos: startPos,
-          isOpen: true
+          isOpen: true,
+          openedViaKeyboard: false
         });
       }
       var resolvedStartPos = tr.doc.resolve(startPos);
@@ -519,7 +520,8 @@ export var DragHandle = function DragHandle(_ref) {
       if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
         tr.setMeta('toggleLayoutColumnMenu', {
           anchorPos: startPos,
-          isOpen: true
+          isOpen: true,
+          openedViaKeyboard: false
         });
       }
       var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
@@ -607,6 +609,13 @@ export var DragHandle = function DragHandle(_ref) {
         api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.startPreservingSelection()({
           tr: tr
         });
+        if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+          tr.setMeta('toggleLayoutColumnMenu', {
+            anchorPos: startPos,
+            isOpen: true,
+            openedViaKeyboard: true
+          });
+        }
         var rootPos = editorExperiment('platform_synced_block', true) ? tr.doc.resolve(startPos).before(1) : undefined;
         var triggerByNode = editorExperiment('platform_synced_block', true) ? {
           nodeType: nodeType,
@@ -815,7 +824,7 @@ export var DragHandle = function DragHandle(_ref) {
     }) : anchorName;
     var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
     var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
-    var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension';
+    var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension');
     var isBlockCard = nodeType === 'blockCard' && !!blockCardWidth;
     var isEmbedCard = nodeType === 'embedCard';
     var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;

package/dist/esm/ui/inline-drop-target.js

@@ -10,6 +10,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -74,7 +75,7 @@ var getWidthOffset = function getWidthOffset(node, width, position) {
       return isLeftPosition ? "0.5*(var(--ak-editor--line-length) - ".concat(width, ")") : "-0.5*(var(--ak-editor--line-length) - ".concat(width, ")");
     }
   }
-  if (node.type.name === 'bodiedExtension' || node.type.name === 'extension') {
+  if (node.type.name === 'bodiedExtension' || node.type.name === 'extension' || node.type.name === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension')) {
     return '-12px';
   }
 };

package/dist/esm/ui/quick-insert-button.js

@@ -185,7 +185,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
     });
     var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
     var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
-    var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
+    var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension' || rootNodeType === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension');
     var isBlockCard = rootNodeType === 'blockCard';
     var isEmbedCard = rootNodeType === 'embedCard';
     var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "12.0.1",
+	"version": "12.1.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,7 +41,7 @@
 		"@atlaskit/editor-plugin-quick-insert": "^11.0.0",
 		"@atlaskit/editor-plugin-selection": "^11.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^8.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^11.0.0",
+		"@atlaskit/editor-plugin-type-ahead": "^11.1.0",
 		"@atlaskit/editor-plugin-user-intent": "^9.0.0",
 		"@atlaskit/editor-plugin-width": "^12.0.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
@@ -56,8 +56,8 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/theme": "^25.0.0",
-		"@atlaskit/tmp-editor-statsig": "^89.0.0",
-		"@atlaskit/tokens": "^13.1.0",
+		"@atlaskit/tmp-editor-statsig": "^89.4.0",
+		"@atlaskit/tokens": "^13.3.0",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.2.0",
+		"@atlaskit/editor-common": "^115.7.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -146,6 +146,9 @@
 		},
 		"confluence_remix_button_right_side_block_fg": {
 			"type": "boolean"
+		},
+		"confluence_frontend_native_tabs_extension": {
+			"type": "boolean"
 		}
 	},
 	"devDependencies": {