@atlaskit/editor-plugin-block-controls 17.1.0 → 17.1.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 17.1.2
+
+### Patch Changes
+
+- [`e62dacf4416fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e62dacf4416fd) -
+  Add the shared popup-anchor contract, registry-backed drag handle, and menu integrations behind
+  `platform_editor_block_control_migration`.
+- Updated dependencies
+
+## 17.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 17.1.0
 
 ### Minor Changes

package/dist/cjs/blockControlsPlugin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockControlsPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _selection = require("@atlaskit/editor-common/selection");
@@ -31,7 +32,9 @@ var _pmPlugin2 = require("./pm-plugins/selection-preservation/pm-plugin");
 var _expandAndUpdateSelection2 = require("./pm-plugins/utils/expand-and-update-selection");
 var _getSelection = require("./pm-plugins/utils/getSelection");
 var _blockControlsSurface = require("./ui/block-controls-surface");
+var _blockControlsSurfaceDragHandleRegistration = require("./ui/block-controls-surface-drag-handle-registration");
 var _globalStyles = require("./ui/global-styles");
+var _surfaceEditorViewContext = require("./ui/surface-editor-view-context");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPlugin(_ref) {
@@ -41,8 +44,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
   var nodeDecorationRegistry = [];
   var rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   var quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
-  var blockControlMigrationEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration');
-  if (blockControlMigrationEnabled) {
+  var registryBlockControlsEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration');
+  var legacyBlockControlsEnabled = !registryBlockControlsEnabled;
+  if (registryBlockControlsEnabled) {
     var _api$uiControlRegistr;
     api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register([_surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, _objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_SECTION), {}, {
       parents: [_objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE), {}, {
@@ -52,7 +56,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       parents: [_objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_SECTION), {}, {
         rank: 100
       })]
-    })]);
+    })].concat((0, _toConsumableArray2.default)((0, _blockControlsSurfaceDragHandleRegistration.getBlockControlsSurfaceDragHandleComponents)({
+      api: api
+    }))));
   }
   return {
     name: 'blockControls',
@@ -122,7 +128,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && !blockControlMigrationEnabled);
+          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled);
         }
       }];
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
@@ -441,10 +447,12 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       var editorView = _ref0.editorView;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, {
         api: api
-      }), blockControlMigrationEnabled && editorView && api ? /*#__PURE__*/_react.default.createElement(_blockControlsSurface.BlockControlsSurface, {
+      }), registryBlockControlsEnabled && editorView && api ? /*#__PURE__*/_react.default.createElement(_surfaceEditorViewContext.SurfaceEditorViewContext.Provider, {
+        value: editorView
+      }, /*#__PURE__*/_react.default.createElement(_blockControlsSurface.BlockControlsSurface, {
         api: api,
         editorView: editorView
-      }) : null);
+      })) : null);
     }
   };
 };

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

@@ -25,6 +25,7 @@ var _combine = require("@atlaskit/pragmatic-drag-and-drop/utils/combine");
 var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _consts = require("../ui/consts");
 var _domAttrName = require("../ui/utils/dom-attr-name");
 var _decorationsAnchor = require("./decorations-anchor");
 var _decorationsDragHandle = require("./decorations-drag-handle");
@@ -508,7 +509,8 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     }
   } else if (api) {
     var _latestActiveNode5, _latestActiveNode10;
-    if (shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
+    // The registry surface replaces the legacy drag-handle decorations during migration.
+    if (flags.legacyDragHandleEnabled && shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
       var _activeNode11, _activeNode12, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.pos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.pos);
       decorations = decorations.remove(_oldHandle);
@@ -525,7 +527,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       });
       decorations = decorations.add(newState.doc, [handleDec]);
     }
-    if ((0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && latestActiveNode) {
+    if (flags.legacyDragHandleEnabled && (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && latestActiveNode) {
       // Recreate the drag handle node decoration when the active node changed,
       // its content was modified, or the document changed (e.g. Enter splits a node).
       // This runs independently of shouldRecreateHandle so that doc changes (like pressing
@@ -800,11 +802,13 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     // remove isEmptyDoc check and let decorations render and determine their own visibility
     // In view mode with right-side controls we render node decorations (right-edge button), not the
     // handle - so findHandleDec is always empty. Don't clear activeNode in that case.
-    var hasHandleOrViewModeControls = (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0 || isViewMode && rightSideControlsEnabled;
-    newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
+    var hasHandleOrViewModeControls = (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0 || isViewMode && rightSideControlsEnabled || !flags.legacyDragHandleEnabled;
+    // Keep the registry surface mounted while its Block Menu owns focus.
+    var keepActiveNodeForOpenBlockMenu = !flags.legacyDragHandleEnabled && isMenuOpen && (0, _experiments.editorExperiment)('platform_editor_block_menu', true);
+    newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred && !keepActiveNodeForOpenBlockMenu || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
   } else {
     var _latestActiveNode13, _latestActiveNode14;
-    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
+    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && flags.legacyDragHandleEnabled && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
   }
   var isMenuOpenNew = isMenuOpen;
   if ((0, _experiments.editorExperiment)('platform_editor_block_menu', true)) {
@@ -851,6 +855,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
 var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
   var rightSideControlsEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var quickInsertButtonEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
+  var legacyDragHandleEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = (0, _experiments.editorExperiment)('advanced_layouts', true, {
@@ -858,6 +863,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
   });
   var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   var flags = {
+    legacyDragHandleEnabled: legacyDragHandleEnabled,
     toolbarFlagsEnabled: toolbarFlagsEnabled
   };
   var anchorRectCache;
@@ -1103,11 +1109,13 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           }
           if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
             var _api$core2;
+            // Focus moving into the registry surface remains inside the editor experience.
+            var isChildOfSurface = !flags.legacyDragHandleEnabled && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest(_consts.BLOCK_CONTROLS_SURFACE_SELECTOR) !== null;
             var isChildOfEditor = event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest("#".concat(_ui.EDIT_AREA_ID)) !== null;
 
             // don't do anything if the event relatedTarget (the element receiving focus) is a child of the editor
             // or if the editor has focus
-            if (isChildOfEditor || view.hasFocus()) {
+            if (isChildOfEditor || isChildOfSurface || view.hasFocus()) {
               return false;
             }
             api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref6) {

package/dist/cjs/ui/block-controls-surface-context.js

@@ -38,6 +38,7 @@ var getNodeContext = function getNodeContext(view, pos) {
 };
 var createBlockControlsSurfaceContext = exports.createBlockControlsSurfaceContext = function createBlockControlsSurfaceContext(view, activeNode) {
   var _activeNode$rootPos, _activeNode$rootNodeT;
+  var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'root';
   if (!activeNode) {
     return undefined;
   }
@@ -55,6 +56,6 @@ var createBlockControlsSurfaceContext = exports.createBlockControlsSurfaceContex
       }
     }),
     rootNode: rootNodeContext,
-    targetNode: rootNodeContext
+    targetNode: target === 'active' ? activeNodeContext : rootNodeContext
   };
 };

package/dist/cjs/ui/block-controls-surface-drag-handle-registration.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBlockControlsSurfaceDragHandleComponents = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
+var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
+var _blockControlsSurfaceDragHandle = require("./block-controls-surface-drag-handle");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getBlockControlsSurfaceDragHandleComponents = exports.getBlockControlsSurfaceDragHandleComponents = function getBlockControlsSurfaceDragHandleComponents(_ref) {
+  var api = _ref.api;
+  return [{
+    component: function component(_ref2) {
+      var surfaceContext = _ref2.surfaceContext;
+      return /*#__PURE__*/_react.default.createElement(_blockControlsSurfaceDragHandle.BlockControlsSurfaceDragHandle, {
+        api: api,
+        surfaceContext: surfaceContext
+      });
+    },
+    isHidden: function isHidden() {
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        surfaceContext = _ref3.surfaceContext;
+      var context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT);
+      return !(context !== null && context !== void 0 && context.activeNode) || context.targetNode.pos !== context.activeNode.pos;
+    },
+    key: 'block-controls-drag-handle',
+    parents: [_objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_GROUP), {}, {
+      rank: 200
+    })],
+    type: 'button'
+  }];
+};

package/dist/cjs/ui/block-controls-surface-drag-handle-utils.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNodeSpacingForDragPreview = exports.getNodeMarginsForDragPreview = exports.buildLayoutColumnMenuMeta = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _consts = require("./consts");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var buildLayoutColumnMenuMeta = exports.buildLayoutColumnMenuMeta = function buildLayoutColumnMenuMeta(anchorPos, openedViaKeyboard) {
+  return _objectSpread(_objectSpread({
+    anchorPos: anchorPos
+  }, (0, _fg.fg)('platform_editor_layout_column_menu_kill_switch_1') ? {
+    isOpen: true
+  } : {}), {}, {
+    openedViaKeyboard: openedViaKeyboard
+  });
+};
+var getNodeSpacingForDragPreview = exports.getNodeSpacingForDragPreview = function getNodeSpacingForDragPreview(node) {
+  var _spacingBetweenNodesF2;
+  if (!node) {
+    return _consts.spacingBetweenNodesForPreview.default;
+  }
+  var nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    var _spacingBetweenNodesF;
+    return (_spacingBetweenNodesF = _consts.spacingBetweenNodesForPreview["heading".concat(node.attrs.level)]) !== null && _spacingBetweenNodesF !== void 0 ? _spacingBetweenNodesF : _consts.spacingBetweenNodesForPreview.default;
+  }
+  return (_spacingBetweenNodesF2 = _consts.spacingBetweenNodesForPreview[nodeTypeName]) !== null && _spacingBetweenNodesF2 !== void 0 ? _spacingBetweenNodesF2 : _consts.spacingBetweenNodesForPreview.default;
+};
+var getNodeMarginsForDragPreview = exports.getNodeMarginsForDragPreview = function getNodeMarginsForDragPreview(node) {
+  var _nodeMargins$nodeType;
+  if (!node) {
+    return _consts.nodeMargins.default;
+  }
+  var nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    var _nodeMargins;
+    return (_nodeMargins = _consts.nodeMargins["heading".concat(node.attrs.level)]) !== null && _nodeMargins !== void 0 ? _nodeMargins : _consts.nodeMargins.default;
+  }
+  return (_nodeMargins$nodeType = _consts.nodeMargins[nodeTypeName]) !== null && _nodeMargins$nodeType !== void 0 ? _nodeMargins$nodeType : _consts.nodeMargins.default;
+};

package/dist/cjs/ui/block-controls-surface-drag-handle.compiled.css

@@ -0,0 +1,32 @@
+._19itglyw{border:none}
+._1a37dfik{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
+._2rko1y44{border-radius:4px}._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1bsb1crf{width:9pt}
+._1bsbx5ub{width:calc(var(--ak-editor-base-font-size)*12/16)}
+._1e0c1txw{display:flex}
+._1p1y1j28::selection{background-color:transparent}
+._1pbyb4wl{z-index:100}
+._1qu2glyw{outline-style:none}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1myc{height:calc(var(--ak-editor-base-font-size)*24/16)}
+._4t3i1tcg{height:24px}
+._80om1qgj{cursor:grab}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._cun91j28:disabled{background-color:transparent}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._syazdgkc{color:var(--ds-icon-subtle,#505258)}
+._syazxl6c{color:var(--ds-icon-selected,#1868db)}
+._t9ec14w8{transform:rotate(90deg)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._vbqb2sac:disabled{color:var(--ds-icon-disabled,#080f214a)}
+._vchhusvi{box-sizing:border-box}
+._1ygbdfik:focus-visible{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
+._6g80187o:disabled:hover{background-color:var(--ds-background-disabled,#0515240f)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}

package/dist/cjs/ui/block-controls-surface-drag-handle.js

@@ -0,0 +1,296 @@
+/* block-controls-surface-drag-handle.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockControlsSurfaceDragHandle = void 0;
+require("./block-controls-surface-drag-handle.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
+var _surfaceDragHandleElement = require("@atlaskit/editor-common/block-controls/surface-drag-handle-element");
+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 _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
+var _pluginKey = require("../pm-plugins/selection-preservation/plugin-key");
+var _expandAndUpdateSelection = require("../pm-plugins/utils/expand-and-update-selection");
+var _getSelection = require("../pm-plugins/utils/getSelection");
+var _blockControlsSurfaceDragHandleUtils = require("./block-controls-surface-drag-handle-utils");
+var _consts = require("./consts");
+var _dragHandleNestedIcon = require("./drag-handle-nested-icon");
+var _shouldUseNestedDragHandleIcon = require("./should-use-nested-drag-handle-icon");
+var _surfaceEditorViewContext = require("./surface-editor-view-context");
+var _useBlockControlsSurfaceDragSource = require("./use-block-controls-surface-drag-source");
+var _domAttrName = require("./utils/dom-attr-name");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// oxlint-disable-next-line typescript/consistent-type-imports -- jsx is the runtime factory for the classic JSX pragma above.
+// Keep style values co-located for Compiled while matching the legacy drag handle dimensions.
+var SURFACE_DRAG_HANDLE_HEIGHT = 24;
+var SURFACE_DRAG_HANDLE_WIDTH = 12;
+var SURFACE_DRAG_HANDLE_BORDER_RADIUS = 4;
+var SURFACE_DRAG_HANDLE_Z_INDEX = 100;
+var dragHandleStyles = {
+  root: "_19itglyw _2rko1y44 _12ji1r31 _1qu2glyw _12y31o36 _1e0c1txw _vchhusvi _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i1tcg _1bsb1crf _bfhksm61 _syazdgkc _80om1qgj _1pbyb4wl _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _cun91j28 _vbqb2sac _1ygbdfik _irr31dpa _6g80187o _1di6fcek",
+  scaled: "_4t3i1myc _1bsbx5ub",
+  selected: "_bfhk15s3 _syazxl6c",
+  keyboardFocused: "_1a37dfik",
+  firefoxSelection: "_1p1y1j28",
+  layoutColumn: "_t9ec14w8",
+  iconWrapper: "_1e0c1txw _4cvr1h6o _1bah1h6o"
+};
+var handleIconDragStart = function handleIconDragStart(event) {
+  var _event$currentTarget$;
+  if (!(0, _browser.getBrowserInfo)().chrome) {
+    return;
+  }
+  event.stopPropagation();
+  (_event$currentTarget$ = event.currentTarget.parentElement) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.dispatchEvent(new DragEvent('dragstart', {
+    bubbles: true,
+    cancelable: true,
+    dataTransfer: event.dataTransfer
+  }));
+};
+var isSelected = function isSelected(selection, pos, view) {
+  if (typeof pos !== 'number' || !selection || !view) {
+    return false;
+  }
+  return (0, _getSelection.isHandleCorrelatedToSelection)(view.state, selection, pos);
+};
+var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = function BlockControlsSurfaceDragHandle(_ref) {
+  var _activeNode$type$name;
+  var api = _ref.api,
+    surfaceContext = _ref.surfaceContext;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var view = (0, _surfaceEditorViewContext.useSurfaceEditorView)();
+  var context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT);
+  var activeNode = context === null || context === void 0 ? void 0 : context.activeNode;
+  var pos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
+  var nodeType = (_activeNode$type$name = activeNode === null || activeNode === void 0 ? void 0 : activeNode.type.name) !== null && _activeNode$type$name !== void 0 ? _activeNode$type$name : '';
+  var buttonRef = (0, _react.useRef)(null);
+  var posRef = (0, _react.useRef)(pos);
+  posRef.current = pos;
+  var getPos = (0, _react.useCallback)(function () {
+    return posRef.current;
+  }, []);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls', 'interaction', 'selection'], function (states) {
+      var _states$blockControls, _states$blockControls2, _states$interactionSt, _states$blockControls3, _states$selectionStat;
+      return {
+        activeNodeAnchorName: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 || (_states$blockControls = _states$blockControls.activeNode) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.anchorName,
+        handleOptions: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 || (_states$blockControls2 = _states$blockControls2.activeNode) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.handleOptions,
+        interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
+        isShiftDown: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isShiftDown,
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+      };
+    }),
+    activeNodeAnchorName = _useSharedPluginState.activeNodeAnchorName,
+    handleOptions = _useSharedPluginState.handleOptions,
+    interactionState = _useSharedPluginState.interactionState,
+    isShiftDown = _useSharedPluginState.isShiftDown,
+    selection = _useSharedPluginState.selection;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dragHandleSelected = _useState2[0],
+    setDragHandleSelected = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setDragHandleSelected(isSelected(selection, pos, view));
+  }, [pos, selection, view]);
+  var isLayoutColumn = nodeType === 'layoutColumn';
+  var isTopLevelNode = (activeNode === null || activeNode === void 0 ? void 0 : activeNode.parentType) === 'doc';
+  var isDisabled = (0, _react.useMemo)(function () {
+    var _api$blockControls$sh;
+    if (!isShiftDown || !view || view.state.selection.empty || !(0, _fg.fg)('platform_editor_elements_dnd_shift_click_select')) {
+      return false;
+    }
+    if (isLayoutColumn && (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      return false;
+    }
+    var multiSelect = 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 = (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.anchor) !== undefined ? view.state.doc.resolve(multiSelect.anchor) : view.state.selection.$anchor;
+    return !isTopLevelNode || $anchor.depth > _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH;
+  }, [api, isLayoutColumn, isShiftDown, isTopLevelNode, view]);
+  var getAnchorName = (0, _react.useCallback)(function () {
+    var _ref2, _ref3, _dom$getAttribute, _dom$closest;
+    if (activeNodeAnchorName) {
+      return activeNodeAnchorName;
+    }
+    var currentPos = posRef.current;
+    if (!view || currentPos === undefined) {
+      return '';
+    }
+    var dom = view.nodeDOM(currentPos);
+    if (!(dom instanceof HTMLElement)) {
+      return '';
+    }
+    var anchorAttrName = (0, _domAttrName.getAnchorAttrName)();
+    return (_ref2 = (_ref3 = (_dom$getAttribute = dom.getAttribute(anchorAttrName)) !== null && _dom$getAttribute !== void 0 ? _dom$getAttribute : dom.getAttribute(_domAttrName.NODE_ANCHOR_ATTR_NAME)) !== null && _ref3 !== void 0 ? _ref3 : (_dom$closest = dom.closest("[".concat(anchorAttrName, "]"))) === null || _dom$closest === void 0 ? void 0 : _dom$closest.getAttribute(anchorAttrName)) !== null && _ref2 !== void 0 ? _ref2 : '';
+  }, [activeNodeAnchorName, view]);
+  (0, _react.useLayoutEffect)(function () {
+    var element = buttonRef.current;
+    if (!view || !element) {
+      return;
+    }
+    _surfaceDragHandleElement.surfaceDragHandleElementStore.set(view, element);
+    return function () {
+      return _surfaceDragHandleElement.surfaceDragHandleElementStore.release(view, element);
+    };
+  }, [view]);
+  (0, _react.useEffect)(function () {
+    if (!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused) || !buttonRef.current || !view) {
+      return;
+    }
+    var animationFrameId;
+    var attempts = 0;
+    var _focusHandle = function focusHandle() {
+      var button = buttonRef.current;
+      if (!button) {
+        return;
+      }
+      button.focus();
+      if (button.ownerDocument.activeElement !== button && attempts < 5) {
+        attempts++;
+        animationFrameId = requestAnimationFrame(_focusHandle);
+      }
+    };
+    _focusHandle();
+    return function () {
+      if (animationFrameId !== undefined) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      view.focus();
+    };
+  }, [handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
+  (0, _useBlockControlsSurfaceDragSource.useBlockControlsSurfaceDragSource)({
+    api: api,
+    elementRef: buttonRef,
+    getAnchorName: getAnchorName,
+    getPos: getPos,
+    nodeType: nodeType,
+    start: pos,
+    view: view
+  });
+  var handleMouseDown = (0, _react.useCallback)(function () {
+    var _api$core, _api$blockControls;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setSelectedViaDragHandle(true));
+  }, [api]);
+  var handleClick = (0, _react.useCallback)(function (event) {
+    var _api$core2;
+    if (!view || isDisabled) {
+      return;
+    }
+    var openedViaKeyboard = event.detail === 0;
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
+      var _selectionPreservatio, _selectionPreservatio2, _api$analytics, _resolvedStartPos$nod, _api$blockControls2, _api$blockControls3, _activeNode$rootPos;
+      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', (0, _blockControlsSurfaceDragHandleUtils.buildLayoutColumnMenuMeta)(startPos, openedViaKeyboard));
+      }
+      var selection = (_selectionPreservatio = (_selectionPreservatio2 = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection) !== null && _selectionPreservatio !== void 0 ? _selectionPreservatio : tr.selection;
+      var resolvedStartPos = tr.doc.resolve(startPos);
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+        action: _analytics.ACTION.CLICKED,
+        actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
+        actionSubjectId: _analytics.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) || ''
+        },
+        eventType: _analytics.EVENT_TYPE.UI
+      })(tr);
+      (0, _expandAndUpdateSelection.expandAndUpdateSelection)({
+        api: api,
+        isShiftPressed: event.shiftKey,
+        nodeType: nodeType,
+        selection: selection,
+        startPos: startPos,
+        tr: tr
+      });
+      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.startPreservingSelection()({
+        tr: tr
+      });
+      api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.toggleBlockMenu({
+        anchorName: getAnchorName(),
+        openedViaKeyboard: openedViaKeyboard,
+        triggerByNode: {
+          nodeType: nodeType,
+          pos: startPos,
+          rootPos: (_activeNode$rootPos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : resolvedStartPos.before(1)
+        }
+      })({
+        tr: tr
+      });
+      tr.setMeta('scrollIntoView', false);
+      return tr;
+    });
+    view.focus();
+  }, [activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos, api, getAnchorName, getPos, isDisabled, nodeType, view]);
+  var label = formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
+    br: ' '
+  });
+  var helpDescriptors = (0, _react.useMemo)(function () {
+    return [{
+      description: formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
+        br: /*#__PURE__*/React.createElement("br", null)
+      })
+    }];
+  }, [formatMessage]);
+  var handleTooltipShow = (0, _react.useCallback)(function () {
+    var _api$accessibilityUti;
+    api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(label, {
+      priority: 'important'
+    });
+  }, [api, label]);
+  if (!view || !activeNode || pos === undefined) {
+    return null;
+  }
+  var tooltipContent = /*#__PURE__*/React.createElement(_keymaps.TooltipContentWithMultipleShortcuts, {
+    helpDescriptors: helpDescriptors
+  });
+  var browser = (0, _browser.getBrowserInfo)();
+  var button = /*#__PURE__*/React.createElement("button", {
+    ref: buttonRef,
+    type: "button",
+    "aria-label": label,
+    disabled: isDisabled,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop -- Pragmatic DnD owns this native drag source.
+    ,
+    onDrop: function onDrop(event) {
+      return event.stopPropagation();
+    },
+    "data-editor-block-ctrl-drag-handle": true,
+    "data-blocks-drag-handle": (0, _fg.fg)('confluence_remix_button_right_side_block_fg') || undefined,
+    "data-testid": "block-controls-surface-drag-handle",
+    className: (0, _runtime.ax)([dragHandleStyles.root, browser.gecko && dragHandleStyles.firefoxSelection, isLayoutColumn && dragHandleStyles.layoutColumn, dragHandleSelected && interactionState !== 'hasNotHadInteraction' && dragHandleStyles.selected, (handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused) && dragHandleStyles.keyboardFocused, dragHandleStyles.scaled])
+  }, /*#__PURE__*/React.createElement("span", {
+    onDragStart: handleIconDragStart,
+    className: (0, _runtime.ax)([dragHandleStyles.iconWrapper])
+  }, (0, _shouldUseNestedDragHandleIcon.shouldUseNestedDragHandleIcon)(Boolean(isTopLevelNode), isLayoutColumn) ? /*#__PURE__*/React.createElement(_dragHandleNestedIcon.DragHandleNestedIcon, null) : /*#__PURE__*/React.createElement(_dragHandleVertical.default, {
+    label: "",
+    size: "small",
+    spacing: "spacious"
+  })));
+  return /*#__PURE__*/React.createElement(_Tooltip.default, {
+    position: "top",
+    content: tooltipContent,
+    ignoreTooltipPointerEvents: true,
+    onShow: handleTooltipShow
+  }, button);
+};

package/dist/cjs/ui/block-controls-surface.compiled.css

@@ -1,3 +1,4 @@
-._1e0c1txw{display:flex}
+._zulpv77o{gap:var(--ds-space-025,2px)}._1e0c1txw{display:flex}
 ._1pbyb4wl{z-index:100}
+._4cvr1h6o{align-items:center}
 ._kqswstnw{position:absolute}