@atlaskit/editor-plugin-block-controls 2.13.5 → 2.13.7

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.7
+
+### Patch Changes
+
+- [#160954](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/160954)
+  [`3d5a71c2d5e22`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3d5a71c2d5e22) -
+  Fix issue with zindex on DnD psudo-element
+
+## 2.13.6
+
+### Patch Changes
+
+- [#160415](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/160415)
+  [`9dd7911f0fb16`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9dd7911f0fb16) -
+  [ux] [ED-25057] Implement drag handle for layout column (position, hover zone, selection)
+- Updated dependencies
+
 ## 2.13.5
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations-anchor.js

@@ -9,8 +9,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _advancedLayoutsFlags = require("../utils/advanced-layouts-flags");
 var _decorationsCommon = require("./decorations-common");
-var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
+var IGNORE_NODES = (0, _advancedLayoutsFlags.isPreRelease2)() ? ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'] : ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
 var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   // Optimisation to avoid drawing node decorations for empty table cells

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.handleMouseOver = void 0;
+var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _advancedLayoutsFlags = require("../utils/advanced-layouts-flags");
 var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(target) {
   if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
     var _target$parentElement;
@@ -13,6 +15,12 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
   }
   return false;
 };
+var isLayoutColumnWithoutContent = function isLayoutColumnWithoutContent(target) {
+  var _target$textContent;
+  return target instanceof HTMLDivElement && (target === null || target === void 0 ? void 0 : target.getAttribute('data-drag-handler-node-type')) === 'layoutColumn' &&
+  // Remove placeholder text
+  ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.replace(new RegExp(_whitespace.ZERO_WIDTH_SPACE, 'g'), '')) === '';
+};
 var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls, _target$classList;
   var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -37,6 +45,11 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     }
     var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
     var parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
+
+    // Don't show drag handle when there is no content/only placeholder in layout column
+    if ((0, _advancedLayoutsFlags.isPreRelease2)() && isLayoutColumnWithoutContent(rootElement)) {
+      return false;
+    }
     // We want to exlude handles from showing for direct decendant of table nodes (i.e. nodes in cells)
     if (parentElement && parentElementType === 'table' && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _experiments.editorExperiment)('table-nested-dnd', false, {
       exposure: true

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

@@ -23,6 +23,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _main = require("../pm-plugins/main");
 var _utils = require("../utils");
+var _advancedLayoutsFlags = require("../utils/advanced-layouts-flags");
 var _dragHandlePositions = require("../utils/drag-handle-positions");
 var _consts = require("./consts");
 var _dragPreview = require("./drag-preview");
@@ -64,6 +65,9 @@ var dragHandleButtonStyles = (0, _react2.css)({
     outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
   }
 });
+var layoutColumnDragHandleStyles = (0, _react2.css)({
+  transform: 'rotate(90deg)'
+});
 var selectedStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
@@ -277,14 +281,16 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
       }
     }
+    var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    var isLayoutColumn = nodeType === 'layoutColumn';
     if (supportsAnchor) {
       return {
-        left: (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
-        top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
+        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)"),
+        top: (0, _advancedLayoutsFlags.isPreRelease2)() && isLayoutColumn ? "calc(anchor(".concat(anchorName, " top) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px)") : (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
     return {
-      left: (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer ? "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),
+      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]);
@@ -396,7 +402,7 @@ 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, dragHandleSelected && selectedStyles],
+        css: [dragHandleButtonStyles, (0, _advancedLayoutsFlags.isPreRelease2)() && nodeType === 'layoutColumn' && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,

package/dist/cjs/ui/global-styles.js

@@ -37,7 +37,7 @@ var extendedHoverZone = function extendedHoverZone() {
         background: 'transparent',
         cursor: 'default',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-        zIndex: (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
+        zIndex: -1
       }
     },
     // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
@@ -83,7 +83,7 @@ var extendedHoverZoneNested = function extendedHoverZoneNested() {
         height: '100%',
         cursor: 'default',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-        zIndex: (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
+        zIndex: -1
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
@@ -97,6 +97,22 @@ var extendedHoverZoneNested = function extendedHoverZoneNested() {
         height: '100%',
         cursor: 'default',
         zIndex: 1
+      },
+      // hover zone for layout column should be placed near the top of the column (where drag handle is)
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&& [data-drag-handler-anchor-name][data-layout-column]::after': {
+        content: '""',
+        position: 'absolute',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        top: "".concat(-_consts.DRAG_HANDLE_WIDTH / 2, "px"),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        left: 0,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        width: '100%',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+        height: "".concat(_consts.DRAG_HANDLE_WIDTH, "px"),
+        cursor: 'default',
+        zIndex: 1
       }
     },
     // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
@@ -190,10 +206,28 @@ var withRelativePosStyle = (0, _react.css)({
     }
   }
 });
+var withAnchorNameZindexStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]': {
+      zIndex: 1
+    }
+  }
+});
+var withAnchorNameZindexNestedStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]': {
+      zIndex: 1
+    }
+  }
+});
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
     styles: [globalStyles(), (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
       exposure: false
-    }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles] : undefined]
+    }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
   });
 };

