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

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

@@ -0,0 +1,81 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 var emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
+  var anchorName = "--node-anchor-paragraph-0";
+  var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
+  return Decoration.node(0, 2, _defineProperty({
+    style: style
+  }, 'data-drag-handler-anchor-name', anchorName), {
+    type: TYPE_NODE_DEC
+  });
+};
+export var findHandleDec = function findHandleDec(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === TYPE_HANDLE_DEC;
+  });
+};
+export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, handleOptions) {
+  unmountDecorations('data-blocks-drag-handle-container');
+  var unbind;
+  return Decoration.widget(pos, function (view, getPos) {
+    var 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');
+    var isTopLevelNode = true;
+    if (editorExperiment('nested-dnd', true)) {
+      var newPos = fg('platform_editor_element_dnd_nested_fix_patch_3') ? getPos() : pos;
+      if (typeof newPos === 'number') {
+        var $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: function 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: view,
+      api: api,
+      formatMessage: formatMessage,
+      getPos: getPos,
+      anchorName: anchorName,
+      nodeType: nodeType,
+      handleOptions: handleOptions,
+      isTopLevelNode: isTopLevelNode
+    }), element);
+    return element;
+  }, {
+    side: -1,
+    type: TYPE_HANDLE_DEC,
+    testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
+    destroy: function destroy() {
+      if (editorExperiment('nested-dnd', true)) {
+        unbind && unbind();
+      }
+    }
+  });
+};

package/dist/esm/pm-plugins/{decorations.js → decorations-drop-target.js}

@@ -1,35 +1,26 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { createElement } from 'react';
-import { bind } from 'bind-event-listener';
 import ReactDOM from 'react-dom';
-import uuid from 'uuid';
 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 { nodeMargins } from '../ui/consts';
-import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { canMoveNodeToIndex } from '../utils/validation';
+import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
-var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
-export var TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
-export var TYPE_HANDLE_DEC = 'drag-handle';
-export var TYPE_NODE_DEC = 'node-decoration';
-var getNestedDepth = function getNestedDepth() {
-  return editorExperiment('nested-dnd', true) ? 100 : 0;
-};
-export var getNodeAnchor = function getNodeAnchor(node) {
-  var handleId = ObjHash.getForNode(node);
-  return "--node-anchor-".concat(node.type.name, "-").concat(handleId);
+var shouldDescend = function shouldDescend(node) {
+  if (fg('platform_editor_drag_and_drop_target_v2')) {
+    return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
+  }
+  return true;
 };
 var getNodeMargins = function getNodeMargins(node) {
   if (!node) {
@@ -74,12 +65,6 @@ var getGapAndOffset = function getGapAndOffset(prevNode, nextNode, parentNode) {
     offset: offset
   };
 };
-var shouldDescend = function shouldDescend(node) {
-  if (fg('platform_editor_drag_and_drop_target_v2')) {
-    return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
-  }
-  return true;
-};
 
 /**
  * Find drop target decorations in the pos range between from and to
@@ -93,41 +78,6 @@ export var findDropTargetDecs = function findDropTargetDecs(decorations, from, t
     return spec.type === TYPE_DROP_TARGET_DEC;
   });
 };
-export var findHandleDec = function findHandleDec(decorations, from, to) {
-  return decorations.find(from, to, function (spec) {
-    return spec.type === TYPE_HANDLE_DEC;
-  });
-};
-
-/**
- * Find node decorations in the pos range between from and to (non-inclusive)
- * @param decorations
- * @param from
- * @param to
- * @returns
- */
-export var findNodeDecs = function findNodeDecs(decorations, from, to) {
-  var newfrom = from;
-  var 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, function (spec) {
-    return spec.type === TYPE_NODE_DEC;
-  });
-};
 export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache) {
   return Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
@@ -253,151 +203,4 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
     }, undefined, anchorRectCache));
   }
   return decs;
