@atlaskit/editor-plugin-block-controls 7.5.5 → 7.5.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.5.7
+
+### Patch Changes
+
+- [`2dfcadf1c9593`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2dfcadf1c9593) -
+  [ux] fix drag handle not appearing inside a panel/expand nested in a table
+- Updated dependencies
+
+## 7.5.6
+
+### Patch Changes
+
+- [`945cca63ae433`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/945cca63ae433) -
+  ED-29335: Fixed drop hints height not right for layout column inline drop targets
+- Updated dependencies
+
 ## 7.5.5
 
 ### Patch Changes

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

@@ -11,6 +11,8 @@ var _uuid = _interopRequireDefault(require("uuid"));
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../ui/consts");
 var _dropTarget = require("../ui/drop-target");
@@ -136,8 +138,9 @@ var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
+    var DropTargetLayoutComponent = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('editor_native_anchor_update_layout_drop_hint') ? _dropTargetLayout.DropTargetLayoutNativeAnchorSupport : _dropTargetLayout.DropTargetLayout;
     nodeViewPortalProviderAPI.render(function () {
-      return /*#__PURE__*/(0, _react.createElement)(_dropTargetLayout.DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
+      return /*#__PURE__*/(0, _react.createElement)(DropTargetLayoutComponent, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache
       }));

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -30,9 +30,13 @@ var getNodeSelector = function getNodeSelector(ignoreNodes, ignoreNodeDescendant
     return "[data-prosemirror-node-name=\"".concat(node, "\"]");
   });
   var ignoreNodeDescendantsSelectorList = ignoreNodeDescendants.map(function (node) {
+    if (node === 'table' && (0, _platformFeatureFlags.fg)('platform_editor_native_anchor_table_nested_fix')) {
+      // Special case for table to exclude its direct descendants
+      return ["[data-prosemirror-node-name=\"tableCell\"] > [data-node-anchor]", "[data-prosemirror-node-name=\"tableHeader\"] > [data-node-anchor]"];
+    }
     return "[data-prosemirror-node-name=\"".concat(node, "\"] [data-node-anchor]");
   });