package/dist/cjs/utils/drag-handle-positions.js

@@ -14,6 +14,8 @@ var getTopPosition = exports.getTopPosition = function getTopPosition(dom, type)
     return "".concat(dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
   } else if (type === 'rule') {
     return "".concat(dom.offsetTop - _consts.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, "px");
+  } else if (type === 'layoutColumn') {
+    return "".concat(-_consts.DRAG_HANDLE_WIDTH, "px");
   } else {
     return "".concat(dom.offsetTop, "px");
   }
@@ -23,7 +25,7 @@ var getLeftPosition = exports.getLeftPosition = function getLeftPosition(dom, ty
     return 'auto';
   }
   if (!innerContainer) {
-    return "".concat(dom.offsetLeft - (0, _consts.dragHandleGap)(type, parentType) - _consts.DRAG_HANDLE_WIDTH, "px");
+    return type === 'layoutColumn' ? "".concat(dom.offsetLeft + dom.clientWidth / 2 - _consts.DRAG_HANDLE_HEIGHT / 2, "px") : "".concat(dom.offsetLeft - (0, _consts.dragHandleGap)(type, parentType) - _consts.DRAG_HANDLE_WIDTH, "px");
   }
 
   // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div

package/dist/cjs/utils/getSelection.js

@@ -47,9 +47,9 @@ var getSelection = exports.getSelection = function getSelection(tr, start) {
   var $startPos = tr.doc.resolve(start);
   var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
   var isBlockQuoteWithMedia = nodeName === 'blockquote' && isNodeWithMedia(tr, start, nodeSize);
-
-  // decisionList node is not selectable, but we want to select the whole node not just text
-  if (isNodeSelection && nodeName !== 'blockquote' || isBlockQuoteWithMedia || nodeName === 'decisionList') {
+  if (isNodeSelection && nodeName !== 'blockquote' || isBlockQuoteWithMedia ||
+  // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
+  ['decisionList', 'layoutColumn'].includes(nodeName || '')) {
     return new _state.NodeSelection($startPos);
   } else if (nodeName === 'mediaGroup' && (node === null || node === void 0 ? void 0 : node.childCount) === 1) {
     var $mediaStartPos = tr.doc.resolve(start + 1);

package/dist/es2019/pm-plugins/decorations-anchor.js

@@ -1,8 +1,9 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
-const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
+const IGNORE_NODES = isPreRelease2() ? ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'] : ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
 const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 export const shouldDescendIntoNode = node => {
   // Optimisation to avoid drawing node decorations for empty table cells

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -1,5 +1,7 @@
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 const isEmptyNestedParagraphOrHeading = target => {
   if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
     var _target$parentElement;
@@ -7,6 +9,12 @@ const isEmptyNestedParagraphOrHeading = target => {
   }
   return false;
 };
+const isLayoutColumnWithoutContent = target => {
+  var _target$textContent;
+  return target instanceof HTMLDivElement && (target === null || target === void 0 ? void 0 : target.getAttribute('data-drag-handler-node-type')) === 'layoutColumn' &&
+  // Remove placeholder text
+  ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.replace(new RegExp(ZERO_WIDTH_SPACE, 'g'), '')) === '';
+};
 export const handleMouseOver = (view, event, api) => {
   var _api$blockControls, _target$classList;
   const {
@@ -32,6 +40,11 @@ export const handleMouseOver = (view, event, api) => {
     }
     const parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
     const parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
+
+    // Don't show drag handle when there is no content/only placeholder in layout column
+    if (isPreRelease2() && isLayoutColumnWithoutContent(rootElement)) {
+      return false;
+    }
     // We want to exlude handles from showing for direct decendant of table nodes (i.e. nodes in cells)
     if (parentElement && parentElementType === 'table' && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
       exposure: true

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

@@ -19,6 +19,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
 import { getNestedNodePosition, selectNode } from '../utils';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
@@ -53,6 +54,9 @@ const dragHandleButtonStyles = css({
     outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
   }
 });
+const layoutColumnDragHandleStyles = css({
+  transform: 'rotate(90deg)'
+});
 const selectedStyles = css({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
@@ -261,14 +265,16 @@ export const DragHandle = ({
         innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
       }
     }
+    const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    const isLayoutColumn = nodeType === 'layoutColumn';
     if (supportsAnchor) {
       return {
-        left: (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer ? `calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType)})` : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
-        top: fg('platform_editor_elements_dnd_ed_23674') ? `calc(anchor(${anchorName} start) + ${topPositionAdjustment(nodeType)}px)` : anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
+        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)`,
+        top: isPreRelease2() && isLayoutColumn ? `calc(anchor(${anchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : fg('platform_editor_elements_dnd_ed_23674') ? `calc(anchor(${anchorName} start) + ${topPositionAdjustment(nodeType)}px)` : anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
       };
     }
     return {
-      left: (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType),
+      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]);
@@ -376,7 +382,7 @@ export const DragHandle = ({
   // eslint-disable-next-line @atlaskit/design-system/no-html-button
   jsx("button", {
     type: "button",
-    css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
+    css: [dragHandleButtonStyles, isPreRelease2() && nodeType === 'layoutColumn' && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
     ref: buttonRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,

package/dist/es2019/ui/global-styles.js

@@ -6,7 +6,7 @@
 import { css, Global, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
+import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
 import { emptyBlockExperimentGlobalStyles } from './empty-block-experiment/global-styles';
 const extendedHoverZone = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -27,7 +27,7 @@ const extendedHoverZone = () => css({
       background: 'transparent',
       cursor: 'default',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-      zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
+      zIndex: -1
     }
   },
   // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
@@ -71,7 +71,7 @@ const extendedHoverZoneNested = () => css({
       height: '100%',
       cursor: 'default',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-      zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
+      zIndex: -1
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
@@ -85,6 +85,22 @@ const extendedHoverZoneNested = () => css({
       height: '100%',
       cursor: 'default',
       zIndex: 1
+    },
+    // hover zone for layout column should be placed near the top of the column (where drag handle is)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name][data-layout-column]::after': {
+      content: '""',
+      position: 'absolute',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      top: `${-DRAG_HANDLE_WIDTH / 2}px`,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      left: 0,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      width: '100%',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      height: `${DRAG_HANDLE_WIDTH}px`,
+      cursor: 'default',
+      zIndex: 1
     }
   },
   // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
@@ -193,10 +209,28 @@ const withRelativePosStyle = css({
     }
   }
 });
+const withAnchorNameZindexStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]': {
+      zIndex: 1
+    }
+  }
+});
+const withAnchorNameZindexNestedStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]': {
+      zIndex: 1
+    }
+  }
+});
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
     styles: [globalStyles(), editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
       exposure: false
-    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles] : undefined]
+    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
   });
 };