-};
-export var emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
-  var anchorName = "--node-anchor-paragraph-0";
-  var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
-  return Decoration.node(0, 2, _defineProperty({
-    style: style
-  }, 'data-drag-handler-anchor-name', anchorName), {
-    type: TYPE_NODE_DEC
-  });
-};
-var ObjHash = /*#__PURE__*/function () {
-  function ObjHash() {
-    _classCallCheck(this, ObjHash);
-  }
-  _createClass(ObjHash, null, [{
-    key: "getForNode",
-    value: function getForNode(node) {
-      if (this.caching.has(node)) {
-        return this.caching.get(node);
-      }
-      var uniqueId = uuid();
-      this.caching.set(node, uniqueId);
-      return uniqueId;
-    }
-  }]);
-  return ObjHash;
-}();
-_defineProperty(ObjHash, "caching", new WeakMap());
-var shouldIgnoreNode = function shouldIgnoreNode(node) {
-  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);
-};
-export var shouldDescendIntoNode = function 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);
-};
-export var nodeDecorations = function nodeDecorations(newState, from, to) {
-  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 _Decoration$node2;
-    var depth = 0;
-    var anchorName;
-    var shouldDescend = shouldDescendIntoNode(node);
-    var handleId = ObjHash.getForNode(node);
-    anchorName = "--node-anchor-".concat(node.type.name, "-").concat(handleId);
-    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-".concat(node.type.name, "-").concat(pos);
-    } else {
-      var _anchorName2;
-      anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
-    }
-    decs.push(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node2 = {
-      style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;")
-    }, _defineProperty(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), _defineProperty(_Decoration$node2, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node2), {
-      type: TYPE_NODE_DEC,
-      anchorName: anchorName,
-      nodeType: node.type.name
-    }));
-    return shouldDescend && depth < getNestedDepth();
-  });
-  return decs;
-};
-export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, handleOptions) {
-  unmountDecorations('data-blocks-drag-handle-container');
-  var unbind;
-  return Decoration.widget(pos, function (view, getPos) {
-    var 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');
-    var isTopLevelNode = true;
-    if (editorExperiment('nested-dnd', true)) {
-      var newPos = fg('platform_editor_element_dnd_nested_fix_patch_3') ? getPos() : pos;
-      if (typeof newPos === 'number') {
-        var $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: function 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: view,
-      api: api,
-      formatMessage: formatMessage,
-      getPos: getPos,
-      anchorName: anchorName,
-      nodeType: nodeType,
-      handleOptions: handleOptions,
-      isTopLevelNode: isTopLevelNode
-    }), element);
-    return element;
-  }, {
-    side: -1,
-    type: TYPE_HANDLE_DEC,
-    testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
-    destroy: function destroy() {
-      if (editorExperiment('nested-dnd', true)) {
-        unbind && unbind();
-      }
-    }
-  });
-};
-var unmountDecorations = function unmountDecorations(selector) {
-  // Removing decorations manually instead of using native destroy function in prosemirror API
-  // as it was more responsive and causes less re-rendering
-  var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
-  decorationsToRemove.forEach(function (el) {
-    ReactDOM.unmountComponentAtNode(el);
-  });
 };

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

@@ -15,7 +15,9 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { AnchorRectCache, isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { getTrMetadata } from '../utils/transactions';
-import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, findDropTargetDecs, findHandleDec, findNodeDecs, nodeDecorations } from './decorations';
+import { findNodeDecs, nodeDecorations } from './decorations-anchor';
+import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
+import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
 export var key = new PluginKey('blockControls');

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

@@ -14,7 +14,7 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { layers } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { getNodeAnchor } from '../pm-plugins/decorations';
+import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { shouldAllowInlineDropTarget } from '../utils/inline-drop-target';

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

@@ -12,19 +12,17 @@ import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { getNodeAnchor } from '../pm-plugins/decorations';
+import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { isAnchorSupported } from '../utils/anchor-utils';
+import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 var dropTargetCommonStyle = css({
   position: 'absolute',
   display: 'block'
 });
-var hideDropTargetStyle = css({
-  display: 'none'
-});
 var hoverZoneCommonStyle = 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
