@atlaskit/editor-plugin-block-controls 7.2.3 → 7.2.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.2.5
+
+### Patch Changes
+
+- [`e3ca1a4b9b932`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3ca1a4b9b932) -
+  [ux] ED-29489 Remove focus ring when drag handle is clicked and fix menu closing on menu open
+- Updated dependencies
+
+## 7.2.4
+
+### Patch Changes
+
+- [`dc211dc1927b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dc211dc1927b5) -
+  [ux] ED-29232: Fixed issues with block menu for file
+- Updated dependencies
+
 ## 7.2.3
 
 ### Patch Changes

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getShouldMoveNode = exports.getPosWhenMoveNodeUp = exports.getPosWhenMoveNodeDown = exports.getCurrentNodePosFromDragHandleSelection = exports.canMoveNodeUpOrDown = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _getNestedNodePosition = require("../../pm-plugins/utils/getNestedNodePosition");
@@ -21,6 +22,10 @@ var getCurrentNodePosFromDragHandleSelection = exports.getCurrentNodePosFromDrag
     // We only move table node if it's fully selected
     // to avoid shortcut collision with table drag and drop
     currentNodePos = (_findTable$pos = (_findTable = (0, _utils.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+  } else if (selection instanceof _state.NodeSelection && selection.node.type === schema.nodes.media && selection.node.attrs.type === 'file' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+    // When a file is selected, it is actually wrapped in a media group
+    // return the position of the media group , as the group is the node that we want to move up or down
+    currentNodePos = selection.$from.pos - 1;
   } else if (!(selection instanceof _selection.GapCursorSelection)) {
     // 2. caret cursor is inside the node
     // 3. the start of the selection is inside the node

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

@@ -127,9 +127,6 @@ var dragHandleButtonStyles = (0, _react2.css)({
   '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
   },
-  '&:focus': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
-  },
   '&:disabled': {
     color: "var(--ds-icon-disabled, #8993A4)",
     backgroundColor: 'transparent'
@@ -184,6 +181,19 @@ var dragHandleButtonStylesOld = (0, _react2.css)({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+var focusedStylesOld = (0, _react2.css)({
+  '&:focus': {
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+  }
+});
+var focusedStyles = (0, _react2.css)({
+  '&:focus-visible': {
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+  }
+});
+var keyboardFocusedDragHandleStyles = (0, _react2.css)({
+  outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+});
 var dragHandleContainerStyles = (0, _primitives.xcss)({
   position: 'absolute',
   boxSizing: 'border-box'
@@ -309,6 +319,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
     positionStylesOld = _useState0[0],
     setPositionStylesOld = _useState0[1];
+  var _useState1 = (0, _react.useState)(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    isFocused = _useState10[0],
+    setIsFocused = _useState10[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['featureFlags'], function (states) {
       var _states$featureFlagsS;
       return {
@@ -941,7 +955,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         css: [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.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.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
+        _browser.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
@@ -955,7 +969,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         disabled: dragHandleDisabled,
         "data-editor-block-ctrl-drag-handle": true,
         "data-testid": "block-ctrl-drag-handle",
-        "aria-label": (0, _expValEquals.expValEquals)('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : ''
+        "aria-label": (0, _expValEquals.expValEquals)('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : '',
+        onBlur: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? function () {
+          return setIsFocused(false);
+        } : undefined
       }, (0, _react2.jsx)(_primitives.Box, {
         xcss: iconWrapperStyles
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop

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

@@ -1,4 +1,5 @@
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { getNestedNodePosition } from '../../pm-plugins/utils/getNestedNodePosition';
@@ -16,6 +17,10 @@ export const getCurrentNodePosFromDragHandleSelection = ({
     // We only move table node if it's fully selected
     // to avoid shortcut collision with table drag and drop
     currentNodePos = (_findTable$pos = (_findTable = findTable(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+  } else if (selection instanceof NodeSelection && selection.node.type === schema.nodes.media && selection.node.attrs.type === 'file' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    // When a file is selected, it is actually wrapped in a media group
+    // return the position of the media group , as the group is the node that we want to move up or down
+    currentNodePos = selection.$from.pos - 1;
   } else if (!(selection instanceof GapCursorSelection)) {
     // 2. caret cursor is inside the node
     // 3. the start of the selection is inside the node

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

@@ -119,9 +119,6 @@ const dragHandleButtonStyles = css({
   '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
   },
-  '&:focus': {
-    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
-  },
   '&:disabled': {
     color: "var(--ds-icon-disabled, #8993A4)",
     backgroundColor: 'transparent'
@@ -179,6 +176,19 @@ const dragHandleButtonStylesOld = css({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+const focusedStylesOld = css({
+  '&:focus': {
+    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
+  }
+});
+const focusedStyles = css({
+  '&:focus-visible': {
+    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
+  }
+});
+const keyboardFocusedDragHandleStyles = css({
+  outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
+});
 const dragHandleContainerStyles = xcss({
   position: 'absolute',
   boxSizing: 'border-box'
@@ -289,6 +299,7 @@ export const DragHandle = ({
   const [positionStylesOld, setPositionStylesOld] = useState({
     display: 'none'
   });
+  const [isFocused, setIsFocused] = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused));
   const {
     macroInteractionUpdates
   } = useSharedPluginStateWithSelector(api, ['featureFlags'], states => {
@@ -929,7 +940,7 @@ export const DragHandle = ({
     css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, 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, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
+    browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld],
     ref: buttonRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
@@ -943,7 +954,8 @@ export const DragHandle = ({
     disabled: dragHandleDisabled,
     "data-editor-block-ctrl-drag-handle": true,
     "data-testid": "block-ctrl-drag-handle",
-    "aria-label": expValEquals('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : ''
+    "aria-label": expValEquals('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : '',
+    onBlur: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? () => setIsFocused(false) : undefined
   }, jsx(Box, {
     xcss: iconWrapperStyles
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop

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

@@ -1,4 +1,5 @@
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { getNestedNodePosition } from '../../pm-plugins/utils/getNestedNodePosition';
@@ -15,6 +16,10 @@ export var getCurrentNodePosFromDragHandleSelection = function getCurrentNodePos
     // We only move table node if it's fully selected
     // to avoid shortcut collision with table drag and drop
     currentNodePos = (_findTable$pos = (_findTable = findTable(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+  } else if (selection instanceof NodeSelection && selection.node.type === schema.nodes.media && selection.node.attrs.type === 'file' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    // When a file is selected, it is actually wrapped in a media group
+    // return the position of the media group , as the group is the node that we want to move up or down
+    currentNodePos = selection.$from.pos - 1;
   } else if (!(selection instanceof GapCursorSelection)) {
     // 2. caret cursor is inside the node
     // 3. the start of the selection is inside the node

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

@@ -124,9 +124,6 @@ var dragHandleButtonStyles = css({
   '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
   },
-  '&:focus': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
-  },
   '&:disabled': {
     color: "var(--ds-icon-disabled, #8993A4)",
     backgroundColor: 'transparent'
@@ -181,6 +178,19 @@ var dragHandleButtonStylesOld = css({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+var focusedStylesOld = css({
+  '&:focus': {
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+  }
+});
+var focusedStyles = css({
+  '&:focus-visible': {
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+  }
+});
+var keyboardFocusedDragHandleStyles = css({
+  outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+});
 var dragHandleContainerStyles = xcss({
   position: 'absolute',
   boxSizing: 'border-box'
@@ -306,6 +316,10 @@ export var DragHandle = function DragHandle(_ref) {
     _useState0 = _slicedToArray(_useState9, 2),
     positionStylesOld = _useState0[0],
     setPositionStylesOld = _useState0[1];
+  var _useState1 = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isFocused = _useState10[0],
+    setIsFocused = _useState10[1];
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['featureFlags'], function (states) {
       var _states$featureFlagsS;
       return {
@@ -938,7 +952,7 @@ export var DragHandle = function DragHandle(_ref) {
         css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, 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, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
+        browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
@@ -952,7 +966,10 @@ export var DragHandle = function DragHandle(_ref) {
         disabled: dragHandleDisabled,
         "data-editor-block-ctrl-drag-handle": true,
         "data-testid": "block-ctrl-drag-handle",
-        "aria-label": expValEquals('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : ''
+        "aria-label": expValEquals('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : '',
+        onBlur: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? function () {
+          return setIsFocused(false);
+        } : undefined
       }, jsx(Box, {
         xcss: iconWrapperStyles
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.2.3",
+	"version": "7.2.5",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,14 +37,14 @@
 		"@atlaskit/editor-plugin-limited-mode": "^3.0.0",
 		"@atlaskit/editor-plugin-metrics": "^7.0.0",
 		"@atlaskit/editor-plugin-quick-insert": "^6.0.0",
-		"@atlaskit/editor-plugin-selection": "^6.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^6.2.0",
+		"@atlaskit/editor-plugin-selection": "^6.1.0",
+		"@atlaskit/editor-plugin-type-ahead": "^6.3.0",
 		"@atlaskit/editor-plugin-user-intent": "^4.0.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^28.4.0",
+		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.2.0",
+		"@atlaskit/tmp-editor-statsig": "^13.5.0",
 		"@atlaskit/tokens": "^6.4.0",
 		"@atlaskit/tooltip": "^20.5.0",
 		"@babel/runtime": "^7.0.0",
@@ -64,7 +64,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.4.0",
+		"@atlaskit/editor-common": "^110.8.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"