@atlaskit/editor-plugin-block-controls 27.0.4 → 27.0.5

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

@@ -12,14 +12,15 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
 var _browserApis = require("@atlaskit/browser-apis");
-var _analytics = require("@atlaskit/editor-common/analytics");
+var _enums = require("@atlaskit/editor-common/analytics/types/enums");
 var _browser = require("@atlaskit/editor-common/browser");
-var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
-var _messages = require("@atlaskit/editor-common/messages");
-var _styles = require("@atlaskit/editor-common/styles");
+var _blockControls = require("@atlaskit/editor-common/messages/block-controls");
+var _dragHandle = require("@atlaskit/editor-common/styles/drag-handle");
+var _table = require("@atlaskit/editor-common/styles/table");
+var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _consts = require("@atlaskit/editor-shared-styles/consts");
+var _constants = require("@atlaskit/editor-shared-styles/constants");
 var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
@@ -33,11 +34,11 @@ var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _main = require("../pm-plugins/main");
 var _pluginKey = require("../pm-plugins/selection-preservation/plugin-key");
-var _analytics2 = require("../pm-plugins/utils/analytics");
+var _analytics = require("../pm-plugins/utils/analytics");
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
 var _expandAndUpdateSelection = require("../pm-plugins/utils/expand-and-update-selection");
 var _getSelection = require("../pm-plugins/utils/getSelection");
-var _consts2 = require("./consts");
+var _consts = require("./consts");
 var _dragHandleNestedIcon = require("./drag-handle-nested-icon");
 var _dragPreview = require("./drag-preview");
 var _shouldUseNestedDragHandleIcon = require("./should-use-nested-drag-handle-icon");
@@ -84,16 +85,16 @@ var buttonWrapperStylesPatch = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    marginRight: -_consts.akEditorTableToolbarSize,
+    marginRight: -_constants.akEditorTableToolbarSize,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    paddingRight: _consts.akEditorTableToolbarSize
+    paddingRight: _constants.akEditorTableToolbarSize
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    marginRight: -_consts.akEditorTableToolbarSize,
+    marginRight: -_constants.akEditorTableToolbarSize,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    paddingRight: _consts.akEditorTableToolbarSize
+    paddingRight: _constants.akEditorTableToolbarSize
   }
 });
 
@@ -108,18 +109,18 @@ var dragHandleButtonStyles = (0, _react2.css)({
   justifyContent: 'center',
   alignItems: 'center',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: _consts2.DRAG_HANDLE_HEIGHT,
+  height: _consts.DRAG_HANDLE_HEIGHT,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  width: _styles.DRAG_HANDLE_WIDTH,
+  width: _dragHandle.DRAG_HANDLE_WIDTH,
   border: 'none',
   background: 'transparent',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: _consts2.DRAG_HANDLE_BORDER_RADIUS,
+  borderRadius: _consts.DRAG_HANDLE_BORDER_RADIUS,
   // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
   color: "var(--ds-icon, #292A2E)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  zIndex: _consts2.DRAG_HANDLE_ZINDEX,
+  zIndex: _consts.DRAG_HANDLE_ZINDEX,
   outline: 'none',
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
@@ -141,11 +142,11 @@ var dragHandleButtonStyles = (0, _react2.css)({
 // Standard: 16px -> 24h x 12w, Dense: 13px -> 18h x 9w, Jira: 14px -> 21h x 12w
 var dragHandleButtonScaledStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  height: (0, _consts.relativeSizeToBaseFontSize)(_consts2.DRAG_HANDLE_HEIGHT),
+  height: (0, _constants.relativeSizeToBaseFontSize)(_consts.DRAG_HANDLE_HEIGHT),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  width: (0, _consts.relativeSizeToBaseFontSize)(_styles.DRAG_HANDLE_WIDTH)
+  width: (0, _constants.relativeSizeToBaseFontSize)(_dragHandle.DRAG_HANDLE_WIDTH)
 });
-var dragHandleButtonSmallScreenStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_consts.akEditorFullPageNarrowBreakout, "px)"), {
+var dragHandleButtonSmallScreenStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_constants.akEditorFullPageNarrowBreakout, "px)"), {
   opacity: 0,
   visibility: 'hidden'
 }));