@@ -32,6 +30,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
+  };
+};
 export var InlineDropTarget = function InlineDropTarget(_ref) {
   var api = _ref.api,
     nextNode = _ref.nextNode,
@@ -51,22 +103,25 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
   var handleDragLeave = useCallback(function () {
     setIsDraggedOver(false);
   }, []);
+  var offsets = useMemo(function () {
+    return getDropTargetPositionOverride(nextNode, widthState === null || widthState === void 0 ? void 0 : widthState.lineLength);
+  }, [nextNode, widthState]);
   var dropTargetRectStyle = useMemo(function () {
     if (isAnchorSupported()) {
       return 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 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 = 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()) || {},
@@ -83,8 +138,8 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
   }, [api, getPos, position]);
   return jsx(Fragment, null, jsx("div", {
     "data-test-id": "block-ctrl-drop-target-".concat(position),
-    css: [dropTargetCommonStyle, dropTargetRectStyle, !isDraggedOver && hideDropTargetStyle]
-  }, jsx(DropIndicator, {
+    css: [dropTargetCommonStyle, dropTargetRectStyle]
+  }, (isDraggedOver || isBlocksDragTargetDebug()) && jsx(DropIndicator, {
     edge: position
   })), jsx(InlineHoverZone, {
     position: position,
@@ -93,7 +148,8 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     anchorRectCache: anchorRectCache,
     onDragEnter: handleDragEnter,
     onDragLeave: handleDragLeave,
-    onDrop: onDrop
+    onDrop: onDrop,
+    offsets: offsets
   }));
 };
 export var InlineHoverZone = function InlineHoverZone(_ref3) {
@@ -101,6 +157,7 @@ export var 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;
@@ -119,27 +176,29 @@ export var InlineHoverZone = function InlineHoverZone(_ref3) {
     }
   }, [onDragEnter, onDragLeave, onDrop]);
   var inlineHoverZoneRectStyle = useMemo(function () {
+    var offset = offsets[position];
     if (isAnchorSupported()) {
       return 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 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 jsx("div", {
     ref: ref,
+    "data-test-id": "drop-target-hover-zone-".concat(position),
     css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
   });
 };

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

@@ -0,0 +1,8 @@
+export var 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/esm/utils/inline-drop-target.js

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

package/dist/types/pm-plugins/decorations-anchor.d.ts

@@ -0,0 +1,13 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const shouldDescendIntoNode: (node: PMNode) => boolean;
+/**
+ * Find node decorations in the pos range between from and to (non-inclusive)
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+export declare const findNodeDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+export declare const nodeDecorations: (newState: EditorState, from?: number, to?: number) => Decoration[];

package/dist/types/pm-plugins/decorations-common.d.ts

@@ -0,0 +1,7 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const TYPE_DROP_TARGET_DEC = "drop-target-decoration";
+export declare const TYPE_HANDLE_DEC = "drag-handle";
+export declare const TYPE_NODE_DEC = "node-decoration";
+export declare const getNestedDepth: () => 0 | 100;
+export declare const getNodeAnchor: (node: PMNode) => string;
+export declare const unmountDecorations: (selector: string) => void;

package/dist/types/pm-plugins/decorations-drag-handle.d.ts

@@ -0,0 +1,7 @@
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin, HandleOptions } from '../types';
+export declare const emptyParagraphNodeDecorations: () => Decoration;
+export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;

package/dist/types/pm-plugins/decorations-drop-target.d.ts

@@ -0,0 +1,17 @@
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { ActiveNode, BlockControlsPlugin } from '../types';
+import { type DropTargetProps } from '../ui/drop-target';
+import { type AnchorRectCache } from '../utils/anchor-utils';
+/**
+ * Find drop target decorations in the pos range between from and to
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+export declare const findDropTargetDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorRectCache?: AnchorRectCache) => Decoration;
+export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache, from?: number, to?: number) => Decoration[];

package/dist/types/ui/inline-drop-target.d.ts

@@ -3,6 +3,10 @@ import { type EditorContainerWidth } from '@atlaskit/editor-common/src/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type AnchorRectCache } from '../utils/anchor-utils';
 import { type DropTargetProps } from './drop-target';
+type DropTargetOffsets = {
+    left: number;
+    right: number;
+};
 export declare const InlineDropTarget: ({ api, nextNode, position, anchorRectCache, getPos, }: DropTargetProps & {
     anchorRectCache?: AnchorRectCache | undefined;
     position: 'left' | 'right';
@@ -12,9 +16,10 @@ type InlineHoverZoneProps = {
     editorWidthState?: EditorContainerWidth;
     anchorRectCache?: AnchorRectCache;
     position: 'left' | 'right';
+    offsets: DropTargetOffsets;
     onDragEnter: () => void;
     onDragLeave: () => void;
     onDrop: () => void;
 };
-export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
+export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, offsets, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
 export {};

package/dist/types/utils/check-media-layout.d.ts

@@ -0,0 +1,2 @@
+import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const isWrappedMedia: (node?: PMNode) => boolean;

package/dist/types-ts4.5/pm-plugins/decorations-anchor.d.ts

@@ -0,0 +1,13 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const shouldDescendIntoNode: (node: PMNode) => boolean;
+/**
+ * Find node decorations in the pos range between from and to (non-inclusive)
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+export declare const findNodeDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+export declare const nodeDecorations: (newState: EditorState, from?: number, to?: number) => Decoration[];

package/dist/types-ts4.5/pm-plugins/decorations-common.d.ts

@@ -0,0 +1,7 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const TYPE_DROP_TARGET_DEC = "drop-target-decoration";
+export declare const TYPE_HANDLE_DEC = "drag-handle";
+export declare const TYPE_NODE_DEC = "node-decoration";
+export declare const getNestedDepth: () => 0 | 100;
+export declare const getNodeAnchor: (node: PMNode) => string;
+export declare const unmountDecorations: (selector: string) => void;