@atlaskit/editor-plugin-block-controls 2.21.2 → 2.21.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.21.3
+
+### Patch Changes
+
+- [#103498](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103498)
+  [`a2fd134b068cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a2fd134b068cd) -
+  [ED-26267] Fix a bug where when selection is across multiple nodes, dragging a drag handle within
+  the selection range does not trigger pragmatic DnD
+
 ## 2.21.2
 
 ### Patch Changes

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

@@ -11,6 +11,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
 var _analytics = require("@atlaskit/editor-common/analytics");
+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");
@@ -19,6 +20,7 @@ var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-han
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
+var _primitives = require("@atlaskit/primitives");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _main = require("../pm-plugins/main");
@@ -34,6 +36,11 @@ var _dragPreview = require("./drag-preview");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var iconWrapperStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
 var dragHandleButtonStyles = (0, _react2.css)({
   position: 'absolute',
   padding: "var(--ds-space-025, 2px)".concat(" 0"),
@@ -72,6 +79,27 @@ var selectedStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
 });
+
+// [Chrome only] When selection contains multiple nodes and then drag a drag handle that is within the selection range,
+// icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
+// with pragmatic DnD and pragmatic DnD is not triggered
+var handleIconDragStart = function handleIconDragStart(e) {
+  if (!_browser.browser.chrome || !(0, _platformFeatureFlags.fg)('platform_editor_dnd_update_drag_start_target')) {
+    return;
+  }
+  // prevent dragStart handler triggered by icon
+  e.stopPropagation();
+  var dragEvent = new DragEvent('dragstart', {
+    bubbles: true,
+    cancelable: true,
+    dataTransfer: e.dataTransfer
+  });
+  if (e.target instanceof HTMLElement) {
+    var _e$target$closest;
+    // re-dispatch drag event on button so that pragmatic DnD can be triggered properly
+    (_e$target$closest = e.target.closest('button')) === null || _e$target$closest === void 0 || _e$target$closest.dispatchEvent(dragEvent);
+  }
+};
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var _api$core2, _api$analytics2, _api$core4;
   var view = _ref.view,
@@ -411,10 +439,16 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown,
         "data-testid": "block-ctrl-drag-handle"
-      }, (0, _react2.jsx)(_dragHandler.default, {
+      }, (0, _react2.jsx)(_primitives.Box, {
+        as: "span",
+        xcss: iconWrapperStyles
+        // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+        ,
+        onDragStart: handleIconDragStart
+      }, ' ', (0, _react2.jsx)(_dragHandler.default, {
         label: "",
         size: "medium"
-      }))
+      })))
     );
   };
   return (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') ? (0, _react2.jsx)(_tooltip.default, {

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

@@ -7,6 +7,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
@@ -15,6 +16,7 @@ import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { Box, xcss } from '@atlaskit/primitives';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
@@ -23,6 +25,11 @@ import { getNestedNodePosition } from '../pm-plugins/utils/getNestedNodePosition
 import { selectNode } from '../pm-plugins/utils/getSelection';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
+const iconWrapperStyles = xcss({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
 const dragHandleButtonStyles = css({
   position: 'absolute',
   padding: `${"var(--ds-space-025, 2px)"} 0`,
@@ -61,6 +68,27 @@ const selectedStyles = css({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
 });
+
+// [Chrome only] When selection contains multiple nodes and then drag a drag handle that is within the selection range,
+// icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
+// with pragmatic DnD and pragmatic DnD is not triggered
+const handleIconDragStart = e => {
+  if (!browser.chrome || !fg('platform_editor_dnd_update_drag_start_target')) {
+    return;
+  }
+  // prevent dragStart handler triggered by icon
+  e.stopPropagation();
+  const dragEvent = new DragEvent('dragstart', {
+    bubbles: true,
+    cancelable: true,
+    dataTransfer: e.dataTransfer
+  });
+  if (e.target instanceof HTMLElement) {
+    var _e$target$closest;
+    // re-dispatch drag event on button so that pragmatic DnD can be triggered properly
+    (_e$target$closest = e.target.closest('button')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.dispatchEvent(dragEvent);
+  }
+};
 export const DragHandle = ({
   view,
   api,
@@ -390,10 +418,16 @@ export const DragHandle = ({
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     "data-testid": "block-ctrl-drag-handle"
-  }, jsx(DragHandlerIcon, {
+  }, jsx(Box, {
+    as: "span",
+    xcss: iconWrapperStyles
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    ,
+    onDragStart: handleIconDragStart
+  }, ' ', jsx(DragHandlerIcon, {
     label: "",
     size: "medium"
-  }));
+  })));
   return fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors

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

@@ -9,6 +9,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
@@ -17,6 +18,7 @@ import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { Box, xcss } from '@atlaskit/primitives';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
@@ -25,6 +27,11 @@ import { getNestedNodePosition } from '../pm-plugins/utils/getNestedNodePosition
 import { selectNode } from '../pm-plugins/utils/getSelection';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
+var iconWrapperStyles = xcss({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
 var dragHandleButtonStyles = css({
   position: 'absolute',
   padding: "var(--ds-space-025, 2px)".concat(" 0"),
@@ -63,6 +70,27 @@ var selectedStyles = css({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
 });
+
+// [Chrome only] When selection contains multiple nodes and then drag a drag handle that is within the selection range,
+// icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
+// with pragmatic DnD and pragmatic DnD is not triggered
+var handleIconDragStart = function handleIconDragStart(e) {
+  if (!browser.chrome || !fg('platform_editor_dnd_update_drag_start_target')) {
+    return;
+  }
+  // prevent dragStart handler triggered by icon
+  e.stopPropagation();
+  var dragEvent = new DragEvent('dragstart', {
+    bubbles: true,
+    cancelable: true,
+    dataTransfer: e.dataTransfer
+  });
+  if (e.target instanceof HTMLElement) {
+    var _e$target$closest;
+    // re-dispatch drag event on button so that pragmatic DnD can be triggered properly
+    (_e$target$closest = e.target.closest('button')) === null || _e$target$closest === void 0 || _e$target$closest.dispatchEvent(dragEvent);
+  }
+};
 export var DragHandle = function DragHandle(_ref) {
   var _api$core2, _api$analytics2, _api$core4;
   var view = _ref.view,
@@ -402,10 +430,16 @@ export var DragHandle = function DragHandle(_ref) {
         onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown,
         "data-testid": "block-ctrl-drag-handle"
-      }, jsx(DragHandlerIcon, {
+      }, jsx(Box, {
+        as: "span",
+        xcss: iconWrapperStyles
+        // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+        ,
+        onDragStart: handleIconDragStart
+      }, ' ', jsx(DragHandlerIcon, {
         label: "",
         size: "medium"
-      }))
+      })))
     );
   };
   return fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.21.2",
+	"version": "2.21.3",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -144,6 +144,9 @@
 		},
 		"platform_editor_advanced_layouts_DnD_remove_layout": {
 			"type": "boolean"
+		},
+		"platform_editor_dnd_update_drag_start_target": {
+			"type": "boolean"
 		}
 	}
 }