@atlaskit/editor-plugin-block-controls 2.13.23 → 2.13.24

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.24
+
+### Patch Changes
+
+- [#168183](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168183)
+  [`5d8ee46d0ab46`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5d8ee46d0ab46) -
+  Fix dragging issue of a layout column while layout is selected
+
 ## 2.13.23
 
 ### Patch Changes

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

@@ -95,6 +95,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     setDragHandleSelected = _useState4[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
     featureFlagsState = _useSharedPluginState.featureFlagsState;
+  var isLayoutColumn = nodeType === 'layoutColumn';
   (0, _react.useEffect)(function () {
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
@@ -146,6 +147,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   // but ensures the preview is generated correctly.
   var handleMouseDown = (0, _react.useCallback)(function () {
     var _api$core3;
+    if (!(isLayoutColumn && (0, _advancedLayoutsFlags.isPreRelease2)()) && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24885')) {
+      return undefined;
+    }
     api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
       var tr = _ref3.tr;
       var startPos = getPos();
@@ -156,12 +160,17 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       if (!node) {
         return tr;
       }
-      var $startPos = tr.doc.resolve(startPos + node.nodeSize);
-      var selection = new _state.TextSelection($startPos);
+      var selection;
+      if (isLayoutColumn && (0, _advancedLayoutsFlags.isPreRelease2)()) {
+        selection = new _state.NodeSelection(tr.doc.resolve(startPos));
+      } else {
+        var $startPos = tr.doc.resolve(startPos + node.nodeSize);
+        selection = new _state.TextSelection($startPos);
+      }
       tr.setSelection(selection);
       return tr;
     });
-  }, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos]);
+  }, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos, isLayoutColumn]);
   var handleKeyDown = (0, _react.useCallback)(function (e) {
     if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
       // allow user to use spacebar to select the node
@@ -282,7 +291,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
-    var isLayoutColumn = nodeType === 'layoutColumn';
     if (supportsAnchor) {
       return {
         left: isEdgeCase ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : (0, _advancedLayoutsFlags.isPreRelease2)() && isLayoutColumn ? "calc((anchor(".concat(anchorName, " right) + anchor(").concat(anchorName, " left))/2 - ").concat(_consts.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
@@ -293,7 +301,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType),
       top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
     };
-  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos]);
+  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos, isLayoutColumn]);
   var _useState5 = (0, _react.useState)({
       display: 'none'
     }),
