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

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.21.4
+
+### Patch Changes
+
+- [#102952](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102952)
+  [`6d865148eda80`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6d865148eda80) -
+  Fix incorrect drop zone on table cell
+- [#103494](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103494)
+  [`955dbd85f329f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/955dbd85f329f) -
+  [ux] ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
+
+## 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/pm-plugins/decorations-anchor.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.shouldDescendIntoNode = exports.nodeDecorations = exports.findNodeDecs = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorationsCommon = require("./decorations-common");
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
@@ -17,7 +18,7 @@ var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDesce
   // Optimisation to avoid drawing node decorations for empty table cells
   if (['tableCell', 'tableHeader'].includes(node.type.name)) {
     var _node$firstChild;
-    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph') {
+    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6') ? node.firstChild.childCount === 0 : true)) {
       return false;
     }
   }

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"),
@@ -65,6 +72,11 @@ var dragHandleButtonStyles = (0, _react2.css)({
     outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
   }
 });
+var dragHandleMultiLineSelectionFixFirefox = (0, _react2.css)({
+  '&::selection': {
+    backgroundColor: 'transparent'
+  }
+});
 var layoutColumnDragHandleStyles = (0, _react2.css)({
   transform: 'rotate(90deg)'
 });
@@ -72,6 +84,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,
@@ -402,7 +435,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       (0, _react2.jsx)("button", {
         type: "button",
-        css: [dragHandleButtonStyles, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
+        css: [dragHandleButtonStyles,
+        // 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 && (0, _platformFeatureFlags.fg)('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
@@ -411,10 +447,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/pm-plugins/decorations-anchor.js

@@ -1,4 +1,5 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
@@ -9,7 +10,7 @@ export const shouldDescendIntoNode = node => {
   // Optimisation to avoid drawing node decorations for empty table cells
   if (['tableCell', 'tableHeader'].includes(node.type.name)) {
     var _node$firstChild;
-    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph') {
+    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && (fg('platform_editor_element_dnd_nested_fix_patch_6') ? node.firstChild.childCount === 0 : true)) {
       return false;
     }
   }

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`,
@@ -54,6 +61,11 @@ const dragHandleButtonStyles = css({
     outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
   }
 });
+const dragHandleMultiLineSelectionFixFirefox = css({
+  '&::selection': {
+    backgroundColor: 'transparent'
+  }
+});
 const layoutColumnDragHandleStyles = css({
   transform: 'rotate(90deg)'
 });
@@ -61,6 +73,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,
@@ -381,7 +414,10 @@ export const DragHandle = ({
   // eslint-disable-next-line @atlaskit/design-system/no-html-button
   jsx("button", {
     type: "button",
-    css: [dragHandleButtonStyles, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
+    css: [dragHandleButtonStyles,
+    // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
+    // See https://product-fabric.atlassian.net/browse/ED-26266
+    browser.gecko && fg('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
     ref: buttonRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
@@ -390,10 +426,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/pm-plugins/decorations-anchor.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
@@ -10,7 +11,7 @@ export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   // Optimisation to avoid drawing node decorations for empty table cells
   if (['tableCell', 'tableHeader'].includes(node.type.name)) {
     var _node$firstChild;
-    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph') {
+    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && (fg('platform_editor_element_dnd_nested_fix_patch_6') ? node.firstChild.childCount === 0 : true)) {
       return false;
     }
   }

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"),
@@ -56,6 +63,11 @@ var dragHandleButtonStyles = css({
     outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
   }
 });
+var dragHandleMultiLineSelectionFixFirefox = css({
+  '&::selection': {
+    backgroundColor: 'transparent'
+  }
+});
 var layoutColumnDragHandleStyles = css({
   transform: 'rotate(90deg)'
 });
@@ -63,6 +75,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,
@@ -393,7 +426,10 @@ export var DragHandle = function DragHandle(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       jsx("button", {
         type: "button",
-        css: [dragHandleButtonStyles, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
+        css: [dragHandleButtonStyles,
+        // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
+        // See https://product-fabric.atlassian.net/browse/ED-26266
+        browser.gecko && fg('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
@@ -402,10 +438,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.4",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -144,6 +144,12 @@
 		},
 		"platform_editor_advanced_layouts_DnD_remove_layout": {
 			"type": "boolean"
+		},
+		"platform_editor_dnd_update_drag_start_target": {
+			"type": "boolean"
+		},
+		"platform_editor_dnd_handle_highlight_fix_firefox": {
+			"type": "boolean"
 		}
 	}
 }