@atlaskit/editor-plugin-block-controls 20.0.0 → 20.0.2

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

@@ -18,7 +18,6 @@ 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 _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
 var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
@@ -38,7 +37,6 @@ var _analytics2 = 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 _selection = require("../pm-plugins/utils/selection");
 var _consts2 = require("./consts");
 var _dragHandleNestedIcon = require("./drag-handle-nested-icon");
 var _dragPreview = require("./drag-preview");
@@ -193,11 +191,6 @@ var dragHandleButtonStylesOld = (0, _react2.css)({
     backgroundColor: "var(--ds-background-disabled, #0515240F)"
   }
 });
-var focusedStylesOld = (0, _react2.css)({
-  '&:focus': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
-  }
-});
 var focusedStyles = (0, _react2.css)({
   '&:focus-visible': {
     outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
@@ -360,7 +353,7 @@ var getDragHandleAnchorReference = function getDragHandleAnchorReference(_ref) {
   return "anchor(".concat(safeAnchorName, " ").concat(edge, ")");
 };
 var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
-  var _api$core4, _api$blockControls8;
+  var _api$blockControls7;
   var view = _ref2.view,
     api = _ref2.api,
     formatMessage = _ref2.formatMessage,
@@ -522,88 +515,19 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
     });
     view.focus();
   }, [api, view, getPos, nodeType, anchorName]);
