@atlaskit/editor-plugin-block-controls 9.1.5 → 9.1.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 9.1.7
+
+### Patch Changes
+
+- [`c82f7b4cbe1fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c82f7b4cbe1fd) -
+  Fix drag handle keyboard accessibility: Shift+Ctrl+H now correctly shows and focuses the drag
+  handle for keyboard users when mouse is outside the editor. Gated behind
+  platform_editor_drag_handle_keyboard_a11y experiment.
+- Updated dependencies
+
+## 9.1.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.1.5
 
 ### Patch Changes

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

@@ -1097,9 +1097,31 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         "data-blocks-drag-handle": (0, _platformFeatureFlags.fg)('confluence_remix_button_right_side_block_fg') || undefined,
         "data-testid": "block-ctrl-drag-handle",
         "aria-label": dragHandleAriaLabel,
-        onBlur: (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? function () {
-          return setIsFocused(false);
-        } : undefined
+        onBlur: function onBlur() {
+          if ((0, _experiments.editorExperiment)('platform_editor_block_menu', true)) {
+            setIsFocused(false);
+          }
+          if ((0, _expValEquals.expValEquals)('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true)) {
+            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 (_ref0) {
+                var tr = _ref0.tr;
+                tr.setMeta(_main.key, {
+                  activeNode: {
+                    pos: _pos,
+                    anchorName: anchorName,
+                    nodeType: nodeType,
+                    handleOptions: {
+                      isFocused: false
+                    }
+                  }
+                });
+                return tr;
+              });
+            }
+          }
+        }
       }, (0, _react2.jsx)(_primitives.Box, {
         xcss: iconWrapperStyles
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
@@ -1179,16 +1201,16 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-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 DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref1) {
+  var view = _ref1.view,
+    api = _ref1.api,
+    formatMessage = _ref1.formatMessage,
+    getPos = _ref1.getPos,
+    anchorName = _ref1.anchorName,
+    nodeType = _ref1.nodeType,
+    handleOptions = _ref1.handleOptions,
+    isTopLevelNode = _ref1.isTopLevelNode,
+    anchorRectCache = _ref1.anchorRectCache;
   var rightSideControlsEnabled = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
     var _states$blockControls2, _states$blockControls3;
     return {
@@ -1202,7 +1224,8 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
   var isLayoutColumn = nodeType === 'layoutColumn';
   return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
     api: api,
-    controlSide: rightSideControlsEnabled && !isLayoutColumn ? 'left' : undefined
+    controlSide: rightSideControlsEnabled && !isLayoutColumn ? 'left' : undefined,
+    forceVisibleOnMouseOut: (0, _expValEquals.expValEquals)('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused)
   }, (0, _react2.jsx)(DragHandle, {
     view: view,
     api: api,

package/dist/cjs/ui/visibility-container.js

@@ -53,7 +53,8 @@ var hiddenStylesCSS = (0, _react2.css)({
 var VisibilityContainer = exports.VisibilityContainer = function VisibilityContainer(_ref) {
   var api = _ref.api,
     children = _ref.children,
-    controlSide = _ref.controlSide;
+    controlSide = _ref.controlSide,
+    forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent'], function (states) {
       var _states$typeAheadStat, _states$blockControls, _states$blockControls2, _states$blockControls3, _states$editorViewMod, _states$userIntentSta, _states$blockControls4;
       return {
@@ -83,7 +84,10 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
   // button stays visible when the user moves from the block toward the button (e.g. in edit/live
   // pages), avoiding flicker as the mouse crosses boundaries.
   var hideOnMouseOut = isMouseOut;
-  var shouldHideImmediate = isTypeAheadOpen || isEditing || hideOnMouseOut || userIntent === 'aiStreaming' || sideHidden;
+  // When forceVisibleOnMouseOut is true (e.g. drag handle focused via keyboard Shift+Ctrl+H),
+  // override the mouse-out condition so the control stays visible regardless of mouse position.
+  var shouldHideWhenMouseOut = forceVisibleOnMouseOut ? false : hideOnMouseOut;
+  var shouldHideImmediate = isTypeAheadOpen || isEditing || shouldHideWhenMouseOut || userIntent === 'aiStreaming' || sideHidden;
 
   // Delay hiding the right control in view mode to reduce flickering when moving from block
   // toward the right-edge button (avoids rapid show/hide as mouse crosses boundaries).

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

@@ -1078,7 +1078,32 @@ export const DragHandle = ({
     "data-blocks-drag-handle": fg('confluence_remix_button_right_side_block_fg') || undefined,
     "data-testid": "block-ctrl-drag-handle",
     "aria-label": dragHandleAriaLabel,
-    onBlur: editorExperiment('platform_editor_block_menu', true) ? () => setIsFocused(false) : undefined
+    onBlur: () => {
+      if (editorExperiment('platform_editor_block_menu', true)) {
+        setIsFocused(false);
+      }
+      if (expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true)) {
+        const pos = getPos();
+        if (pos !== undefined) {
+          var _api$core8;
+          api === null || api === void 0 ? void 0 : (_api$core8 = api.core) === null || _api$core8 === void 0 ? void 0 : _api$core8.actions.execute(({
+            tr
+          }) => {
+            tr.setMeta(key, {
+              activeNode: {
+                pos,
+                anchorName,
+                nodeType,
+                handleOptions: {
+                  isFocused: false
+                }
+              }
+            });
+            return tr;
+          });
+        }
+      }
+    }
   }, jsx(Box, {
     xcss: iconWrapperStyles
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
@@ -1174,7 +1199,8 @@ export const DragHandleWithVisibility = ({
   const isLayoutColumn = nodeType === 'layoutColumn';
   return jsx(VisibilityContainer, {
     api: api,
-    controlSide: rightSideControlsEnabled && !isLayoutColumn ? 'left' : undefined
+    controlSide: rightSideControlsEnabled && !isLayoutColumn ? 'left' : undefined,
+    forceVisibleOnMouseOut: expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused)
   }, jsx(DragHandle, {
     view: view,
     api: api,

package/dist/es2019/ui/visibility-container.js

@@ -42,7 +42,8 @@ const hiddenStylesCSS = css({
 export const VisibilityContainer = ({
   api,
   children,
-  controlSide
+  controlSide,
+  forceVisibleOnMouseOut
 }) => {
   const {
     isTypeAheadOpen,
@@ -74,7 +75,10 @@ export const VisibilityContainer = ({
   // button stays visible when the user moves from the block toward the button (e.g. in edit/live
   // pages), avoiding flicker as the mouse crosses boundaries.
   const hideOnMouseOut = isMouseOut;
-  const shouldHideImmediate = isTypeAheadOpen || isEditing || hideOnMouseOut || userIntent === 'aiStreaming' || sideHidden;
+  // When forceVisibleOnMouseOut is true (e.g. drag handle focused via keyboard Shift+Ctrl+H),
+  // override the mouse-out condition so the control stays visible regardless of mouse position.
+  const shouldHideWhenMouseOut = forceVisibleOnMouseOut ? false : hideOnMouseOut;
+  const shouldHideImmediate = isTypeAheadOpen || isEditing || shouldHideWhenMouseOut || userIntent === 'aiStreaming' || sideHidden;
 
   // Delay hiding the right control in view mode to reduce flickering when moving from block
   // toward the right-edge button (avoids rapid show/hide as mouse crosses boundaries).

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

@@ -1093,9 +1093,31 @@ export var DragHandle = function DragHandle(_ref) {
         "data-blocks-drag-handle": fg('confluence_remix_button_right_side_block_fg') || undefined,
         "data-testid": "block-ctrl-drag-handle",
         "aria-label": dragHandleAriaLabel,
-        onBlur: editorExperiment('platform_editor_block_menu', true) ? function () {
-          return setIsFocused(false);
-        } : undefined
+        onBlur: function onBlur() {
+          if (editorExperiment('platform_editor_block_menu', true)) {
+            setIsFocused(false);
+          }
+          if (expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true)) {
+            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 (_ref0) {
+                var tr = _ref0.tr;
+                tr.setMeta(key, {
+                  activeNode: {
+                    pos: _pos,
+                    anchorName: anchorName,
+                    nodeType: nodeType,
+                    handleOptions: {
+                      isFocused: false
+                    }
+                  }
+                });
+                return tr;
+              });
+            }
+          }
+        }
       }, jsx(Box, {
         xcss: iconWrapperStyles
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
@@ -1175,16 +1197,16 @@ export var DragHandle = function DragHandle(_ref) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return editorExperiment('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-export var 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;
+export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref1) {
+  var view = _ref1.view,
+    api = _ref1.api,
+    formatMessage = _ref1.formatMessage,
+    getPos = _ref1.getPos,
+    anchorName = _ref1.anchorName,
+    nodeType = _ref1.nodeType,
+    handleOptions = _ref1.handleOptions,
+    isTopLevelNode = _ref1.isTopLevelNode,
+    anchorRectCache = _ref1.anchorRectCache;
   var rightSideControlsEnabled = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
     var _states$blockControls2, _states$blockControls3;
     return {
@@ -1198,7 +1220,8 @@ export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref0) {
   var isLayoutColumn = nodeType === 'layoutColumn';
   return jsx(VisibilityContainer, {
     api: api,
-    controlSide: rightSideControlsEnabled && !isLayoutColumn ? 'left' : undefined
+    controlSide: rightSideControlsEnabled && !isLayoutColumn ? 'left' : undefined,
+    forceVisibleOnMouseOut: expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused)
   }, jsx(DragHandle, {
     view: view,
     api: api,

package/dist/esm/ui/visibility-container.js

@@ -42,7 +42,8 @@ var hiddenStylesCSS = css({
 export var VisibilityContainer = function VisibilityContainer(_ref) {
   var api = _ref.api,
     children = _ref.children,
-    controlSide = _ref.controlSide;
+    controlSide = _ref.controlSide,
+    forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent'], function (states) {
       var _states$typeAheadStat, _states$blockControls, _states$blockControls2, _states$blockControls3, _states$editorViewMod, _states$userIntentSta, _states$blockControls4;
       return {
@@ -72,7 +73,10 @@ export var VisibilityContainer = function VisibilityContainer(_ref) {
   // button stays visible when the user moves from the block toward the button (e.g. in edit/live
   // pages), avoiding flicker as the mouse crosses boundaries.
   var hideOnMouseOut = isMouseOut;
-  var shouldHideImmediate = isTypeAheadOpen || isEditing || hideOnMouseOut || userIntent === 'aiStreaming' || sideHidden;
+  // When forceVisibleOnMouseOut is true (e.g. drag handle focused via keyboard Shift+Ctrl+H),
+  // override the mouse-out condition so the control stays visible regardless of mouse position.
+  var shouldHideWhenMouseOut = forceVisibleOnMouseOut ? false : hideOnMouseOut;
+  var shouldHideImmediate = isTypeAheadOpen || isEditing || shouldHideWhenMouseOut || userIntent === 'aiStreaming' || sideHidden;
 
   // Delay hiding the right control in view mode to reduce flickering when moving from block
   // toward the right-edge button (avoids rapid show/hide as mouse crosses boundaries).

package/dist/types/ui/visibility-container.d.ts

@@ -10,6 +10,7 @@ interface VisibilityContainerProps {
     api?: ExtractInjectionAPI<BlockControlsPlugin>;
     children: React.ReactNode;
     controlSide?: 'left' | 'right';
+    forceVisibleOnMouseOut?: boolean;
 }
-export declare const VisibilityContainer: ({ api, children, controlSide, }: VisibilityContainerProps) => jsx.JSX.Element;
+export declare const VisibilityContainer: ({ api, children, controlSide, forceVisibleOnMouseOut, }: VisibilityContainerProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/visibility-container.d.ts

@@ -10,6 +10,7 @@ interface VisibilityContainerProps {
     api?: ExtractInjectionAPI<BlockControlsPlugin>;
     children: React.ReactNode;
     controlSide?: 'left' | 'right';
+    forceVisibleOnMouseOut?: boolean;
 }
-export declare const VisibilityContainer: ({ api, children, controlSide, }: VisibilityContainerProps) => jsx.JSX.Element;
+export declare const VisibilityContainer: ({ api, children, controlSide, forceVisibleOnMouseOut, }: VisibilityContainerProps) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "9.1.5",
+	"version": "9.1.7",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,7 +35,7 @@
 		"@atlaskit/editor-plugin-editor-disabled": "^8.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^10.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^7.0.0",
-		"@atlaskit/editor-plugin-interaction": "^15.0.0",
+		"@atlaskit/editor-plugin-interaction": "^16.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^5.0.0",
 		"@atlaskit/editor-plugin-metrics": "^9.0.0",
 		"@atlaskit/editor-plugin-quick-insert": "^8.0.0",
@@ -56,8 +56,8 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/theme": "^23.0.0",
-		"@atlaskit/tmp-editor-statsig": "^55.1.0",
-		"@atlaskit/tokens": "^11.4.0",
+		"@atlaskit/tmp-editor-statsig": "^55.2.0",
+		"@atlaskit/tokens": "^12.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",