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

package/dist/esm/blockControlsPlugin.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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) { _defineProperty(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; }
 import React from 'react';
@@ -26,7 +27,9 @@ import { createSelectionPreservationPlugin } from './pm-plugins/selection-preser
 import { expandAndUpdateSelection as _expandAndUpdateSelection } from './pm-plugins/utils/expand-and-update-selection';
 import { selectNode } from './pm-plugins/utils/getSelection';
 import { BlockControlsSurface } from './ui/block-controls-surface';
+import { getBlockControlsSurfaceDragHandleComponents } from './ui/block-controls-surface-drag-handle-registration';
 import { GlobalStylesWrapper } from './ui/global-styles';
+import { SurfaceEditorViewContext } from './ui/surface-editor-view-context';
 export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   var _config$rightSideCont, _config$quickInsertBu;
   var api = _ref.api,
@@ -34,8 +37,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   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 = isExperimentEnabled('platform_editor_block_control_migration');
-  if (blockControlMigrationEnabled) {
+  var registryBlockControlsEnabled = 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([BLOCK_CONTROLS_LEFT_SURFACE, _objectSpread(_objectSpread({}, BLOCK_CONTROLS_LEFT_SECTION), {}, {
       parents: [_objectSpread(_objectSpread({}, BLOCK_CONTROLS_LEFT_SURFACE), {}, {
@@ -45,7 +49,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       parents: [_objectSpread(_objectSpread({}, BLOCK_CONTROLS_LEFT_SECTION), {}, {
         rank: 100
       })]
-    })]);
+    })].concat(_toConsumableArray(getBlockControlsSurfaceDragHandleComponents({
+      api: api
+    }))));
   }
   return {
     name: 'blockControls',
@@ -115,7 +121,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && !blockControlMigrationEnabled);
+          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled);
         }
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
@@ -434,10 +440,12 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       var editorView = _ref0.editorView;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
         api: api
-      }), blockControlMigrationEnabled && editorView && api ? /*#__PURE__*/React.createElement(BlockControlsSurface, {
+      }), registryBlockControlsEnabled && editorView && api ? /*#__PURE__*/React.createElement(SurfaceEditorViewContext.Provider, {
+        value: editorView
+      }, /*#__PURE__*/React.createElement(BlockControlsSurface, {
         api: api,
         editorView: editorView
-      }) : null);
+      })) : null);
     }
   };
 };

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

@@ -23,6 +23,7 @@ import { combine } from '@atlaskit/pragmatic-drag-and-drop/utils/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { BLOCK_CONTROLS_SURFACE_SELECTOR } from '../ui/consts';
 import { getAnchorAttrName } from '../ui/utils/dom-attr-name';
 import { findNodeDecs, nodeDecorations } from './decorations-anchor';
 import { createActiveDragHandleNodeDecoration, dragHandleDecoration, emptyParagraphNodeDecorations, findActiveDragHandleNodeDec, findHandleDec } from './decorations-drag-handle';
@@ -501,7 +502,8 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     }
   } 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 = 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);
@@ -518,7 +520,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
       });
       decorations = decorations.add(newState.doc, [handleDec]);
     }
-    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && latestActiveNode) {
+    if (flags.legacyDragHandleEnabled && 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
@@ -793,11 +795,13 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     // 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 = 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 = 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 && 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) && 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 && 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 (editorExperiment('platform_editor_block_menu', true)) {
@@ -845,6 +849,7 @@ export { _apply as apply };
 export var 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 = editorExperiment('advanced_layouts', true, {
@@ -852,6 +857,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
   });
   var toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   var flags = {
+    legacyDragHandleEnabled: legacyDragHandleEnabled,
     toolbarFlagsEnabled: toolbarFlagsEnabled
   };
   var anchorRectCache;
@@ -1097,11 +1103,13 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
           }
           if (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(BLOCK_CONTROLS_SURFACE_SELECTOR) !== null;
             var isChildOfEditor = event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest("#".concat(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/esm/ui/block-controls-surface-context.js

@@ -31,6 +31,7 @@ var getNodeContext = function getNodeContext(view, pos) {
 };
 export var 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;
   }
@@ -48,6 +49,6 @@ export var createBlockControlsSurfaceContext = function createBlockControlsSurfa
       }
     }),
     rootNode: rootNodeContext,
