@atlaskit/editor-plugin-block-controls 3.19.11 → 3.19.13

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.19.13
+
+### Patch Changes
+
+- [#180394](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/180394)
+  [`3d81ac950c9a0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d81ac950c9a0) -
+  Add alignment mark to widget spec under FG platform_editor_breakout_resizing_widget_fix
+
+## 3.19.12
+
+### Patch Changes
+
+- [#175086](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175086)
+  [`8e86022627723`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e86022627723) -
+  Fix spacing between drag handle and table numbered column
+- Updated dependencies
+
 ## 3.19.11
 
 ### Patch Changes

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

@@ -430,7 +430,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
       api === null || api === void 0 || api.core.actions.focus();
       var $mappedTo = tr.doc.resolve(mappedTo);
       var expandAncestor = (0, _utils2.findParentNodeOfTypeClosestToPos)($to, [expand, nestedExpand]);
-      if (expandAncestor && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6')) {
+      if (expandAncestor) {
         var wasExpandExpanded = _expand.expandedState.get(expandAncestor.node);
         var updatedExpandAncestor = (0, _utils2.findParentNodeOfTypeClosestToPos)($mappedTo, [expand, nestedExpand]);
         if (wasExpandExpanded !== undefined && updatedExpandAncestor) {

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.shouldDescendIntoNode = exports.nodeDecorations = exports.findNodeDecs = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorationsCommon = require("./decorations-common");
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
@@ -18,7 +17,7 @@ var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDesce
   // Optimisation to avoid drawing node decorations for empty table cells
   if (['tableCell', 'tableHeader'].includes(node.type.name)) {
     var _node$firstChild;
-    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6') ? node.firstChild.childCount === 0 : true)) {
+    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && node.firstChild.childCount === 0) {
       return false;
     }
   }

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

@@ -15,6 +15,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dragHandle = require("../ui/drag-handle");
 var _decorationsCommon = require("./decorations-common");
+var _marks = require("./utils/marks");
 var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
   var anchorName = "--node-anchor-paragraph-0";
   var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
@@ -29,7 +30,16 @@ var findHandleDec = exports.findHandleDec = function findHandleDec(decorations,
     return spec.type === _decorationsCommon.TYPE_HANDLE_DEC;
   });
 };
-var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) {
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(_ref) {
+  var api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    pos = _ref.pos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType,
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
+    handleOptions = _ref.handleOptions,
+    anchorRectCache = _ref.anchorRectCache,
+    editorState = _ref.editorState;
   if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true, {
     exposure: true
   })) {
@@ -43,11 +53,10 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
-     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
-     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
-     * this exact position at the top of the DOM.
+     * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
+     * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: [],
+    marks: (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_widget_fix') ? (0, _marks.getActiveBlockMarks)(editorState, pos) : [],
     destroy: function destroy(node) {
       unbind && unbind();
       if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -11,6 +11,7 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _quickInsertButton = require("../ui/quick-insert-button");
+var _marks = require("./utils/marks");
 var _vanillaQuickInsert = require("./vanilla-quick-insert");
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
@@ -18,7 +19,17 @@ var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonD
     return spec.type === TYPE_QUICK_INSERT;
   });
 };
-var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) {
+var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function quickInsertButtonDecoration(_ref) {
+  var api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    rootPos = _ref.rootPos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType,
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
+    rootAnchorName = _ref.rootAnchorName,
+    rootNodeType = _ref.rootNodeType,
+    anchorRectCache = _ref.anchorRectCache,
+    editorState = _ref.editorState;
   var key = (0, _uuid.default)();
   var cleanupCallbacks = [];
   var widgetSpec = (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? {
@@ -26,11 +37,11 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
     type: TYPE_QUICK_INSERT,
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
-     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
-     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
-     * this exact position at the top of the DOM.
+     * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
+     * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: [],
+
+    marks: (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_widget_fix') ? (0, _marks.getActiveBlockMarks)(editorState, rootPos) : [],
     destroy: function destroy(_) {
       if ((0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
         nodeViewPortalProviderAPI.remove(key);

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

@@ -419,14 +419,35 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       var _activeNode9, _activeNode0, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.pos);
       decorations = decorations.remove(_oldHandle);
-      var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions, anchorRectCache);
+      var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)({
+        api: api,
+        formatMessage: formatMessage,
+        pos: (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos,
+        anchorName: (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName,
+        nodeType: (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType,
+        handleOptions: (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions,
+        nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
+        anchorRectCache: anchorRectCache,
+        editorState: newState
+      });
       decorations = decorations.add(newState.doc, [handleDec]);
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
       var _activeNode1, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
       var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
-      var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType, anchorRectCache);
+      var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)({
+        api: api,
+        formatMessage: formatMessage,
+        anchorName: (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.anchorName,
+        nodeType: (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.nodeType,
+        nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
+        rootPos: (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.rootPos,
+        rootAnchorName: (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName,
+        rootNodeType: (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType,
+        anchorRectCache: anchorRectCache,
+        editorState: newState
+      });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
     }
   }

package/dist/cjs/pm-plugins/utils/marks.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActiveBlockMarks = void 0;
+/**
+ * Returns list of block marks on schema that widgets are allowed to render inside
+ * Currently
+ * - indent
+ * - alignment
+ * @param state - The editor state
+ * @returns The block marks
+ * @example
+ * ```ts
+ * const marks = getBlockMarks(state);
+ * console.log(marks);
+ * // [indent, alignment]
+ * ```
+ */
+var getActiveBlockMarks = exports.getActiveBlockMarks = function getActiveBlockMarks(state, pos) {
+  var alignment = state.schema.marks.alignment;
+  var resolvedPos = state.doc.resolve(pos);
+  // find all active marks at the position
+  var marks = resolvedPos.marks();
+  return marks.filter(function (mark) {
+    return mark.type === alignment;
+  });
+};

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

@@ -20,6 +20,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _consts = require("@atlaskit/editor-shared-styles/consts");
 var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
 var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -33,7 +34,7 @@ var _analytics2 = require("../pm-plugins/utils/analytics");
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
 var _getSelection = require("../pm-plugins/utils/getSelection");
 var _selection = require("../pm-plugins/utils/selection");
-var _consts = require("./consts");
+var _consts2 = require("./consts");
 var _dragPreview = require("./drag-preview");
 var _anchorName = require("./utils/anchor-name");
 var _visibilityContainer = require("./visibility-container");
@@ -74,6 +75,22 @@ var buttonWrapperStyles = (0, _react2.css)({
     boxSizing: 'border-box'
   }
 });
+var buttonWrapperStylesPatch = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    marginRight: -_consts.akEditorTableToolbarSize,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    paddingRight: _consts.akEditorTableToolbarSize
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    marginRight: -_consts.akEditorTableToolbarSize,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    paddingRight: _consts.akEditorTableToolbarSize
+  }
+});
 
 // update color to match quick insert button for new editor controls
 var dragHandleColor = (0, _react2.css)({
@@ -86,18 +103,18 @@ var dragHandleButtonStyles = (0, _react2.css)({
   justifyContent: 'center',
   alignItems: 'center',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: _consts.DRAG_HANDLE_HEIGHT,
+  height: _consts2.DRAG_HANDLE_HEIGHT,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  width: _consts.DRAG_HANDLE_WIDTH,
+  width: _consts2.DRAG_HANDLE_WIDTH,
   border: 'none',
   background: 'transparent',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: _consts.DRAG_HANDLE_BORDER_RADIUS,
+  borderRadius: _consts2.DRAG_HANDLE_BORDER_RADIUS,
   // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
   color: "var(--ds-icon, #44546F)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  zIndex: _consts.DRAG_HANDLE_ZINDEX,
+  zIndex: _consts2.DRAG_HANDLE_ZINDEX,
   outline: 'none',
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
@@ -128,18 +145,18 @@ var dragHandleButtonStylesOld = (0, _react2.css)({
   justifyContent: 'center',
   alignItems: 'center',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: _consts.DRAG_HANDLE_HEIGHT,
+  height: _consts2.DRAG_HANDLE_HEIGHT,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  width: _consts.DRAG_HANDLE_WIDTH,
+  width: _consts2.DRAG_HANDLE_WIDTH,
   border: 'none',
   background: 'transparent',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: _consts.DRAG_HANDLE_BORDER_RADIUS,
+  borderRadius: _consts2.DRAG_HANDLE_BORDER_RADIUS,
   // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
   color: "var(--ds-icon, #44546F)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  zIndex: _consts.DRAG_HANDLE_ZINDEX,
+  zIndex: _consts2.DRAG_HANDLE_ZINDEX,
   outline: 'none',
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
@@ -164,14 +181,14 @@ var dragHandleContainerStyles = (0, _primitives.xcss)({
 });
 var tooltipContainerStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  bottom: "-".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
+  bottom: "-".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN, "px"),
   position: 'sticky',
   display: 'block',
   zIndex: 100 // card = 100
 });
 var tooltipContainerStylesStickyHeaderWithMask = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
+  top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN, "px"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     top: '0'
@@ -183,7 +200,7 @@ var tooltipContainerStylesStickyHeaderWithMask = (0, _react2.css)({
 });
 var tooltipContainerStylesStickyHeaderWithoutMask = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
+  top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN, "px"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
@@ -230,23 +247,23 @@ var handleIconDragStart = function handleIconDragStart(e) {
 };
 var getNodeSpacingForPreview = function getNodeSpacingForPreview(node) {
   if (!node) {
-    return _consts.spacingBetweenNodesForPreview['default'];
+    return _consts2.spacingBetweenNodesForPreview['default'];
   }
   var nodeTypeName = node.type.name;
   if (nodeTypeName === 'heading') {
-    return _consts.spacingBetweenNodesForPreview["heading".concat(node.attrs.level)] || _consts.spacingBetweenNodesForPreview['default'];
+    return _consts2.spacingBetweenNodesForPreview["heading".concat(node.attrs.level)] || _consts2.spacingBetweenNodesForPreview['default'];
   }
-  return _consts.spacingBetweenNodesForPreview[nodeTypeName] || _consts.spacingBetweenNodesForPreview['default'];
+  return _consts2.spacingBetweenNodesForPreview[nodeTypeName] || _consts2.spacingBetweenNodesForPreview['default'];
 };
 var getNodeMargins = function getNodeMargins(node) {
   if (!node) {
-    return _consts.nodeMargins['default'];
+    return _consts2.nodeMargins['default'];
   }
   var nodeTypeName = node.type.name;
   if (nodeTypeName === 'heading') {
-    return _consts.nodeMargins["heading".concat(node.attrs.level)] || _consts.nodeMargins['default'];
+    return _consts2.nodeMargins["heading".concat(node.attrs.level)] || _consts2.nodeMargins['default'];
   }
-  return _consts.nodeMargins[nodeTypeName] || _consts.nodeMargins['default'];
+  return _consts2.nodeMargins[nodeTypeName] || _consts2.nodeMargins['default'];
 };
 var useDragHandlePluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
   var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
@@ -339,7 +356,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
       if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
         tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
-        if (_consts.BLOCK_MENU_ENABLED && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+        if (_consts2.BLOCK_MENU_ENABLED && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
           var _api$blockControls;
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
             anchorName: anchorName
@@ -348,7 +365,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           });
           e.stopPropagation();
         }
-      } else if (isTopLevelNode && $anchor.depth <= _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
+      } else if (isTopLevelNode && $anchor.depth <= _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
         var _api$blockControls2;
         var alignAnchorHeadToSel = (0, _selection.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
         var selectionWithExpandedHead = (0, _selection.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
@@ -637,11 +654,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     if (supportsAnchor) {
       var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
-        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)")
+        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts2.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
+        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_consts2.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)(nodeType), "px)")
       }, bottom);
     }
-    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
@@ -683,11 +700,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     if (supportsAnchor) {
       var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
-        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)")
+        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts2.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
+        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_consts2.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)(nodeType), "px)")
       }, bottom);
     }
-    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
@@ -768,7 +785,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }
     var mSelect = api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
     var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
-    if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
+    if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
       setDragHandleDisabled(true);
     } else {
       setDragHandleDisabled(false);
@@ -905,7 +922,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         });
       }
     }, (0, _react2.jsx)("span", {
-      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles]
+      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
     }, renderButton()))));
   };
   var stickyWithoutTooltip = function stickyWithoutTooltip() {
@@ -919,7 +936,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }, (0, _react2.jsx)("span", {
       css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
     }, (0, _react2.jsx)("span", {
-      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles]
+      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
     }, renderButton())));
   };
   var buttonWithTooltip = function buttonWithTooltip() {

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

@@ -434,7 +434,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   api === null || api === void 0 ? void 0 : api.core.actions.focus();
   const $mappedTo = tr.doc.resolve(mappedTo);
   const expandAncestor = findParentNodeOfTypeClosestToPos($to, [expand, nestedExpand]);
-  if (expandAncestor && fg('platform_editor_element_dnd_nested_fix_patch_6')) {
+  if (expandAncestor) {
     const wasExpandExpanded = expandedState.get(expandAncestor.node);
     const updatedExpandAncestor = findParentNodeOfTypeClosestToPos($mappedTo, [expand, nestedExpand]);
     if (wasExpandExpanded !== undefined && updatedExpandAncestor) {

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

@@ -1,5 +1,4 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { NESTED_DEPTH, getNodeAnchor, getNodeTypeWithLevel, TYPE_NODE_DEC } from './decorations-common';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
@@ -10,7 +9,7 @@ export const shouldDescendIntoNode = node => {
   // Optimisation to avoid drawing node decorations for empty table cells
   if (['tableCell', 'tableHeader'].includes(node.type.name)) {
     var _node$firstChild;
-    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && (fg('platform_editor_element_dnd_nested_fix_patch_6') ? node.firstChild.childCount === 0 : true)) {
+    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && node.firstChild.childCount === 0) {
       return false;
     }
   }

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

@@ -7,6 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
+import { getActiveBlockMarks } from './utils/marks';
 export const emptyParagraphNodeDecorations = () => {
   const anchorName = `--node-anchor-paragraph-0`;
   const style = `anchor-name: ${anchorName}; margin-top: 0px;`;
@@ -20,7 +21,17 @@ export const emptyParagraphNodeDecorations = () => {
 export const findHandleDec = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_HANDLE_DEC);
 };
-export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) => {
+export const dragHandleDecoration = ({
+  api,
+  formatMessage,
+  pos,
+  anchorName,
+  nodeType,
+  nodeViewPortalProviderAPI,
+  handleOptions,
+  anchorRectCache,
+  editorState
+}) => {
   if (!editorExperiment('platform_editor_block_control_optimise_render', true, {
     exposure: true
   })) {
@@ -34,11 +45,10 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
     testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
-     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
-     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
-     * this exact position at the top of the DOM.
+     * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
+     * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: [],
+    marks: fg('platform_editor_breakout_resizing_widget_fix') ? getActiveBlockMarks(editorState, pos) : [],
     destroy: node => {
       unbind && unbind();
       if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {

package/dist/es2019/pm-plugins/decorations-quick-insert-button.js

@@ -4,12 +4,24 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { QuickInsertWithVisibility, TypeAheadControl } from '../ui/quick-insert-button';
+import { getActiveBlockMarks } from './utils/marks';
 import { createVanillaButton } from './vanilla-quick-insert';
 const TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export const findQuickInsertInsertButtonDecoration = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_QUICK_INSERT);
 };
-export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) => {
+export const quickInsertButtonDecoration = ({
+  api,
+  formatMessage,
+  rootPos,
+  anchorName,
+  nodeType,
+  nodeViewPortalProviderAPI,
+  rootAnchorName,
+  rootNodeType,
+  anchorRectCache,
+  editorState
+}) => {
   const key = uuid();
   const cleanupCallbacks = [];
   const widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
@@ -17,11 +29,11 @@ export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorN
     type: TYPE_QUICK_INSERT,
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
-     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
-     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
-     * this exact position at the top of the DOM.
+     * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
+     * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: [],
+
+    marks: fg('platform_editor_breakout_resizing_widget_fix') ? getActiveBlockMarks(editorState, rootPos) : [],
     destroy: _ => {
       if (fg('platform_editor_fix_widget_destroy')) {
         nodeViewPortalProviderAPI.remove(key);

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

@@ -418,14 +418,35 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
       var _activeNode9, _activeNode0, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       const oldHandle = findHandleDec(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.pos);
       decorations = decorations.remove(oldHandle);
-      const handleDec = dragHandleDecoration(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions, anchorRectCache);
+      const handleDec = dragHandleDecoration({
+        api,
+        formatMessage,
+        pos: (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos,
+        anchorName: (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName,
+        nodeType: (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType,
+        handleOptions: (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions,
+        nodeViewPortalProviderAPI,
+        anchorRectCache,
+        editorState: newState
+      });
       decorations = decorations.add(newState.doc, [handleDec]);
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && editorExperiment('platform_editor_controls', 'variant1')) {
       var _activeNode1, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
       const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
-      const quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType, anchorRectCache);
+      const quickInsertButton = quickInsertButtonDecoration({
+        api,
+        formatMessage,
+        anchorName: (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.anchorName,
+        nodeType: (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.nodeType,
+        nodeViewPortalProviderAPI,
+        rootPos: (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.rootPos,
+        rootAnchorName: (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName,
+        rootNodeType: (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType,
+        anchorRectCache,
+        editorState: newState
+      });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
     }
   }

package/dist/es2019/pm-plugins/utils/marks.js

@@ -0,0 +1,23 @@
+/**
+ * Returns list of block marks on schema that widgets are allowed to render inside
+ * Currently
+ * - indent
+ * - alignment
+ * @param state - The editor state
+ * @returns The block marks
+ * @example
+ * ```ts
+ * const marks = getBlockMarks(state);
+ * console.log(marks);
+ * // [indent, alignment]
+ * ```
+ */
+export const getActiveBlockMarks = (state, pos) => {
+  const {
+    alignment
+  } = state.schema.marks;
+  const resolvedPos = state.doc.resolve(pos);
+  // find all active marks at the position
+  const marks = resolvedPos.marks();
+  return marks.filter(mark => mark.type === alignment);
+};

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

@@ -17,6 +17,7 @@ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorTableToolbarSize } from '@atlaskit/editor-shared-styles/consts';
 import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -66,6 +67,22 @@ const buttonWrapperStyles = css({
     boxSizing: 'border-box'
   }
 });
+const buttonWrapperStylesPatch = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    marginRight: -akEditorTableToolbarSize,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    paddingRight: akEditorTableToolbarSize
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    marginRight: -akEditorTableToolbarSize,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    paddingRight: akEditorTableToolbarSize
+  }
+});
 
 // update color to match quick insert button for new editor controls
 const dragHandleColor = css({
@@ -889,7 +906,7 @@ export const DragHandle = ({
       });
     }
   }, jsx("span", {
-    css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
+    css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, fg('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
   }, renderButton()))));
   const stickyWithoutTooltip = () => jsx(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -901,7 +918,7 @@ export const DragHandle = ({
   }, jsx("span", {
     css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
   }, jsx("span", {
-    css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
+    css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, fg('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
   }, renderButton())));
   const buttonWithTooltip = () => jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {

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

@@ -424,7 +424,7 @@ export var moveNode = function moveNode(api) {
       api === null || api === void 0 || api.core.actions.focus();
       var $mappedTo = tr.doc.resolve(mappedTo);
       var expandAncestor = findParentNodeOfTypeClosestToPos($to, [expand, nestedExpand]);
-      if (expandAncestor && fg('platform_editor_element_dnd_nested_fix_patch_6')) {
+      if (expandAncestor) {
         var wasExpandExpanded = expandedState.get(expandAncestor.node);
         var updatedExpandAncestor = findParentNodeOfTypeClosestToPos($mappedTo, [expand, nestedExpand]);
         if (wasExpandExpanded !== undefined && updatedExpandAncestor) {

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

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { NESTED_DEPTH, getNodeAnchor, getNodeTypeWithLevel, TYPE_NODE_DEC } from './decorations-common';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
@@ -11,7 +10,7 @@ export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   // Optimisation to avoid drawing node decorations for empty table cells
   if (['tableCell', 'tableHeader'].includes(node.type.name)) {
     var _node$firstChild;
-    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && (fg('platform_editor_element_dnd_nested_fix_patch_6') ? node.firstChild.childCount === 0 : true)) {
+    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && node.firstChild.childCount === 0) {
       return false;
     }
   }

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

@@ -8,6 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
+import { getActiveBlockMarks } from './utils/marks';
 export var emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
   var anchorName = "--node-anchor-paragraph-0";
   var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
@@ -22,7 +23,16 @@ export var findHandleDec = function findHandleDec(decorations, from, to) {
     return spec.type === TYPE_HANDLE_DEC;
   });
 };
-export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) {
+export var dragHandleDecoration = function dragHandleDecoration(_ref) {
+  var api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    pos = _ref.pos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType,
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
+    handleOptions = _ref.handleOptions,
+    anchorRectCache = _ref.anchorRectCache,
+    editorState = _ref.editorState;
   if (!editorExperiment('platform_editor_block_control_optimise_render', true, {
     exposure: true
   })) {
@@ -36,11 +46,10 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
     testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
-     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
-     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
-     * this exact position at the top of the DOM.
+     * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
+     * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: [],
+    marks: fg('platform_editor_breakout_resizing_widget_fix') ? getActiveBlockMarks(editorState, pos) : [],
     destroy: function destroy(node) {
       unbind && unbind();
       if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {

package/dist/esm/pm-plugins/decorations-quick-insert-button.js

@@ -4,6 +4,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { QuickInsertWithVisibility, TypeAheadControl } from '../ui/quick-insert-button';
+import { getActiveBlockMarks } from './utils/marks';
 import { createVanillaButton } from './vanilla-quick-insert';
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export var findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
@@ -11,7 +12,17 @@ export var findQuickInsertInsertButtonDecoration = function findQuickInsertInser
     return spec.type === TYPE_QUICK_INSERT;
   });
 };
-export var quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) {
+export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_ref) {
+  var api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    rootPos = _ref.rootPos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType,
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
+    rootAnchorName = _ref.rootAnchorName,
+    rootNodeType = _ref.rootNodeType,
+    anchorRectCache = _ref.anchorRectCache,
+    editorState = _ref.editorState;
   var key = uuid();
   var cleanupCallbacks = [];
   var widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
@@ -19,11 +30,11 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(ap
     type: TYPE_QUICK_INSERT,
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
-     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
-     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
-     * this exact position at the top of the DOM.
+     * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
+     * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: [],
+
+    marks: fg('platform_editor_breakout_resizing_widget_fix') ? getActiveBlockMarks(editorState, rootPos) : [],
     destroy: function destroy(_) {
       if (fg('platform_editor_fix_widget_destroy')) {
         nodeViewPortalProviderAPI.remove(key);

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

@@ -412,14 +412,35 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
       var _activeNode9, _activeNode0, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       var _oldHandle = findHandleDec(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.pos);
       decorations = decorations.remove(_oldHandle);
-      var handleDec = dragHandleDecoration(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions, anchorRectCache);
+      var handleDec = dragHandleDecoration({
+        api: api,
+        formatMessage: formatMessage,
+        pos: (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos,
+        anchorName: (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName,
+        nodeType: (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType,
+        handleOptions: (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions,
+        nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
+        anchorRectCache: anchorRectCache,
+        editorState: newState
+      });
       decorations = decorations.add(newState.doc, [handleDec]);
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && editorExperiment('platform_editor_controls', 'variant1')) {
       var _activeNode1, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
       var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
-      var quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType, anchorRectCache);
+      var quickInsertButton = quickInsertButtonDecoration({
+        api: api,
+        formatMessage: formatMessage,
+        anchorName: (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.anchorName,
+        nodeType: (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.nodeType,
+        nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
+        rootPos: (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.rootPos,
+        rootAnchorName: (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName,
+        rootNodeType: (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType,
+        anchorRectCache: anchorRectCache,
+        editorState: newState
+      });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
     }
   }

package/dist/esm/pm-plugins/utils/marks.js

@@ -0,0 +1,23 @@
+/**
+ * Returns list of block marks on schema that widgets are allowed to render inside
+ * Currently
+ * - indent
+ * - alignment
+ * @param state - The editor state
+ * @returns The block marks
+ * @example
+ * ```ts
+ * const marks = getBlockMarks(state);
+ * console.log(marks);
+ * // [indent, alignment]
+ * ```
+ */
+export var getActiveBlockMarks = function getActiveBlockMarks(state, pos) {
+  var alignment = state.schema.marks.alignment;
+  var resolvedPos = state.doc.resolve(pos);
+  // find all active marks at the position
+  var marks = resolvedPos.marks();
+  return marks.filter(function (mark) {
+    return mark.type === alignment;
+  });
+};

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

@@ -22,6 +22,7 @@ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorTableToolbarSize } from '@atlaskit/editor-shared-styles/consts';
 import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -71,6 +72,22 @@ var buttonWrapperStyles = css({
     boxSizing: 'border-box'
   }
 });
+var buttonWrapperStylesPatch = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    marginRight: -akEditorTableToolbarSize,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    paddingRight: akEditorTableToolbarSize
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    marginRight: -akEditorTableToolbarSize,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    paddingRight: akEditorTableToolbarSize
+  }
+});
 
 // update color to match quick insert button for new editor controls
 var dragHandleColor = css({
@@ -902,7 +919,7 @@ export var DragHandle = function DragHandle(_ref) {
         });
       }
     }, jsx("span", {
-      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
+      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, fg('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
     }, renderButton()))));
   };
   var stickyWithoutTooltip = function stickyWithoutTooltip() {
@@ -916,7 +933,7 @@ export var DragHandle = function DragHandle(_ref) {
     }, jsx("span", {
       css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
     }, jsx("span", {
-      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
+      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, fg('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
     }, renderButton())));
   };
   var buttonWithTooltip = function buttonWithTooltip() {

package/dist/types/pm-plugins/decorations-drag-handle.d.ts

@@ -1,9 +1,22 @@
 import { type IntlShape } from 'react-intl-next';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, handleOptions?: HandleOptions, anchorRectCache?: AnchorRectCache) => Decoration;
+type DragHandleDecorationParams = {
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    formatMessage: IntlShape['formatMessage'];
+    pos: number;
+    anchorName: string;
+    nodeType: string;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
+    handleOptions?: HandleOptions;
+    anchorRectCache?: AnchorRectCache;
+    editorState: EditorState;
+};
+export declare const dragHandleDecoration: ({ api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache, editorState, }: DragHandleDecorationParams) => Decoration;
+export {};

package/dist/types/pm-plugins/decorations-quick-insert-button.d.ts

@@ -1,8 +1,22 @@
 import { type IntlShape } from 'react-intl-next';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const findQuickInsertInsertButtonDecoration: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const quickInsertButtonDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], rootPos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, rootAnchorName?: string, rootNodeType?: string, anchorRectCache?: AnchorRectCache) => Decoration;
+type QuickInsertButtonDecorationParams = {
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    formatMessage: IntlShape['formatMessage'];
+    rootPos: number;
+    anchorName: string;
+    nodeType: string;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
+    rootAnchorName?: string;
+    rootNodeType?: string;
+    anchorRectCache?: AnchorRectCache;
+    editorState: EditorState;
+};
+export declare const quickInsertButtonDecoration: ({ api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache, editorState, }: QuickInsertButtonDecorationParams) => Decoration;
+export {};

package/dist/types/pm-plugins/utils/marks.d.ts

@@ -0,0 +1,16 @@
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Returns list of block marks on schema that widgets are allowed to render inside
+ * Currently
+ * - indent
+ * - alignment
+ * @param state - The editor state
+ * @returns The block marks
+ * @example
+ * ```ts
+ * const marks = getBlockMarks(state);
+ * console.log(marks);
+ * // [indent, alignment]
+ * ```
+ */
+export declare const getActiveBlockMarks: (state: EditorState, pos: number) => import("prosemirror-model").Mark[];

package/dist/types-ts4.5/pm-plugins/decorations-drag-handle.d.ts

@@ -1,9 +1,22 @@
 import { type IntlShape } from 'react-intl-next';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, handleOptions?: HandleOptions, anchorRectCache?: AnchorRectCache) => Decoration;
+type DragHandleDecorationParams = {
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    formatMessage: IntlShape['formatMessage'];
+    pos: number;
+    anchorName: string;
+    nodeType: string;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
+    handleOptions?: HandleOptions;
+    anchorRectCache?: AnchorRectCache;
+    editorState: EditorState;
+};
+export declare const dragHandleDecoration: ({ api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache, editorState, }: DragHandleDecorationParams) => Decoration;
+export {};

package/dist/types-ts4.5/pm-plugins/decorations-quick-insert-button.d.ts

@@ -1,8 +1,22 @@
 import { type IntlShape } from 'react-intl-next';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const findQuickInsertInsertButtonDecoration: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const quickInsertButtonDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], rootPos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, rootAnchorName?: string, rootNodeType?: string, anchorRectCache?: AnchorRectCache) => Decoration;
+type QuickInsertButtonDecorationParams = {
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    formatMessage: IntlShape['formatMessage'];
+    rootPos: number;
+    anchorName: string;
+    nodeType: string;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
+    rootAnchorName?: string;
+    rootNodeType?: string;
+    anchorRectCache?: AnchorRectCache;
+    editorState: EditorState;
+};
+export declare const quickInsertButtonDecoration: ({ api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache, editorState, }: QuickInsertButtonDecorationParams) => Decoration;
+export {};

package/dist/types-ts4.5/pm-plugins/utils/marks.d.ts

@@ -0,0 +1,16 @@
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Returns list of block marks on schema that widgets are allowed to render inside
+ * Currently
+ * - indent
+ * - alignment
+ * @param state - The editor state
+ * @returns The block marks
+ * @example
+ * ```ts
+ * const marks = getBlockMarks(state);
+ * console.log(marks);
+ * // [indent, alignment]
+ * ```
+ */
+export declare const getActiveBlockMarks: (state: EditorState, pos: number) => import("prosemirror-model").Mark[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.19.11",
+	"version": "3.19.13",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -8,8 +8,7 @@
 		"registry": "https://registry.npmjs.org/"
 	},
 	"atlassian": {
-		"team": "Editor: Jenga",
-		"runReact18": true
+		"team": "Editor: Jenga"
 	},
 	"repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
 	"main": "dist/cjs/index.js",
@@ -33,13 +32,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^107.3.0",
+		"@atlaskit/editor-common": "^107.4.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.1.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.4.0",
 		"@atlaskit/editor-plugin-interaction": "^3.0.0",
-		"@atlaskit/editor-plugin-metrics": "^3.5.0",
+		"@atlaskit/editor-plugin-metrics": "^3.6.0",
 		"@atlaskit/editor-plugin-quick-insert": "^2.6.0",
 		"@atlaskit/editor-plugin-selection": "^2.2.0",
 		"@atlaskit/editor-plugin-type-ahead": "^2.7.0",
@@ -56,7 +55,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^8.4.0",
+		"@atlaskit/tmp-editor-statsig": "^8.6.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -114,9 +113,6 @@
 		"platform_editor_element_drag_and_drop_ed_23873": {
 			"type": "boolean"
 		},
-		"platform_editor_element_dnd_nested_fix_patch_6": {
-			"type": "boolean"
-		},
 		"platform_editor_use_nested_table_pm_nodes": {
 			"type": "boolean"
 		},
@@ -191,6 +187,9 @@
 		},
 		"platform_editor_controls_patch_15": {
 			"type": "boolean"
+		},
+		"platform_editor_breakout_resizing_widget_fix": {
+			"type": "boolean"
 		}
 	}
 }