@atlaskit/editor-plugin-block-controls 2.13.8 → 2.13.10

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.10
+
+### Patch Changes
+
+- [#162501](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162501)
+  [`3bdd9f8231197`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3bdd9f8231197) -
+  ED-25579 fix vertical drop target bugs
+- Updated dependencies
+
+## 2.13.9
+
+### Patch Changes
+
+- [#161549](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161549)
+  [`35e70290e4ccb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35e70290e4ccb) -
+  [ED-25317] Fix the issue where drag handle for layout column does not show up when the content is
+  not empty (with non text content)
+- Updated dependencies
+
 ## 2.13.8
 
 ### Patch Changes

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

@@ -11,8 +11,10 @@ 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 = (0, _advancedLayoutsFlags.isPreRelease2)() ? ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'] : ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
+var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
+var IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
 var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
+var IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT = ['listItem', 'taskList', 'decisionList'];
 var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   // Optimisation to avoid drawing node decorations for empty table cells
   if (['tableCell', 'tableHeader'].includes(node.type.name) && !(0, _experiments.editorExperiment)('table-nested-dnd', true) && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3')) {
@@ -21,14 +23,21 @@ var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDesce
       return false;
     }
   }
+  if ((0, _advancedLayoutsFlags.isPreRelease1)()) {
+    return !IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT.includes(node.type.name);
+  }
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
-var shouldIgnoreNode = function shouldIgnoreNode(node) {
+var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, parent) {
   var isEmbedCard = 'embedCard' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3');
 
   // TODO use isWrappedMedia when clean up the feature flag
   var isMediaSingle = 'mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1');
-  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
+  var isFirstTableHeaderOrTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && ['tableHeader', 'tableRow'].includes(node.type.name) && (0, _advancedLayoutsFlags.isPreRelease1)();
+  if (isFirstTableHeaderOrTableRow) {
+    return false;
+  }
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
 };
 
 /**
@@ -64,7 +73,8 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
   var decs = [];
   var docFrom = from === undefined || from < 0 ? 0 : from;
   var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
-  newState.doc.nodesBetween(docFrom, docTo, function (node, pos, _parent, index) {
+  var ignore_nodes = (0, _advancedLayoutsFlags.isPreRelease2)() ? IGNORE_NODES_NEXT : IGNORE_NODES;
+  newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var _Decoration$node;
     var depth = 0;
     var anchorName;
@@ -76,10 +86,10 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
       if (node.isInline) {
         return false;
       }
-      if (shouldIgnoreNode(node)) {
+      depth = newState.doc.resolve(pos).depth;
+      if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
-      depth = newState.doc.resolve(pos).depth;
       anchorName = (_anchorName = anchorName) !== null && _anchorName !== void 0 ? _anchorName : "--node-anchor-".concat(node.type.name, "-").concat(pos);
     } else {
       var _anchorName2;

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

@@ -4,7 +4,6 @@ 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");
@@ -15,11 +14,19 @@ 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 isLayoutColumnWithoutContent = function isLayoutColumnWithoutContent(node) {
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn') {
+    var foundNonEmptyNode = false;
+    for (var i = 0; i < node.childCount; i++) {
+      var _child$firstChild;
+      var child = node.child(i);
+      if (child.content.size && ((_child$firstChild = child.firstChild) === null || _child$firstChild === void 0 ? void 0 : _child$firstChild.type.name) !== 'placeholder') {
+        foundNonEmptyNode = true;
+        break;
+      }
+    }
+    return !foundNonEmptyNode;
+  }
 };
 var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls, _target$classList;
@@ -43,13 +50,15 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     if ((0, _experiments.editorExperiment)('nested-dnd', true) && isEmptyNestedParagraphOrHeading(rootElement)) {
       return false;
     }
+    if (rootElement.getAttribute('data-drag-handler-node-type') === 'media' && (0, _advancedLayoutsFlags.isPreRelease1)()) {
+      rootElement = rootElement.closest('[data-drag-handler-anchor-name][data-drag-handler-node-type="mediaSingle"]');
+      if (!rootElement) {
+        return false;
+      }
+    }
     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
@@ -84,6 +93,11 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
+    var node = view.state.doc.nodeAt(pos);
+    if ((0, _advancedLayoutsFlags.isPreRelease2)() && node && isLayoutColumnWithoutContent(node)) {
+      // Don't show drag handle when there is no content/only placeholder in layout column
+      return false;
+    }
     var rootPos;
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GlobalStylesWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
@@ -150,6 +151,17 @@ var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":firs
 var withInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, withInlineNodeStyleWithChromeFixSelectors, {
   transform: 'scale(0)'
 }));
+var legacyBreakoutWideLayoutStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+  '.ProseMirror-widget[data-blocks-drop-target-container="true"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    '--ak-editor--legacy-breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, "px"),
+    '@media (width>=1280px)': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      '--ak-editor--legacy-breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
+    }
+  }
+});
 var globalStyles = function globalStyles() {
   return (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
@@ -226,7 +238,7 @@ var withAnchorNameZindexNestedStyle = (0, _react.css)({
 });
 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, {
+    styles: [globalStyles(), (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, (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, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
   });

package/dist/cjs/ui/inline-drop-target.js

@@ -4,11 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlineHoverZone = exports.InlineDropTarget = void 0;
+exports.InlineDropTarget = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _hooks = require("@atlaskit/editor-common/hooks");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _colors = require("@atlaskit/theme/colors");
@@ -23,12 +22,8 @@ var _dragTargetDebug = require("../utils/drag-target-debug");
  * @jsx jsx
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
-var dropTargetCommonStyle = (0, _react2.css)({
-  position: 'absolute',
-  display: 'block'
-});
 var hoverZoneCommonStyle = (0, _react2.css)({
   position: 'absolute',
   // above the top and bottom drop zone as block hover zone
@@ -37,68 +32,34 @@ var hoverZoneCommonStyle = (0, _react2.css)({
 
 // gap between node boundary and drop indicator/drop zone
 var GAP = 4;
-var HOVER_ZONE_WIDTH_OFFSET = 40;
-var HOVER_ZONE_HEIGHT_OFFSET = 10;
-var HOVER_ZONE_DEFAULT_WIDTH = 40;
 var dropTargetLayoutHintStyle = (0, _react2.css)({
   height: '100%',
-  position: 'relative',
+  position: 'absolute',
   borderRight: "1px dashed ".concat("var(--ds-border-focused, ".concat(_colors.B200, ")")),
-  width: 0
+  width: 0,
+  left: 0
 });
-var getDropTargetPositionOverride = function getDropTargetPositionOverride(node, editorWidth) {
-  if (!node || !editorWidth) {
-    return {
-      left: 0,
-      right: 0
-    };
-  }
-  var getOffsets = function getOffsets(nodeWidth) {
-    var offset = (editorWidth - nodeWidth) / 2;
-    return {
-      left: offset,
-      right: offset
-    };
-  };
-  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'table' && node.attrs.width) {
-    return getOffsets(node.attrs.width);
-  }
-
-  // media single 🤦
-  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'mediaSingle') {
-    var mediaNodeWidth = 0;
-    if (node.attrs.width) {
-      if (node.attrs.widthType === 'pixel') {
-        mediaNodeWidth = node.attrs.width;
-      } else if (editorWidth) {
-        mediaNodeWidth = node.attrs.width / 100 * editorWidth;
-      }
-    } else {
-      // use media width
-      var mediaNode = node.firstChild;
-      if (mediaNode && mediaNode.attrs.width) {
-        mediaNodeWidth = mediaNode.attrs.width;
-      }
-    }
-    if (mediaNodeWidth) {
-      if (node.attrs.layout === 'align-start') {
-        return {
-          left: 0,
-          right: editorWidth - mediaNodeWidth
-        };
-      } else if (node.attrs.layout === 'align-end') {
-        return {
-          left: editorWidth - mediaNodeWidth,
-          right: 0
-        };
-      }
-      return getOffsets(mediaNodeWidth);
+var dropTargetLayoutHintLeftStyle = (0, _react2.css)({
+  left: 'unset',
+  right: 0
+});
+var defaultNodeDimension = {
+  width: '0',
+  height: '0',
+  top: 'unset'
+};
+var getWidthOffset = function getWidthOffset(node, width, position) {
+  if (node.type.name === 'mediaSingle' || node.type.name === 'table') {
+    var isLeftPosition = position === 'left';
+    if (node.attrs.layout === 'align-start') {
+      return isLeftPosition ? "-0.5*(var(--ak-editor--line-length) - ".concat(width, ")") : "0.5*(var(--ak-editor--line-length) - ".concat(width, ")");
+    } else if ((node === null || node === void 0 ? void 0 : node.attrs.layout) === 'align-end') {
+      return isLeftPosition ? "0.5*(var(--ak-editor--line-length) - ".concat(width, ")") : "-0.5*(var(--ak-editor--line-length) - ".concat(width, ")");
     }
   }
-  return {
-    left: 0,
-    right: 0
-  };
+  if (node.type.name === 'bodiedExtension' || node.type.name === 'extension') {
+    return '-12px';
+  }
 };
 var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref) {
   var api = _ref.api,
@@ -106,41 +67,65 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     position = _ref.position,
     anchorRectCache = _ref.anchorRectCache,
     getPos = _ref.getPos;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
-    widthState = _useSharedPluginState.widthState;
+  var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
-  var anchorName = nextNode ? (0, _decorationsCommon.getNodeAnchor)(nextNode) : '';
+  var anchorName = (0, _react.useMemo)(function () {
+    return nextNode ? (0, _decorationsCommon.getNodeAnchor)(nextNode) : '';
+  }, [nextNode]);
   var _useActiveAnchorTrack = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
     _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 1),
     isActiveAnchor = _useActiveAnchorTrack2[0];
-  var handleDragEnter = (0, _react.useCallback)(function () {
-    setIsDraggedOver(true);
-  }, []);
-  var handleDragLeave = (0, _react.useCallback)(function () {
-    setIsDraggedOver(false);
-  }, []);
-  var offsets = (0, _react.useMemo)(function () {
-    return getDropTargetPositionOverride(nextNode, widthState === null || widthState === void 0 ? void 0 : widthState.lineLength);
-  }, [nextNode, widthState]);
-  var dropTargetRectStyle = (0, _react.useMemo)(function () {
+  var isLeftPosition = position === 'left';
+  var nodeDimension = (0, _react.useMemo)(function () {
+    if (!nextNode) {
+      return defaultNodeDimension;
+    }
+    var innerContainerWidth = null;
+    var targetAnchorName = anchorName;
+    if (['blockCard', 'embedCard'].includes(nextNode.type.name)) {
+      if (nextNode.attrs.layout === 'wide') {
+        innerContainerWidth = "max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))";
+      } else if (nextNode.attrs.layout === 'full-width') {
+        innerContainerWidth = 'max(calc(var(--ak-editor-max-container-width) - var(--ak-editor--default-gutter-padding) * 2), var(--ak-editor--line-length))';
+      }
+    } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
+      var _anchorRectCache$getR;
+      var tableWidthAnchor = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
+      innerContainerWidth = (0, _anchorUtils.isAnchorSupported)() ? "anchor-size(".concat(tableWidthAnchor, " width)") : "".concat((anchorRectCache === null || anchorRectCache === void 0 || (_anchorRectCache$getR = anchorRectCache.getRect(tableWidthAnchor)) === null || _anchorRectCache$getR === void 0 ? void 0 : _anchorRectCache$getR.width) || 0, "px");
+      if (nextNode.attrs.width) {
+        // when the table has horizontal scroll
+        innerContainerWidth = "min(".concat(nextNode.attrs.width, "px, ").concat(innerContainerWidth, ")");
+      }
+    } else if (nextNode.type.name === 'mediaSingle' && nextNode.firstChild) {
+      targetAnchorName = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);
+    }
     if ((0, _anchorUtils.isAnchorSupported)()) {
-      return (0, _react2.css)({
-        height: "calc(anchor-size(".concat(anchorName, " height))"),
-        positionAnchor: anchorName,
-        left: position === 'left' ? "calc(anchor(left) - ".concat(GAP - offsets.left, "px)") : "calc(anchor(right) + ".concat(GAP - offsets.right, "px)"),
-        top: "calc(anchor(top))"
-      });
+      var width = innerContainerWidth || "anchor-size(".concat(targetAnchorName, " width)");
+      var height = "anchor-size(".concat(targetAnchorName, " height)");
+      return {
+        width: width,
+        height: height,
+        top: 'anchor(top)',
+        widthOffset: getWidthOffset(nextNode, width, position)
+      };
     }
-    var nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
-    return (0, _react2.css)({
-      height: "calc(".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0, "px)"),
-      left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP + offsets.left, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offsets.right, "px"),
-      top: "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0, "px")
-    });
-  }, [anchorName, anchorRectCache, offsets.left, offsets.right, position]);
+    if (anchorRectCache) {
+      var nodeRect = anchorRectCache.getRect(targetAnchorName);
+      var _width = innerContainerWidth || "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0, "px");
+      var top = nodeRect !== null && nodeRect !== void 0 && nodeRect.top ? "".concat(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top, "px") : 'unset';
+      var _height = "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0, "px");
+      return {
+        width: _width,
+        height: _height,
+        top: top,
+        widthOffset: getWidthOffset(nextNode, _width, position)
+      };
+    }
+    return defaultNodeDimension;
+  }, [anchorName, anchorRectCache, nextNode, position]);
   var onDrop = (0, _react.useCallback)(function () {
     var _api$blockControls;
     var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -157,72 +142,42 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
       }));
     }
   }, [api, getPos, position]);
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
-    "data-test-id": "block-ctrl-drop-target-".concat(position),
-    css: [dropTargetCommonStyle, dropTargetRectStyle]
-  }, isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)() ? (0, _react2.jsx)(_box.DropIndicator, {
-    edge: position
-  }) : isActiveAnchor && (0, _react2.jsx)("div", {
-    "data-testid": "block-ctrl-drop-hint",
-    css: dropTargetLayoutHintStyle
-  })), (0, _react2.jsx)(InlineHoverZone, {
-    position: position,
-    node: nextNode,
-    editorWidthState: widthState,
-    anchorRectCache: anchorRectCache,
-    onDragEnter: handleDragEnter,
-    onDragLeave: handleDragLeave,
-    onDrop: onDrop,
-    offsets: offsets
-  }));
-};
-var InlineHoverZone = exports.InlineHoverZone = function InlineHoverZone(_ref3) {
-  var node = _ref3.node,
-    editorWidthState = _ref3.editorWidthState,
-    anchorRectCache = _ref3.anchorRectCache,
-    position = _ref3.position,
-    offsets = _ref3.offsets,
-    onDragEnter = _ref3.onDragEnter,
-    onDragLeave = _ref3.onDragLeave,
-    onDrop = _ref3.onDrop;
-  var ref = (0, _react.useRef)(null);
-  var _ref4 = editorWidthState || {},
-    editorWith = _ref4.width;
-  var anchorName = node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
+  var inlineHoverZoneRectStyle = (0, _react.useMemo)(function () {
+    return (0, _react2.css)({
+      positionAnchor: anchorName,
+      minWidth: "var(--ds-space-100, 8px)",
+      left: isLeftPosition ? 0 : 'unset',
+      right: isLeftPosition ? 'unset' : 0,
+      top: "calc(anchor(top))",
+      width: nodeDimension.widthOffset ? "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px + ").concat(nodeDimension.widthOffset, ")") : "calc((100% - ".concat(nodeDimension.width, ")/2 - ").concat(GAP, "px)"),
+      height: "calc(".concat(nodeDimension.height, ")")
+    });
+  }, [anchorName, isLeftPosition, nodeDimension]);
+  var dropIndicatorPos = (0, _react.useMemo)(function () {
+    return isLeftPosition ? 'right' : 'left';
+  }, [isLeftPosition]);
   (0, _react.useEffect)(function () {
     if (ref.current) {
       return (0, _adapter.dropTargetForElements)({
         element: ref.current,
-        onDragEnter: onDragEnter,
-        onDragLeave: onDragLeave,
+        onDragEnter: function onDragEnter() {
+          setIsDraggedOver(true);
+        },
+        onDragLeave: function onDragLeave() {
+          setIsDraggedOver(false);
+        },
         onDrop: onDrop
       });
     }
-  }, [onDragEnter, onDragLeave, onDrop]);
-  var inlineHoverZoneRectStyle = (0, _react.useMemo)(function () {
-    var offset = offsets[position];
-    if ((0, _anchorUtils.isAnchorSupported)()) {
-      return (0, _react2.css)({
-        positionAnchor: anchorName,
-        left: position === 'left' ? 'unset' : "calc(anchor(right) + ".concat(GAP - offset, "px)"),
-        right: position === 'left' ? "calc(anchor(left) + ".concat(GAP - offset, "px)") : 'unset',
-        top: "calc(anchor(top))",
-        width: editorWith ? "calc((".concat(editorWith, "px - anchor-size(").concat(anchorName, " width))/2 - ").concat(HOVER_ZONE_WIDTH_OFFSET, "px + ").concat(offset, "px)") : "".concat(HOVER_ZONE_DEFAULT_WIDTH, "px"),
-        height: "calc(anchor-size(".concat(anchorName, " height))")
-      });
-    }
-    var nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
-    var width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET + offset : HOVER_ZONE_DEFAULT_WIDTH;
-    return (0, _react2.css)({
-      left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP + offset, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offset, "px"),
-      top: "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0, "px"),
-      width: "".concat(width, "px"),
-      height: "calc(".concat((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0, "px - ").concat(HOVER_ZONE_HEIGHT_OFFSET, "px)")
-    });
-  }, [anchorName, anchorRectCache, editorWith, offsets, position]);
+  }, [onDrop, setIsDraggedOver]);
   return (0, _react2.jsx)("div", {
     ref: ref,
     "data-test-id": "drop-target-hover-zone-".concat(position),
     css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
-  });
+  }, isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)() ? (0, _react2.jsx)(_box.DropIndicator, {
+    edge: dropIndicatorPos
+  }) : isActiveAnchor && (0, _react2.jsx)("div", {
+    "data-testid": "block-ctrl-drop-hint",
+    css: [dropTargetLayoutHintStyle, isLeftPosition && dropTargetLayoutHintLeftStyle]
+  }));
 };

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

@@ -1,10 +1,12 @@
 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 { isPreRelease1, isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
-const IGNORE_NODES = isPreRelease2() ? ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'] : ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
+const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
+const IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
 const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
+const IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT = ['listItem', 'taskList', 'decisionList'];
 export const shouldDescendIntoNode = node => {
   // Optimisation to avoid drawing node decorations for empty table cells
   if (['tableCell', 'tableHeader'].includes(node.type.name) && !editorExperiment('table-nested-dnd', true) && fg('platform_editor_element_dnd_nested_fix_patch_3')) {
@@ -13,14 +15,21 @@ export const shouldDescendIntoNode = node => {
       return false;
     }
   }
+  if (isPreRelease1()) {
+    return !IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT.includes(node.type.name);
+  }
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
-const shouldIgnoreNode = node => {
+const shouldIgnoreNode = (node, ignore_nodes, depth, parent) => {
   const isEmbedCard = 'embedCard' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_3');
 
   // TODO use isWrappedMedia when clean up the feature flag
   const isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
-  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
+  const isFirstTableHeaderOrTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && ['tableHeader', 'tableRow'].includes(node.type.name) && isPreRelease1();
+  if (isFirstTableHeaderOrTableRow) {
+    return false;
+  }
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
 };
 
 /**
@@ -54,7 +63,8 @@ export const nodeDecorations = (newState, from, to) => {
   const decs = [];
   const docFrom = from === undefined || from < 0 ? 0 : from;
   const docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
-  newState.doc.nodesBetween(docFrom, docTo, (node, pos, _parent, index) => {
+  const ignore_nodes = isPreRelease2() ? IGNORE_NODES_NEXT : IGNORE_NODES;
+  newState.doc.nodesBetween(docFrom, docTo, (node, pos, parent, index) => {
     let depth = 0;
     let anchorName;
     const shouldDescend = shouldDescendIntoNode(node);
@@ -65,10 +75,10 @@ export const nodeDecorations = (newState, from, to) => {
       if (node.isInline) {
         return false;
       }
-      if (shouldIgnoreNode(node)) {
+      depth = newState.doc.resolve(pos).depth;
+      if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
-      depth = newState.doc.resolve(pos).depth;
       anchorName = (_anchorName = anchorName) !== null && _anchorName !== void 0 ? _anchorName : `--node-anchor-${node.type.name}-${pos}`;
     } else {
       var _anchorName2;

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

@@ -1,7 +1,6 @@
-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';
+import { isPreRelease1, isPreRelease2 } from '../utils/advanced-layouts-flags';
 const isEmptyNestedParagraphOrHeading = target => {
   if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
     var _target$parentElement;
@@ -9,11 +8,19 @@ 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'), '')) === '';
+const isLayoutColumnWithoutContent = node => {
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn') {
+    let foundNonEmptyNode = false;
+    for (let i = 0; i < node.childCount; i++) {
+      var _child$firstChild;
+      const child = node.child(i);
+      if (child.content.size && ((_child$firstChild = child.firstChild) === null || _child$firstChild === void 0 ? void 0 : _child$firstChild.type.name) !== 'placeholder') {
+        foundNonEmptyNode = true;
+        break;
+      }
+    }
+    return !foundNonEmptyNode;
+  }
 };
 export const handleMouseOver = (view, event, api) => {
   var _api$blockControls, _target$classList;
@@ -38,13 +45,15 @@ export const handleMouseOver = (view, event, api) => {
     if (editorExperiment('nested-dnd', true) && isEmptyNestedParagraphOrHeading(rootElement)) {
       return false;
     }
+    if (rootElement.getAttribute('data-drag-handler-node-type') === 'media' && isPreRelease1()) {
+      rootElement = rootElement.closest('[data-drag-handler-anchor-name][data-drag-handler-node-type="mediaSingle"]');
+      if (!rootElement) {
+        return false;
+      }
+    }
     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
@@ -79,6 +88,11 @@ export const handleMouseOver = (view, event, api) => {
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
+    const node = view.state.doc.nodeAt(pos);
+    if (isPreRelease2() && node && isLayoutColumnWithoutContent(node)) {
+      // Don't show drag handle when there is no content/only placeholder in layout column
+      return false;
+    }
     let rootPos;
     if (editorExperiment('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;