-    targetNode: rootNodeContext
+    targetNode: target === 'active' ? activeNodeContext : rootNodeContext
   };
 };

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

@@ -0,0 +1,30 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import React from 'react';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { BLOCK_CONTROLS_LEFT_GROUP } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { BlockControlsSurfaceDragHandle } from './block-controls-surface-drag-handle';
+export var getBlockControlsSurfaceDragHandleComponents = function getBlockControlsSurfaceDragHandleComponents(_ref) {
+  var api = _ref.api;
+  return [{
+    component: function component(_ref2) {
+      var surfaceContext = _ref2.surfaceContext;
+      return /*#__PURE__*/React.createElement(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(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({}, BLOCK_CONTROLS_LEFT_GROUP), {}, {
+      rank: 200
+    })],
+    type: 'button'
+  }];
+};

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

@@ -0,0 +1,38 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { nodeMargins, spacingBetweenNodesForPreview } from './consts';
+export var buildLayoutColumnMenuMeta = function buildLayoutColumnMenuMeta(anchorPos, openedViaKeyboard) {
+  return _objectSpread(_objectSpread({
+    anchorPos: anchorPos
+  }, fg('platform_editor_layout_column_menu_kill_switch_1') ? {
+    isOpen: true
+  } : {}), {}, {
+    openedViaKeyboard: openedViaKeyboard
+  });
+};
+export var getNodeSpacingForDragPreview = function getNodeSpacingForDragPreview(node) {
+  var _spacingBetweenNodesF2;
+  if (!node) {
+    return spacingBetweenNodesForPreview.default;
+  }
+  var nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    var _spacingBetweenNodesF;
+    return (_spacingBetweenNodesF = spacingBetweenNodesForPreview["heading".concat(node.attrs.level)]) !== null && _spacingBetweenNodesF !== void 0 ? _spacingBetweenNodesF : spacingBetweenNodesForPreview.default;
+  }
+  return (_spacingBetweenNodesF2 = spacingBetweenNodesForPreview[nodeTypeName]) !== null && _spacingBetweenNodesF2 !== void 0 ? _spacingBetweenNodesF2 : spacingBetweenNodesForPreview.default;
+};
+export var getNodeMarginsForDragPreview = function getNodeMarginsForDragPreview(node) {
+  var _nodeMargins$nodeType;
+  if (!node) {
+    return nodeMargins.default;
+  }
+  var nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    var _nodeMargins;
+    return (_nodeMargins = nodeMargins["heading".concat(node.attrs.level)]) !== null && _nodeMargins !== void 0 ? _nodeMargins : nodeMargins.default;
+  }
+  return (_nodeMargins$nodeType = nodeMargins[nodeTypeName]) !== null && _nodeMargins$nodeType !== void 0 ? _nodeMargins$nodeType : nodeMargins.default;
+};

package/dist/esm/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/esm/ui/block-controls-surface-drag-handle.js

