@atlaskit/editor-plugin-block-controls 3.10.1 → 3.10.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.10.3
+
+### Patch Changes
+
+- [#139698](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139698)
+  [`cf8ea53ed0264`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf8ea53ed0264) -
+  Clean-up nested expand feature gate
+- [#142866](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142866)
+  [`b2ff4351e7e00`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b2ff4351e7e00) -
+  Fix missing destroy callback for quick insert
+- Updated dependencies
+
+## 3.10.2
+
+### Patch Changes
+
+- [#142214](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142214)
+  [`9643cb1c29edb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9643cb1c29edb) -
+  [ux] Improve and seperate sticky control masking into own gate
+
 ## 3.10.1
 
 ### Patch Changes

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

@@ -30,7 +30,9 @@ var findHandleDec = exports.findHandleDec = function findHandleDec(decorations,
   });
 };
 var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) {
-  (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
+    (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
+  }
   var unbind;
   var key = (0, _uuid.default)();
   return _view.Decoration.widget(pos, function (view, getPosUnsafe) {
@@ -121,8 +123,12 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     side: -1,
     type: _decorationsCommon.TYPE_HANDLE_DEC,
     testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
-    destroy: function destroy() {
-      return unbind && unbind();
+    destroy: function destroy(node) {
+      unbind && unbind();
+      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        _reactDom.default.unmountComponentAtNode(node);
+      }
     }
   });
 };

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

@@ -57,6 +57,11 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
     return element;
   }, {
     side: -2,
-    type: TYPE_QUICK_INSERT
+    type: TYPE_QUICK_INSERT,
+    destroy: function destroy(_) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
   });
 };

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

@@ -77,6 +77,6 @@ var getControlHeightCSSValue = exports.getControlHeightCSSValue = function getCo
 var shouldMaskNodeControls = exports.shouldMaskNodeControls = function shouldMaskNodeControls(nodeType, isTopLevelNode) {
   return (
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    isTopLevelNode && ['table'].includes(nodeType) && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
+    isTopLevelNode && ['table'].includes(nodeType) && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_mask') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
   );
 };

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

@@ -144,13 +144,6 @@ function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos,
     }
   }
 
-  // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
-  if ((0, _experiments.editorExperiment)('nested-expand-in-expand', false)) {
-    if (destParentNodeType === expand && (activeNodeType === expand || activeNodeType === nestedExpand)) {
-      return false;
-    }
-  }
-
   // NOTE: this will block drop targets from showing for dragging a table into another table
   // unless nested tables are supported and the nesting depth does not exceed 1
   if ((destParentNodeType === tableCell || destParentNodeType === tableHeader) && activeNodeType === table) {

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

@@ -47,18 +47,32 @@ var iconWrapperStyles = (0, _primitives.xcss)({
   justifyContent: 'center',
   alignItems: 'center'
 });
-var extendedIconWrapperStyles = (0, _react2.css)({
+var buttonWrapperStyles = (0, _react2.css)({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  background: "var(--ds-surface, #FFFFFF)",
-  marginBottom: "var(--ds-space-negative-100, -8px)",
-  paddingBottom: "var(--ds-space-100, 8px)",
-  marginTop: "var(--ds-space-negative-100, -8px)",
-  paddingTop: "var(--ds-space-100, 8px)",
-  marginRight: "var(--ds-space-negative-100, -8px)",
-  paddingRight: "var(--ds-space-100, 8px)",
-  borderRadius: '6px'
+  // 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) &': {
+    background: "linear-gradient(to bottom, ".concat("var(--ds-surface, #FFFFFF)", " 90%, transparent)"),
+    marginBottom: "var(--ds-space-negative-200, -16px)",
+    paddingBottom: "var(--ds-space-200, 16px)",
+    marginTop: "var(--ds-space-negative-400, -32px)",
+    paddingTop: "calc(".concat("var(--ds-space-400, 32px)", " - 1px)"),
+    marginRight: "var(--ds-space-negative-150, -12px)",
+    paddingRight: "var(--ds-space-150, 12px)",
+    boxSizing: 'border-box'
+  },
+  // 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 tr.sticky) &': {
+    background: "linear-gradient(to bottom, ".concat("var(--ds-surface, #FFFFFF)", " 90%, transparent)"),
+    marginBottom: "var(--ds-space-negative-200, -16px)",
+    paddingBottom: "var(--ds-space-200, 16px)",
+    marginTop: "var(--ds-space-negative-400, -32px)",
+    paddingTop: "calc(".concat("var(--ds-space-400, 32px)", " - 1px)"),
+    marginRight: "var(--ds-space-negative-150, -12px)",
+    paddingRight: "var(--ds-space-150, 12px)",
+    boxSizing: 'border-box'
+  }
 });
 
 // update color to match quick insert button for new editor controls
@@ -149,34 +163,36 @@ var dragHandleContainerStyles = (0, _primitives.xcss)({
   boxSizing: 'border-box'
 });
 var tooltipContainerStyles = (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"),
   // 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"),
   position: 'sticky',
+  display: 'block',
   zIndex: 100 // card = 100
 });
-var tooltipContainerStylesWithNodeControls = (0, _react2.css)({
-  top: '0',
+var tooltipContainerStylesStickyHeaderWithMask = (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"),
-  position: 'sticky',
-  zIndex: 100 // card = 100
-});
-var tooltipContainerStylesStickyHeader = (0, _react2.css)({
+  top: "".concat(_consts.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
-    top: _styles.tableControlsSpacing - _consts.STICKY_CONTROLS_TOP_MARGIN
+    top: '0'
+  },
+  // 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 tr.sticky) &': {
+    top: '0'
   }
 });
-
-// We need this to work around adjacent breakout marks wrapping the controls widget decorations
-var tooltipContainerStylesStickyHeaderWithMarksFix = (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"),
+  // 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
+    top: _styles.tableControlsSpacing
+  },
   // 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 tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: _styles.tableControlsSpacing - _consts.STICKY_CONTROLS_TOP_MARGIN
+    top: _styles.tableControlsSpacing
   }
 });
 var dragHandleMultiLineSelectionFixFirefox = (0, _react2.css)({
@@ -773,7 +789,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, (0, _react2.jsx)("span", {
-      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
+      css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
     }, (0, _react2.jsx)(_tooltip.default, {
       content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
         helpDescriptors: helpDescriptors
@@ -787,9 +803,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         });
       }
     }, (0, _react2.jsx)("span", {
-      css:
-      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-      (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && extendedIconWrapperStyles
+      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles]
     }, renderButton()))));
   };
   var stickyWithoutTooltip = function stickyWithoutTooltip() {
@@ -801,11 +815,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, (0, _react2.jsx)("span", {
-      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
+      css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
     }, (0, _react2.jsx)("span", {
-      css:
-      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-      (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && extendedIconWrapperStyles
+      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles]
     }, renderButton())));
   };
   var buttonWithTooltip = function buttonWithTooltip() {

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

@@ -105,6 +105,7 @@ var tooltipContainerStyles = (0, _react2.css)({
   top: '8px',
   bottom: '-8px',
   position: 'sticky',
+  display: 'block',
   zIndex: 'card'
 });
 var tooltipContainerStylesStickyHeader = (0, _react2.css)({

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

@@ -21,7 +21,9 @@ 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) => {
-  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
+  if (!fg('platform_editor_fix_widget_destroy')) {
+    unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
+  }
   let unbind;
   const key = uuid();
   return Decoration.widget(pos, (view, getPosUnsafe) => {
@@ -112,6 +114,12 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
     side: -1,
     type: TYPE_HANDLE_DEC,
     testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
-    destroy: () => unbind && unbind()
+    destroy: node => {
+      unbind && unbind();
+      if (fg('platform_editor_fix_widget_destroy')) {
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        ReactDOM.unmountComponentAtNode(node);
+      }
+    }
   });
 };

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

@@ -44,6 +44,11 @@ export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorN
     return element;
   }, {
     side: -2,
-    type: TYPE_QUICK_INSERT
+    type: TYPE_QUICK_INSERT,
+    destroy: _ => {
+      if (fg('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
   });
 };

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

@@ -69,6 +69,6 @@ export const getControlHeightCSSValue = (nodeHeight, isSticky, isTopLevelNode, f
 export const shouldMaskNodeControls = (nodeType, isTopLevelNode) => {
   return (
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    isTopLevelNode && ['table'].includes(nodeType) && fg('platform_editor_controls_sticky_controls') && editorExperiment('platform_editor_controls', 'variant1')
+    isTopLevelNode && ['table'].includes(nodeType) && fg('platform_editor_controls_sticky_controls') && fg('platform_editor_controls_sticky_mask') && editorExperiment('platform_editor_controls', 'variant1')
   );
 };

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

@@ -135,13 +135,6 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
     }
   }
 
-  // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
-  if (editorExperiment('nested-expand-in-expand', false)) {
-    if (destParentNodeType === expand && (activeNodeType === expand || activeNodeType === nestedExpand)) {
-      return false;
-    }
-  }
-
   // NOTE: this will block drop targets from showing for dragging a table into another table
   // unless nested tables are supported and the nesting depth does not exceed 1
   if ((destParentNodeType === tableCell || destParentNodeType === tableHeader) && activeNodeType === table) {

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

@@ -39,18 +39,32 @@ const iconWrapperStyles = xcss({
   justifyContent: 'center',
   alignItems: 'center'
 });
-const extendedIconWrapperStyles = css({
+const buttonWrapperStyles = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  background: "var(--ds-surface, #FFFFFF)",
-  marginBottom: "var(--ds-space-negative-100, -8px)",
-  paddingBottom: "var(--ds-space-100, 8px)",
-  marginTop: "var(--ds-space-negative-100, -8px)",
-  paddingTop: "var(--ds-space-100, 8px)",
-  marginRight: "var(--ds-space-negative-100, -8px)",
-  paddingRight: "var(--ds-space-100, 8px)",
-  borderRadius: '6px'
+  // 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) &': {
+    background: `linear-gradient(to bottom, ${"var(--ds-surface, #FFFFFF)"} 90%, transparent)`,
+    marginBottom: "var(--ds-space-negative-200, -16px)",
+    paddingBottom: "var(--ds-space-200, 16px)",
+    marginTop: "var(--ds-space-negative-400, -32px)",
+    paddingTop: `calc(${"var(--ds-space-400, 32px)"} - 1px)`,
+    marginRight: "var(--ds-space-negative-150, -12px)",
+    paddingRight: "var(--ds-space-150, 12px)",
+    boxSizing: 'border-box'
+  },
+  // 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 tr.sticky) &': {
+    background: `linear-gradient(to bottom, ${"var(--ds-surface, #FFFFFF)"} 90%, transparent)`,
+    marginBottom: "var(--ds-space-negative-200, -16px)",
+    paddingBottom: "var(--ds-space-200, 16px)",
+    marginTop: "var(--ds-space-negative-400, -32px)",
+    paddingTop: `calc(${"var(--ds-space-400, 32px)"} - 1px)`,
+    marginRight: "var(--ds-space-negative-150, -12px)",
+    paddingRight: "var(--ds-space-150, 12px)",
+    boxSizing: 'border-box'
+  }
 });
 
 // update color to match quick insert button for new editor controls
@@ -141,34 +155,36 @@ const dragHandleContainerStyles = xcss({
   boxSizing: 'border-box'
 });
 const tooltipContainerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  top: `${STICKY_CONTROLS_TOP_MARGIN}px`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   bottom: `-${STICKY_CONTROLS_TOP_MARGIN}px`,
   position: 'sticky',
+  display: 'block',
   zIndex: 100 // card = 100
 });
-const tooltipContainerStylesWithNodeControls = css({
-  top: '0',
+const tooltipContainerStylesStickyHeaderWithMask = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  bottom: `-${STICKY_CONTROLS_TOP_MARGIN}px`,
-  position: 'sticky',
-  zIndex: 100 // card = 100
-});
-const tooltipContainerStylesStickyHeader = css({
+  top: `${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
-    top: tableControlsSpacing - STICKY_CONTROLS_TOP_MARGIN
+    top: '0'
+  },
+  // 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 tr.sticky) &': {
+    top: '0'
   }
 });
-
-// We need this to work around adjacent breakout marks wrapping the controls widget decorations
-const tooltipContainerStylesStickyHeaderWithMarksFix = css({
+const tooltipContainerStylesStickyHeaderWithoutMask = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  top: `${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
+    top: tableControlsSpacing
+  },
   // 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 tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: tableControlsSpacing - STICKY_CONTROLS_TOP_MARGIN
+    top: tableControlsSpacing
   }
 });
 const dragHandleMultiLineSelectionFixFirefox = css({
@@ -757,7 +773,7 @@ export const DragHandle = ({
     as: "span",
     testId: "block-ctrl-drag-handle-container"
   }, jsx("span", {
-    css: [shouldMaskNodeControls(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
+    css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
   }, jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
@@ -771,9 +787,7 @@ export const DragHandle = ({
       });
     }
   }, jsx("span", {
-    css:
-    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    shouldMaskNodeControls(nodeType, isTopLevelNode) && extendedIconWrapperStyles
+    css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
   }, renderButton()))));
   const stickyWithoutTooltip = () => jsx(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -783,11 +797,9 @@ export const DragHandle = ({
     as: "span",
     testId: "block-ctrl-drag-handle-container"
   }, jsx("span", {
-    css: [shouldMaskNodeControls(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
+    css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
   }, jsx("span", {
-    css:
-    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    shouldMaskNodeControls(nodeType, isTopLevelNode) && extendedIconWrapperStyles
+    css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
   }, renderButton())));
   const buttonWithTooltip = () => jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {

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

@@ -95,6 +95,7 @@ const tooltipContainerStyles = css({
   top: '8px',
   bottom: '-8px',
   position: 'sticky',
+  display: 'block',
   zIndex: 'card'
 });
 const tooltipContainerStylesStickyHeader = css({

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

@@ -23,7 +23,9 @@ export var findHandleDec = function findHandleDec(decorations, from, to) {
   });
 };
 export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) {
-  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
+  if (!fg('platform_editor_fix_widget_destroy')) {
+    unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
+  }
   var unbind;
   var key = uuid();
   return Decoration.widget(pos, function (view, getPosUnsafe) {
@@ -114,8 +116,12 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
     side: -1,
     type: TYPE_HANDLE_DEC,
     testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
-    destroy: function destroy() {
-      return unbind && unbind();
+    destroy: function destroy(node) {
+      unbind && unbind();
+      if (fg('platform_editor_fix_widget_destroy')) {
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        ReactDOM.unmountComponentAtNode(node);
+      }
     }
   });
 };

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

@@ -50,6 +50,11 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(ap
     return element;
   }, {
     side: -2,
-    type: TYPE_QUICK_INSERT
+    type: TYPE_QUICK_INSERT,
+    destroy: function destroy(_) {
+      if (fg('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
   });
 };

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

@@ -71,6 +71,6 @@ export var getControlHeightCSSValue = function getControlHeightCSSValue(nodeHeig
 export var shouldMaskNodeControls = function shouldMaskNodeControls(nodeType, isTopLevelNode) {
   return (
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    isTopLevelNode && ['table'].includes(nodeType) && fg('platform_editor_controls_sticky_controls') && editorExperiment('platform_editor_controls', 'variant1')
+    isTopLevelNode && ['table'].includes(nodeType) && fg('platform_editor_controls_sticky_controls') && fg('platform_editor_controls_sticky_mask') && editorExperiment('platform_editor_controls', 'variant1')
   );
 };

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

@@ -134,13 +134,6 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
     }
   }
 
-  // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
-  if (editorExperiment('nested-expand-in-expand', false)) {
-    if (destParentNodeType === expand && (activeNodeType === expand || activeNodeType === nestedExpand)) {
-      return false;
-    }
-  }
-
   // NOTE: this will block drop targets from showing for dragging a table into another table
   // unless nested tables are supported and the nesting depth does not exceed 1
   if ((destParentNodeType === tableCell || destParentNodeType === tableHeader) && activeNodeType === table) {

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

@@ -44,18 +44,32 @@ var iconWrapperStyles = xcss({
   justifyContent: 'center',
   alignItems: 'center'
 });
-var extendedIconWrapperStyles = css({
+var buttonWrapperStyles = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  background: "var(--ds-surface, #FFFFFF)",
-  marginBottom: "var(--ds-space-negative-100, -8px)",
-  paddingBottom: "var(--ds-space-100, 8px)",
-  marginTop: "var(--ds-space-negative-100, -8px)",
-  paddingTop: "var(--ds-space-100, 8px)",
-  marginRight: "var(--ds-space-negative-100, -8px)",
-  paddingRight: "var(--ds-space-100, 8px)",
-  borderRadius: '6px'
+  // 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) &': {
+    background: "linear-gradient(to bottom, ".concat("var(--ds-surface, #FFFFFF)", " 90%, transparent)"),
+    marginBottom: "var(--ds-space-negative-200, -16px)",
+    paddingBottom: "var(--ds-space-200, 16px)",
+    marginTop: "var(--ds-space-negative-400, -32px)",
+    paddingTop: "calc(".concat("var(--ds-space-400, 32px)", " - 1px)"),
+    marginRight: "var(--ds-space-negative-150, -12px)",
+    paddingRight: "var(--ds-space-150, 12px)",
+    boxSizing: 'border-box'
+  },
+  // 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 tr.sticky) &': {
+    background: "linear-gradient(to bottom, ".concat("var(--ds-surface, #FFFFFF)", " 90%, transparent)"),
+    marginBottom: "var(--ds-space-negative-200, -16px)",
+    paddingBottom: "var(--ds-space-200, 16px)",
+    marginTop: "var(--ds-space-negative-400, -32px)",
+    paddingTop: "calc(".concat("var(--ds-space-400, 32px)", " - 1px)"),
+    marginRight: "var(--ds-space-negative-150, -12px)",
+    paddingRight: "var(--ds-space-150, 12px)",
+    boxSizing: 'border-box'
+  }
 });
 
 // update color to match quick insert button for new editor controls
@@ -146,34 +160,36 @@ var dragHandleContainerStyles = xcss({
   boxSizing: 'border-box'
 });
 var tooltipContainerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  top: "".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   bottom: "-".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
   position: 'sticky',
+  display: 'block',
   zIndex: 100 // card = 100
 });
-var tooltipContainerStylesWithNodeControls = css({
-  top: '0',
+var tooltipContainerStylesStickyHeaderWithMask = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  bottom: "-".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
-  position: 'sticky',
-  zIndex: 100 // card = 100
-});
-var tooltipContainerStylesStickyHeader = css({
+  top: "".concat(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
-    top: tableControlsSpacing - STICKY_CONTROLS_TOP_MARGIN
+    top: '0'
+  },
+  // 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 tr.sticky) &': {
+    top: '0'
   }
 });
-
-// We need this to work around adjacent breakout marks wrapping the controls widget decorations
-var tooltipContainerStylesStickyHeaderWithMarksFix = css({
+var tooltipContainerStylesStickyHeaderWithoutMask = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  top: "".concat(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
+    top: tableControlsSpacing
+  },
   // 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 tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: tableControlsSpacing - STICKY_CONTROLS_TOP_MARGIN
+    top: tableControlsSpacing
   }
 });
 var dragHandleMultiLineSelectionFixFirefox = css({
@@ -770,7 +786,7 @@ export var DragHandle = function DragHandle(_ref) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, jsx("span", {
-      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
+      css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
     }, jsx(Tooltip, {
       content: jsx(TooltipContentWithMultipleShortcuts, {
         helpDescriptors: helpDescriptors
@@ -784,9 +800,7 @@ export var DragHandle = function DragHandle(_ref) {
         });
       }
     }, jsx("span", {
-      css:
-      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-      shouldMaskNodeControls(nodeType, isTopLevelNode) && extendedIconWrapperStyles
+      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
     }, renderButton()))));
   };
   var stickyWithoutTooltip = function stickyWithoutTooltip() {
@@ -798,11 +812,9 @@ export var DragHandle = function DragHandle(_ref) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, jsx("span", {
-      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
+      css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
     }, jsx("span", {
-      css:
-      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-      shouldMaskNodeControls(nodeType, isTopLevelNode) && extendedIconWrapperStyles
+      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
     }, renderButton())));
   };
   var buttonWithTooltip = function buttonWithTooltip() {

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

@@ -99,6 +99,7 @@ var tooltipContainerStyles = css({
   top: '8px',
   bottom: '-8px',
   position: 'sticky',
+  display: 'block',
   zIndex: 'card'
 });
 var tooltipContainerStylesStickyHeader = css({

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.10.1",
+	"version": "3.10.3",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,15 +33,15 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^103.7.0",
+		"@atlaskit/editor-common": "^103.9.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.4.0",
 		"@atlaskit/editor-plugin-metrics": "^3.4.0",
-		"@atlaskit/editor-plugin-quick-insert": "^2.3.0",
+		"@atlaskit/editor-plugin-quick-insert": "^2.4.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
-		"@atlaskit/editor-plugin-type-ahead": "^2.4.0",
+		"@atlaskit/editor-plugin-type-ahead": "^2.5.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
@@ -53,8 +53,8 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.1.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.9.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tmp-editor-statsig": "^4.12.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -175,6 +175,12 @@
 		},
 		"platform_editor_controls_patch_5": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_sticky_mask": {
+			"type": "boolean"
+		},
+		"platform_editor_fix_widget_destroy": {
+			"type": "boolean"
 		}
 	}
 }