package/dist/es2019/utils/drag-handle-positions.js

@@ -1,4 +1,4 @@
-import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
+import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
 export const getTopPosition = (dom, type) => {
   if (!dom) {
     return 'auto';
@@ -8,6 +8,8 @@ export const getTopPosition = (dom, type) => {
     return `${dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0)}px`;
   } else if (type === 'rule') {
     return `${dom.offsetTop - DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT}px`;
+  } else if (type === 'layoutColumn') {
+    return `${-DRAG_HANDLE_WIDTH}px`;
   } else {
     return `${dom.offsetTop}px`;
   }
@@ -17,7 +19,7 @@ export const getLeftPosition = (dom, type, innerContainer, macroInteractionUpdat
     return 'auto';
   }
   if (!innerContainer) {
-    return `${dom.offsetLeft - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH}px`;
+    return type === 'layoutColumn' ? `${dom.offsetLeft + dom.clientWidth / 2 - DRAG_HANDLE_HEIGHT / 2}px` : `${dom.offsetLeft - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH}px`;
   }
 
   // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div

package/dist/es2019/utils/getSelection.js

@@ -41,9 +41,9 @@ export const getSelection = (tr, start) => {
   const $startPos = tr.doc.resolve(start);
   const nodeName = node === null || node === void 0 ? void 0 : node.type.name;
   const isBlockQuoteWithMedia = nodeName === 'blockquote' && isNodeWithMedia(tr, start, nodeSize);
-
-  // decisionList node is not selectable, but we want to select the whole node not just text
-  if (isNodeSelection && nodeName !== 'blockquote' || isBlockQuoteWithMedia || nodeName === 'decisionList') {
+  if (isNodeSelection && nodeName !== 'blockquote' || isBlockQuoteWithMedia ||
+  // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
+  ['decisionList', 'layoutColumn'].includes(nodeName || '')) {
     return new NodeSelection($startPos);
   } else if (nodeName === 'mediaGroup' && (node === null || node === void 0 ? void 0 : node.childCount) === 1) {
     const $mediaStartPos = tr.doc.resolve(start + 1);

package/dist/esm/pm-plugins/decorations-anchor.js

@@ -2,8 +2,9 @@ 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 { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
-var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
+var IGNORE_NODES = isPreRelease2() ? ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'] : ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
 var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   // Optimisation to avoid drawing node decorations for empty table cells

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -1,5 +1,7 @@
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(target) {
   if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
     var _target$parentElement;
@@ -7,6 +9,12 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
   }
   return false;
 };
+var isLayoutColumnWithoutContent = function isLayoutColumnWithoutContent(target) {
+  var _target$textContent;
+  return target instanceof HTMLDivElement && (target === null || target === void 0 ? void 0 : target.getAttribute('data-drag-handler-node-type')) === 'layoutColumn' &&
+  // Remove placeholder text
+  ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.replace(new RegExp(ZERO_WIDTH_SPACE, 'g'), '')) === '';
+};
 export var handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls, _target$classList;
   var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -31,6 +39,11 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     }
     var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
     var parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
+
+    // Don't show drag handle when there is no content/only placeholder in layout column
+    if (isPreRelease2() && isLayoutColumnWithoutContent(rootElement)) {
+      return false;
+    }
     // We want to exlude handles from showing for direct decendant of table nodes (i.e. nodes in cells)
     if (parentElement && parentElementType === 'table' && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
       exposure: true

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

@@ -21,6 +21,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
 import { getNestedNodePosition, selectNode } from '../utils';
+import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
@@ -55,6 +56,9 @@ var dragHandleButtonStyles = css({
     outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
   }
 });
+var layoutColumnDragHandleStyles = css({
+  transform: 'rotate(90deg)'
+});
 var selectedStyles = css({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
@@ -268,14 +272,16 @@ export var DragHandle = function DragHandle(_ref) {
         innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
       }
     }
+    var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    var isLayoutColumn = nodeType === 'layoutColumn';
     if (supportsAnchor) {
       return {
-        left: (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
-        top: fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
+        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)"),
+        top: isPreRelease2() && isLayoutColumn ? "calc(anchor(".concat(anchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
     return {
-      left: (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer ? "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),
+      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]);
@@ -387,7 +393,7 @@ export var DragHandle = function DragHandle(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       jsx("button", {
         type: "button",
-        css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
+        css: [dragHandleButtonStyles, isPreRelease2() && nodeType === 'layoutColumn' && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,

package/dist/esm/ui/global-styles.js

@@ -7,7 +7,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css, Global, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
+import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
 import { emptyBlockExperimentGlobalStyles } from './empty-block-experiment/global-styles';
 var extendedHoverZone = function extendedHoverZone() {
   return css({
@@ -29,7 +29,7 @@ var extendedHoverZone = function extendedHoverZone() {
         background: 'transparent',
         cursor: 'default',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-        zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
+        zIndex: -1
       }
     },
     // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
@@ -75,7 +75,7 @@ var extendedHoverZoneNested = function extendedHoverZoneNested() {
         height: '100%',
         cursor: 'default',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-        zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
+        zIndex: -1
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
       '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
@@ -89,6 +89,22 @@ var extendedHoverZoneNested = function extendedHoverZoneNested() {
         height: '100%',
         cursor: 'default',
         zIndex: 1
+      },
+      // hover zone for layout column should be placed near the top of the column (where drag handle is)
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&& [data-drag-handler-anchor-name][data-layout-column]::after': {
+        content: '""',
+        position: 'absolute',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        top: "".concat(-DRAG_HANDLE_WIDTH / 2, "px"),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        left: 0,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        width: '100%',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+        height: "".concat(DRAG_HANDLE_WIDTH, "px"),
+        cursor: 'default',
+        zIndex: 1
       }
     },
     // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
@@ -182,10 +198,28 @@ var withRelativePosStyle = css({
     }
   }
 });
+var withAnchorNameZindexStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]': {
+      zIndex: 1
+    }
+  }
+});
+var withAnchorNameZindexNestedStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]': {
+      zIndex: 1
+    }
+  }
+});
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
     styles: [globalStyles(), editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
       exposure: false
-    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles] : undefined]
+    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
   });
 };