@@ -161,18 +162,18 @@ var dragHandleButtonStylesOld = (0, _react2.css)({
   justifyContent: 'center',
   alignItems: 'center',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: _consts2.DRAG_HANDLE_HEIGHT,
+  height: _consts.DRAG_HANDLE_HEIGHT,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  width: _styles.DRAG_HANDLE_WIDTH,
+  width: _dragHandle.DRAG_HANDLE_WIDTH,
   border: 'none',
   background: 'transparent',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: _consts2.DRAG_HANDLE_BORDER_RADIUS,
+  borderRadius: _consts.DRAG_HANDLE_BORDER_RADIUS,
   // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
   color: "var(--ds-icon, #292A2E)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  zIndex: _consts2.DRAG_HANDLE_ZINDEX,
+  zIndex: _consts.DRAG_HANDLE_ZINDEX,
   outline: 'none',
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
@@ -205,14 +206,14 @@ var dragHandleContainerStyles = (0, _primitives.xcss)({
 });
 var tooltipContainerStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  bottom: "-".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN, "px"),
+  bottom: "-".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
   position: 'sticky',
   display: 'block',
   zIndex: 100 // card = 100
 });
 var tooltipContainerStylesStickyHeaderWithMask = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN, "px"),
+  top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     top: '0'
@@ -224,7 +225,7 @@ var tooltipContainerStylesStickyHeaderWithMask = (0, _react2.css)({
 });
 var tooltipContainerStylesImprovedStickyHeaderWithMask = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN, "px"),
+  top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     top: '0'
@@ -236,46 +237,46 @@ var tooltipContainerStylesImprovedStickyHeaderWithMask = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: _styles.tableControlsSpacing
+    top: _table.tableControlsSpacing
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: _styles.tableControlsSpacing
+    top: _table.tableControlsSpacing
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
+    top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
+    top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
+    top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-mark-name="fragment"] > [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
+    top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
   }
 });
 var tooltipContainerStylesStickyHeaderWithoutMask = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN, "px"),
+  top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: _styles.tableControlsSpacing
+    top: _table.tableControlsSpacing
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: _styles.tableControlsSpacing
+    top: _table.tableControlsSpacing
   }
 });
 var dragHandleMultiLineSelectionFixFirefox = (0, _react2.css)({
@@ -314,23 +315,23 @@ var handleIconDragStart = function handleIconDragStart(e) {
 };
 var getNodeSpacingForPreview = function getNodeSpacingForPreview(node) {
   if (!node) {
-    return _consts2.spacingBetweenNodesForPreview['default'];
+    return _consts.spacingBetweenNodesForPreview['default'];
   }
   var nodeTypeName = node.type.name;
   if (nodeTypeName === 'heading') {
-    return _consts2.spacingBetweenNodesForPreview["heading".concat(node.attrs.level)] || _consts2.spacingBetweenNodesForPreview['default'];
+    return _consts.spacingBetweenNodesForPreview["heading".concat(node.attrs.level)] || _consts.spacingBetweenNodesForPreview['default'];
   }
-  return _consts2.spacingBetweenNodesForPreview[nodeTypeName] || _consts2.spacingBetweenNodesForPreview['default'];
+  return _consts.spacingBetweenNodesForPreview[nodeTypeName] || _consts.spacingBetweenNodesForPreview['default'];
 };
 var getNodeMargins = function getNodeMargins(node) {
   if (!node) {
-    return _consts2.nodeMargins['default'];
+    return _consts.nodeMargins['default'];
   }
   var nodeTypeName = node.type.name;
   if (nodeTypeName === 'heading') {
-    return _consts2.nodeMargins["heading".concat(node.attrs.level)] || _consts2.nodeMargins['default'];
+    return _consts.nodeMargins["heading".concat(node.attrs.level)] || _consts.nodeMargins['default'];
   }
-  return _consts2.nodeMargins[nodeTypeName] || _consts2.nodeMargins['default'];
+  return _consts.nodeMargins[nodeTypeName] || _consts.nodeMargins['default'];
 };
 
 // Omit `isOpen` so the reducer toggles the menu for a re-clicked layout column.
@@ -344,7 +345,7 @@ var getDragHandleAnchorReference = function getDragHandleAnchorReference(_ref) {
   var edge = _ref.edge,
     safeAnchorName = _ref.safeAnchorName;
   if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true)) {
-    return "anchor(".concat(safeAnchorName, " ").concat(edge, ", anchor(").concat(_consts2.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, " ").concat(edge, "))");
+    return "anchor(".concat(safeAnchorName, " ").concat(edge, ", anchor(").concat(_consts.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, " ").concat(edge, "))");
   }
   return "anchor(".concat(safeAnchorName, " ").concat(edge, ")");
 };