-  var ignoreSelector = [].concat((0, _toConsumableArray2.default)(ignoreNodeSelectorList), (0, _toConsumableArray2.default)(ignoreNodeDescendantsSelectorList), ['[data-prosemirror-node-inline="true"]']).join(', ');
+  var ignoreSelector = [].concat((0, _toConsumableArray2.default)(ignoreNodeSelectorList), (0, _toConsumableArray2.default)(ignoreNodeDescendantsSelectorList.flat()), ['[data-prosemirror-node-inline="true"]']).join(', ');
   return "".concat(baseSelector, ":not(").concat(ignoreSelector, ")");
 };
 var getDefaultNodeSelector = (0, _memoizeOne.default)(function () {

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

@@ -99,7 +99,7 @@ var buttonWrapperStylesPatch = (0, _react2.css)({
 
 // update color to match quick insert button for new editor controls
 var dragHandleColor = (0, _react2.css)({
-  color: "var(--ds-icon-subtle, #626F86)"
+  color: "var(--ds-icon-subtle, #505258)"
 });
 var dragHandleButtonStyles = (0, _react2.css)({
   display: 'flex',

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DropTargetLayout = void 0;
+exports.DropTargetLayoutNativeAnchorSupport = exports.DropTargetLayout = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
@@ -130,9 +130,122 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
     edge: "right",
     gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
   }) : (isActiveAnchor || (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) && (0, _react2.jsx)("div", {
-    "data-testid": "block-ctrl-drop-hint"
+    "data-testid": "block-ctrl-drop-hint",
+    css: dropTargetLayoutHintStyle
+  }));
+};
+var DropTargetLayoutNativeAnchorSupport = exports.DropTargetLayoutNativeAnchorSupport = function DropTargetLayoutNativeAnchorSupport(props) {
+  var _api$blockControls3;
+  var api = props.api,
+    getPos = props.getPos,
+    parent = props.parent,
+    anchorRectCache = props.anchorRectCache;
+  var ref = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isDraggedOver = _useState4[0],
+    setIsDraggedOver = _useState4[1];
+  var anchorName = (0, _decorationsCommon.getNodeAnchor)(parent);
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    nextNodeAnchorName = _useState6[0],
+    setNextNodeAnchorName = _useState6[1];
+  var readNextNodeAnchor = (0, _react.useCallback)(function () {
+    var _ref$current2, _nextElementSibling$g;
+    var nextElementSibling = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || (_ref$current2 = _ref$current2.parentElement) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.nextElementSibling;
+    var attrName = (0, _domAttrName.getAnchorAttrName)();
+    var nextAnchorName = (_nextElementSibling$g = nextElementSibling === null || nextElementSibling === void 0 ? void 0 : nextElementSibling.getAttribute(attrName)) !== null && _nextElementSibling$g !== void 0 ? _nextElementSibling$g : null;
+    setNextNodeAnchorName(function (prev) {
+      return prev === nextAnchorName ? prev : nextAnchorName;
+    });
+  }, []);
+  var height = (0, _react.useMemo)(function () {
+    if (nextNodeAnchorName) {
+      if ((0, _anchorUtils.isAnchorSupported)()) {
+        return "anchor-size(".concat(nextNodeAnchorName, " height)");
+      } else if (anchorRectCache) {
+        var layoutColumnRect = anchorRectCache.getRect(nextNodeAnchorName);
+        return "".concat((layoutColumnRect === null || layoutColumnRect === void 0 ? void 0 : layoutColumnRect.height) || 0, "px");
+      }
+    }
+    // Stacked mode fallback: minimal height to avoid oversized hint on first render
+    return '0px';
+  }, [nextNodeAnchorName, anchorRectCache]);
+  (0, _react.useLayoutEffect)(function () {
+    var raf = requestAnimationFrame(function () {
+      readNextNodeAnchor();
+    });
+    return function () {
+      return cancelAnimationFrame(raf);
+    };
+  }, [readNextNodeAnchor]);
+  var dropTargetStackLayoutHintStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: height,
+    marginTop: "var(--ds-space-050, 4px)"
+  }));
+  var _useActiveAnchorTrack3 = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
+    _useActiveAnchorTrack4 = (0, _slicedToArray2.default)(_useActiveAnchorTrack3, 1),
+    isActiveAnchor = _useActiveAnchorTrack4[0];
+  var _ref4 = (api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.sharedState.currentState()) || {},
+    activeNode = _ref4.activeNode;
+  var onDrop = (0, _react.useCallback)(function () {
+    if (!activeNode) {
+      return;
+    }
+    var to = getPos();
+    var mappedTo;
+    if (to !== undefined) {
+      var _api$core3, _api$core4;
+      var from = activeNode.pos;
+      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
+        var _api$blockControls4;
+        var tr = _ref5.tr;
+        api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || (_api$blockControls4 = _api$blockControls4.commands) === null || _api$blockControls4 === void 0 || _api$blockControls4.moveToLayout(from, to)({
+          tr: tr
+        });
+        var insertColumnStep = (0, _updateSelection.getInsertLayoutStep)(tr);
+        mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+        return tr;
+      });
+      api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref6) {
+        var tr = _ref6.tr;
+        if (mappedTo !== undefined) {
+          (0, _updateSelection.updateSelection)(tr, mappedTo);
+        }
+        return tr;
+      });
+    }
+  }, [api, getPos, activeNode]);
+  (0, _react.useEffect)(function () {
+    if (ref.current) {
+      return (0, _adapter.dropTargetForElements)({
+        element: ref.current,
+        onDragEnter: function onDragEnter() {
+          setIsDraggedOver(true);
+          readNextNodeAnchor();
+        },
+        onDragLeave: function onDragLeave() {
+          setIsDraggedOver(false);
+        },
+        onDrop: onDrop
+      });
+    }
+  }, [onDrop, readNextNodeAnchor]);
+  if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
+    return null;
+  }
+  return (0, _react2.jsx)("div", {
+    ref: ref
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
+    css: [dropTargetLayoutStyle, dropTargetStackLayoutHintStyle],
+    "data-testid": "block-ctrl-drop-indicator"
+  }, isDraggedOver ? (0, _react2.jsx)(_box.DropIndicator, {
+    edge: "right",
+    gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
+  }) : (isActiveAnchor || (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) && (0, _react2.jsx)("div", {
+    "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
 };

package/dist/cjs/ui/global-styles.js

@@ -256,7 +256,7 @@ var quickInsertStyles = function quickInsertStyles() {
       zIndex: _constants.layers.card(),
       outline: 'none',
       cursor: 'pointer',
-      color: "var(--ds-icon-subtle, #626F86)"
+      color: "var(--ds-icon-subtle, #505258)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
     '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
@@ -270,11 +270,11 @@ var quickInsertStyles = function quickInsertStyles() {
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.blocks-quick-insert-button:hover': {
-      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.blocks-quick-insert-button:active': {
-      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.blocks-quick-insert-button:focus': {
@@ -299,7 +299,7 @@ var quickInsertStyles = function quickInsertStyles() {
       padding: "var(--ds-space-050, 4px)".concat(" 0"),
       boxSizing: 'border-box',
       maxWidth: '240px',
-      backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
+      backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
       color: "var(--ds-text-inverse, #FFFFFF)",
       font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
       insetBlockStart: "var(--ds-space-0, 0px)",

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

@@ -296,7 +296,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       onMouseDown: handleMouseDown
     }, (0, _react2.jsx)(_add.default, {
       label: "add",
-      color: "var(--ds-icon-subtle, #626F86)",
+      color: "var(--ds-icon-subtle, #505258)",
       size: "small"
     })));
   };

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

@@ -4,10 +4,12 @@ import uuid from 'uuid';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
-import { DropTargetLayout } from '../ui/drop-target-layout';
+import { DropTargetLayout, DropTargetLayoutNativeAnchorSupport } from '../ui/drop-target-layout';
 import { NESTED_DEPTH, TYPE_DROP_TARGET_DEC } from './decorations-common';
 import { maxLayoutColumnSupported } from './utils/consts';
 import { canMoveNodeToIndex, canMoveSliceToIndex, isInSameLayout } from './utils/validation';
@@ -125,7 +127,8 @@ export const createLayoutDropTargetDecoration = (pos, props, nodeViewPortalProvi
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
-    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetLayout, {
+    const DropTargetLayoutComponent = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('editor_native_anchor_update_layout_drop_hint') ? DropTargetLayoutNativeAnchorSupport : DropTargetLayout;
+    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetLayoutComponent, {
       ...props,
       getPos,
       anchorRectCache

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -19,8 +19,14 @@ const getNodeSelector = (ignoreNodes, ignoreNodeDescendants) => {
     return baseSelector;
   }
   const ignoreNodeSelectorList = ignoreNodes.map(node => `[data-prosemirror-node-name="${node}"]`);
-  const ignoreNodeDescendantsSelectorList = ignoreNodeDescendants.map(node => `[data-prosemirror-node-name="${node}"] [data-node-anchor]`);
-  const ignoreSelector = [...ignoreNodeSelectorList, ...ignoreNodeDescendantsSelectorList, '[data-prosemirror-node-inline="true"]'].join(', ');
+  const ignoreNodeDescendantsSelectorList = ignoreNodeDescendants.map(node => {
+    if (node === 'table' && fg('platform_editor_native_anchor_table_nested_fix')) {
+      // Special case for table to exclude its direct descendants
+      return [`[data-prosemirror-node-name="tableCell"] > [data-node-anchor]`, `[data-prosemirror-node-name="tableHeader"] > [data-node-anchor]`];
+    }
+    return `[data-prosemirror-node-name="${node}"] [data-node-anchor]`;
+  });
+  const ignoreSelector = [...ignoreNodeSelectorList, ...ignoreNodeDescendantsSelectorList.flat(), '[data-prosemirror-node-inline="true"]'].join(', ');
   return `${baseSelector}:not(${ignoreSelector})`;
 };
 const getDefaultNodeSelector = memoizeOne(() => {

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

@@ -91,7 +91,7 @@ const buttonWrapperStylesPatch = css({
 
 // update color to match quick insert button for new editor controls
 const dragHandleColor = css({
-  color: "var(--ds-icon-subtle, #626F86)"
+  color: "var(--ds-icon-subtle, #505258)"
 });
 const dragHandleButtonStyles = css({
   display: 'flex',

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
@@ -127,9 +127,121 @@ export const DropTargetLayout = props => {
     edge: "right",
     gap: `-${DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH}px`
   }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) && jsx("div", {
-    "data-testid": "block-ctrl-drop-hint"
+    "data-testid": "block-ctrl-drop-hint",
+    css: dropTargetLayoutHintStyle
+  }));
+};
+export const DropTargetLayoutNativeAnchorSupport = props => {
+  var _api$blockControls3;
+  const {
+    api,
+    getPos,
+    parent,
+    anchorRectCache
+  } = props;
+  const ref = useRef(null);
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+  const anchorName = getNodeAnchor(parent);
+  const [nextNodeAnchorName, setNextNodeAnchorName] = useState(null);
+  const readNextNodeAnchor = useCallback(() => {
+    var _ref$current2, _ref$current2$parentE, _nextElementSibling$g;
+    const nextElementSibling = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : (_ref$current2$parentE = _ref$current2.parentElement) === null || _ref$current2$parentE === void 0 ? void 0 : _ref$current2$parentE.nextElementSibling;
+    const attrName = getAnchorAttrName();
+    const nextAnchorName = (_nextElementSibling$g = nextElementSibling === null || nextElementSibling === void 0 ? void 0 : nextElementSibling.getAttribute(attrName)) !== null && _nextElementSibling$g !== void 0 ? _nextElementSibling$g : null;
+    setNextNodeAnchorName(prev => prev === nextAnchorName ? prev : nextAnchorName);
+  }, []);
+  const height = useMemo(() => {
+    if (nextNodeAnchorName) {
+      if (isAnchorSupported()) {
+        return `anchor-size(${nextNodeAnchorName} height)`;
+      } else if (anchorRectCache) {
+        const layoutColumnRect = anchorRectCache.getRect(nextNodeAnchorName);
+        return `${(layoutColumnRect === null || layoutColumnRect === void 0 ? void 0 : layoutColumnRect.height) || 0}px`;
+      }
+    }
+    // Stacked mode fallback: minimal height to avoid oversized hint on first render
+    return '0px';
+  }, [nextNodeAnchorName, anchorRectCache]);
+  useLayoutEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      readNextNodeAnchor();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [readNextNodeAnchor]);
+  const dropTargetStackLayoutHintStyle = css({
+    // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      height,
+      marginTop: `${"var(--ds-space-050, 4px)"}`
+    }
+  });
+  const [isActiveAnchor] = useActiveAnchorTracker(anchorName);
+  const {
+    activeNode
+  } = (api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.sharedState.currentState()) || {};
+  const onDrop = useCallback(() => {
+    if (!activeNode) {
+      return;
+    }
+    const to = getPos();
+    let mappedTo;
+    if (to !== undefined) {
+      var _api$core3, _api$core4;
+      const {
+        pos: from
+      } = activeNode;
+      api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
+        tr
+      }) => {
+        var _api$blockControls4, _api$blockControls4$c;
+        api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : (_api$blockControls4$c = _api$blockControls4.commands) === null || _api$blockControls4$c === void 0 ? void 0 : _api$blockControls4$c.moveToLayout(from, to)({
+          tr
+        });
+        const insertColumnStep = getInsertLayoutStep(tr);
+        mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+        return tr;
+      });
+      api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
+        tr
+      }) => {
+        if (mappedTo !== undefined) {
+          updateSelection(tr, mappedTo);
+        }
+        return tr;
+      });
+    }
+  }, [api, getPos, activeNode]);
+  useEffect(() => {
+    if (ref.current) {
+      return dropTargetForElements({
+        element: ref.current,
+        onDragEnter: () => {
+          setIsDraggedOver(true);
+          readNextNodeAnchor();
+        },
+        onDragLeave: () => {
+          setIsDraggedOver(false);
+        },
+        onDrop
+      });
+    }
+  }, [onDrop, readNextNodeAnchor]);
+  if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
+    return null;
+  }
+  return jsx("div", {
+    ref: ref
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
+    css: [dropTargetLayoutStyle, dropTargetStackLayoutHintStyle],
+    "data-testid": "block-ctrl-drop-indicator"
+  }, isDraggedOver ? jsx(DropIndicator, {
+    edge: "right",
+    gap: `-${DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH}px`
+  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) && jsx("div", {
+    "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
 };

package/dist/es2019/ui/global-styles.js

@@ -307,7 +307,7 @@ const quickInsertStyles = () => css({
     zIndex: layers.card(),
     outline: 'none',
     cursor: 'pointer',
-    color: "var(--ds-icon-subtle, #626F86)"
+    color: "var(--ds-icon-subtle, #505258)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
@@ -321,11 +321,11 @@ const quickInsertStyles = () => css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.blocks-quick-insert-button:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.blocks-quick-insert-button:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.blocks-quick-insert-button:focus': {
@@ -350,7 +350,7 @@ const quickInsertStyles = () => css({
     padding: `${"var(--ds-space-050, 4px)"} 0`,
     boxSizing: 'border-box',
     maxWidth: '240px',
-    backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
+    backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
     color: "var(--ds-text-inverse, #FFFFFF)",
     font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
     insetBlockStart: "var(--ds-space-0, 0px)",

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

@@ -291,7 +291,7 @@ export const TypeAheadControl = ({
     onMouseDown: handleMouseDown
   }, jsx(AddIcon, {
     label: "add",
-    color: "var(--ds-icon-subtle, #626F86)",
+    color: "var(--ds-icon-subtle, #505258)",
     size: "small"
   })));
   return jsx(Box

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

@@ -7,10 +7,12 @@ import uuid from 'uuid';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
-import { DropTargetLayout } from '../ui/drop-target-layout';
+import { DropTargetLayout, DropTargetLayoutNativeAnchorSupport } from '../ui/drop-target-layout';
 import { NESTED_DEPTH, TYPE_DROP_TARGET_DEC } from './decorations-common';
 import { maxLayoutColumnSupported } from './utils/consts';
 import { canMoveNodeToIndex, canMoveSliceToIndex, isInSameLayout } from './utils/validation';
@@ -130,8 +132,9 @@ export var createLayoutDropTargetDecoration = function createLayoutDropTargetDec
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
+    var DropTargetLayoutComponent = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('editor_native_anchor_update_layout_drop_hint') ? DropTargetLayoutNativeAnchorSupport : DropTargetLayout;
     nodeViewPortalProviderAPI.render(function () {
-      return /*#__PURE__*/createElement(DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
+      return /*#__PURE__*/createElement(DropTargetLayoutComponent, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache
       }));

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -23,9 +23,13 @@ var getNodeSelector = function getNodeSelector(ignoreNodes, ignoreNodeDescendant
     return "[data-prosemirror-node-name=\"".concat(node, "\"]");
   });
   var ignoreNodeDescendantsSelectorList = ignoreNodeDescendants.map(function (node) {
+    if (node === 'table' && fg('platform_editor_native_anchor_table_nested_fix')) {
+      // Special case for table to exclude its direct descendants
+      return ["[data-prosemirror-node-name=\"tableCell\"] > [data-node-anchor]", "[data-prosemirror-node-name=\"tableHeader\"] > [data-node-anchor]"];
+    }
     return "[data-prosemirror-node-name=\"".concat(node, "\"] [data-node-anchor]");
   });
-  var ignoreSelector = [].concat(_toConsumableArray(ignoreNodeSelectorList), _toConsumableArray(ignoreNodeDescendantsSelectorList), ['[data-prosemirror-node-inline="true"]']).join(', ');
+  var ignoreSelector = [].concat(_toConsumableArray(ignoreNodeSelectorList), _toConsumableArray(ignoreNodeDescendantsSelectorList.flat()), ['[data-prosemirror-node-inline="true"]']).join(', ');
   return "".concat(baseSelector, ":not(").concat(ignoreSelector, ")");
 };
 var getDefaultNodeSelector = memoizeOne(function () {

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

@@ -96,7 +96,7 @@ var buttonWrapperStylesPatch = css({
 
 // update color to match quick insert button for new editor controls
 var dragHandleColor = css({
-  color: "var(--ds-icon-subtle, #626F86)"
+  color: "var(--ds-icon-subtle, #505258)"
 });
 var dragHandleButtonStyles = css({
   display: 'flex',

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

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
@@ -123,9 +123,122 @@ export var DropTargetLayout = function DropTargetLayout(props) {
     edge: "right",
     gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
   }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) && jsx("div", {
-    "data-testid": "block-ctrl-drop-hint"
+    "data-testid": "block-ctrl-drop-hint",
+    css: dropTargetLayoutHintStyle
+  }));
+};
+export var DropTargetLayoutNativeAnchorSupport = function DropTargetLayoutNativeAnchorSupport(props) {
+  var _api$blockControls3;
+  var api = props.api,
+    getPos = props.getPos,
+    parent = props.parent,
+    anchorRectCache = props.anchorRectCache;
+  var ref = useRef(null);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDraggedOver = _useState4[0],
+    setIsDraggedOver = _useState4[1];
+  var anchorName = getNodeAnchor(parent);
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    nextNodeAnchorName = _useState6[0],
+    setNextNodeAnchorName = _useState6[1];
+  var readNextNodeAnchor = useCallback(function () {
+    var _ref$current2, _nextElementSibling$g;
+    var nextElementSibling = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || (_ref$current2 = _ref$current2.parentElement) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.nextElementSibling;
+    var attrName = getAnchorAttrName();
+    var nextAnchorName = (_nextElementSibling$g = nextElementSibling === null || nextElementSibling === void 0 ? void 0 : nextElementSibling.getAttribute(attrName)) !== null && _nextElementSibling$g !== void 0 ? _nextElementSibling$g : null;
+    setNextNodeAnchorName(function (prev) {
+      return prev === nextAnchorName ? prev : nextAnchorName;
+    });
+  }, []);
+  var height = useMemo(function () {
+    if (nextNodeAnchorName) {
+      if (isAnchorSupported()) {
+        return "anchor-size(".concat(nextNodeAnchorName, " height)");
+      } else if (anchorRectCache) {
+        var layoutColumnRect = anchorRectCache.getRect(nextNodeAnchorName);
+        return "".concat((layoutColumnRect === null || layoutColumnRect === void 0 ? void 0 : layoutColumnRect.height) || 0, "px");
+      }
+    }
+    // Stacked mode fallback: minimal height to avoid oversized hint on first render
+    return '0px';
+  }, [nextNodeAnchorName, anchorRectCache]);
+  useLayoutEffect(function () {
+    var raf = requestAnimationFrame(function () {
+      readNextNodeAnchor();
+    });
+    return function () {
+      return cancelAnimationFrame(raf);
+    };
+  }, [readNextNodeAnchor]);
+  var dropTargetStackLayoutHintStyle = css(_defineProperty({}, "@container layout-area (max-width:".concat(layoutBreakpointWidth.MEDIUM - 1, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: height,
+    marginTop: "var(--ds-space-050, 4px)"
+  }));
+  var _useActiveAnchorTrack3 = useActiveAnchorTracker(anchorName),
+    _useActiveAnchorTrack4 = _slicedToArray(_useActiveAnchorTrack3, 1),
+    isActiveAnchor = _useActiveAnchorTrack4[0];
+  var _ref4 = (api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.sharedState.currentState()) || {},
+    activeNode = _ref4.activeNode;
+  var onDrop = useCallback(function () {
+    if (!activeNode) {
+      return;
+    }
+    var to = getPos();
+    var mappedTo;
+    if (to !== undefined) {
+      var _api$core3, _api$core4;
+      var from = activeNode.pos;
+      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
+        var _api$blockControls4;
+        var tr = _ref5.tr;
+        api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || (_api$blockControls4 = _api$blockControls4.commands) === null || _api$blockControls4 === void 0 || _api$blockControls4.moveToLayout(from, to)({
+          tr: tr
+        });
+        var insertColumnStep = getInsertLayoutStep(tr);
+        mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+        return tr;
+      });
+      api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref6) {
+        var tr = _ref6.tr;
+        if (mappedTo !== undefined) {
+          updateSelection(tr, mappedTo);
+        }
+        return tr;
+      });
+    }
+  }, [api, getPos, activeNode]);
+  useEffect(function () {
+    if (ref.current) {
+      return dropTargetForElements({
+        element: ref.current,
+        onDragEnter: function onDragEnter() {
+          setIsDraggedOver(true);
+          readNextNodeAnchor();
+        },
+        onDragLeave: function onDragLeave() {
+          setIsDraggedOver(false);
+        },
+        onDrop: onDrop
+      });
+    }
+  }, [onDrop, readNextNodeAnchor]);
+  if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
+    return null;
+  }
+  return jsx("div", {
+    ref: ref
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
+    css: [dropTargetLayoutStyle, dropTargetStackLayoutHintStyle],
+    "data-testid": "block-ctrl-drop-indicator"
+  }, isDraggedOver ? jsx(DropIndicator, {
+    edge: "right",
+    gap: "-".concat(DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH, "px")
+  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) && jsx("div", {
+    "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
 };

package/dist/esm/ui/global-styles.js

@@ -249,7 +249,7 @@ var quickInsertStyles = function quickInsertStyles() {
       zIndex: layers.card(),
       outline: 'none',
       cursor: 'pointer',
-      color: "var(--ds-icon-subtle, #626F86)"
+      color: "var(--ds-icon-subtle, #505258)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
     '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
@@ -263,11 +263,11 @@ var quickInsertStyles = function quickInsertStyles() {
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.blocks-quick-insert-button:hover': {
-      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.blocks-quick-insert-button:active': {
-      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.blocks-quick-insert-button:focus': {
@@ -292,7 +292,7 @@ var quickInsertStyles = function quickInsertStyles() {
       padding: "var(--ds-space-050, 4px)".concat(" 0"),
       boxSizing: 'border-box',
       maxWidth: '240px',
-      backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
+      backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
       color: "var(--ds-text-inverse, #FFFFFF)",
       font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
       insetBlockStart: "var(--ds-space-0, 0px)",

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

@@ -291,7 +291,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       onMouseDown: handleMouseDown
     }, jsx(AddIcon, {
       label: "add",
-      color: "var(--ds-icon-subtle, #626F86)",
+      color: "var(--ds-icon-subtle, #505258)",
       size: "small"
     })));
   };

package/dist/types/ui/drop-target-layout.d.ts

@@ -13,3 +13,6 @@ export type DropTargetLayoutProps = {
 export declare const DropTargetLayout: (props: DropTargetLayoutProps & {
     anchorRectCache?: AnchorRectCache;
 }) => jsx.JSX.Element | null;
+export declare const DropTargetLayoutNativeAnchorSupport: (props: DropTargetLayoutProps & {
+    anchorRectCache?: AnchorRectCache;
+}) => jsx.JSX.Element | null;

package/dist/types-ts4.5/ui/drop-target-layout.d.ts

@@ -13,3 +13,6 @@ export type DropTargetLayoutProps = {
 export declare const DropTargetLayout: (props: DropTargetLayoutProps & {
     anchorRectCache?: AnchorRectCache;
 }) => jsx.JSX.Element | null;
+export declare const DropTargetLayoutNativeAnchorSupport: (props: DropTargetLayoutProps & {
+    anchorRectCache?: AnchorRectCache;
+}) => jsx.JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.5.5",
+	"version": "7.5.7",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^6.1.0",
 		"@atlaskit/editor-plugin-feature-flags": "^5.0.0",
-		"@atlaskit/editor-plugin-interaction": "^9.0.0",
+		"@atlaskit/editor-plugin-interaction": "^10.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^3.1.0",
 		"@atlaskit/editor-plugin-metrics": "^7.1.0",
 		"@atlaskit/editor-plugin-quick-insert": "^6.0.0",
@@ -53,9 +53,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.31.0",
-		"@atlaskit/tokens": "^7.1.0",
-		"@atlaskit/tooltip": "^20.7.0",
+		"@atlaskit/tmp-editor-statsig": "^13.32.0",
+		"@atlaskit/tokens": "^8.0.0",
+		"@atlaskit/tooltip": "^20.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@popperjs/core": "^2.11.8",
@@ -156,6 +156,12 @@
 		},
 		"platform_editor_toolbar_aifc_user_intent_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_native_anchor_table_nested_fix": {
+			"type": "boolean"
+		},
+		"editor_native_anchor_update_layout_drop_hint": {
+			"type": "boolean"
 		}
 	}
 }