@@ -0,0 +1,290 @@
+/* block-controls-surface-drag-handle.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./block-controls-surface-drag-handle.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+// oxlint-disable-next-line typescript/consistent-type-imports -- jsx is the runtime factory for the classic JSX pragma above.
+
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { surfaceDragHandleElementStore } from '@atlaskit/editor-common/block-controls/surface-drag-handle-element';
+import { getBrowserInfo } from '@atlaskit/editor-common/browser';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
+import { blockControlsMessages } from '@atlaskit/editor-common/messages';
+import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import Tooltip from '@atlaskit/tooltip/Tooltip';
+import { selectionPreservationPluginKey } from '../pm-plugins/selection-preservation/plugin-key';
+import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
+import { isHandleCorrelatedToSelection } from '../pm-plugins/utils/getSelection';
+import { buildLayoutColumnMenuMeta } from './block-controls-surface-drag-handle-utils';
+import { DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH } from './consts';
+import { DragHandleNestedIcon } from './drag-handle-nested-icon';
+import { shouldUseNestedDragHandleIcon } from './should-use-nested-drag-handle-icon';
+import { useSurfaceEditorView } from './surface-editor-view-context';
+import { useBlockControlsSurfaceDragSource } from './use-block-controls-surface-drag-source';
+import { getAnchorAttrName, NODE_ANCHOR_ATTR_NAME } from './utils/dom-attr-name';
+
+// 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 (!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 isHandleCorrelatedToSelection(view.state, selection, pos);
+};
+export var BlockControlsSurfaceDragHandle = function BlockControlsSurfaceDragHandle(_ref) {
+  var _activeNode$type$name;
+  var api = _ref.api,
+    surfaceContext = _ref.surfaceContext;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var view = useSurfaceEditorView();
+  var context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(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 = useRef(null);
+  var posRef = useRef(pos);
+  posRef.current = pos;
+  var getPos = useCallback(function () {
+    return posRef.current;
+  }, []);
+  var _useSharedPluginState = 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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragHandleSelected = _useState2[0],
+    setDragHandleSelected = _useState2[1];
+  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 = useMemo(function () {
+    var _api$blockControls$sh;
+    if (!isShiftDown || !view || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
+      return false;
+    }
+    if (isLayoutColumn && 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 > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH;
+  }, [api, isLayoutColumn, isShiftDown, isTopLevelNode, view]);
+  var getAnchorName = 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 = getAnchorAttrName();
+    return (_ref2 = (_ref3 = (_dom$getAttribute = dom.getAttribute(anchorAttrName)) !== null && _dom$getAttribute !== void 0 ? _dom$getAttribute : dom.getAttribute(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]);
+  useLayoutEffect(function () {
+    var element = buttonRef.current;
+    if (!view || !element) {
+      return;
+    }
+    surfaceDragHandleElementStore.set(view, element);
+    return function () {
+      return surfaceDragHandleElementStore.release(view, element);
+    };
+  }, [view]);
+  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]);
+  useBlockControlsSurfaceDragSource({
+    api: api,
+    elementRef: buttonRef,
+    getAnchorName: getAnchorName,
+    getPos: getPos,
+    nodeType: nodeType,
+    start: pos,
+    view: view
+  });
+  var handleMouseDown = 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 = 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' && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
+        tr.setMeta('toggleLayoutColumnMenu', buildLayoutColumnMenuMeta(startPos, openedViaKeyboard));
+      }
+      var selection = (_selectionPreservatio = (_selectionPreservatio2 = 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: ACTION.CLICKED,
+        actionSubject: ACTION_SUBJECT.BUTTON,
+        actionSubjectId: 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: EVENT_TYPE.UI
+      })(tr);
+      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(blockControlsMessages.dragToMoveClickToOpen, {
+    br: ' '
+  });
+  var helpDescriptors = useMemo(function () {
+    return [{
+      description: formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
+        br: /*#__PURE__*/React.createElement("br", null)
+      })
+    }];
+  }, [formatMessage]);
+  var handleTooltipShow = 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(TooltipContentWithMultipleShortcuts, {
+    helpDescriptors: helpDescriptors
+  });
+  var 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": fg('confluence_remix_button_right_side_block_fg') || undefined,
+    "data-testid": "block-controls-surface-drag-handle",
+    className: 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: ax([dragHandleStyles.iconWrapper])
+  }, shouldUseNestedDragHandleIcon(Boolean(isTopLevelNode), isLayoutColumn) ? /*#__PURE__*/React.createElement(DragHandleNestedIcon, null) : /*#__PURE__*/React.createElement(DragHandleVerticalIcon, {
+    label: "",
+    size: "small",
+    spacing: "spacious"
+  })));
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    position: "top",
+    content: tooltipContent,
+    ignoreTooltipPointerEvents: true,
+    onShow: handleTooltipShow
+  }, button);
+};

package/dist/esm/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}