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

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @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
+
+- [#158691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158691)
+  [`f71feb1fedb07`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f71feb1fedb07) -
+  ED-25618 enable 5 columns for pre release 2
+- [#158691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158691)
+  [`70ef661bbbb4d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70ef661bbbb4d) -
+  Update feature flag to gate
+- Updated dependencies
+
 ## 2.13.4
 
 ### Patch Changes

package/dist/cjs/commands/move-to-layout.js

@@ -9,7 +9,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _consts = require("../consts");
 var _consts2 = require("../ui/consts");
 var createNewLayout = function createNewLayout(schema, layoutContents) {
-  if (layoutContents.length === 0 || layoutContents.length > _consts.MAX_LAYOUT_COLUMN_SUPPORTED) {
+  if (layoutContents.length === 0 || layoutContents.length > (0, _consts.maxLayoutColumnSupported)()) {
     return null;
   }
   var width = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[layoutContents.length];
@@ -54,7 +54,7 @@ var moveNode = function moveNode(from, to, newNode, sourceNodeSize, tr) {
   return tr;
 };
 var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr) {
-  if (toLayout.childCount < _consts.MAX_LAYOUT_COLUMN_SUPPORTED) {
+  if (toLayout.childCount < (0, _consts.maxLayoutColumnSupported)()) {
     var newColumnWidth = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[toLayout.childCount + 1];
     updateColumnWidths(tr, toLayout, toLayoutPos, newColumnWidth);
     var _ref2 = tr.doc.type.schema.nodes || {},

package/dist/cjs/consts.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MAX_LAYOUT_COLUMN_SUPPORTED = exports.DIRECTION = void 0;
+exports.maxLayoutColumnSupported = exports.DIRECTION = void 0;
+var _advancedLayoutsFlags = require("./utils/advanced-layouts-flags");
 var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["UP"] = "up";
   DIRECTION["DOWN"] = "down";
@@ -11,4 +12,6 @@ var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["RIGHT"] = "right";
   return DIRECTION;
 }({});
-var MAX_LAYOUT_COLUMN_SUPPORTED = exports.MAX_LAYOUT_COLUMN_SUPPORTED = 3;
+var maxLayoutColumnSupported = exports.maxLayoutColumnSupported = function maxLayoutColumnSupported() {
+  return (0, _advancedLayoutsFlags.isPreRelease2)() ? 5 : 3;
+};

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/decorations-drop-target.js

@@ -161,7 +161,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       if (isAdvancedLayoutsPreRelease2) {
         if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node &&
         // Not the first node
-        (parent === null || parent === void 0 ? void 0 : parent.childCount) < _consts.MAX_LAYOUT_COLUMN_SUPPORTED) {
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < (0, _consts.maxLayoutColumnSupported)()) {
           decs.push(createLayoutDropTargetDecoration(pos, {
             api: api,
             parent: parent,

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/pm-plugins/main.js

@@ -58,9 +58,6 @@ var destroyFn = function destroyFn(api) {
       if (isHTMLElement(scrollable)) {
         scrollable.style.setProperty('scroll-behavior', null);
       }
-      if ((0, _advancedLayoutsFlags.isPreRelease2)()) {
-        _activeAnchorTracker.defaultActiveAnchorTracker.reset();
-      }
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
         var tr = _ref3.tr;
         var _ref4 = source.data,
@@ -519,6 +516,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         },
         dragstart: function dragstart(view) {
           var _anchorRectCache;
+          if ((0, _advancedLayoutsFlags.isPreRelease2)()) {
+            _activeAnchorTracker.defaultActiveAnchorTracker.reset();
+          }
           (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 || _anchorRectCache.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
             isPMDragging: 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/active-anchor-tracker.js

@@ -21,17 +21,21 @@ var ActiveAnchorTracker = exports.ActiveAnchorTracker = /*#__PURE__*/function ()
   (0, _createClass2.default)(ActiveAnchorTracker, [{
     key: "subscribe",
     value: function subscribe(anchorName, callback) {
-      this.emitter.on(anchorName, callback);
+      if (this.emitter) {
+        this.emitter.on(anchorName, callback);
+      }
     }
   }, {
     key: "unsubscribe",
     value: function unsubscribe(anchorName, callback) {
-      this.emitter.removeListener(anchorName, callback);
+      if (this.emitter) {
+        this.emitter.removeListener(anchorName, callback);
+      }
     }
   }, {
     key: "emit",
     value: function emit(anchorName) {
-      if (this.lastActiveAnchor !== anchorName) {
+      if (this.lastActiveAnchor !== anchorName && this.emitter) {
         this.emitter.emit(this.lastActiveAnchor, false);
         this.emitter.emit(anchorName, true);
         this.lastActiveAnchor = anchorName;
@@ -40,11 +44,18 @@ var ActiveAnchorTracker = exports.ActiveAnchorTracker = /*#__PURE__*/function ()
   }, {
     key: "reset",
     value: function reset() {
-      this.emitter.removeAllListeners();
+      if (this.emitter) {
+        // To prevent any potential memory leaks,
+        // we set the event emitter to null and then create a new event emitter.
+        this.emitter.removeAllListeners();
+        this.emitter = null;
+        this.emitter = new _events.EventEmitter();
+      }
     }
   }]);
   return ActiveAnchorTracker;
-}();
+}(); // TODO We should use a scoped ActiveAnchorTracker rather than the global static object.
+// Move this into the plugin scope once the newApply functions becomes default apply.
 var defaultActiveAnchorTracker = exports.defaultActiveAnchorTracker = new ActiveAnchorTracker();
 var useActiveAnchorTracker = exports.useActiveAnchorTracker = function useActiveAnchorTracker(anchorName) {
   var activeAnchorTracker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultActiveAnchorTracker;

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/cjs/utils/inline-drop-target.js

@@ -16,7 +16,7 @@ var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
-    return node.childCount < _consts.MAX_LAYOUT_COLUMN_SUPPORTED;
+    return node.childCount < (0, _consts.maxLayoutColumnSupported)();
   }
   return !(0, _utils.isEmptyParagraph)(node);
 };

package/dist/es2019/commands/move-to-layout.js

@@ -1,9 +1,9 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
 const createNewLayout = (schema, layoutContents) => {
-  if (layoutContents.length === 0 || layoutContents.length > MAX_LAYOUT_COLUMN_SUPPORTED) {
+  if (layoutContents.length === 0 || layoutContents.length > maxLayoutColumnSupported()) {
     return null;
   }
   const width = DEFAULT_COLUMN_DISTRIBUTIONS[layoutContents.length];
@@ -49,7 +49,7 @@ const moveNode = (from, to, newNode, sourceNodeSize, tr) => {
   return tr;
 };
 const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr) => {
-  if (toLayout.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
+  if (toLayout.childCount < maxLayoutColumnSupported()) {
     const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[toLayout.childCount + 1];
     updateColumnWidths(tr, toLayout, toLayoutPos, newColumnWidth);
     const {

package/dist/es2019/consts.js

@@ -1,3 +1,4 @@
+import { isPreRelease2 } from './utils/advanced-layouts-flags';
 export let DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["UP"] = "up";
   DIRECTION["DOWN"] = "down";
@@ -5,4 +6,6 @@ export let DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["RIGHT"] = "right";
   return DIRECTION;
 }({});
-export const MAX_LAYOUT_COLUMN_SUPPORTED = 3;
+export const maxLayoutColumnSupported = () => {
+  return isPreRelease2() ? 5 : 3;
+};

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/decorations-drop-target.js

@@ -4,7 +4,7 @@ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget } from '../ui/drop-target';
 import { DropTargetLayout } from '../ui/drop-target-layout';
@@ -153,7 +153,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
       if (isAdvancedLayoutsPreRelease2) {
         if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node &&
         // Not the first node
-        (parent === null || parent === void 0 ? void 0 : parent.childCount) < MAX_LAYOUT_COLUMN_SUPPORTED) {
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported()) {
           decs.push(createLayoutDropTargetDecoration(pos, {
             api,
             parent,

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/pm-plugins/main.js

@@ -50,9 +50,6 @@ const destroyFn = api => {
       if (isHTMLElement(scrollable)) {
         scrollable.style.setProperty('scroll-behavior', null);
       }
-      if (isPreRelease2()) {
-        defaultActiveAnchorTracker.reset();
-      }
       api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
         tr
       }) => {
@@ -496,6 +493,9 @@ export const createPlugin = (api, getIntl) => {
         },
         dragstart(view) {
           var _anchorRectCache;
+          if (isPreRelease2()) {
+            defaultActiveAnchorTracker.reset();
+          }
           (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 ? void 0 : _anchorRectCache.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
             isPMDragging: 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/active-anchor-tracker.js

@@ -8,22 +8,35 @@ export class ActiveAnchorTracker {
     this.emitter = new EventEmitter();
   }
   subscribe(anchorName, callback) {
-    this.emitter.on(anchorName, callback);
+    if (this.emitter) {
+      this.emitter.on(anchorName, callback);
+    }
   }
   unsubscribe(anchorName, callback) {
-    this.emitter.removeListener(anchorName, callback);
+    if (this.emitter) {
+      this.emitter.removeListener(anchorName, callback);
+    }
   }
   emit(anchorName) {
-    if (this.lastActiveAnchor !== anchorName) {
+    if (this.lastActiveAnchor !== anchorName && this.emitter) {
       this.emitter.emit(this.lastActiveAnchor, false);
       this.emitter.emit(anchorName, true);
       this.lastActiveAnchor = anchorName;
     }
   }
   reset() {
-    this.emitter.removeAllListeners();
+    if (this.emitter) {
+      // To prevent any potential memory leaks,
+      // we set the event emitter to null and then create a new event emitter.
+      this.emitter.removeAllListeners();
+      this.emitter = null;
+      this.emitter = new EventEmitter();
+    }
   }
 }
+
+// TODO We should use a scoped ActiveAnchorTracker rather than the global static object.
+// Move this into the plugin scope once the newApply functions becomes default apply.
 export const defaultActiveAnchorTracker = new ActiveAnchorTracker();
 export const useActiveAnchorTracker = (anchorName, activeAnchorTracker = defaultActiveAnchorTracker) => {
   const [isActive, setIsActive] = useState(false);

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/es2019/utils/inline-drop-target.js

@@ -1,5 +1,5 @@
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
-import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { isPreRelease1 } from './advanced-layouts-flags';
 import { isWrappedMedia } from './check-media-layout';
 export const shouldAllowInlineDropTarget = (isNested, node) => {
@@ -10,7 +10,7 @@ export const shouldAllowInlineDropTarget = (isNested, node) => {
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
-    return node.childCount < MAX_LAYOUT_COLUMN_SUPPORTED;
+    return node.childCount < maxLayoutColumnSupported();
   }
   return !isEmptyParagraph(node);
 };

package/dist/esm/commands/move-to-layout.js

@@ -1,9 +1,9 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
 var createNewLayout = function createNewLayout(schema, layoutContents) {
-  if (layoutContents.length === 0 || layoutContents.length > MAX_LAYOUT_COLUMN_SUPPORTED) {
+  if (layoutContents.length === 0 || layoutContents.length > maxLayoutColumnSupported()) {
     return null;
   }
   var width = DEFAULT_COLUMN_DISTRIBUTIONS[layoutContents.length];
@@ -48,7 +48,7 @@ var moveNode = function moveNode(from, to, newNode, sourceNodeSize, tr) {
   return tr;
 };
 var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr) {
-  if (toLayout.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
+  if (toLayout.childCount < maxLayoutColumnSupported()) {
     var newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[toLayout.childCount + 1];
     updateColumnWidths(tr, toLayout, toLayoutPos, newColumnWidth);
     var _ref2 = tr.doc.type.schema.nodes || {},

package/dist/esm/consts.js

@@ -1,3 +1,4 @@
+import { isPreRelease2 } from './utils/advanced-layouts-flags';
 export var DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["UP"] = "up";
   DIRECTION["DOWN"] = "down";
@@ -5,4 +6,6 @@ export var DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["RIGHT"] = "right";
   return DIRECTION;
 }({});
-export var MAX_LAYOUT_COLUMN_SUPPORTED = 3;
+export var maxLayoutColumnSupported = function maxLayoutColumnSupported() {
+  return isPreRelease2() ? 5 : 3;
+};

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/decorations-drop-target.js

@@ -7,7 +7,7 @@ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget } from '../ui/drop-target';
 import { DropTargetLayout } from '../ui/drop-target-layout';
@@ -154,7 +154,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
       if (isAdvancedLayoutsPreRelease2) {
         if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node &&
         // Not the first node
-        (parent === null || parent === void 0 ? void 0 : parent.childCount) < MAX_LAYOUT_COLUMN_SUPPORTED) {
+        (parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported()) {
           decs.push(createLayoutDropTargetDecoration(pos, {
             api: api,
             parent: parent,

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/pm-plugins/main.js

@@ -51,9 +51,6 @@ var destroyFn = function destroyFn(api) {
       if (isHTMLElement(scrollable)) {
         scrollable.style.setProperty('scroll-behavior', null);
       }
-      if (isPreRelease2()) {
-        defaultActiveAnchorTracker.reset();
-      }
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
         var tr = _ref3.tr;
         var _ref4 = source.data,
@@ -512,6 +509,9 @@ export var createPlugin = function createPlugin(api, getIntl) {
         },
         dragstart: function dragstart(view) {
           var _anchorRectCache;
+          if (isPreRelease2()) {
+            defaultActiveAnchorTracker.reset();
+          }
           (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 || _anchorRectCache.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
             isPMDragging: 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/active-anchor-tracker.js

@@ -14,17 +14,21 @@ export var ActiveAnchorTracker = /*#__PURE__*/function () {
   _createClass(ActiveAnchorTracker, [{
     key: "subscribe",
     value: function subscribe(anchorName, callback) {
-      this.emitter.on(anchorName, callback);
+      if (this.emitter) {
+        this.emitter.on(anchorName, callback);
+      }
     }
   }, {
     key: "unsubscribe",
     value: function unsubscribe(anchorName, callback) {
-      this.emitter.removeListener(anchorName, callback);
+      if (this.emitter) {
+        this.emitter.removeListener(anchorName, callback);
+      }
     }
   }, {
     key: "emit",
     value: function emit(anchorName) {
-      if (this.lastActiveAnchor !== anchorName) {
+      if (this.lastActiveAnchor !== anchorName && this.emitter) {
         this.emitter.emit(this.lastActiveAnchor, false);
         this.emitter.emit(anchorName, true);
         this.lastActiveAnchor = anchorName;
@@ -33,11 +37,20 @@ export var ActiveAnchorTracker = /*#__PURE__*/function () {
   }, {
     key: "reset",
     value: function reset() {
-      this.emitter.removeAllListeners();
+      if (this.emitter) {
+        // To prevent any potential memory leaks,
+        // we set the event emitter to null and then create a new event emitter.
+        this.emitter.removeAllListeners();
+        this.emitter = null;
+        this.emitter = new EventEmitter();
+      }
     }
   }]);
   return ActiveAnchorTracker;
 }();
+
+// TODO We should use a scoped ActiveAnchorTracker rather than the global static object.
+// Move this into the plugin scope once the newApply functions becomes default apply.
 export var defaultActiveAnchorTracker = new ActiveAnchorTracker();
 export var useActiveAnchorTracker = function useActiveAnchorTracker(anchorName) {
   var activeAnchorTracker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultActiveAnchorTracker;

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/dist/esm/utils/inline-drop-target.js

@@ -1,5 +1,5 @@
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
-import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { maxLayoutColumnSupported } from '../consts';
 import { isPreRelease1 } from './advanced-layouts-flags';
 import { isWrappedMedia } from './check-media-layout';
 export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
@@ -10,7 +10,7 @@ export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(is
     return false;
   }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
-    return node.childCount < MAX_LAYOUT_COLUMN_SUPPORTED;
+    return node.childCount < maxLayoutColumnSupported();
   }
   return !isEmptyParagraph(node);
 };

package/dist/types/consts.d.ts

@@ -4,4 +4,4 @@ export declare enum DIRECTION {
     LEFT = "left",
     RIGHT = "right"
 }
-export declare const MAX_LAYOUT_COLUMN_SUPPORTED = 3;
+export declare const maxLayoutColumnSupported: () => 5 | 3;

package/dist/types/utils/active-anchor-tracker.d.ts

@@ -3,7 +3,7 @@
 /// <reference types="node/events" />
 import { EventEmitter } from 'events';
 export declare class ActiveAnchorTracker {
-    emitter: EventEmitter;
+    emitter: EventEmitter | null;
     lastActiveAnchor: string;
     constructor();
     subscribe(anchorName: string, callback: (isActive: boolean) => void): void;

package/dist/types-ts4.5/consts.d.ts

@@ -4,4 +4,4 @@ export declare enum DIRECTION {
     LEFT = "left",
     RIGHT = "right"
 }
-export declare const MAX_LAYOUT_COLUMN_SUPPORTED = 3;
+export declare const maxLayoutColumnSupported: () => 5 | 3;

package/dist/types-ts4.5/utils/active-anchor-tracker.d.ts

@@ -3,7 +3,7 @@
 /// <reference types="node/events" />
 import { EventEmitter } from 'events';
 export declare class ActiveAnchorTracker {
-    emitter: EventEmitter;
+    emitter: EventEmitter | null;
     lastActiveAnchor: string;
     constructor();
     subscribe(anchorName: string, callback: (isActive: boolean) => void): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.13.4",
+	"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.11.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",
@@ -99,7 +99,7 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform.editor.media.extended-resize-experience": {
+		"platform_editor_media_extended_resize_experience": {
 			"type": "boolean",
 			"referenceOnly": true
 		},