@atlaskit/editor-plugin-block-controls 2.9.0 → 2.10.1

package/dist/cjs/pm-plugins/main.js

@@ -22,7 +22,9 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _anchorUtils = require("../utils/anchor-utils");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 var _transactions = require("../utils/transactions");
-var _decorations = require("./decorations");
+var _decorationsAnchor = require("./decorations-anchor");
+var _decorationsDragHandle = require("./decorations-drag-handle");
+var _decorationsDropTarget = require("./decorations-drop-target");
 var _handleMouseOver = require("./handle-mouse-over");
 var _keymap = require("./keymap");
 var key = exports.key = new _state.PluginKey('blockControls');
@@ -138,13 +140,13 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   var shouldRedrawNodeDecs = !isResizerResizing && isNodeDecsMissing;
   var isActiveNodeModified = false;
   if (api && shouldRedrawNodeDecs) {
-    var oldNodeDecs = (0, _decorations.findNodeDecs)(decorations, from, to);
+    var oldNodeDecs = (0, _decorationsAnchor.findNodeDecs)(decorations, from, to);
     decorations = decorations.remove(oldNodeDecs);
-    var newNodeDecs = (0, _decorations.nodeDecorations)(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
+    var newNodeDecs = (0, _decorationsAnchor.nodeDecorations)(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
     decorations = decorations.add(newState.doc, newNodeDecs);
     if (latestActiveNode && !isActiveNodeDeleted) {
       // Find the newly minted node decs that touch the active node
-      var findNewNodeDecs = (0, _decorations.findNodeDecs)(decorations, latestActiveNode.pos - 1, to);
+      var findNewNodeDecs = (0, _decorationsAnchor.findNodeDecs)(decorations, latestActiveNode.pos - 1, to);
 
       // Find the specific dec that the active node corresponds to
       var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
@@ -179,13 +181,13 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   var shouldRemoveHandle = latestActiveNode && (isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
   if (shouldRemoveHandle) {
     var _activeNode3, _activeNode4;
-    var oldHandle = (0, _decorations.findHandleDec)(decorations, (_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.pos, (_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.pos);
+    var oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.pos, (_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.pos);
     decorations = decorations.remove(oldHandle);
   } else if (api && shouldRecreateHandle) {
     var _activeNode5, _activeNode6;
-    var _oldHandle = (0, _decorations.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
+    var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
     decorations = decorations.remove(_oldHandle);
-    var handleDec = (0, _decorations.dragHandleDecoration)(api, formatMessage, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.anchorName, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.nodeType, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.handleOptions);
+    var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.anchorName, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.nodeType, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.handleOptions);
     decorations = decorations.add(newState.doc, [handleDec]);
   }
 
@@ -194,25 +196,25 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
 
   // Remove drop target decorations when dragging stops or they need to be redrawn
   if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
-    var dropTargetDecs = (0, _decorations.findDropTargetDecs)(decorations);
+    var dropTargetDecs = (0, _decorationsDropTarget.findDropTargetDecs)(decorations);
     decorations = decorations.remove(dropTargetDecs);
   }
 
   // Add drop targets when dragging starts or some are missing
   if (api) {
     if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
-      var decs = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, latestActiveNode, anchorRectCache);
+      var decs = (0, _decorationsDropTarget.dropTargetDecorations)(newState, api, formatMessage, latestActiveNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
     }
   }
   var isEmptyDoc = (0, _utils.isEmptyDocument)(newState.doc);
   if (isEmptyDoc) {
-    var hasNodeDecoration = !!(0, _decorations.findNodeDecs)(decorations).length;
+    var hasNodeDecoration = !!(0, _decorationsAnchor.findNodeDecs)(decorations).length;
     if (!hasNodeDecoration) {
-      decorations = decorations.add(newState.doc, [(0, _decorations.emptyParagraphNodeDecorations)()]);
+      decorations = decorations.add(newState.doc, [(0, _decorationsDragHandle.emptyParagraphNodeDecorations)()]);
     }
   }
-  var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorations.findHandleDec)(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
+  var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
   return {
     decorations: decorations,
     activeNode: newActiveNode,
@@ -307,7 +309,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
       return spec.type !== 'drop-target-decoration';
     });
     decorations = decorations.remove(oldNodeDecs);
-    var newNodeDecs = (0, _decorations.nodeDecorations)(newState);
+    var newNodeDecs = (0, _decorationsAnchor.nodeDecorations)(newState);
     decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(newNodeDecs));
     if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
       var mappedPosisiton = tr.mapping.map(activeNode.pos);
@@ -331,7 +333,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
         var decAtPos = newNodeDecs.find(function (dec) {
           return dec.from === mappedPosisiton;
         });
-        draghandleDec = (0, _decorations.dragHandleDecoration)(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref6 = (_meta$activeNode$anch = meta === null || meta === void 0 || (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref6 !== void 0 ? _ref6 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref7 = (_meta$activeNode$node = meta === null || meta === void 0 || (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref7 !== void 0 ? _ref7 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, meta === null || meta === void 0 || (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
+        draghandleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref6 = (_meta$activeNode$anch = meta === null || meta === void 0 || (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref6 !== void 0 ? _ref6 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref7 = (_meta$activeNode$node = meta === null || meta === void 0 || (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref7 !== void 0 ? _ref7 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, meta === null || meta === void 0 || (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
       } else {
         var nodeType = activeNode.nodeType;
         var anchorName = activeNode.anchorName;
@@ -344,7 +346,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
             anchorName: anchorName
           };
         }
-        draghandleDec = (0, _decorations.dragHandleDecoration)(api, formatMessage, activeNode.pos, anchorName, nodeType);
+        draghandleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, activeNode.pos, anchorName, nodeType);
       }
       decorations = decorations.add(newState.doc, [draghandleDec]);
     }
@@ -356,7 +358,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
       return spec.type === 'drag-handle';
     });
     decorations = decorations.remove(_oldHandle3);
-    var decs = (0, _decorations.dragHandleDecoration)(api, formatMessage, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
+    var decs = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
     decorations = decorations.add(newState.doc, [decs]);
   }
 
@@ -366,7 +368,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
       return spec.type === 'drag-handle';
     });
     decorations = decorations.remove(_oldHandle4);
-    var _decs = (0, _decorations.dragHandleDecoration)(api, formatMessage, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
+    var _decs = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
     decorations = decorations.add(newState.doc, [_decs]);
   }
   if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
@@ -389,7 +391,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
     // if the transaction is only for analytics and user is dragging, continue to draw drop targets
     if (shouldCreateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
       var _meta$activeNode7;
-      var _decs2 = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorRectCache);
+      var _decs2 = (0, _decorationsDropTarget.dropTargetDecorations)(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorRectCache);
       decorations = decorations.add(newState.doc, _decs2);
     }
   }
@@ -399,7 +401,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
       return spec.type === 'node-decoration';
     }).length;
     if (!hasNodeDecoration) {
-      decorations = decorations.add(newState.doc, [(0, _decorations.emptyParagraphNodeDecorations)()]);
+      decorations = decorations.add(newState.doc, [(0, _decorationsDragHandle.emptyParagraphNodeDecorations)()]);
     }
   }
   var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && decorations.find(undefined, undefined, function (spec) {

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

@@ -15,7 +15,7 @@ var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box")
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _constants = require("@atlaskit/theme/constants");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _decorations = require("../pm-plugins/decorations");
+var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _anchorUtils = require("../utils/anchor-utils");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 var _inlineDropTarget = require("../utils/inline-drop-target");
@@ -94,7 +94,7 @@ var HoverZone = function HoverZone(_ref) {
   }, [onDragEnter, onDragLeave, onDrop]);
   var isRemainingheight = dropTargetStyle === 'remainingHeight';
   var hoverZoneUpperStyle = (0, _react.useMemo)(function () {
-    var anchorName = node ? (0, _decorations.getNodeAnchor)(node) : '';
+    var anchorName = node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
     var heightStyleOffset = "var(--editor-block-controls-drop-indicator-gap, 0)/2";
     var transformOffset = "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0)");
     var heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? (0, _anchorUtils.isAnchorSupported)() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
@@ -119,7 +119,7 @@ var HoverZone = function HoverZone(_ref) {
     // only apply upper drop zone
     if (isRemainingheight && position === 'upper') {
       // previous node
-      var anchorName = node ? (0, _decorations.getNodeAnchor)(node) : '';
+      var anchorName = node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
       var top = 'unset';
       if (anchorName) {
         var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');

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

@@ -11,8 +11,9 @@ 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 _decorations = require("../pm-plugins/decorations");
+var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _anchorUtils = require("../utils/anchor-utils");
+var _dragTargetDebug = require("../utils/drag-target-debug");
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
 /**
@@ -26,13 +27,10 @@ var dropTargetCommonStyle = (0, _react2.css)({
   position: 'absolute',
   display: 'block'
 });
-var hideDropTargetStyle = (0, _react2.css)({
-  display: 'none'
-});
 var hoverZoneCommonStyle = (0, _react2.css)({
   position: 'absolute',
-  // same value as block hover zone
-  zIndex: 110
+  // above the top and bottom drop zone as block hover zone
+  zIndex: 120
 });
 
 // gap between node boundary and drop indicator/drop zone
@@ -40,6 +38,60 @@ var GAP = 4;
 var HOVER_ZONE_WIDTH_OFFSET = 40;
 var HOVER_ZONE_HEIGHT_OFFSET = 10;
 var HOVER_ZONE_DEFAULT_WIDTH = 40;
+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);
+    }
+  }
+  return {
+    left: 0,
+    right: 0
+  };
+};
 var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref) {
   var api = _ref.api,
     nextNode = _ref.nextNode,
@@ -52,29 +104,32 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
-  var anchorName = nextNode ? (0, _decorations.getNodeAnchor)(nextNode) : '';
+  var anchorName = nextNode ? (0, _decorationsCommon.getNodeAnchor)(nextNode) : '';
   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 () {
     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, "px)") : "calc(anchor(right) + ".concat(GAP, "px)"),
+        left: position === 'left' ? "calc(anchor(left) - ".concat(GAP - offsets.left, "px)") : "calc(anchor(right) + ".concat(GAP - offsets.right, "px)"),
         top: "calc(anchor(top))"
       });
     }
     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, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "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, position]);
+  }, [anchorName, anchorRectCache, offsets.left, offsets.right, 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()) || {},
@@ -91,8 +146,8 @@ 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 && hideDropTargetStyle]
-  }, (0, _react2.jsx)(_box.DropIndicator, {
+    css: [dropTargetCommonStyle, dropTargetRectStyle]
+  }, (isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) && (0, _react2.jsx)(_box.DropIndicator, {
     edge: position
   })), (0, _react2.jsx)(InlineHoverZone, {
     position: position,
@@ -101,7 +156,8 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     anchorRectCache: anchorRectCache,
     onDragEnter: handleDragEnter,
     onDragLeave: handleDragLeave,
-    onDrop: onDrop
+    onDrop: onDrop,
+    offsets: offsets
   }));
 };
 var InlineHoverZone = exports.InlineHoverZone = function InlineHoverZone(_ref3) {
@@ -109,13 +165,14 @@ var InlineHoverZone = exports.InlineHoverZone = function InlineHoverZone(_ref3)
     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, _decorations.getNodeAnchor)(node) : '';
+  var anchorName = node ? (0, _decorationsCommon.getNodeAnchor)(node) : '';
   (0, _react.useEffect)(function () {
     if (ref.current) {
       return (0, _adapter.dropTargetForElements)({
@@ -127,27 +184,29 @@ var InlineHoverZone = exports.InlineHoverZone = function InlineHoverZone(_ref3)
     }
   }, [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, "px)"),
-        right: position === 'left' ? "calc(anchor(left) + ".concat(GAP, "px)") : 'unset',
+        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(HOVER_ZONE_DEFAULT_WIDTH, "px"),
+        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 : HOVER_ZONE_DEFAULT_WIDTH;
+    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, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "px"),
+      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, position]);
+  }, [anchorName, anchorRectCache, editorWith, offsets, position]);
   return (0, _react2.jsx)("div", {
     ref: ref,
+    "data-test-id": "drop-target-hover-zone-".concat(position),
     css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
   });
 };

package/dist/cjs/utils/check-media-layout.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isWrappedMedia = void 0;
+var isWrappedMedia = exports.isWrappedMedia = function isWrappedMedia(node) {
+  if ('mediaSingle' === (node === null || node === void 0 ? void 0 : node.type.name)) {
+    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
+      return true;
+    }
+  }
+  return false;
+};

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

@@ -7,10 +7,14 @@ exports.shouldAllowInlineDropTarget = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _consts = require("../consts");
 var _advancedLayoutsFlags = require("./advanced-layouts-flags");
+var _checkMediaLayout = require("./check-media-layout");
 var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
   if (!(0, _advancedLayoutsFlags.isPreRelease1)() || isNested) {
     return false;
   }
+  if ((0, _checkMediaLayout.isWrappedMedia)(node)) {
+    return false;
+  }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
     return node.childCount < _consts.MAX_LAYOUT_COLUMN_SUPPORTED;
   }

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

@@ -1,4 +1,5 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
 const createNewLayout = (schema, layoutContents) => {
@@ -68,13 +69,25 @@ export const moveToLayout = api => (from, to, position) => ({
   if ($to.nodeAfter.type === layoutSection) {
     const existingLayoutNode = $to.nodeAfter;
     if (existingLayoutNode.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
+      const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[existingLayoutNode.childCount + 1];
+      if (newColumnWidth) {
+        existingLayoutNode.content.forEach((node, offset) => {
+          if (node.type === layoutColumn) {
+            tr = tr.setNodeAttribute(to + offset + 1, 'width', newColumnWidth);
+          }
+        });
+      }
       const toPos = position === 'left' ? to + 1 : to + existingLayoutNode.nodeSize - 1;
       tr = tr.insert(toPos,
       // resolve again the source node after node updated (remove breakout marks)
-      layoutColumn.create(null, tr.doc.resolve(from).nodeAfter));
+      layoutColumn.create({
+        width: newColumnWidth
+      }, tr.doc.resolve(from).nodeAfter));
+      tr = tr.setSelection(new NodeSelection(tr.doc.resolve(toPos)));
       const mappedFrom = tr.mapping.map(from);
       const mappedFromEnd = mappedFrom + fromNode.nodeSize;
       tr = tr.delete(mappedFrom, mappedFromEnd);
+      tr = tr.scrollIntoView();
       return tr;
     }
     return tr;
@@ -91,6 +104,8 @@ export const moveToLayout = api => (from, to, position) => ({
       const mappedTo = tr.mapping.map(to);
       tr = tr.delete(mappedTo, mappedTo + toNode.nodeSize);
       tr = tr.insert(mappedTo, newLayout); // insert the content at the new position
+      tr = tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo)));
+      tr = tr.scrollIntoView();
     }
     return tr;
   }

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

@@ -0,0 +1,91 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
+const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
+const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
+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')) {
+    var _node$firstChild;
+    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph') {
+      return false;
+    }
+  }
+  return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
+};
+const shouldIgnoreNode = node => {
+  // TODO use isWrappedMedia when clean up the featue flag
+  if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
+    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
+      return true;
+    }
+  }
+  return IGNORE_NODES.includes(node.type.name);
+};
+
+/**
+ * Find node decorations in the pos range between from and to (non-inclusive)
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+export const findNodeDecs = (decorations, from, to) => {
+  let newfrom = from;
+  let newTo = to;
+
+  // make it non-inclusive
+  if (newfrom !== undefined) {
+    newfrom++;
+  }
+
+  // make it non-inclusive
+  if (newTo !== undefined) {
+    newTo--;
+  }
+
+  // return empty array if range reversed
+  if (newfrom !== undefined && newTo !== undefined && newfrom > newTo) {
+    return new Array();
+  }
+  return decorations.find(newfrom, newTo, spec => spec.type === TYPE_NODE_DEC);
+};
+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) => {
+    let depth = 0;
+    let anchorName;
+    const shouldDescend = shouldDescendIntoNode(node);
+    anchorName = getNodeAnchor(node);
+    if (editorExperiment('nested-dnd', true)) {
+      var _anchorName;
+      // Doesn't descend into a node
+      if (node.isInline) {
+        return false;
+      }
+      if (shouldIgnoreNode(node)) {
+        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;
+      anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : `--node-anchor-${node.type.name}-${index}`;
+    }
+    decs.push(Decoration.node(pos, pos + node.nodeSize, {
+      style: `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}; position: relative; z-index: 1;`,
+      ['data-drag-handler-anchor-name']: anchorName,
+      ['data-drag-handler-node-type']: node.type.name,
+      ['data-drag-handler-anchor-depth']: `${depth}`
+    }, {
+      type: TYPE_NODE_DEC,
+      anchorName,
+      nodeType: node.type.name
+    }));
+    return shouldDescend && depth < getNestedDepth();
+  });
+  return decs;
+};

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

@@ -0,0 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import ReactDOM from 'react-dom';
+import uuid from 'uuid';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export const TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
+export const TYPE_HANDLE_DEC = 'drag-handle';
+export const TYPE_NODE_DEC = 'node-decoration';
+export const getNestedDepth = () => editorExperiment('nested-dnd', true) ? 100 : 0;
+export const getNodeAnchor = node => {
+  const handleId = ObjHash.getForNode(node);
+  return `--node-anchor-${node.type.name}-${handleId}`;
+};
+class ObjHash {
+  static getForNode(node) {
+    if (this.caching.has(node)) {
+      return this.caching.get(node);
+    }
+    const uniqueId = uuid();
+    this.caching.set(node, uniqueId);
+    return uniqueId;
+  }
+}
+_defineProperty(ObjHash, "caching", new WeakMap());
+export const unmountDecorations = selector => {
+  // Removing decorations manually instead of using native destroy function in prosemirror API
+  // as it was more responsive and causes less re-rendering
+  const decorationsToRemove = document.querySelectorAll(`[${selector}="true"]`);
+  decorationsToRemove.forEach(el => {
+    ReactDOM.unmountComponentAtNode(el);
+  });
+};

package/dist/es2019/pm-plugins/decorations-drag-handle.js

@@ -0,0 +1,79 @@
+import { createElement } from 'react';
+import { bind } from 'bind-event-listener';
+import ReactDOM from 'react-dom';
+import uuid from 'uuid';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { DragHandle } from '../ui/drag-handle';
+import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
+export const emptyParagraphNodeDecorations = () => {
+  const anchorName = `--node-anchor-paragraph-0`;
+  const style = `anchor-name: ${anchorName}; margin-top: 0px;`;
+  return Decoration.node(0, 2, {
+    style,
+    ['data-drag-handler-anchor-name']: anchorName
+  }, {
+    type: TYPE_NODE_DEC
+  });
+};
+export const findHandleDec = (decorations, from, to) => {
+  return decorations.find(from, to, spec => spec.type === TYPE_HANDLE_DEC);
+};
+export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, handleOptions) => {
+  unmountDecorations('data-blocks-drag-handle-container');
+  let unbind;
+  return Decoration.widget(pos, (view, getPos) => {
+    const element = document.createElement('span');
+    // Need to set it to inline to avoid text being split when merging two paragraphs
+    // platform_editor_element_dnd_nested_fix_patch_2 -> inline decoration causes focus issues when refocusing Editor into first line
+    element.style.display = fg('platform_editor_element_dnd_nested_fix_patch_2') ? 'block' : 'inline';
+    element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
+    element.setAttribute('data-blocks-drag-handle-container', 'true');
+    let isTopLevelNode = true;
+    if (editorExperiment('nested-dnd', true)) {
+      const newPos = fg('platform_editor_element_dnd_nested_fix_patch_3') ? getPos() : pos;
+      if (typeof newPos === 'number') {
+        const $pos = view.state.doc.resolve(newPos);
+        isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+      }
+      /*
+       * We disable mouseover event to fix flickering issue on hover
+       * However, the tooltip for nested drag handle is no long working.
+       */
+      if (newPos === undefined || !isTopLevelNode) {
+        // This will also hide the tooltip.
+        unbind = bind(element, {
+          type: 'mouseover',
+          listener: e => {
+            e.stopPropagation();
+          }
+        });
+      }
+    }
+
+    // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
+    // due to margins applied to other nodes eg. Headings
+    element.style.clear = 'unset';
+    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+      view,
+      api,
+      formatMessage,
+      getPos,
+      anchorName,
+      nodeType,
+      handleOptions,
+      isTopLevelNode
+    }), element);
+    return element;
+  }, {
+    side: -1,
+    type: TYPE_HANDLE_DEC,
+    testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
+    destroy: () => {
+      if (editorExperiment('nested-dnd', true)) {
+        unbind && unbind();
+      }
+    }
+  });
+};