npm - @atlaskit/editor-plugin-block-controls - Versions diffs - 7.8.0 → 7.10.0 - Mend

@atlaskit/editor-plugin-block-controls 7.8.0 → 7.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/CHANGELOG.md +23 -5
package/dist/cjs/editor-commands/show-drag-handle.js +2 -2
package/dist/cjs/pm-plugins/decorations-anchor.js +1 -1
package/dist/cjs/pm-plugins/decorations-drop-target-active.js +1 -1
package/dist/cjs/pm-plugins/decorations-drop-target.js +1 -2
package/dist/cjs/pm-plugins/handle-mouse-down.js +1 -1
package/dist/cjs/pm-plugins/handle-mouse-over.js +3 -3
package/dist/cjs/pm-plugins/main.js +2 -2
package/dist/cjs/ui/drag-handle.js +4 -4
package/dist/cjs/ui/drop-target-layout.js +2 -2
package/dist/cjs/ui/drop-target.js +2 -2
package/dist/cjs/ui/global-styles.js +33 -5
package/dist/cjs/ui/inline-drop-target.js +5 -5
package/dist/cjs/ui/utils/anchor-name.js +1 -1
package/dist/cjs/ui/utils/dom-attr-name.js +2 -2
package/dist/es2019/editor-commands/show-drag-handle.js +2 -2
package/dist/es2019/pm-plugins/decorations-anchor.js +1 -1
package/dist/es2019/pm-plugins/decorations-drop-target-active.js +1 -1
package/dist/es2019/pm-plugins/decorations-drop-target.js +1 -2
package/dist/es2019/pm-plugins/handle-mouse-down.js +1 -1
package/dist/es2019/pm-plugins/handle-mouse-over.js +3 -3
package/dist/es2019/pm-plugins/main.js +2 -2
package/dist/es2019/ui/drag-handle.js +4 -4
package/dist/es2019/ui/drop-target-layout.js +2 -2
package/dist/es2019/ui/drop-target.js +2 -2
package/dist/es2019/ui/global-styles.js +34 -6
package/dist/es2019/ui/inline-drop-target.js +5 -5
package/dist/es2019/ui/utils/anchor-name.js +1 -1
package/dist/es2019/ui/utils/dom-attr-name.js +2 -2
package/dist/esm/editor-commands/show-drag-handle.js +2 -2
package/dist/esm/pm-plugins/decorations-anchor.js +1 -1
package/dist/esm/pm-plugins/decorations-drop-target-active.js +1 -1
package/dist/esm/pm-plugins/decorations-drop-target.js +1 -2
package/dist/esm/pm-plugins/handle-mouse-down.js +1 -1
package/dist/esm/pm-plugins/handle-mouse-over.js +3 -3
package/dist/esm/pm-plugins/main.js +2 -2
package/dist/esm/ui/drag-handle.js +4 -4
package/dist/esm/ui/drop-target-layout.js +2 -2
package/dist/esm/ui/drop-target.js +2 -2
package/dist/esm/ui/global-styles.js +34 -6
package/dist/esm/ui/inline-drop-target.js +5 -5
package/dist/esm/ui/utils/anchor-name.js +1 -1
package/dist/esm/ui/utils/dom-attr-name.js +2 -2
package/package.json +4 -13

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
+## 7.10.0
+### Minor Changes
+- [`d84e4018e7a77`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d84e4018e7a77) -
+  ED-29689 create new exp
+### Patch Changes
+- Updated dependencies
+## 7.9.0
+### Minor Changes
+- [`b168fe8504b3d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b168fe8504b3d) -
+  ED-29688 update dragging native anchor styles
 ## 7.8.0
 ### Minor Changes
@@ -207,7 +225,7 @@
 ### Patch Changes
 - [`9ca86d5ced1c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9ca86d5ced1c4) -
-  ED-294112 fix extended hover zone for platform_editor_native_anchor_support to match existing
+  ED-294112 fix extended hover zone for platform_editor_native_anchor_with_dnd to match existing
   behaviour; no hover zones for inline elements, headerCells or (when advanced_layouts is off)
   layout columns
 - Updated dependencies
@@ -240,7 +258,7 @@
 - [`0b0ef25b2f529`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0b0ef25b2f529) -
   Cleanup various feature gates and align them to aifc_create_enabled
 - [`3feef799ad0a5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3feef799ad0a5) -
-  [ED-29333] Fix 2 issues when platform_editor_native_anchor_support is enabled
+  [ED-29333] Fix 2 issues when platform_editor_native_anchor_with_dnd is enabled
   1. Drag handle is rendered for media node
   2. When advanced_layouts experiment is off, quick insert button is rendered based on child node
      inside layout column (as opposed to layout section node )
@@ -263,7 +281,7 @@
 - [`606c3303a0d61`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/606c3303a0d61) -
   [ux] ED-29331 fix block controls misalignment on first line of empty document with
-  platform_editor_native_anchor_support on
+  platform_editor_native_anchor_with_dnd on
 - Updated dependencies
 ## 7.2.10
@@ -272,7 +290,7 @@
 - [`2470543de66c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2470543de66c4) -
   [ux] ED-29341 fix block quote drag handle is hard to trigger behind with
-  platform_editor_native_anchor_support on
+  platform_editor_native_anchor_with_dnd on
 - Updated dependencies
 ## 7.2.9
@@ -287,7 +305,7 @@
 ### Patch Changes
 - [`435745247f7ef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/435745247f7ef) -
-  [ED-29337] Fix drag handle cannot be focus via shorcut when platform_editor_native_anchor_support
+  [ED-29337] Fix drag handle cannot be focus via shorcut when platform_editor_native_anchor_with_dnd
   is enabled
 ## 7.2.7

package/dist/cjs/editor-commands/show-drag-handle.js CHANGED Viewed

@@ -39,7 +39,7 @@ var findParentPosForHandle = function findParentPosForHandle(state) {
   }
   // else find closest parent node
-  return (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ?
+  return (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ?
   // With native anchor enabled, all nodes have anchor name attribute despite no drag handle support, e.g. listItem, caption,
   // as opposed to old approach, node decoration is only added to the node that have drag handle,
   // hence, we need to return the exact position of the node that can have drag handle
@@ -113,7 +113,7 @@ var findNextAnchorNode = function findNextAnchorNode(view) {
 };
 var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api) {
   return function (state, _, view) {
-    if (view && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    if (view && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       var anchorNode = findNextAnchorNode(view);
       if (api && anchorNode) {
         var pos = anchorNode.pos,

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

@@ -107,7 +107,7 @@ var findNodeDecs = exports.findNodeDecs = function findNodeDecs(state, decoratio
 };
 var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
-  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     return [];
   }
   var docFrom = from === undefined || from < 0 ? 0 : from;

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

@@ -239,7 +239,7 @@ var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = fu
       }
     }
   }
-  _activeAnchorTracker.defaultActiveAnchorTracker.emit((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? api.core.actions.getAnchorIdForNode(rootNodeWithPos.node, rootNodeWithPos.pos) || '' : (0, _decorationsCommon.getNodeAnchor)(rootNodeWithPos.node));
+  _activeAnchorTracker.defaultActiveAnchorTracker.emit((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? api.core.actions.getAnchorIdForNode(rootNodeWithPos.node, rootNodeWithPos.pos) || '' : (0, _decorationsCommon.getNodeAnchor)(rootNodeWithPos.node));
   return {
     decsToAdd: decsToAdd,
     decsToRemove: decsToRemove

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

@@ -11,7 +11,6 @@ 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");
@@ -138,7 +137,7 @@ 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;
+    var DropTargetLayoutComponent = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? _dropTargetLayout.DropTargetLayoutNativeAnchorSupport : _dropTargetLayout.DropTargetLayout;
     nodeViewPortalProviderAPI.render(function () {
       return /*#__PURE__*/(0, _react.createElement)(DropTargetLayoutComponent, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,

package/dist/cjs/pm-plugins/handle-mouse-down.js CHANGED Viewed

@@ -21,7 +21,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
       if (!rootNode) {
         return false;
       }
-      if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+      if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
         var _rootNode$type$name, _rootNode$type$name2;
         var anchorName = api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(rootNode, rootPos);

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

@@ -30,7 +30,7 @@ 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')) {
+    if (node === 'table') {
       // 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]"];
     }
@@ -70,7 +70,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   var target = event.target;
-  var isNativeAnchorSupported = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true);
+  var isNativeAnchorSupported = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
   if (target !== null && target !== void 0 && (_target$classList = target.classList) !== null && _target$classList !== void 0 && _target$classList.contains('ProseMirror')) {
     return false;
   }
@@ -108,7 +108,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       }
     }
     var anchorName;
-    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       anchorName = rootElement.getAttribute((0, _domAttrName.getAnchorAttrName)());
       // don't show handles if we can't find an anchor

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

@@ -358,7 +358,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
   var shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging)) &&
   // Skip expensive anchor node decoration recalculations when native anchor support is enabled
-  !((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('editor_native_anchor_remove_decoration_in_apply'));
+  !((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('editor_native_anchor_remove_decoration_in_apply'));
   var isActiveNodeModified = false;
   if (api && shouldRedrawNodeDecs) {
     var oldNodeDecs = (0, _decorationsAnchor.findNodeDecs)(newState, decorations, from, to);
@@ -516,7 +516,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     }
   }
   var isEmptyDoc = (0, _utils.isEmptyDocument)(newState.doc);
-  if (isEmptyDoc && !(0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if (isEmptyDoc && !(0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     var hasNodeDecoration = !!(0, _decorationsAnchor.findNodeDecs)(newState, decorations).length;
     if (!hasNodeDecoration) {
       decorations = decorations.add(newState.doc, [(0, _decorationsDragHandle.emptyParagraphNodeDecorations)()]);

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

@@ -815,7 +815,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
       setRecalculatePosition(recalculatePosition);
     }
     var pos = getPos();
-    var $pos = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
+    var $pos = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
     var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
     var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
@@ -850,7 +850,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
       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(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_styles.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(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start)+ ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType), "px)")
+        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start)+ ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : 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(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
@@ -861,7 +861,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
   }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn, recalculatePosition]);
   var calculatePositionOld = (0, _react.useCallback)(function () {
     var pos = getPos();
-    var $pos = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
+    var $pos = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
     var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
     var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
@@ -896,7 +896,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
       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(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_styles.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(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType), "px)")
+        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : 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(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};

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

@@ -129,7 +129,7 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
   }, 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", {
+  }) : (isActiveAnchor || (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) && (0, _react2.jsx)("div", {
     "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
@@ -244,7 +244,7 @@ var DropTargetLayoutNativeAnchorSupport = exports.DropTargetLayoutNativeAnchorSu
   }, 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", {
+  }) : (isActiveAnchor || (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) && (0, _react2.jsx)("div", {
     "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));

package/dist/cjs/ui/drop-target.js CHANGED Viewed

@@ -91,7 +91,7 @@ var HoverZone = function HoverZone(_ref) {
   var ref = (0, _react.useRef)(null);
   var isRemainingheight = dropTargetStyle === 'remainingHeight';
   var anchorName = (0, _react.useMemo)(function () {
-    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       if (node && typeof pos === 'number') {
         var posOffset = position === 'upper' ? -node.nodeSize : 0;
         return (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos + posOffset)) || '';
@@ -144,7 +144,7 @@ var HoverZone = function HoverZone(_ref) {
     // only apply upper drop zone
     if (isRemainingheight && position === 'upper') {
       // previous node
-      var _anchorName = node ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : (0, _decorationsCommon.getNodeAnchor)(node) : '';
+      var _anchorName = node ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : (0, _decorationsCommon.getNodeAnchor)(node) : '';
       var top = 'unset';
       if (_anchorName) {
         var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');

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

@@ -12,7 +12,6 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("@atlaskit/theme/constants");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -431,18 +430,47 @@ var dragHandlerAnchorStyles = (0, _react.css)({
     }
   }
 });
+// Styles applied to nodes with anchors when dragging
+var dragAnchorStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-node-anchor]:not([data-node-anchor] [data-node-anchor])': {
+      // all top level nodes with anchor
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-node-anchor]:has([data-blocks-drop-target-container]) [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-prosemirror-node-name="media"][data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // first table row to avoid multiple anchors in table
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-prosemirror-node-name="table"] [data-prosemirror-node-name="tableRow"][data-node-anchor]:first-of-type': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    }
+  }
+});
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
   var api = _ref.api;
   var isDragging = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isDragging', {
     disabled: !(0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
   });
-  var shouldRenderAnchors = (0, _styles.isCSSAnchorSupported)() && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_native_anchor_use_css_style');
+  var shouldRenderAnchors = (0, _styles.isCSSAnchorSupported)() && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
   var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
+    styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
       exposure: true
-    }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
+    }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? _styles.nativeAnchorStyles : dragHandlerAnchorStyles)]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
   });
 };

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

@@ -101,7 +101,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
   var anchorName = (0, _react.useMemo)(function () {
-    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       var _getPos;
       return nextNode ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode, (_getPos = getPos()) !== null && _getPos !== void 0 ? _getPos : -1)) || '' : '';
     }
@@ -134,7 +134,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
         innerContainerWidth = "calc(var(--ak-editor--line-length) * ".concat(percentageWidth, ")");
       }
     } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
-      var tableWidthAnchor = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof nextNodePos === 'number' ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '' : '' : (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
+      var tableWidthAnchor = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof nextNodePos === 'number' ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '' : '' : (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
       var isNumberColumnEnabled = Boolean(nextNode.attrs.isNumberColumnEnabled);
       if ((0, _anchorUtils.isAnchorSupported)()) {
         innerContainerWidth = isNumberColumnEnabled ? "calc(anchor-size(".concat(tableWidthAnchor, " width) + ").concat(TABLE_NUMBERED_COLUMN_WIDTH, "px)") : "anchor-size(".concat(tableWidthAnchor, " width)");
@@ -147,7 +147,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
         innerContainerWidth = "min(".concat(nextNode.attrs.width, "px, ").concat(innerContainerWidth, ")");
       }
     } else if (nextNode.type.name === 'mediaSingle' && nextNode.firstChild) {
-      if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+      if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
         var _nextNode$firstChild;
         // check pos is a number
         if (typeof nextNodePos === 'number' && ((_nextNode$firstChild = nextNode.firstChild) === null || _nextNode$firstChild === void 0 ? void 0 : _nextNode$firstChild.type.name) === 'media') {
@@ -162,7 +162,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     var heightTargetAnchorName = targetAnchorName;
     if (nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
       if (isLeftPosition) {
-        if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+        if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
           if (typeof nextNodePos === 'number') {
             heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '';
           } else {
@@ -172,7 +172,7 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
           heightTargetAnchorName = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
         }
       } else {
-        if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+        if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
           if (typeof nextNodePos === 'number') {
             var lastNodeStartPos = nextNode.content.size - nextNode.lastChild.nodeSize;
             heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.lastChild, lastNodeStartPos + 1)) || '';

package/dist/cjs/ui/utils/anchor-name.js CHANGED Viewed

@@ -16,7 +16,7 @@ var refreshAnchorName = exports.refreshAnchorName = function refreshAnchorName(_
     view = _ref.view,
     anchorName = _ref.anchorName;
   var newAnchorName = anchorName || '';
-  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     return newAnchorName;
   }
   var pos = getPos();

package/dist/cjs/ui/utils/dom-attr-name.js CHANGED Viewed

@@ -8,13 +8,13 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var NODE_ANCHOR_ATTR_NAME = exports.NODE_ANCHOR_ATTR_NAME = 'data-node-anchor';
 var NODE_NODE_TYPE_ATTR_NAME = exports.NODE_NODE_TYPE_ATTR_NAME = 'data-prosemirror-node-name';
 var getAnchorAttrName = exports.getAnchorAttrName = function getAnchorAttrName() {
-  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     return NODE_ANCHOR_ATTR_NAME;
   }
   return 'data-drag-handler-anchor-name';
 };
 var getTypeNameAttrName = exports.getTypeNameAttrName = function getTypeNameAttrName() {
-  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     return NODE_NODE_TYPE_ATTR_NAME;
   }
   return 'data-drag-handler-node-type';

package/dist/es2019/editor-commands/show-drag-handle.js CHANGED Viewed

@@ -38,7 +38,7 @@ const findParentPosForHandle = state => {
   }
   // else find closest parent node
-  return expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ?
+  return expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ?
   // With native anchor enabled, all nodes have anchor name attribute despite no drag handle support, e.g. listItem, caption,
   // as opposed to old approach, node decoration is only added to the node that have drag handle,
   // hence, we need to return the exact position of the node that can have drag handle
@@ -111,7 +111,7 @@ const findNextAnchorNode = view => {
   }
 };
 export const showDragHandleAtSelection = api => (state, _, view) => {
-  if (view && expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if (view && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     const anchorNode = findNextAnchorNode(view);
     if (api && anchorNode) {
       const {

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

@@ -95,7 +95,7 @@ export const findNodeDecs = (state, decorations, from, to) => {
 };
 export const nodeDecorations = (newState, from, to) => {
   const decs = [];
-  if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     return [];
   }
   const docFrom = from === undefined || from < 0 ? 0 : from;

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

@@ -220,7 +220,7 @@ export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api,
       }
     }
   }
-  defaultActiveAnchorTracker.emit(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? api.core.actions.getAnchorIdForNode(rootNodeWithPos.node, rootNodeWithPos.pos) || '' : getNodeAnchor(rootNodeWithPos.node));
+  defaultActiveAnchorTracker.emit(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? api.core.actions.getAnchorIdForNode(rootNodeWithPos.node, rootNodeWithPos.pos) || '' : getNodeAnchor(rootNodeWithPos.node));
   return {
     decsToAdd,
     decsToRemove

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

@@ -4,7 +4,6 @@ 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';
@@ -127,7 +126,7 @@ 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';
-    const DropTargetLayoutComponent = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('editor_native_anchor_update_layout_drop_hint') ? DropTargetLayoutNativeAnchorSupport : DropTargetLayout;
+    const DropTargetLayoutComponent = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? DropTargetLayoutNativeAnchorSupport : DropTargetLayout;
     nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetLayoutComponent, {
       ...props,
       getPos,

package/dist/es2019/pm-plugins/handle-mouse-down.js CHANGED Viewed

@@ -14,7 +14,7 @@ export const handleMouseDown = api => (view, event) => {
     if (!rootNode) {
       return false;
     }
-    if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       var _rootNode$type$name, _rootNode$type$name2;
       const anchorName = api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(rootNode, rootPos);

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

@@ -20,7 +20,7 @@ const getNodeSelector = (ignoreNodes, ignoreNodeDescendants) => {
   }
   const ignoreNodeSelectorList = ignoreNodes.map(node => `[data-prosemirror-node-name="${node}"]`);
   const ignoreNodeDescendantsSelectorList = ignoreNodeDescendants.map(node => {
-    if (node === 'table' && fg('platform_editor_native_anchor_table_nested_fix')) {
+    if (node === 'table') {
       // 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]`];
     }