-  var handleOnClick = (0, _react.useCallback)(function (e) {
-    var _api$core2;
-    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
-      var _api$blockControls$sh, _api$analytics2;
-      var tr = _ref4.tr;
-      var startPos = getPos();
-      if (startPos === undefined) {
-        return tr;
-      }
-      if (nodeType === 'layoutColumn' && (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
-        tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
-      }
-      var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
-      var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
-      if (tr.selection.empty || !e.shiftKey) {
-        tr = (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
-      } else if (isTopLevelNodeValue && $anchor.depth <= _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _fg.fg)('platform_editor_elements_dnd_shift_click_select')) {
-        var _api$blockControls3;
-        var alignAnchorHeadToSel = (0, _selection.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
-        var selectionWithExpandedHead = (0, _selection.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
-        tr.setSelection(selectionWithExpandedHead);
-        api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.setMultiSelectPositions()({
-          tr: tr
-        });
-      }
-      var resolvedMovingNode = tr.doc.resolve(startPos);
-      var maybeNode = resolvedMovingNode.nodeAfter;
-      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.CLICKED,
-        actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
-        actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
-        attributes: {
-          nodeDepth: resolvedMovingNode.depth,
-          nodeTypes: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
-        }
-      })(tr);
-      return tr;
-    });
-    view.focus();
-  }, [api, view, getPos, isTopLevelNodeValue, nodeType]);
-  var handleKeyDown = (0, _react.useCallback)(function (e) {
-    // allow user to use spacebar to select the node
-    if (!e.repeat && e.key === ' ') {
-      var _api$core3;
-      var startPos = getPos();
-      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
-        var tr = _ref5.tr;
-        if (startPos === undefined) {
-          return tr;
-        }
-        var node = tr.doc.nodeAt(startPos);
-        if (!node) {
-          return tr;
-        }
-        var $startPos = tr.doc.resolve(startPos + node.nodeSize);
-        var selection = new _state.TextSelection($startPos);
-        tr.setSelection(selection);
-        return tr;
-      });
-    } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
-      return pressed;
-    })) {
-      // If not trying to press shortcut keys,
-      // return focus to editor to resume editing from caret position
-      view.focus();
-    }
-  }, [getPos, api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, view]);
   var handleKeyDownNew = (0, _react.useCallback)(function (e) {
     // allow user to use spacebar to select the node
     if (e.key === 'Enter' || !e.repeat && e.key === ' ') {
-      var _getDocument, _api$core5;
+      var _getDocument, _api$core2;
       if (((_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement) !== buttonRef.current) {
         return;
       }
       e.preventDefault();
       e.stopPropagation();
       var startPos = getPos();
-      api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
-        var _selectionPreservatio2, _api$blockControls4, _api$blockControls5, _api$userIntent;
-        var tr = _ref6.tr;
+      api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
+        var _selectionPreservatio2, _api$blockControls3, _api$blockControls4, _api$userIntent;
+        var tr = _ref4.tr;
         if (startPos === undefined) {
           return tr;
         }
@@ -616,7 +540,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
           nodeType: nodeType,
           api: api
         });
-        api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.startPreservingSelection()({
+        api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.startPreservingSelection()({
           tr: tr
         });
         if (nodeType === 'layoutColumn' && (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
@@ -627,7 +551,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
           pos: startPos,
           rootPos: tr.doc.resolve(startPos).before(1)
         };
-        api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.toggleBlockMenu({
+        api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.toggleBlockMenu({
           anchorName: anchorName,
           triggerByNode: triggerByNode,
           openedViaKeyboard: true
@@ -661,19 +585,19 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref7) {
-        var _api$core6, _api$blockControls$sh2;
-        var nativeSetDragImage = _ref7.nativeSetDragImage;
-        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref8) {
-          var tr = _ref8.tr;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref5) {
+        var _api$core3, _api$blockControls$sh;
+        var nativeSetDragImage = _ref5.nativeSetDragImage;
+        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref6) {
+          var tr = _ref6.tr;
           var handlePos = getPos();
           if (typeof handlePos !== 'number') {
             return tr;
           }
           var newHandlePosCheck = (0, _getSelection.isHandleCorrelatedToSelection)(view.state, tr.selection, handlePos);
           if (!tr.selection.empty && newHandlePosCheck) {
-            var _api$blockControls6;
-            api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setMultiSelectPositions()({
+            var _api$blockControls5;
+            api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.setMultiSelectPositions()({
               tr: tr
             });
           } else {
@@ -687,7 +611,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
           selection = state.selection;
         var sliceFrom = selection.from;
         var sliceTo = selection.to;
-        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;
+        var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
         if (mSelect) {
           var anchor = mSelect.anchor,
             head = mSelect.head;
@@ -742,8 +666,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
               };
             }
           },
-          render: function render(_ref9) {
-            var container = _ref9.container;
+          render: function render(_ref7) {
+            var container = _ref7.container;
             var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -775,17 +699,17 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core7;
+        var _api$core4;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref0) {
-          var _api$blockControls$sh3, _api$blockControls7, _api$analytics3;
-          var tr = _ref0.tr;
+        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref8) {
+          var _api$blockControls$sh2, _api$blockControls6, _api$analytics2;
+          var tr = _ref8.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
-          var mSelect = api === null || api === void 0 || (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.multiSelectDnD;
+          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);
             nodeTypes = attributes.nodeTypes;
@@ -794,11 +718,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
             nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
             hasSelectedMultipleNodes = false;
           }
-          api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 || _api$blockControls7.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
           tr.setMeta('scrollIntoView', false);
-          api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.attachAnalyticsEvent({
+          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,
@@ -1028,11 +952,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
     setDragHandleSelected((0, _getSelection.isHandleCorrelatedToSelection)(view.state, selection, start));
   }, [start, selection, view]);
   (0, _react.useEffect)(function () {
-    var _api$blockControls$sh4;
+    var _api$blockControls$sh3;
     if (isShiftDown === undefined || view.state.selection.empty || !(0, _fg.fg)('platform_editor_elements_dnd_shift_click_select')) {
       return;
     }
-    var mSelect = api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
+    var mSelect = api === null || api === void 0 || (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.multiSelectDnD;
     var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
     var isLayoutColumnMenuEnabled = (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true);
     if (isShiftDown && !(isLayoutColumnMenuEnabled && isLayoutColumn) && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
@@ -1040,15 +964,15 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
     } else {
       setDragHandleDisabled(false);
     }
-  }, [api === null || api === void 0 || (_api$blockControls8 = api.blockControls) === null || _api$blockControls8 === void 0 ? void 0 : _api$blockControls8.sharedState, isLayoutColumn, isShiftDown, isTopLevelNodeValue, view]);
-  var dragHandleMessage = (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true) ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
+  }, [api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 ? void 0 : _api$blockControls7.sharedState, isLayoutColumn, isShiftDown, isTopLevelNodeValue, view]);
+  var dragHandleMessage = formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
     br: (0, _react2.jsx)("br", null)
-  }) : formatMessage(_messages.blockControlsMessages.dragToMove);
+  });
 
   // Create a string version for aria-label
-  var dragHandleAriaLabel = (0, _expValEquals.expValEquals)('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
+  var dragHandleAriaLabel = formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
     br: ' '
-  }) : formatMessage(_messages.blockControlsMessages.dragToMove);
+  });
   var helpDescriptors = isTopLevelNodeValue ? [{
     description: dragHandleMessage
   }, {
@@ -1130,15 +1054,15 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
         css: [(0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
-        browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _editorExperiment.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true) && isFocused && keyboardFocusedDragHandleStyles, (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true) ? focusedStyles : focusedStylesOld, dragHandleButtonScaledStyles],
+        browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _editorExperiment.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, isFocused && keyboardFocusedDragHandleStyles, focusedStyles, dragHandleButtonScaledStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
         style: !(0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? positionStylesOld : {},
         onMouseDown: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
-        onMouseUp: (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true) ? handleMouseUp : undefined,
-        onClick: (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true) ? handleOnClickNew : handleOnClick,
-        onKeyDown: (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true) ? handleKeyDownNew : handleKeyDown
+        onMouseUp: handleMouseUp,
+        onClick: handleOnClickNew,
+        onKeyDown: handleKeyDownNew
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
         onDrop: handleOnDrop,
@@ -1148,14 +1072,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
         "data-testid": "block-ctrl-drag-handle",
         "aria-label": dragHandleAriaLabel,
         onBlur: function onBlur() {
-          if ((0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true)) {
-            setIsFocused(false);
-          }
+          setIsFocused(false);
           var pos = getPos();
           if (pos !== undefined) {
-            var _api$core8;
-            api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref1) {
-              var tr = _ref1.tr;
+            var _api$core5;
+            api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref9) {
+              var tr = _ref9.tr;
               tr.setMeta(_main.key, {
                 activeNode: {
                   pos: pos,
@@ -1249,16 +1171,16 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref10) {
-  var view = _ref10.view,
-    api = _ref10.api,
-    formatMessage = _ref10.formatMessage,
-    getPos = _ref10.getPos,
-    anchorName = _ref10.anchorName,
-    nodeType = _ref10.nodeType,
-    handleOptions = _ref10.handleOptions,
-    isTopLevelNode = _ref10.isTopLevelNode,
-    anchorRectCache = _ref10.anchorRectCache;
+var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref0) {
+  var view = _ref0.view,
+    api = _ref0.api,
+    formatMessage = _ref0.formatMessage,
+    getPos = _ref0.getPos,
+    anchorName = _ref0.anchorName,
+    nodeType = _ref0.nodeType,
+    handleOptions = _ref0.handleOptions,
+    isTopLevelNode = _ref0.isTopLevelNode,
+    anchorRectCache = _ref0.anchorRectCache;
   var rightSideControlsEnabled = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
     var _states$blockControls2, _states$blockControls3;
     return {

package/dist/es2019/blockControlsPlugin.js

@@ -6,8 +6,8 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { handleKeyDownWithPreservedSelection } from './editor-commands/handle-key-down-with-preserved-selection';
 import { mapPreservedSelection } from './editor-commands/map-preserved-selection';
 import { moveNode } from './editor-commands/move-node';
@@ -148,15 +148,17 @@ export const blockControlsPlugin = ({
           plugin: () => createInteractionTrackingPlugin(rightSideControlsEnabled, api)
         });
       }
-      if (editorExperiment('platform_editor_block_menu', true)) {
-        pmPlugins.push({
-          name: 'blockControlsSelectionPreservationPlugin',
-          plugin: createSelectionPreservationPlugin(api)
-        });
-      }
+      pmPlugins.push({
+        name: 'blockControlsSelectionPreservationPlugin',
+        plugin: createSelectionPreservationPlugin(api)
+      });
 
       // platform_editor_controls note: quick insert rendering fixes
-      if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
+      //
+      // Not registered under the registry migration: the decoration puts an inline
+      // `margin-top: 0` on the first document node, which fights features that render their own
+      // content above it — a leading show-diff widget is left flush against the node below.
+      if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) && legacyBlockControlsEnabled) {
         pmPlugins.push({
           name: 'firstNodeDec',
           plugin: firstNodeDecPlugin
@@ -207,9 +209,6 @@ export const blockControlsPlugin = ({
         tr
       }) => {
         var _api$userIntent, _api$userIntent$share, _api$blockControls2, _api$blockControls2$s, _options$anchorName, _api$blockControls3, _api$blockControls3$s;
-        if (!editorExperiment('platform_editor_block_menu', true)) {
-          return tr;
-        }
         const currMeta = tr.getMeta(key);
         const currentUserIntent = api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : (_api$userIntent$share = _api$userIntent.sharedState.currentState()) === null || _api$userIntent$share === void 0 ? void 0 : _api$userIntent$share.currentUserIntent;
         const isMenuCurrentlyOpen = api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$s = _api$blockControls2.sharedState.currentState()) === null || _api$blockControls2$s === void 0 ? void 0 : _api$blockControls2$s.isMenuOpen;
@@ -417,7 +416,7 @@ export const blockControlsPlugin = ({
       stopPreservingSelection: () => stopPreservingSelection
     },
     getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$menuTri2, _key$getState3, _key$getState$blockMe, _key$getState4, _key$getState$activeN, _key$getState5, _key$getState$activeD, _key$getState6, _key$getState$isDragg, _key$getState7, _key$getState$isPMDra, _key$getState8, _key$getState$multiSe, _key$getState9, _key$getState$isShift, _key$getState0, _key$getState$lastDra, _key$getState1, _interactionTrackingP, _key$getState$isSelec, _key$getState10;
+      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$menuTri2, _key$getState3, _key$getState$blockMe, _key$getState4, _key$getState$activeN, _key$getState5, _key$getState$activeD, _key$getState6, _key$getState$isDragg, _key$getState7, _key$getState$isPMDra, _key$getState8, _key$getState$multiSe, _key$getState9, _key$getState$isShift, _key$getState0, _key$getState$lastDra, _key$getState1, _interactionTrackingP, _key$getState$isSelec, _key$getState10, _selectionPreservatio;
       if (!editorState) {
         return undefined;
       }
@@ -447,10 +446,7 @@ export const blockControlsPlugin = ({
         sharedState.rightSideControlsEnabled = rightSideControlsEnabled;
         sharedState.hoverSide = rightSideControlsEnabled ? (_interactionTrackingP4 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP4 === void 0 ? void 0 : _interactionTrackingP4.hoverSide : undefined;
       }
-      if (editorExperiment('platform_editor_block_menu', true)) {
-        var _selectionPreservatio;
-        sharedState.preservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(editorState)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
-      }
+      sharedState.preservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(editorState)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
       return sharedState;
     },
     contentComponent({

package/dist/es2019/editor-commands/move-node-with-block-menu.js

@@ -1,6 +1,5 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { DIRECTION } from '@atlaskit/editor-common/types';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { key } from '../pm-plugins/main';
 import { mapPreservedSelection } from '../pm-plugins/utils/selection';
 import { moveNode } from './move-node';
@@ -21,9 +20,6 @@ export const moveNodeWithBlockMenu = (api, direction) => {
     tr
   }) => {
     var _api$blockControls$sh;
-    if (!editorExperiment('platform_editor_block_menu', true)) {
-      return tr;
-    }
     const preservedSelection = api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection;
     const selection = preservedSelection !== null && preservedSelection !== void 0 ? preservedSelection : tr.selection;
 

package/dist/es2019/editor-commands/move-node.js

@@ -380,7 +380,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
       tr
     });
   }
-  const preservedSelection = editorExperiment('platform_editor_block_menu', true) ? api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection : undefined;
+  const preservedSelection = api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection;
   if (preservedSelection) {
     const $from = tr.doc.resolve(Math.min(start, preservedSelection.from));
     const expandedRange = $from.blockRange(preservedSelection.$to);
@@ -485,7 +485,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   });
   if (
   // when move node via block menu, we need to keep the focus on block menu popup, so don't move focus to editor in this scenario
-  !(inputMethod === INPUT_METHOD.BLOCK_MENU && editorExperiment('platform_editor_block_menu', true))) {
+  inputMethod !== INPUT_METHOD.BLOCK_MENU) {
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
   }
   const $mappedTo = tr.doc.resolve(mappedTo);

package/dist/es2019/editor-commands/utils/move-node-utils.js

@@ -1,6 +1,5 @@
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { createPreservedSelection } from '../../pm-plugins/utils/selection';
 
 /**
@@ -28,7 +27,7 @@ export const getNodeBoundsFromSelection = selection => {
   // Special case: if a media node (file) is selected, we need to get the parent mediaGroup
   // This handles the case where clicking on a file creates a NodeSelection of the media node
   // but we want to move the entire mediaGroup that wraps it
-  if (selection instanceof NodeSelection && selection.node.type.name === 'media' && selection.node.attrs.type === 'file' && editorExperiment('platform_editor_block_menu', true)) {
+  if (selection instanceof NodeSelection && selection.node.type.name === 'media' && selection.node.attrs.type === 'file') {
     // The media node is wrapped in a mediaGroup, so we need to get the parent position
     const mediaGroupPos = selection.$from.pos - 1;
     const mediaGroupNode = selection.$from.doc.nodeAt(mediaGroupPos);
@@ -53,7 +52,7 @@ export const getNodeBoundsFromSelection = selection => {
 export const getPosWhenMoveNodeUp = ($currentNodePos, currentNodePos) => {
   const nodeIndex = $currentNodePos.index();
   const nodeBefore = $currentNodePos.depth > 1 && nodeIndex === 0 ? $currentNodePos.node($currentNodePos.depth) : $currentNodePos.nodeBefore;
-  if ((nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.type.name) === 'layoutColumn' && editorExperiment('platform_editor_block_menu', true)) {
+  if ((nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.type.name) === 'layoutColumn') {
     return -1;
   }
   return nodeBefore ? currentNodePos - nodeBefore.nodeSize : -1;
@@ -68,12 +67,10 @@ export const getPosWhenMoveNodeDown = ({
     return -1;
   }
   const nodeAfter = tr.doc.nodeAt(nodeAfterPos);
-  if (editorExperiment('platform_editor_block_menu', true)) {
-    const nodeAtCurrentPos = tr.doc.nodeAt($currentNodePos.pos);
-    // if move empty line down to another empty line, move to the position of the next empty line
-    if ((nodeAtCurrentPos === null || nodeAtCurrentPos === void 0 ? void 0 : nodeAtCurrentPos.content.size) === 0 && nodeAtCurrentPos.type.name !== 'extension' && (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.content.size) === 0 && nodeAfter.type.name !== 'extension') {
-      return nodeAfterPos;
-    }
+  const nodeAtCurrentPos = tr.doc.nodeAt($currentNodePos.pos);
+  // if move empty line down to another empty line, move to the position of the next empty line
+  if ((nodeAtCurrentPos === null || nodeAtCurrentPos === void 0 ? void 0 : nodeAtCurrentPos.content.size) === 0 && nodeAtCurrentPos.type.name !== 'extension' && (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.content.size) === 0 && nodeAfter.type.name !== 'extension') {
+    return nodeAfterPos;
   }
 
   // if not the last node, move to the end of the next node

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

@@ -1,6 +1,5 @@
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 export const handleMouseDown = api => (view, event) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
@@ -27,7 +26,7 @@ export const handleMouseDown = api => (view, event) => {
       api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name3 = rootNode.type.name) !== null && _rootNode$type$name3 !== void 0 ? _rootNode$type$name3 : '', undefined, rootPos, '', (_rootNode$type$name4 = rootNode.type.name) !== null && _rootNode$type$name4 !== void 0 ? _rootNode$type$name4 : ''));
     }
   } else {
-    const isDragHandle = event.target.closest(editorExperiment('platform_editor_block_menu', true) ? DRAG_HANDLE_SELECTOR : '[data-editor-block-ctrl-drag-handle]') !== null;
+    const isDragHandle = event.target.closest(DRAG_HANDLE_SELECTOR) !== null;
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {
@@ -38,17 +37,10 @@ export const handleMouseDown = api => (view, event) => {
        * When block menu is enabled, reset intent back to 'default' as editor-plugin-block-menu sets the user intent to 'blockMenuOpen', and setting here
        * causes flickering as this runs before editor-plugin-block-menu.
        */
-      if (editorExperiment('platform_editor_block_menu', true)) {
-        // if target is drag handle, block menu will be opened
-        if (!isDragHandle) {
-          var _api$userIntent;
-          api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('default')({
-            tr
-          });
-        }
-      } else {
-        var _api$userIntent2;
-        (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent(isDragHandle ? 'dragHandleSelected' : 'default')({
+      // if target is drag handle, block menu will be opened
+      if (!isDragHandle) {
+        var _api$userIntent;
+        api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('default')({
           tr
         });
       }

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

@@ -119,9 +119,7 @@ export const handleMouseOver = (view, event, api) => {
   }
 
   // If the editor view is not in focus when the block menu is open, do not update the drag handle
-  if (!view.hasFocus() && isMenuOpen && editorExperiment('platform_editor_block_menu', true, {
-    exposure: true
-  })) {
+  if (!view.hasFocus() && isMenuOpen) {
     return false;
   }
 
@@ -271,35 +269,28 @@ export const handleMouseOver = (view, event, api) => {
     const nodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : // Fallback for table nodes: tr has data-prosemirror-node-name but not data-drag-handler-node-type.
     (_rootElement$getAttri2 = rootElement.getAttribute('data-drag-handler-node-type')) !== null && _rootElement$getAttri2 !== void 0 ? _rootElement$getAttri2 : getTypeNameFromDom(rootElement);
     if (nodeType) {
+      var _api$userIntent2, _api$userIntent2$shar;
       // platform_editor_controls note: enables quick insert
       if (toolbarFlagsEnabled) {
-        if (editorExperiment('platform_editor_block_menu', true)) {
-          var _selectionPreservatio;
-          const preservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
-          const selection = preservedSelection || view.state.selection;
-          const isMultipleSelected = selection && isMultiBlockSelection(selection);
+        var _selectionPreservatio;
+        const preservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
+        const selection = preservedSelection || view.state.selection;
+        const isMultipleSelected = selection && isMultiBlockSelection(selection);
 
-          // Only execute when selection is not a multi-selection, block menu is open, and menu is opened via keyboard
-          // as when it is a multi-selection, the showDragHandleAt command interfere with selection
-          // sometimes makes the multi-selection not continous after block menu is opened with keyboard
-          if (!(isMultipleSelected && isMenuOpen && blockMenuOptions !== null && blockMenuOptions !== void 0 && blockMenuOptions.openedViaKeyboard)) {
-            var _api$core, _api$blockControls3, _rootPos, _rootAnchorName, _rootNodeType;
-            api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, (_rootPos = rootPos) !== null && _rootPos !== void 0 ? _rootPos : targetPos, (_rootAnchorName = rootAnchorName) !== null && _rootAnchorName !== void 0 ? _rootAnchorName : anchorName, (_rootNodeType = rootNodeType) !== null && _rootNodeType !== void 0 ? _rootNodeType : nodeType));
-          }
-        } else {
-          var _api$core2, _api$blockControls4, _rootPos2, _rootAnchorName2, _rootNodeType2;
-          api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, (_rootPos2 = rootPos) !== null && _rootPos2 !== void 0 ? _rootPos2 : targetPos, (_rootAnchorName2 = rootAnchorName) !== null && _rootAnchorName2 !== void 0 ? _rootAnchorName2 : anchorName, (_rootNodeType2 = rootNodeType) !== null && _rootNodeType2 !== void 0 ? _rootNodeType2 : nodeType));
+        // Only execute when selection is not a multi-selection, block menu is open, and menu is opened via keyboard
+        // as when it is a multi-selection, the showDragHandleAt command interfere with selection
+        // sometimes makes the multi-selection not continous after block menu is opened with keyboard
+        if (!(isMultipleSelected && isMenuOpen && blockMenuOptions !== null && blockMenuOptions !== void 0 && blockMenuOptions.openedViaKeyboard)) {
+          var _api$core, _api$blockControls3, _rootPos, _rootAnchorName, _rootNodeType;
+          api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, (_rootPos = rootPos) !== null && _rootPos !== void 0 ? _rootPos : targetPos, (_rootAnchorName = rootAnchorName) !== null && _rootAnchorName !== void 0 ? _rootAnchorName : anchorName, (_rootNodeType = rootNodeType) !== null && _rootNodeType !== void 0 ? _rootNodeType : nodeType));
         }
       } else {
-        var _api$core3, _api$blockControls5;
-        api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.showDragHandleAt(targetPos, anchorName, nodeType));
+        var _api$core2, _api$blockControls4;
+        api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.showDragHandleAt(targetPos, anchorName, nodeType));
       }
-      if (editorExperiment('platform_editor_block_menu', true)) {
-        var _api$userIntent2, _api$userIntent2$shar;
-        if (isMenuOpen && originalAnchorName && (api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : (_api$userIntent2$shar = _api$userIntent2.sharedState.currentState()) === null || _api$userIntent2$shar === void 0 ? void 0 : _api$userIntent2$shar.currentUserIntent) === 'blockMenuOpen') {
-          var _api$core4, _api$blockControls6;
-          api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 ? void 0 : _api$blockControls6.commands.toggleBlockMenu());
-        }
+      if (isMenuOpen && originalAnchorName && (api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : (_api$userIntent2$shar = _api$userIntent2.sharedState.currentState()) === null || _api$userIntent2$shar === void 0 ? void 0 : _api$userIntent2$shar.currentUserIntent) === 'blockMenuOpen') {
+        var _api$core3, _api$blockControls5;
+        api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.toggleBlockMenu());
       }
     }
   }