package/dist/esm/utils/drag-handle-positions.js

@@ -1,4 +1,4 @@
-import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
+import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
 export var getTopPosition = function getTopPosition(dom, type) {
   if (!dom) {
     return 'auto';
@@ -8,6 +8,8 @@ export var getTopPosition = function getTopPosition(dom, type) {
     return "".concat(dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
   } else if (type === 'rule') {
     return "".concat(dom.offsetTop - DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, "px");
+  } else if (type === 'layoutColumn') {
+    return "".concat(-DRAG_HANDLE_WIDTH, "px");
   } else {
     return "".concat(dom.offsetTop, "px");
   }
@@ -17,7 +19,7 @@ export var getLeftPosition = function getLeftPosition(dom, type, innerContainer,
     return 'auto';
   }
   if (!innerContainer) {
-    return "".concat(dom.offsetLeft - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH, "px");
+    return type === 'layoutColumn' ? "".concat(dom.offsetLeft + dom.clientWidth / 2 - DRAG_HANDLE_HEIGHT / 2, "px") : "".concat(dom.offsetLeft - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH, "px");
   }
 
   // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div

package/dist/esm/utils/getSelection.js

@@ -41,9 +41,9 @@ export var getSelection = function getSelection(tr, start) {
   var $startPos = tr.doc.resolve(start);
   var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
   var isBlockQuoteWithMedia = nodeName === 'blockquote' && isNodeWithMedia(tr, start, nodeSize);
-
-  // decisionList node is not selectable, but we want to select the whole node not just text
-  if (isNodeSelection && nodeName !== 'blockquote' || isBlockQuoteWithMedia || nodeName === 'decisionList') {
+  if (isNodeSelection && nodeName !== 'blockquote' || isBlockQuoteWithMedia ||
+  // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
+  ['decisionList', 'layoutColumn'].includes(nodeName || '')) {
     return new NodeSelection($startPos);
   } else if (nodeName === 'mediaGroup' && (node === null || node === void 0 ? void 0 : node.childCount) === 1) {
     var $mediaStartPos = tr.doc.resolve(start + 1);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.13.5",
+	"version": "2.13.7",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,12 +31,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
-		"@atlaskit/editor-common": "^94.12.0",
+		"@atlaskit/editor-common": "^94.13.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
-		"@atlaskit/editor-plugin-quick-insert": "^1.6.0",
+		"@atlaskit/editor-plugin-quick-insert": "^1.7.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
@@ -48,8 +48,8 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^13.0.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.11.0",
-		"@atlaskit/tokens": "^2.1.0",
+		"@atlaskit/tmp-editor-statsig": "^2.12.0",
+		"@atlaskit/tokens": "^2.2.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",