@@ -62,7 +62,7 @@ export const handleMouseOver = (view, event, api) => {
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   const target = event.target;
-  const isNativeAnchorSupported = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true);
+  const isNativeAnchorSupported = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
   if (target !== null && target !== void 0 && (_target$classList = target.classList) !== null && _target$classList !== void 0 && _target$classList.contains('ProseMirror')) {
     return false;
   }
@@ -100,7 +100,7 @@ export const handleMouseOver = (view, event, api) => {
       }
     }
     let anchorName;
-    if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       anchorName = rootElement.getAttribute(getAnchorAttrName());
       // don't show handles if we can't find an anchor

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

@@ -357,7 +357,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   const isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || editorExperiment('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
   const shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging)) &&
   // Skip expensive anchor node decoration recalculations when native anchor support is enabled
-  !(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('editor_native_anchor_remove_decoration_in_apply'));
+  !(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && fg('editor_native_anchor_remove_decoration_in_apply'));
   let isActiveNodeModified = false;
   if (api && shouldRedrawNodeDecs) {
     const oldNodeDecs = findNodeDecs(newState, decorations, from, to);
@@ -514,7 +514,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     }
   }
   const isEmptyDoc = isEmptyDocument(newState.doc);
-  if (isEmptyDoc && !expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if (isEmptyDoc && !expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     const hasNodeDecoration = !!findNodeDecs(newState, decorations).length;
     if (!hasNodeDecoration) {
       decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);

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

@@ -800,7 +800,7 @@ export const DragHandle = ({
       setRecalculatePosition(recalculatePosition);
     }
     const pos = getPos();
-    const $pos = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
+    const $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
     const parentPos = $pos && $pos.depth ? $pos.before() : undefined;
     const node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     const parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
@@ -835,7 +835,7 @@ export const DragHandle = ({
       const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       return {
         left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start)+ ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType)}px)`,
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start)+ ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType)}px)`,
         ...bottom
       };
     }
@@ -848,7 +848,7 @@ export const DragHandle = ({
   }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn, recalculatePosition]);
   const calculatePositionOld = useCallback(() => {
     const pos = getPos();
-    const $pos = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
+    const $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
     const parentPos = $pos && $pos.depth ? $pos.before() : undefined;
     const node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     const parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
@@ -883,7 +883,7 @@ export const DragHandle = ({
       const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       return {
         left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType)}px)`,
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType)}px)`,
         ...bottom
       };
     }

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

@@ -126,7 +126,7 @@ export const DropTargetLayout = props => {
   }, isDraggedOver ? jsx(DropIndicator, {
     edge: "right",
     gap: `-${DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH}px`
-  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) && jsx("div", {
+  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) && jsx("div", {
     "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
@@ -240,7 +240,7 @@ export const DropTargetLayoutNativeAnchorSupport = props => {
   }, isDraggedOver ? jsx(DropIndicator, {
     edge: "right",
     gap: `-${DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH}px`
-  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) && jsx("div", {
+  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) && jsx("div", {
     "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));

package/dist/es2019/ui/drop-target.js CHANGED Viewed

@@ -82,7 +82,7 @@ const HoverZone = ({
   const ref = useRef(null);
   const isRemainingheight = dropTargetStyle === 'remainingHeight';
   const anchorName = useMemo(() => {
-    if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       if (node && typeof pos === 'number') {
         const posOffset = position === 'upper' ? -node.nodeSize : 0;
         return (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos + posOffset)) || '';
@@ -132,7 +132,7 @@ const HoverZone = ({
     // only apply upper drop zone
     if (isRemainingheight && position === 'upper') {
       // previous node
-      const anchorName = node ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : getNodeAnchor(node) : '';
+      const anchorName = node ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : getNodeAnchor(node) : '';
       let top = 'unset';
       if (anchorName) {
         const enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');

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

@@ -4,12 +4,11 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
-import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported, nativeAnchorStyles, tableControlsSpacing } from '@atlaskit/editor-common/styles';
+import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported, tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -509,19 +508,48 @@ const dragHandlerAnchorStyles = css({
     }
   }
 });
+// Styles applied to nodes with anchors when dragging
+const dragAnchorStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-node-anchor]:not([data-node-anchor] [data-node-anchor])': {
+      // all top level nodes with anchor
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-node-anchor]:has([data-blocks-drop-target-container]) [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-prosemirror-node-name="media"][data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    },
+    // first table row to avoid multiple anchors in table
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-prosemirror-node-name="table"] [data-prosemirror-node-name="tableRow"][data-node-anchor]:first-of-type': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    }
+  }
+});
 export const GlobalStylesWrapper = ({
   api
 }) => {
   const isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
     disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
   });
-  const shouldRenderAnchors = isCSSAnchorSupported() && expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('platform_native_anchor_use_css_style');
+  const shouldRenderAnchors = isCSSAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
   const toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   return jsx(Global, {
-    styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
+    styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
       exposure: true
-    }) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
+    }) ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? nativeAnchorStyles : dragHandlerAnchorStyles)]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
   });
 };

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

@@ -89,7 +89,7 @@ export const InlineDropTarget = ({
   const ref = useRef(null);
   const [isDraggedOver, setIsDraggedOver] = useState(false);
   const anchorName = useMemo(() => {
-    if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       var _getPos;
       return nextNode ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode, (_getPos = getPos()) !== null && _getPos !== void 0 ? _getPos : -1)) || '' : '';
     }
@@ -120,7 +120,7 @@ export const InlineDropTarget = ({
         innerContainerWidth = `calc(var(--ak-editor--line-length) * ${percentageWidth})`;
       }
     } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
-      const tableWidthAnchor = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof nextNodePos === 'number' ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '' : '' : getNodeAnchor(nextNode.firstChild);
+      const tableWidthAnchor = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof nextNodePos === 'number' ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '' : '' : getNodeAnchor(nextNode.firstChild);
       const isNumberColumnEnabled = Boolean(nextNode.attrs.isNumberColumnEnabled);
       if (isAnchorSupported()) {
         innerContainerWidth = isNumberColumnEnabled ? `calc(anchor-size(${tableWidthAnchor} width) + ${TABLE_NUMBERED_COLUMN_WIDTH}px)` : `anchor-size(${tableWidthAnchor} width)`;
@@ -133,7 +133,7 @@ export const InlineDropTarget = ({
         innerContainerWidth = `min(${nextNode.attrs.width}px, ${innerContainerWidth})`;
       }
     } else if (nextNode.type.name === 'mediaSingle' && nextNode.firstChild) {
-      if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+      if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
         var _nextNode$firstChild;
         // check pos is a number
         if (typeof nextNodePos === 'number' && ((_nextNode$firstChild = nextNode.firstChild) === null || _nextNode$firstChild === void 0 ? void 0 : _nextNode$firstChild.type.name) === 'media') {
@@ -148,7 +148,7 @@ export const InlineDropTarget = ({
     let heightTargetAnchorName = targetAnchorName;
     if (nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
       if (isLeftPosition) {
-        if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+        if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
           if (typeof nextNodePos === 'number') {
             heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '';
           } else {
@@ -158,7 +158,7 @@ export const InlineDropTarget = ({
           heightTargetAnchorName = getNodeAnchor(nextNode.firstChild);
         }
       } else {
-        if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+        if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
           if (typeof nextNodePos === 'number') {
             const lastNodeStartPos = nextNode.content.size - nextNode.lastChild.nodeSize;
             heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.lastChild, lastNodeStartPos + 1)) || '';

package/dist/es2019/ui/utils/anchor-name.js CHANGED Viewed

@@ -11,7 +11,7 @@ export const refreshAnchorName = ({
   anchorName
 }) => {
   let newAnchorName = anchorName || '';
-  if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     return newAnchorName;
   }
   const pos = getPos();

package/dist/es2019/ui/utils/dom-attr-name.js CHANGED Viewed

@@ -2,13 +2,13 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export const NODE_ANCHOR_ATTR_NAME = 'data-node-anchor';
 export const NODE_NODE_TYPE_ATTR_NAME = 'data-prosemirror-node-name';
 export const getAnchorAttrName = () => {
-  if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     return NODE_ANCHOR_ATTR_NAME;
   }
   return 'data-drag-handler-anchor-name';
 };
 export const getTypeNameAttrName = () => {
-  if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     return NODE_NODE_TYPE_ATTR_NAME;
   }
   return 'data-drag-handler-node-type';

package/dist/esm/editor-commands/show-drag-handle.js CHANGED Viewed

@@ -33,7 +33,7 @@ var findParentPosForHandle = function findParentPosForHandle(state) {
   }
   // else find closest parent node
-  return expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ?
+  return expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ?
   // With native anchor enabled, all nodes have anchor name attribute despite no drag handle support, e.g. listItem, caption,
   // as opposed to old approach, node decoration is only added to the node that have drag handle,
   // hence, we need to return the exact position of the node that can have drag handle
@@ -107,7 +107,7 @@ var findNextAnchorNode = function findNextAnchorNode(view) {
 };
 export var showDragHandleAtSelection = function showDragHandleAtSelection(api) {
   return function (state, _, view) {
-    if (view && expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    if (view && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       var anchorNode = findNextAnchorNode(view);
       if (api && anchorNode) {
         var pos = anchorNode.pos,

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

@@ -100,7 +100,7 @@ export var findNodeDecs = function findNodeDecs(state, decorations, from, to) {
 };
 export var nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
-  if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     return [];
   }
   var docFrom = from === undefined || from < 0 ? 0 : from;

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

@@ -234,7 +234,7 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
       }
     }
   }
-  defaultActiveAnchorTracker.emit(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? api.core.actions.getAnchorIdForNode(rootNodeWithPos.node, rootNodeWithPos.pos) || '' : getNodeAnchor(rootNodeWithPos.node));
+  defaultActiveAnchorTracker.emit(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? api.core.actions.getAnchorIdForNode(rootNodeWithPos.node, rootNodeWithPos.pos) || '' : getNodeAnchor(rootNodeWithPos.node));
   return {
     decsToAdd: decsToAdd,
     decsToRemove: decsToRemove

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

@@ -7,7 +7,6 @@ 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';
@@ -132,7 +131,7 @@ 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;
+    var DropTargetLayoutComponent = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? DropTargetLayoutNativeAnchorSupport : DropTargetLayout;
     nodeViewPortalProviderAPI.render(function () {
       return /*#__PURE__*/createElement(DropTargetLayoutComponent, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,

package/dist/esm/pm-plugins/handle-mouse-down.js CHANGED Viewed

@@ -15,7 +15,7 @@ export var handleMouseDown = function handleMouseDown(api) {
       if (!rootNode) {
         return false;
       }
-      if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+      if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
         var _rootNode$type$name, _rootNode$type$name2;
         var anchorName = api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(rootNode, rootPos);

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

@@ -23,7 +23,7 @@ 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')) {
+    if (node === 'table') {
       // 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]"];
     }
@@ -63,7 +63,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   var target = event.target;
-  var isNativeAnchorSupported = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true);
+  var isNativeAnchorSupported = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
   if (target !== null && target !== void 0 && (_target$classList = target.classList) !== null && _target$classList !== void 0 && _target$classList.contains('ProseMirror')) {
     return false;
   }
@@ -101,7 +101,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       }
     }
     var anchorName;
-    if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       anchorName = rootElement.getAttribute(getAnchorAttrName());
       // don't show handles if we can't find an anchor

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

@@ -351,7 +351,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || editorExperiment('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
   var shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging)) &&
   // Skip expensive anchor node decoration recalculations when native anchor support is enabled
-  !(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('editor_native_anchor_remove_decoration_in_apply'));
+  !(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && fg('editor_native_anchor_remove_decoration_in_apply'));
   var isActiveNodeModified = false;
   if (api && shouldRedrawNodeDecs) {
     var oldNodeDecs = findNodeDecs(newState, decorations, from, to);
@@ -509,7 +509,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     }
   }
   var isEmptyDoc = isEmptyDocument(newState.doc);
-  if (isEmptyDoc && !expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if (isEmptyDoc && !expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     var hasNodeDecoration = !!findNodeDecs(newState, decorations).length;
     if (!hasNodeDecoration) {
       decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);

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

@@ -812,7 +812,7 @@ export var DragHandle = function DragHandle(_ref2) {
       setRecalculatePosition(recalculatePosition);
     }
     var pos = getPos();
-    var $pos = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
+    var $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
     var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
     var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
@@ -847,7 +847,7 @@ export var DragHandle = function DragHandle(_ref2) {
       var bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start)+ ").concat(topPositionAdjustment(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType), "px)")
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start)+ ").concat(topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType), "px)")
       }, bottom);
     }
     var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
@@ -858,7 +858,7 @@ export var DragHandle = function DragHandle(_ref2) {
   }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNode, isLayoutColumn, recalculatePosition]);
   var calculatePositionOld = useCallback(function () {
     var pos = getPos();
-    var $pos = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
+    var $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
     var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
     var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
@@ -893,7 +893,7 @@ export var DragHandle = function DragHandle(_ref2) {
       var bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType), "px)")
+        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType), "px)")
       }, bottom);
     }
     var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};

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