@@ -409,13 +417,13 @@ 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, _advancedLayoutsFlags.isPreRelease2)() && nodeType === 'layoutColumn' && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
+        css: [dragHandleButtonStyles, (0, _advancedLayoutsFlags.isPreRelease2)() && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
         style: positionStyles,
         onClick: handleOnClick,
-        onMouseDown: (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24885') ? undefined : handleMouseDown,
+        onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown,
         "data-testid": "block-ctrl-drag-handle"
       }, (0, _react2.jsx)(_dragHandler.default, {

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

@@ -10,7 +10,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 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';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 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';
@@ -79,6 +79,7 @@ export const DragHandle = ({
   const {
     featureFlagsState
   } = useSharedPluginState(api, ['featureFlags']);
+  const isLayoutColumn = nodeType === 'layoutColumn';
   useEffect(() => {
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
@@ -129,6 +130,9 @@ export const DragHandle = ({
   // but ensures the preview is generated correctly.
   const handleMouseDown = useCallback(() => {
     var _api$core3;
+    if (!(isLayoutColumn && isPreRelease2()) && fg('platform_editor_element_drag_and_drop_ed_24885')) {
+      return undefined;
+    }
     api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
       tr
     }) => {
@@ -140,12 +144,17 @@ export const DragHandle = ({
       if (!node) {
         return tr;
       }
-      const $startPos = tr.doc.resolve(startPos + node.nodeSize);
-      const selection = new TextSelection($startPos);
+      let selection;
+      if (isLayoutColumn && isPreRelease2()) {
+        selection = new NodeSelection(tr.doc.resolve(startPos));
+      } else {
+        const $startPos = tr.doc.resolve(startPos + node.nodeSize);
+        selection = new TextSelection($startPos);
+      }
       tr.setSelection(selection);
       return tr;
     });
-  }, [api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos]);
+  }, [api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos, isLayoutColumn]);
   const handleKeyDown = useCallback(e => {
     if (fg('platform_editor_element_drag_and_drop_ed_23873')) {
       // allow user to use spacebar to select the node
@@ -266,7 +275,6 @@ export const DragHandle = ({
       }
     }
     const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
-    const isLayoutColumn = nodeType === 'layoutColumn';
     if (supportsAnchor) {
       return {
         left: isEdgeCase ? `calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType)})` : isPreRelease2() && isLayoutColumn ? `calc((anchor(${anchorName} right) + anchor(${anchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
@@ -277,7 +285,7 @@ export const DragHandle = ({
       left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType),
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
-  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos]);
+  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos, isLayoutColumn]);
   const [positionStyles, setPositionStyles] = useState({
     display: 'none'
   });
@@ -389,13 +397,13 @@ export const DragHandle = ({
   // eslint-disable-next-line @atlaskit/design-system/no-html-button
   jsx("button", {
     type: "button",
-    css: [dragHandleButtonStyles, isPreRelease2() && nodeType === 'layoutColumn' && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
+    css: [dragHandleButtonStyles, isPreRelease2() && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
     ref: buttonRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: positionStyles,
     onClick: handleOnClick,
-    onMouseDown: fg('platform_editor_element_drag_and_drop_ed_24885') ? undefined : handleMouseDown,
+    onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     "data-testid": "block-ctrl-drag-handle"
   }, jsx(DragHandlerIcon, {

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

@@ -12,7 +12,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 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';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 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';
@@ -86,6 +86,7 @@ export var DragHandle = function DragHandle(_ref) {
     setDragHandleSelected = _useState4[1];
   var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
     featureFlagsState = _useSharedPluginState.featureFlagsState;
+  var isLayoutColumn = nodeType === 'layoutColumn';
   useEffect(function () {
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
@@ -137,6 +138,9 @@ export var DragHandle = function DragHandle(_ref) {
   // but ensures the preview is generated correctly.
   var handleMouseDown = useCallback(function () {
     var _api$core3;
+    if (!(isLayoutColumn && isPreRelease2()) && fg('platform_editor_element_drag_and_drop_ed_24885')) {
+      return undefined;
+    }
     api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
       var tr = _ref3.tr;
       var startPos = getPos();
@@ -147,12 +151,17 @@ export var DragHandle = function DragHandle(_ref) {
       if (!node) {
         return tr;
       }
-      var $startPos = tr.doc.resolve(startPos + node.nodeSize);
-      var selection = new TextSelection($startPos);
+      var selection;
+      if (isLayoutColumn && isPreRelease2()) {
+        selection = new NodeSelection(tr.doc.resolve(startPos));
+      } else {
+        var $startPos = tr.doc.resolve(startPos + node.nodeSize);
+        selection = new TextSelection($startPos);
+      }
       tr.setSelection(selection);
       return tr;
     });
-  }, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos]);
+  }, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos, isLayoutColumn]);
   var handleKeyDown = useCallback(function (e) {
     if (fg('platform_editor_element_drag_and_drop_ed_23873')) {
       // allow user to use spacebar to select the node
@@ -273,7 +282,6 @@ export var DragHandle = function DragHandle(_ref) {
       }
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
-    var isLayoutColumn = nodeType === 'layoutColumn';
     if (supportsAnchor) {
       return {
         left: isEdgeCase ? "calc(anchor(".concat(anchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : isPreRelease2() && isLayoutColumn ? "calc((anchor(".concat(anchorName, " right) + anchor(").concat(anchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
@@ -284,7 +292,7 @@ export var DragHandle = function DragHandle(_ref) {
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType),
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
-  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos]);
+  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos, isLayoutColumn]);
   var _useState5 = useState({
       display: 'none'
     }),
@@ -400,13 +408,13 @@ export var DragHandle = function DragHandle(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       jsx("button", {
         type: "button",
-        css: [dragHandleButtonStyles, isPreRelease2() && nodeType === 'layoutColumn' && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
+        css: [dragHandleButtonStyles, isPreRelease2() && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
         style: positionStyles,
         onClick: handleOnClick,
-        onMouseDown: fg('platform_editor_element_drag_and_drop_ed_24885') ? undefined : handleMouseDown,
+        onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown,
         "data-testid": "block-ctrl-drag-handle"
       }, jsx(DragHandlerIcon, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.13.23",
+	"version": "2.13.24",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
-		"@atlaskit/editor-common": "^95.4.0",
+		"@atlaskit/editor-common": "^95.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -41,14 +41,14 @@
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.25.0",
+		"@atlaskit/icon": "^22.26.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^13.2.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.19.0",
+		"@atlaskit/tmp-editor-statsig": "^2.21.0",
 		"@atlaskit/tokens": "^2.3.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",