@atlaskit/editor-plugin-block-controls 1.5.11 → 1.5.12

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.5.12
+
+### Patch Changes
+
+- [#117568](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117568)
+  [`b07c3e0b8dbf8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b07c3e0b8dbf8) -
+  Update drag handle position on divider node
+- Updated dependencies
+
 ## 1.5.11
 
 ### Patch Changes

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

@@ -82,7 +82,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     var _Decoration$node2;
     var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
     var style;
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+    if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;");
     } else {
       style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '');
@@ -142,7 +142,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+    if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
       // due to margins applied to other nodes eg. Headings
       element.style.clear = 'unset';

package/dist/cjs/ui/consts.js

@@ -3,17 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
+exports.topPositionAdjustment = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
 var DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_WIDTH = 12;
 var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
 var DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_ZINDEX = _editorSharedStyles.akRichMediaResizeZIndex + _editorSharedStyles.akEditorUnitZIndex; //place above legacy resizer
 
+var DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
+
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType) {
   if (nodeTypeExcludeList.includes(nodeType)) {
     return 12;
   }
   return 8;
+};
+var topPositionAdjustment = exports.topPositionAdjustment = function topPositionAdjustment(nodeType) {
+  switch (nodeType) {
+    case 'rule':
+      return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;
+    case 'table':
+      return DRAG_HANDLE_HEIGHT;
+    default:
+      return 0;
+  }
 };

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

@@ -105,7 +105,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       });
       var resolvedMovingNode = tr.doc.resolve(start);
       var maybeNode = resolvedMovingNode.nodeAfter;
-      (0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
+      (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
         eventType: _analytics.EVENT_TYPE.UI,
         action: _analytics.ACTION.CLICKED,
@@ -242,17 +242,17 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     }
     if (supportsAnchor) {
-      return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
+      return (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
         left: hasResizer || isExtension || isEmbedCard ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
-        top: anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
+        top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       } : {
         left: hasResizer || isExtension || isBlockCard || isEmbedCard ? (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
-        top: anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
+        top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
     return {
       left: (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates),
-      top: (0, _dragHandlePositions.getTopPosition)(dom)
+      top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
   return (0, _react2.jsx)("button", {
@@ -263,7 +263,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     ,
     style: positionStyles,
     onClick: handleOnClick,
-    onMouseDown: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+    onMouseDown: (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
     "data-testid": "block-ctrl-drag-handle"
   }, (0, _react2.jsx)(_dragHandler.default, {
     label: "",

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

@@ -18,19 +18,27 @@ var extendedHoverZone = (0, _react.css)({
     display: 'none !important'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-drag-handler-anchor-name]::after': {
-    content: '""',
-    position: 'absolute',
-    top: 0,
-    left: '-100%',
-    width: '100%',
-    height: '100%',
-    background: 'transparent',
-    cursor: 'default',
-    zIndex: -1
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: '-100%',
+      width: '100%',
+      height: '100%',
+      background: 'transparent',
+      cursor: 'default',
+      zIndex: -1
+    }
   },
+  // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-blocks-decoration-container="true"] + *::after': {
+  'hr[data-drag-handler-anchor-name]': {
+    overflow: 'visible'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-blocks-drag-handle-container="true"] + *::after': {
     display: 'none'
   }
 });

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

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTopPosition = exports.getLeftPosition = void 0;
 var _consts = require("../ui/consts");
-var getTopPosition = exports.getTopPosition = function getTopPosition(dom) {
+var getTopPosition = exports.getTopPosition = function getTopPosition(dom, type) {
   if (!dom) {
     return 'auto';
   }
   var table = dom.querySelector('table');
   if (table) {
     return "".concat(dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
+  } else if (type === 'rule') {
+    return "".concat(dom.offsetTop - _consts.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, "px");
   } else {
     return "".concat(dom.offsetTop, "px");
   }

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

@@ -1,7 +1,7 @@
 import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
@@ -74,7 +74,7 @@ export const nodeDecorations = newState => {
   newState.doc.descendants((node, pos, _parent, index) => {
     const anchorName = `--node-anchor-${node.type.name}-${index}`;
     let style;
-    if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+    if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       style = `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}; position: relative; z-index: 1;`;
     } else {
       style = `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}`;
@@ -136,7 +136,7 @@ export const dragHandleDecoration = (pos, anchorName, nodeType, api) => {
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
-    if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+    if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
       // due to margins applied to other nodes eg. Headings
       element.style.clear = 'unset';

package/dist/es2019/ui/consts.js

@@ -4,10 +4,22 @@ export const DRAG_HANDLE_WIDTH = 12;
 export const DRAG_HANDLE_BORDER_RADIUS = 4;
 export const DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer
 
+export const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
+
 const nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 export const dragHandleGap = nodeType => {
   if (nodeTypeExcludeList.includes(nodeType)) {
     return 12;
   }
   return 8;
+};
+export const topPositionAdjustment = nodeType => {
+  switch (nodeType) {
+    case 'rule':
+      return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;
+    case 'table':
+      return DRAG_HANDLE_HEIGHT;
+    default:
+      return 0;
+  }
 };

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

@@ -7,13 +7,13 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { key } from '../pm-plugins/main';
 import { selectNode } from '../utils';
 import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
-import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap } from './consts';
+import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 const dragHandleButtonStyles = css({
   position: 'absolute',
@@ -91,7 +91,7 @@ export const DragHandle = ({
       });
       const resolvedMovingNode = tr.doc.resolve(start);
       const maybeNode = resolvedMovingNode.nodeAfter;
-      getBooleanFF('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
+      fg('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
       api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
         eventType: EVENT_TYPE.UI,
         action: ACTION.CLICKED,
@@ -231,17 +231,17 @@ export const DragHandle = ({
       }
     }
     if (supportsAnchor) {
-      return getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
+      return fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
         left: hasResizer || isExtension || isEmbedCard ? `calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates)})` : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
-        top: anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
+        top: fg('platform_editor_elements_dnd_ed_23674') ? `calc(anchor(${anchorName} start) + ${topPositionAdjustment(nodeType)}px)` : anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
       } : {
         left: hasResizer || isExtension || isBlockCard || isEmbedCard ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
-        top: anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
+        top: fg('platform_editor_elements_dnd_ed_23674') ? `calc(anchor(${anchorName} start) + ${topPositionAdjustment(nodeType)}px)` : anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
       };
     }
     return {
       left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
-      top: getTopPosition(dom)
+      top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
   return jsx("button", {
@@ -252,7 +252,7 @@ export const DragHandle = ({
     ,
     style: positionStyles,
     onClick: handleOnClick,
-    onMouseDown: getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+    onMouseDown: fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
     "data-testid": "block-ctrl-drag-handle"
   }, jsx(DragHandlerIcon, {
     label: "",

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

@@ -9,19 +9,27 @@ const extendedHoverZone = css({
     display: 'none !important'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-drag-handler-anchor-name]::after': {
-    content: '""',
-    position: 'absolute',
-    top: 0,
-    left: '-100%',
-    width: '100%',
-    height: '100%',
-    background: 'transparent',
-    cursor: 'default',
-    zIndex: -1
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: '-100%',
+      width: '100%',
+      height: '100%',
+      background: 'transparent',
+      cursor: 'default',
+      zIndex: -1
+    }
   },
+  // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-blocks-decoration-container="true"] + *::after': {
+  'hr[data-drag-handler-anchor-name]': {
+    overflow: 'visible'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-blocks-drag-handle-container="true"] + *::after': {
     display: 'none'
   }
 });

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

@@ -1,11 +1,13 @@
-import { DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
-export const getTopPosition = dom => {
+import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
+export const getTopPosition = (dom, type) => {
   if (!dom) {
     return 'auto';
   }
   const table = dom.querySelector('table');
   if (table) {
     return `${dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0)}px`;
+  } else if (type === 'rule') {
+    return `${dom.offsetTop - DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT}px`;
   } else {
     return `${dom.offsetTop}px`;
   }

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
@@ -75,7 +75,7 @@ export var nodeDecorations = function nodeDecorations(newState) {
     var _Decoration$node2;
     var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
     var style;
-    if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+    if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;");
     } else {
       style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '');
@@ -135,7 +135,7 @@ export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName,
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
-    if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
+    if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
       // due to margins applied to other nodes eg. Headings
       element.style.clear = 'unset';

package/dist/esm/ui/consts.js

@@ -4,10 +4,22 @@ export var DRAG_HANDLE_WIDTH = 12;
 export var DRAG_HANDLE_BORDER_RADIUS = 4;
 export var DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer
 
+export var DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
+
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 export var dragHandleGap = function dragHandleGap(nodeType) {
   if (nodeTypeExcludeList.includes(nodeType)) {
     return 12;
   }
   return 8;
+};
+export var topPositionAdjustment = function topPositionAdjustment(nodeType) {
+  switch (nodeType) {
+    case 'rule':
+      return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;
+    case 'table':
+      return DRAG_HANDLE_HEIGHT;
+    default:
+      return 0;
+  }
 };

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

@@ -8,13 +8,13 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { key } from '../pm-plugins/main';
 import { selectNode } from '../utils';
 import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
-import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap } from './consts';
+import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 var dragHandleButtonStyles = css({
   position: 'absolute',
@@ -97,7 +97,7 @@ export var DragHandle = function DragHandle(_ref) {
       });
       var resolvedMovingNode = tr.doc.resolve(start);
       var maybeNode = resolvedMovingNode.nodeAfter;
-      getBooleanFF('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
+      fg('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
         eventType: EVENT_TYPE.UI,
         action: ACTION.CLICKED,
@@ -234,17 +234,17 @@ export var DragHandle = function DragHandle(_ref) {
       }
     }
     if (supportsAnchor) {
-      return getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
+      return fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
         left: hasResizer || isExtension || isEmbedCard ? "calc(anchor(".concat(anchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
-        top: anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
+        top: fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       } : {
         left: hasResizer || isExtension || isBlockCard || isEmbedCard ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
-        top: anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
+        top: fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
     return {
       left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
-      top: getTopPosition(dom)
+      top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
   return jsx("button", {
@@ -255,7 +255,7 @@ export var DragHandle = function DragHandle(_ref) {
     ,
     style: positionStyles,
     onClick: handleOnClick,
-    onMouseDown: getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+    onMouseDown: fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
     "data-testid": "block-ctrl-drag-handle"
   }, jsx(DragHandlerIcon, {
     label: "",

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

@@ -10,19 +10,27 @@ var extendedHoverZone = css({
     display: 'none !important'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-drag-handler-anchor-name]::after': {
-    content: '""',
-    position: 'absolute',
-    top: 0,
-    left: '-100%',
-    width: '100%',
-    height: '100%',
-    background: 'transparent',
-    cursor: 'default',
-    zIndex: -1
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: '-100%',
+      width: '100%',
+      height: '100%',
+      background: 'transparent',
+      cursor: 'default',
+      zIndex: -1
+    }
   },
+  // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-blocks-decoration-container="true"] + *::after': {
+  'hr[data-drag-handler-anchor-name]': {
+    overflow: 'visible'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-blocks-drag-handle-container="true"] + *::after': {
     display: 'none'
   }
 });

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

@@ -1,11 +1,13 @@
-import { DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
-export var getTopPosition = function getTopPosition(dom) {
+import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
+export var getTopPosition = function getTopPosition(dom, type) {
   if (!dom) {
     return 'auto';
   }
   var table = dom.querySelector('table');
   if (table) {
     return "".concat(dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
+  } else if (type === 'rule') {
+    return "".concat(dom.offsetTop - DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, "px");
   } else {
     return "".concat(dom.offsetTop, "px");
   }

package/dist/types/ui/consts.d.ts

@@ -2,4 +2,6 @@ export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_WIDTH = 12;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
 export declare const DRAG_HANDLE_ZINDEX: number;
+export declare const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT: number;
 export declare const dragHandleGap: (nodeType: string) => 8 | 12;
+export declare const topPositionAdjustment: (nodeType: string) => number;

package/dist/types/utils/drag-handle-positions.d.ts

@@ -1,2 +1,2 @@
-export declare const getTopPosition: (dom: HTMLElement | null) => string;
+export declare const getTopPosition: (dom: HTMLElement | null, type?: string) => string;
 export declare const getLeftPosition: (dom: HTMLElement | null, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -2,4 +2,6 @@ export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_WIDTH = 12;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
 export declare const DRAG_HANDLE_ZINDEX: number;
+export declare const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT: number;
 export declare const dragHandleGap: (nodeType: string) => 8 | 12;
+export declare const topPositionAdjustment: (nodeType: string) => number;

package/dist/types-ts4.5/utils/drag-handle-positions.d.ts

@@ -1,2 +1,2 @@
-export declare const getTopPosition: (dom: HTMLElement | null) => string;
+export declare const getTopPosition: (dom: HTMLElement | null, type?: string) => string;
 export declare const getLeftPosition: (dom: HTMLElement | null, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.5.11",
+	"version": "1.5.12",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^39.0.3",
-		"@atlaskit/editor-common": "^84.0.0",
+		"@atlaskit/editor-common": "^84.1.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
 		"@atlaskit/editor-plugin-feature-flags": "^1.1.0",
@@ -119,6 +119,9 @@
 		},
 		"platform.editor.elements.drag-and-drop-ed-23932": {
 			"type": "boolean"
+		},
+		"platform_editor_elements_dnd_ed_23674": {
+			"type": "boolean"
 		}
 	}
 }