@@ -122,7 +122,7 @@ export var DropTargetLayout = function DropTargetLayout(props) {
   }, 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", {
+  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) && jsx("div", {
     "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));
@@ -237,7 +237,7 @@ export var DropTargetLayoutNativeAnchorSupport = function DropTargetLayoutNative
   }, 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", {
+  }) : (isActiveAnchor || expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) && jsx("div", {
     "data-testid": "block-ctrl-drop-hint",
     css: dropTargetLayoutHintStyle
   }));

package/dist/esm/ui/drop-target.js CHANGED Viewed

@@ -83,7 +83,7 @@ var HoverZone = function HoverZone(_ref) {
   var ref = useRef(null);
   var isRemainingheight = dropTargetStyle === 'remainingHeight';
   var anchorName = useMemo(function () {
-    if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       if (node && typeof pos === 'number') {
         var posOffset = position === 'upper' ? -node.nodeSize : 0;
         return (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos + posOffset)) || '';
@@ -136,7 +136,7 @@ var HoverZone = function HoverZone(_ref) {
     // only apply upper drop zone
     if (isRemainingheight && position === 'upper') {
       // previous node
-      var _anchorName = node ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : getNodeAnchor(node) : '';
+      var _anchorName = node ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : getNodeAnchor(node) : '';
       var top = 'unset';
       if (_anchorName) {
         var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');

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

@@ -5,12 +5,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
-import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported, nativeAnchorStyles, tableControlsSpacing } from '@atlaskit/editor-common/styles';
+import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported, tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -424,18 +423,47 @@ var dragHandlerAnchorStyles = css({
     }
   }
 });
+// Styles applied to nodes with anchors when dragging
+var dragAnchorStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-node-anchor]:not([data-node-anchor] [data-node-anchor])': {
+      // all top level nodes with anchor
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-node-anchor]:has([data-blocks-drop-target-container]) [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-prosemirror-node-name="media"][data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // first table row to avoid multiple anchors in table
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-prosemirror-node-name="table"] [data-prosemirror-node-name="tableRow"][data-node-anchor]:first-of-type': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    }
+  }
+});
 export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
   var api = _ref.api;
   var isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
     disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
   });
-  var shouldRenderAnchors = isCSSAnchorSupported() && expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('platform_native_anchor_use_css_style');
+  var shouldRenderAnchors = isCSSAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
   var toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   return jsx(Global, {
-    styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
+    styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
       exposure: true
-    }) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
+    }) ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? nativeAnchorStyles : dragHandlerAnchorStyles)]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
   });
 };

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

@@ -93,7 +93,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
   var anchorName = useMemo(function () {
-    if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
       var _getPos;
       return nextNode ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode, (_getPos = getPos()) !== null && _getPos !== void 0 ? _getPos : -1)) || '' : '';
     }
@@ -126,7 +126,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
         innerContainerWidth = "calc(var(--ak-editor--line-length) * ".concat(percentageWidth, ")");
       }
     } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
-      var tableWidthAnchor = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof nextNodePos === 'number' ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '' : '' : getNodeAnchor(nextNode.firstChild);
+      var tableWidthAnchor = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof nextNodePos === 'number' ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '' : '' : getNodeAnchor(nextNode.firstChild);
       var isNumberColumnEnabled = Boolean(nextNode.attrs.isNumberColumnEnabled);
       if (isAnchorSupported()) {
         innerContainerWidth = isNumberColumnEnabled ? "calc(anchor-size(".concat(tableWidthAnchor, " width) + ").concat(TABLE_NUMBERED_COLUMN_WIDTH, "px)") : "anchor-size(".concat(tableWidthAnchor, " width)");
@@ -139,7 +139,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
         innerContainerWidth = "min(".concat(nextNode.attrs.width, "px, ").concat(innerContainerWidth, ")");
       }
     } else if (nextNode.type.name === 'mediaSingle' && nextNode.firstChild) {
-      if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+      if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
         var _nextNode$firstChild;
         // check pos is a number
         if (typeof nextNodePos === 'number' && ((_nextNode$firstChild = nextNode.firstChild) === null || _nextNode$firstChild === void 0 ? void 0 : _nextNode$firstChild.type.name) === 'media') {
@@ -154,7 +154,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     var heightTargetAnchorName = targetAnchorName;
     if (nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
       if (isLeftPosition) {
-        if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+        if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
           if (typeof nextNodePos === 'number') {
             heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '';
           } else {
@@ -164,7 +164,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
           heightTargetAnchorName = getNodeAnchor(nextNode.firstChild);
         }
       } else {
-        if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+        if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
           if (typeof nextNodePos === 'number') {
             var lastNodeStartPos = nextNode.content.size - nextNode.lastChild.nodeSize;
             heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.lastChild, lastNodeStartPos + 1)) || '';

package/dist/esm/ui/utils/anchor-name.js CHANGED Viewed

@@ -10,7 +10,7 @@ export var refreshAnchorName = function refreshAnchorName(_ref) {
     view = _ref.view,
     anchorName = _ref.anchorName;
   var newAnchorName = anchorName || '';
-  if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     return newAnchorName;
   }
   var pos = getPos();

package/dist/esm/ui/utils/dom-attr-name.js CHANGED Viewed

@@ -2,13 +2,13 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export var NODE_ANCHOR_ATTR_NAME = 'data-node-anchor';
 export var NODE_NODE_TYPE_ATTR_NAME = 'data-prosemirror-node-name';
 export var getAnchorAttrName = function getAnchorAttrName() {
-  if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     return NODE_ANCHOR_ATTR_NAME;
   }
   return 'data-drag-handler-anchor-name';
 };
 export var getTypeNameAttrName = function getTypeNameAttrName() {
-  if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
     return NODE_NODE_TYPE_ATTR_NAME;
   }
   return 'data-drag-handler-node-type';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.8.0",
+	"version": "7.10.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -54,8 +54,8 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.43.0",
-		"@atlaskit/tokens": "^8.3.0",
+		"@atlaskit/tmp-editor-statsig": "^14.0.0",
+		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.10.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -66,7 +66,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.35.0",
+		"@atlaskit/editor-common": "^110.36.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -143,9 +143,6 @@
 		"dst-a11y__replace-anchor-with-link__editor-jenga": {
 			"type": "boolean"
 		},
-		"platform_native_anchor_use_css_style": {
-			"type": "boolean"
-		},
 		"editor_native_anchor_remove_decoration_in_apply": {
 			"type": "boolean"
 		},
@@ -154,12 +151,6 @@
 		},
 		"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"
 		}
 	}
 }