@@ -381,7 +382,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     isFocused = _useState8[0],
     setIsFocused = _useState8[1];
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['featureFlags', 'selection', 'blockControls', 'interaction', 'userIntent'], function (states) {
+  var _useSharedPluginState = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['featureFlags', 'selection', 'blockControls', 'interaction', 'userIntent'], function (states) {
       var _states$featureFlagsS, _states$selectionStat, _states$interactionSt, _states$userIntentSta;
       return {
         macroInteractionUpdates: (_states$featureFlagsS = states.featureFlagsState) === null || _states$featureFlagsS === void 0 ? void 0 : _states$featureFlagsS.macroInteractionUpdates,
@@ -468,10 +469,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
       var resolvedStartPos = tr.doc.resolve(startPos);
       var selection = ((_selectionPreservatio = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
       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,
-        actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
-        actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+        eventType: _enums.EVENT_TYPE.UI,
+        action: _enums.ACTION.CLICKED,
+        actionSubject: _enums.ACTION_SUBJECT.BUTTON,
+        actionSubjectId: _enums.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
         attributes: {
           nodeDepth: resolvedStartPos.depth,
           nodeTypes: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
@@ -700,7 +701,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
           var maybeNode = resolvedMovingNode.nodeAfter;
           var mSelect = api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.multiSelectDnD;
           if (mSelect) {
-            var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, mSelect.anchor, mSelect.head);
+            var attributes = (0, _analytics.getMultiSelectAnalyticsAttributes)(tr, mSelect.anchor, mSelect.head);
             nodeTypes = attributes.nodeTypes;
             hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
           } else {
@@ -712,10 +713,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
           });
           tr.setMeta('scrollIntoView', false);
           api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
-            eventType: _analytics.EVENT_TYPE.UI,
-            action: _analytics.ACTION.DRAGGED,
-            actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
-            actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+            eventType: _enums.EVENT_TYPE.UI,
+            action: _enums.ACTION.DRAGGED,
+            actionSubject: _enums.ACTION_SUBJECT.ELEMENT,
+            actionSubjectId: _enums.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
             attributes: {
               nodeDepth: resolvedMovingNode.depth,
               nodeTypes: nodeTypes || '',
@@ -747,7 +748,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
     // Defence-in-depth guard: since the node decoration sets data-active-drag-handle on the
     // active node, we check for it directly. This is a cheap DOM attribute read (no reflow,
     // no style recalculation) and hides the control if the decoration hasn't been applied yet.
-    if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !(dom !== null && dom !== void 0 && dom.hasAttribute(_consts2.ACTIVE_DRAG_HANDLE_ATTR))) {
+    if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !(dom !== null && dom !== void 0 && dom.hasAttribute(_consts.ACTIVE_DRAG_HANDLE_ATTR))) {
       return {
         display: 'none'
       };
@@ -789,13 +790,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
         edge: 'right',
         safeAnchorName: safeAnchorName
       });
-      var bottom = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn, _consts2.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME) : {};
+      var bottom = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn, _consts.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME) : {};
       return _objectSpread({
-        left: isEdgeCase ? "calc(".concat(anchorStart, " + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((".concat(anchorRight, " + ").concat(anchorLeft, ")/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(".concat(anchorStart, " - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
-        top: (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(".concat(anchorTop, " - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(".concat(anchorStart, " + ").concat((0, _consts2.topPositionAdjustment)(nodeTypeWithLevel, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
+        left: isEdgeCase ? "calc(".concat(anchorStart, " + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((".concat(anchorRight, " + ").concat(anchorLeft, ")/2 - ").concat(_consts.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(".concat(anchorStart, " - ").concat(_dragHandle.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
+        top: (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(".concat(anchorTop, " - ").concat(_dragHandle.DRAG_HANDLE_WIDTH, "px)") : "calc(".concat(anchorStart, " + ").concat((0, _consts.topPositionAdjustment)(nodeTypeWithLevel, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
       }, bottom);
     }
-    var height = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    var height = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: (0, _dragHandlePositions.getTopPosition)(dom, nodeTypeWithLevel)
@@ -849,7 +850,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
       }
       var _calcPos = requestAnimationFrame(function () {
         var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
-        if (dom !== null && dom !== void 0 && dom.hasAttribute(_consts2.ACTIVE_DRAG_HANDLE_ATTR)) {
+        if (dom !== null && dom !== void 0 && dom.hasAttribute(_consts.ACTIVE_DRAG_HANDLE_ATTR)) {
           return;
         }
         setPositionStylesOld(calculatePositionOld());
@@ -942,35 +943,35 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
     }
     setDragHandleSelected((0, _getSelection.isHandleCorrelatedToSelection)(view.state, selection, start));
   }, [start, selection, view]);
-  var dragHandleMessage = formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
+  var dragHandleMessage = formatMessage(_blockControls.messages.dragToMoveClickToOpen, {
     br: (0, _react2.jsx)("br", null)
   });
 
   // Create a string version for aria-label
-  var dragHandleAriaLabel = formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
+  var dragHandleAriaLabel = formatMessage(_blockControls.messages.dragToMoveClickToOpen, {
     br: ' '
   });
   var helpDescriptors = isTopLevelNodeValue ? [{
     description: dragHandleMessage
   }, {
-    description: formatMessage(_messages.blockControlsMessages.moveUp),
+    description: formatMessage(_blockControls.messages.moveUp),
     keymap: _keymaps.dragToMoveUp
   }, {
-    description: formatMessage(_messages.blockControlsMessages.moveDown),
+    description: formatMessage(_blockControls.messages.moveDown),
     keymap: _keymaps.dragToMoveDown
   }, {
-    description: formatMessage(_messages.blockControlsMessages.moveLeft),
+    description: formatMessage(_blockControls.messages.moveLeft),
     keymap: _keymaps.dragToMoveLeft
   }, {
-    description: formatMessage(_messages.blockControlsMessages.moveRight),
+    description: formatMessage(_blockControls.messages.moveRight),
     keymap: _keymaps.dragToMoveRight
   }] : [{
     description: dragHandleMessage
   }, {
-    description: formatMessage(_messages.blockControlsMessages.moveUp),
+    description: formatMessage(_blockControls.messages.moveUp),
     keymap: _keymaps.dragToMoveUp
   }, {
-    description: formatMessage(_messages.blockControlsMessages.moveDown),
+    description: formatMessage(_blockControls.messages.moveDown),
     keymap: _keymaps.dragToMoveDown
   }];
   var isParentNodeOfTypeLayout;
@@ -983,10 +984,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
     }
     if (isParentNodeOfTypeLayout) {
       helpDescriptors = [].concat((0, _toConsumableArray2.default)(helpDescriptors), [{
-        description: formatMessage(_messages.blockControlsMessages.moveLeft),
+        description: formatMessage(_blockControls.messages.moveLeft),
         keymap: _keymaps.dragToMoveLeft
       }, {
-        description: formatMessage(_messages.blockControlsMessages.moveRight),
+        description: formatMessage(_blockControls.messages.moveRight),
         keymap: _keymaps.dragToMoveRight
       }]);
     }
@@ -995,18 +996,18 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
   // When advanced layout is on, layout column drag handle show only show 'Drag to move', no shortcuts
   if ((0, _editorExperiment.editorExperiment)('advanced_layouts', true) && nodeType === 'layoutColumn') {
     helpDescriptors = [{
-      description: formatMessage(_messages.blockControlsMessages.dragToRearrange)
+      description: formatMessage(_blockControls.messages.dragToRearrange)
     }, {
-      description: formatMessage(_messages.blockControlsMessages.moveUp),
+      description: formatMessage(_blockControls.messages.moveUp),
       keymap: _keymaps.dragToMoveUp
     }, {
-      description: formatMessage(_messages.blockControlsMessages.moveDown),
+      description: formatMessage(_blockControls.messages.moveDown),
       keymap: _keymaps.dragToMoveDown
     }, {
-      description: formatMessage(_messages.blockControlsMessages.moveLeft),
+      description: formatMessage(_blockControls.messages.moveLeft),
       keymap: _keymaps.dragToMoveLeft
     }, {
-      description: formatMessage(_messages.blockControlsMessages.moveRight),
+      description: formatMessage(_blockControls.messages.moveRight),
       keymap: _keymaps.dragToMoveRight
     }];
   }
@@ -1138,7 +1139,7 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
     handleOptions = _ref0.handleOptions,
     isTopLevelNode = _ref0.isTopLevelNode,
     anchorRectCache = _ref0.anchorRectCache;
-  var rightSideControlsEnabled = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
+  var rightSideControlsEnabled = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
     var _states$blockControls, _states$blockControls2;
     return {
       rightSideControlsEnabled: (_states$blockControls = (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.rightSideControlsEnabled) !== null && _states$blockControls !== void 0 ? _states$blockControls : false

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

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _constants = require("@atlaskit/editor-shared-styles/constants");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
@@ -65,7 +65,7 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
       height = "".concat((layoutColumnRect === null || layoutColumnRect === void 0 ? void 0 : layoutColumnRect.height) || 0, "px");
     }
   }
-  var dropTargetStackLayoutHintStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px)"), {
+  var dropTargetStackLayoutHintStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "@container layout-area (max-width:".concat(_constants.layoutBreakpointWidth.MEDIUM - 1, "px)"), {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
     height: height,
     marginTop: "var(--ds-space-050, 4px)"
@@ -179,7 +179,7 @@ var DropTargetLayoutNativeAnchorSupport = exports.DropTargetLayoutNativeAnchorSu
       return cancelAnimationFrame(raf);
     };
   }, [readNextNodeAnchor]);
-  var dropTargetStackLayoutHintStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px)"), {
+  var dropTargetStackLayoutHintStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "@container layout-area (max-width:".concat(_constants.layoutBreakpointWidth.MEDIUM - 1, "px)"), {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
     height: height,
     marginTop: "var(--ds-space-050, 4px)"

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

@@ -10,7 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
 var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
@@ -213,7 +213,7 @@ var DropTarget = exports.DropTarget = function DropTarget(props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['width'], function (states) {
+  var _useSharedPluginState = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['width'], function (states) {
       var _states$widthState;
       return {
         lineLength: ((_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH