@atlaskit/editor-plugin-block-controls 9.0.10 → 9.0.11

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 9.0.11
+
+### Patch Changes
+
+- [`029e47b456b89`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/029e47b456b89) -
+  Fixing a bug where we expect the selection toolbar to show when selecting text and releasing on
+  the block controls handle.
+- Updated dependencies
+
 ## 9.0.10
 
 ### Patch Changes

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

@@ -408,6 +408,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
     isTopLevelNode = _ref3$isTopLevelNode === void 0 ? true : _ref3$isTopLevelNode,
     anchorRectCache = _ref3.anchorRectCache;
   var buttonRef = (0, _react.useRef)(null);
+  var mouseDownRef = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     dragHandleSelected = _useState2[0],
@@ -488,11 +489,35 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
       }
     }
   }, [anchorName, nodeType, view.dom]);
+  (0, _react.useEffect)(function () {
+    if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_selection_toolbar_block_handle', 'isEnabled', true)) {
+      return;
+    }
+    var unbind = (0, _bindEventListener.bind)(window, {
+      type: 'mouseUp',
+      listener: function listener() {
+        return mouseDownRef.current = false;
+      }
+    });
+    return function () {
+      return unbind();
+    };
+  }, []);
+  var handleMouseDown = (0, _react.useCallback)(function () {
+    mouseDownRef.current = true;
+  }, []);
   var handleMouseUp = (0, _react.useCallback)(function (e) {
     // Stop propagation so that for drag handles in nested scenarios the click is captured
     // and doesn't propagate to the edge of the element and trigger a node selection
     // on the parent element
-    e.stopPropagation();
+    if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_selection_toolbar_block_handle', 'isEnabled', true)) {
+      e.stopPropagation();
+    }
+
+    // Fixes bug where selection toolbar is blocked when mouse is released on drag handle
+    if (mouseDownRef.current) {
+      e.stopPropagation();
+    }
   }, []);
   var handleOnClickNew = (0, _react.useCallback)(function (e) {
     var _api$core;
@@ -1116,6 +1141,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
         style: !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
+        onMouseDown: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
         onMouseUp: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? handleMouseUp : undefined,
         onClick: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? handleOnClickNew : handleOnClick,
         onKeyDown: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? handleKeyDownNew : handleKeyDown

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

@@ -405,6 +405,7 @@ export const DragHandle = ({
 }) => {
   var _api$core4;
   const buttonRef = useRef(null);
+  const mouseDownRef = useRef(false);
   const [dragHandleSelected, setDragHandleSelected] = useState(false);
   const [dragHandleDisabled, setDragHandleDisabled] = useState(false);
   const [blockCardWidth, setBlockCardWidth] = useState(768);
@@ -466,11 +467,31 @@ export const DragHandle = ({
       }
     }
   }, [anchorName, nodeType, view.dom]);
+  useEffect(() => {
+    if (!expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true)) {
+      return;
+    }
+    const unbind = bind(window, {
+      type: 'mouseUp',
+      listener: () => mouseDownRef.current = false
+    });
+    return () => unbind();
+  }, []);
+  const handleMouseDown = useCallback(() => {
+    mouseDownRef.current = true;
+  }, []);
   const handleMouseUp = useCallback(e => {
     // Stop propagation so that for drag handles in nested scenarios the click is captured
     // and doesn't propagate to the edge of the element and trigger a node selection
     // on the parent element
-    e.stopPropagation();
+    if (!expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true)) {
+      e.stopPropagation();
+    }
+
+    // Fixes bug where selection toolbar is blocked when mouse is released on drag handle
+    if (mouseDownRef.current) {
+      e.stopPropagation();
+    }
   }, []);
   const handleOnClickNew = useCallback(e => {
     var _api$core;
@@ -1104,6 +1125,7 @@ export const DragHandle = ({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: !editorExperiment('platform_editor_controls', 'variant1') ? editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
+    onMouseDown: expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
     onMouseUp: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? handleMouseUp : undefined,
     onClick: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? handleOnClickNew : handleOnClick,
     onKeyDown: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? handleKeyDownNew : handleKeyDown

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

@@ -405,6 +405,7 @@ export var DragHandle = function DragHandle(_ref3) {
     isTopLevelNode = _ref3$isTopLevelNode === void 0 ? true : _ref3$isTopLevelNode,
     anchorRectCache = _ref3.anchorRectCache;
   var buttonRef = useRef(null);
+  var mouseDownRef = useRef(false);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     dragHandleSelected = _useState2[0],
@@ -485,11 +486,35 @@ export var DragHandle = function DragHandle(_ref3) {
       }
     }
   }, [anchorName, nodeType, view.dom]);
+  useEffect(function () {
+    if (!expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true)) {
+      return;
+    }
+    var unbind = bind(window, {
+      type: 'mouseUp',
+      listener: function listener() {
+        return mouseDownRef.current = false;
+      }
+    });
+    return function () {
+      return unbind();
+    };
+  }, []);
+  var handleMouseDown = useCallback(function () {
+    mouseDownRef.current = true;
+  }, []);
   var handleMouseUp = useCallback(function (e) {
     // Stop propagation so that for drag handles in nested scenarios the click is captured
     // and doesn't propagate to the edge of the element and trigger a node selection
     // on the parent element
-    e.stopPropagation();
+    if (!expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true)) {
+      e.stopPropagation();
+    }
+
+    // Fixes bug where selection toolbar is blocked when mouse is released on drag handle
+    if (mouseDownRef.current) {
+      e.stopPropagation();
+    }
   }, []);
   var handleOnClickNew = useCallback(function (e) {
     var _api$core;
@@ -1113,6 +1138,7 @@ export var DragHandle = function DragHandle(_ref3) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
         style: !editorExperiment('platform_editor_controls', 'variant1') ? editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
+        onMouseDown: expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
         onMouseUp: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? handleMouseUp : undefined,
         onClick: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? handleOnClickNew : handleOnClick,
         onKeyDown: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? handleKeyDownNew : handleKeyDown

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "9.0.10",
+	"version": "9.0.11",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^40.5.0",
+		"@atlaskit/tmp-editor-statsig": "^40.6.0",
 		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",