@atlaskit/editor-plugin-block-controls 1.10.7 → 1.11.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.11.1
+
+### Patch Changes
+
+- [#128476](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128476)
+  [`e6ccffdd6fe90`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e6ccffdd6fe90) -
+  ED-24408 fix nested drop target indicator location and appearance
+
+## 1.11.0
+
+### Minor Changes
+
+- [#128347](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128347)
+  [`e33566cebd5d1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e33566cebd5d1) -
+  [ED-24175] bump @atlaskit/adf-schema to 40.8.1 and @atlassian/adf-schema-json to 1.22.0 to
+  promotecodeblocks & media in quotes, and nested expands in expands to full schema, and allow
+  quotes in panels and decisions in lists in stage0 schema, and a validator spec change
+
+### Patch Changes
+
+- [#128138](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128138)
+  [`5c7bc23671459`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c7bc23671459) -
+  ED-24471 Clean up feature flags in main.ts apply and long scroll FF
+- [#127946](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127946)
+  [`93f225e326474`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/93f225e326474) -
+  ED-24405 fix drop target not showing at last pos
+- Updated dependencies
+
 ## 1.10.7
 
 ### Patch Changes

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

@@ -14,10 +14,26 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _dragHandle = require("../ui/drag-handle");
 var _dropTarget = require("../ui/drop-target");
+var _dragTargetDebug = require("../utils/drag-target-debug");
 var _validation = require("../utils/validation");
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem'];
 var IGNORE_NODES_AND_DESCENDANTS = ['listItem'];
-var NESTED_DEPTH = (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? 100 : 0;
+var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand'];
+var getNestedDepth = function getNestedDepth() {
+  return (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? 100 : 0;
+};
+var createDropTargetDecoration = function createDropTargetDecoration(pos, dropTargetDec) {
+  return _view.Decoration.widget(pos, function () {
+    var element = document.createElement('div');
+    element.setAttribute('data-blocks-drop-target-container', 'true');
+    element.style.clear = 'unset';
+    _reactDom.default.render(dropTargetDec, element);
+    return element;
+  }, {
+    type: 'drop-target-decoration',
+    side: -1
+  });
+};
 var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage, activeNodeType) {
   var decs = [];
   unmountDecorations('data-blocks-drop-target-container');
@@ -28,49 +44,63 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
   newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
     var depth = 0;
     var nodeType = newState.doc.type.schema.nodes[activeNodeType];
+    var endDec = null;
     if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
-      if (node.isInline) {
+      if (node.isInline || !parent) {
+        prevNode = node;
         return false;
       }
       if (IGNORE_NODES.includes(node.type.name)) {
+        prevNode = node;
         return true; //skip over, don't consider it a valid depth
       }
-      var canDrop = parent && activeNodeType && (0, _validation.canMoveToIndex)(parent, index, nodeType);
+      var canDrop = activeNodeType && (0, _validation.canMoveToIndex)(parent, index, nodeType);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
-      if (!canDrop) {
+      if (!canDrop && !(0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
+        prevNode = node;
         return false; //not valid pos, so nested not valid either
       }
       decorationState.push({
         id: pos,
         pos: pos
       });
+      if (parent.lastChild === node && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
+        var endpos = pos + node.nodeSize;
+        endDec = {
+          id: endpos,
+          pos: endpos
+        };
+        decorationState.push({
+          id: endpos,
+          pos: endpos
+        });
+      }
     } else {
       decorationState.push({
         id: index,
         pos: pos
       });
     }
-    var dropTargetDec = /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
+    decs.push(createDropTargetDecoration(pos, /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
       api: api,
       id: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? pos : index,
       formatMessage: formatMessage,
       prevNode: prevNode,
-      nextNode: node
-    });
-    decs.push(_view.Decoration.widget(pos, function () {
-      var element = document.createElement('div');
-      element.setAttribute('data-blocks-drop-target-container', 'true');
-      element.style.clear = 'unset';
-      _reactDom.default.render(dropTargetDec, element);
-      return element;
-    }, {
-      type: 'drop-target-decoration',
-      side: -1
-    }));
+      nextNode: node,
+      parentNode: parent
+    })));
+    if (endDec) {
+      decs.push(createDropTargetDecoration(endDec.pos, /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
+        api: api,
+        id: endDec.id,
+        parentNode: parent,
+        formatMessage: formatMessage
+      })));
+    }
     prevNode = node;
-    return depth < NESTED_DEPTH;
+    return depth < getNestedDepth();
   });
 
   /**
@@ -80,7 +110,6 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
    * node and not its size.
    *
    */
-
   var lastPos = newState.doc.content.size;
   if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
     decorationState.push({
@@ -143,7 +172,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     }, (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node2), {
       type: 'node-decoration'
     }));
-    return depth < NESTED_DEPTH;
+    return depth < getNestedDepth();
   });
   return decs;
 };

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

@@ -164,15 +164,11 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          if ((0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_24000')) {
-            var oldNodeDecs = decorations.find().filter(function (_ref9) {
-              var spec = _ref9.spec;
-              return spec.type !== 'drop-target-decoration';
-            });
-            decorations = decorations.remove(oldNodeDecs);
-          } else {
-            decorations = _view.DecorationSet.create(newState.doc, []);
-          }
+          var oldNodeDecs = decorations.find().filter(function (_ref9) {
+            var spec = _ref9.spec;
+            return spec.type !== 'drop-target-decoration';
+          });
+          decorations = decorations.remove(oldNodeDecs);
           var nodeDecs = (0, _decorations.nodeDecorations)(newState);
           decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(nodeDecs));
 
@@ -184,9 +180,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
 
             // When a node type changed to be nested inside another node, the position of the active node is off by 1
             // This is a workaround to fix the position of the active node when it is nested
-
-            var shouldUpdateNestedPosition = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24049') ? tr.docChanged && !nodeCountChanged : true;
-            if (shouldUpdateNestedPosition && mappedPosisiton === prevMappedPos + 1) {
+            if (tr.docChanged && !nodeCountChanged && mappedPosisiton === prevMappedPos + 1) {
               mappedPosisiton = prevMappedPos;
             }
             var newActiveNode = tr.doc.nodeAt(mappedPosisiton);

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

@@ -121,7 +121,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       });
       var resolvedMovingNode = tr.doc.resolve(startPos);
       var maybeNode = resolvedMovingNode.nodeAfter;
-      (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
+      tr.setMeta('scrollIntoView', false);
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
         eventType: _analytics.EVENT_TYPE.UI,
         action: _analytics.ACTION.CLICKED,

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DropTarget = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -31,13 +32,16 @@ var styleDropTarget = (0, _react2.css)({
   display: 'block',
   zIndex: _constants.layers.card()
 });
-var marginLookupMap = Object.fromEntries(
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-Object.entries(_consts.spaceLookupMap).map(function (_ref, i) {
+var nestedDropIndicatorStyle = (0, _react2.css)({
+  position: 'relative'
+});
+var marginLookupMap = Object.fromEntries(Object.entries(_consts.spaceLookupMap).map(function (_ref, i) {
   var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
     key = _ref2[0],
     value = _ref2[1];
-  return [key, (0, _react2.css)({
+  return [key,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+  (0, _react2.css)({
     marginTop: value
   })];
 }));
@@ -65,17 +69,19 @@ var getDropTargetPositionStyle = function getDropTargetPositionStyle(prevNode, n
     return marginLookupMap[space];
   }
 };
+var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
 var styleDropIndicator = (0, _react2.css)({
   height: '100%',
-  width: '100%',
   margin: '0 auto',
-  position: 'relative'
+  position: 'relative',
+  width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
 });
 var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
   var api = _ref3.api,
     id = _ref3.id,
     prevNode = _ref3.prevNode,
     nextNode = _ref3.nextNode,
+    parentNode = _ref3.parentNode,
     formatMessage = _ref3.formatMessage;
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
@@ -84,7 +90,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
     setIsDraggedOver = _useState2[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
     widthState = _useSharedPluginState.widthState;
-  var lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
+  var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
   (0, _react.useEffect)(function () {
     var element = ref.current;
     if (!element) {
@@ -122,22 +128,30 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
     });
   }, [id, api, formatMessage]);
   var topTargetMarginStyle = (0, _react.useMemo)(function () {
+    /**
+     * First child of a nested node.
+     * Disable the position adjustment for the nested node temporarily
+     */
+    if (parentNode === prevNode || isNestedDropTarget) {
+      return null;
+    }
     return getDropTargetPositionStyle(prevNode, nextNode);
-  }, [prevNode, nextNode]);
+  }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
+  var widthStyle = (0, _defineProperty2.default)({}, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px"));
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     (0, _react2.jsx)("div", {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css: [styleDropTarget, topTargetMarginStyle],
+      css: [styleDropTarget, topTargetMarginStyle, isNestedDropTarget && nestedDropIndicatorStyle]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: widthStyle,
       ref: ref,
       "data-testid": "block-ctrl-drop-target"
     },
     // 4px gap to clear expand node border
     (isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) && (0, _react2.jsx)("div", {
       css: styleDropIndicator,
-      style: {
-        width: "".concat(lineLength, "px")
-      },
       "data-testid": "block-ctrl-drop-indicator"
     }, (0, _react2.jsx)(_box.DropIndicator, {
       edge: "bottom",

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

@@ -6,10 +6,24 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
+import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { canMoveToIndex } from '../utils/validation';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem'];
 const IGNORE_NODES_AND_DESCENDANTS = ['listItem'];
-const NESTED_DEPTH = fg('platform_editor_elements_dnd_nested') ? 100 : 0;
+const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand'];
+const getNestedDepth = () => fg('platform_editor_elements_dnd_nested') ? 100 : 0;
+const createDropTargetDecoration = (pos, dropTargetDec) => {
+  return Decoration.widget(pos, () => {
+    const element = document.createElement('div');
+    element.setAttribute('data-blocks-drop-target-container', 'true');
+    element.style.clear = 'unset';
+    ReactDOM.render(dropTargetDec, element);
+    return element;
+  }, {
+    type: 'drop-target-decoration',
+    side: -1
+  });
+};
 export const dropTargetDecorations = (oldState, newState, api, formatMessage, activeNodeType) => {
   const decs = [];
   unmountDecorations('data-blocks-drop-target-container');
@@ -20,49 +34,63 @@ export const dropTargetDecorations = (oldState, newState, api, formatMessage, ac
   newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, parent, index) => {
     let depth = 0;
     const nodeType = newState.doc.type.schema.nodes[activeNodeType];
+    let endDec = null;
     if (fg('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
-      if (node.isInline) {
+      if (node.isInline || !parent) {
+        prevNode = node;
         return false;
       }
       if (IGNORE_NODES.includes(node.type.name)) {
+        prevNode = node;
         return true; //skip over, don't consider it a valid depth
       }
-      const canDrop = parent && activeNodeType && canMoveToIndex(parent, index, nodeType);
+      const canDrop = activeNodeType && canMoveToIndex(parent, index, nodeType);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
-      if (!canDrop) {
+      if (!canDrop && !isBlocksDragTargetDebug()) {
+        prevNode = node;
         return false; //not valid pos, so nested not valid either
       }
       decorationState.push({
         id: pos,
         pos
       });
+      if (parent.lastChild === node && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
+        const endpos = pos + node.nodeSize;
+        endDec = {
+          id: endpos,
+          pos: endpos
+        };
+        decorationState.push({
+          id: endpos,
+          pos: endpos
+        });
+      }
     } else {
       decorationState.push({
         id: index,
         pos
       });
     }
-    const dropTargetDec = /*#__PURE__*/createElement(DropTarget, {
+    decs.push(createDropTargetDecoration(pos, /*#__PURE__*/createElement(DropTarget, {
       api,
       id: fg('platform_editor_elements_dnd_nested') ? pos : index,
       formatMessage,
       prevNode,
-      nextNode: node
-    });
-    decs.push(Decoration.widget(pos, () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-blocks-drop-target-container', 'true');
-      element.style.clear = 'unset';
-      ReactDOM.render(dropTargetDec, element);
-      return element;
-    }, {
-      type: 'drop-target-decoration',
-      side: -1
-    }));
+      nextNode: node,
+      parentNode: parent
+    })));
+    if (endDec) {
+      decs.push(createDropTargetDecoration(endDec.pos, /*#__PURE__*/createElement(DropTarget, {
+        api,
+        id: endDec.id,
+        parentNode: parent,
+        formatMessage
+      })));
+    }
     prevNode = node;
-    return depth < NESTED_DEPTH;
+    return depth < getNestedDepth();
   });
 
   /**
@@ -72,7 +100,6 @@ export const dropTargetDecorations = (oldState, newState, api, formatMessage, ac
    * node and not its size.
    *
    */
-
   const lastPos = newState.doc.content.size;
   if (fg('platform_editor_elements_dnd_nested')) {
     decorationState.push({
@@ -138,7 +165,7 @@ export const nodeDecorations = newState => {
     }, {
       type: 'node-decoration'
     }));
-    return depth < NESTED_DEPTH;
+    return depth < getNestedDepth();
   });
   return decs;
 };

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

@@ -157,14 +157,10 @@ export const createPlugin = (api, getIntl) => {
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          if (fg('platform_editor_elements_drag_and_drop_ed_24000')) {
-            const oldNodeDecs = decorations.find().filter(({
-              spec
-            }) => spec.type !== 'drop-target-decoration');
-            decorations = decorations.remove(oldNodeDecs);
-          } else {
-            decorations = DecorationSet.create(newState.doc, []);
-          }
+          const oldNodeDecs = decorations.find().filter(({
+            spec
+          }) => spec.type !== 'drop-target-decoration');
+          decorations = decorations.remove(oldNodeDecs);
           const nodeDecs = nodeDecorations(newState);
           decorations = decorations.add(newState.doc, [...nodeDecs]);
 
@@ -176,9 +172,7 @@ export const createPlugin = (api, getIntl) => {
 
             // When a node type changed to be nested inside another node, the position of the active node is off by 1
             // This is a workaround to fix the position of the active node when it is nested
-
-            const shouldUpdateNestedPosition = fg('platform_editor_element_drag_and_drop_ed_24049') ? tr.docChanged && !nodeCountChanged : true;
-            if (shouldUpdateNestedPosition && mappedPosisiton === prevMappedPos + 1) {
+            if (tr.docChanged && !nodeCountChanged && mappedPosisiton === prevMappedPos + 1) {
               mappedPosisiton = prevMappedPos;
             }
             const newActiveNode = tr.doc.nodeAt(mappedPosisiton);

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

@@ -108,7 +108,7 @@ const DragHandleInternal = ({
       });
       const resolvedMovingNode = tr.doc.resolve(startPos);
       const maybeNode = resolvedMovingNode.nodeAfter;
-      fg('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
+      tr.setMeta('scrollIntoView', false);
       api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
         eventType: EVENT_TYPE.UI,
         action: ACTION.CLICKED,

package/dist/es2019/ui/drop-target.js

@@ -22,9 +22,12 @@ const styleDropTarget = css({
   display: 'block',
   zIndex: layers.card()
 });
-const marginLookupMap = Object.fromEntries(
+const nestedDropIndicatorStyle = css({
+  position: 'relative'
+});
+const marginLookupMap = Object.fromEntries(Object.entries(spaceLookupMap).map(([key, value], i) => [key,
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-Object.entries(spaceLookupMap).map(([key, value], i) => [key, css({
+css({
   marginTop: value
 })]));
 const BASE_LINE_MARGIN = -8;
@@ -51,17 +54,19 @@ const getDropTargetPositionStyle = (prevNode, nextNode) => {
     return marginLookupMap[space];
   }
 };
+const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
 const styleDropIndicator = css({
   height: '100%',
-  width: '100%',
   margin: '0 auto',
-  position: 'relative'
+  position: 'relative',
+  width: `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH}, 100%)`
 });
 export const DropTarget = ({
   api,
   id,
   prevNode,
   nextNode,
+  parentNode,
   formatMessage
 }) => {
   const ref = useRef(null);
@@ -69,7 +74,7 @@ export const DropTarget = ({
   const {
     widthState
   } = useSharedPluginState(api, ['width']);
-  const lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
+  const isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
   useEffect(() => {
     const element = ref.current;
     if (!element) {
@@ -107,22 +112,32 @@ export const DropTarget = ({
     });
   }, [id, api, formatMessage]);
   const topTargetMarginStyle = useMemo(() => {
+    /**
+     * First child of a nested node.
+     * Disable the position adjustment for the nested node temporarily
+     */
+    if (parentNode === prevNode || isNestedDropTarget) {
+      return null;
+    }
     return getDropTargetPositionStyle(prevNode, nextNode);
-  }, [prevNode, nextNode]);
+  }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
+  const widthStyle = {
+    [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH]: isNestedDropTarget ? '100%' : `${(widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH}px`
+  };
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     jsx("div", {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css: [styleDropTarget, topTargetMarginStyle],
+      css: [styleDropTarget, topTargetMarginStyle, isNestedDropTarget && nestedDropIndicatorStyle]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: widthStyle,
       ref: ref,
       "data-testid": "block-ctrl-drop-target"
     },
     // 4px gap to clear expand node border
     (isDraggedOver || isBlocksDragTargetDebug()) && jsx("div", {
       css: styleDropIndicator,
-      style: {
-        width: `${lineLength}px`
-      },
       "data-testid": "block-ctrl-drop-indicator"
     }, jsx(DropIndicator, {
       edge: "bottom",

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

@@ -7,10 +7,26 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
+import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { canMoveToIndex } from '../utils/validation';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem'];
 var IGNORE_NODES_AND_DESCENDANTS = ['listItem'];
-var NESTED_DEPTH = fg('platform_editor_elements_dnd_nested') ? 100 : 0;
+var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand'];
+var getNestedDepth = function getNestedDepth() {
+  return fg('platform_editor_elements_dnd_nested') ? 100 : 0;
+};
+var createDropTargetDecoration = function createDropTargetDecoration(pos, dropTargetDec) {
+  return Decoration.widget(pos, function () {
+    var element = document.createElement('div');
+    element.setAttribute('data-blocks-drop-target-container', 'true');
+    element.style.clear = 'unset';
+    ReactDOM.render(dropTargetDec, element);
+    return element;
+  }, {
+    type: 'drop-target-decoration',
+    side: -1
+  });
+};
 export var dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage, activeNodeType) {
   var decs = [];
   unmountDecorations('data-blocks-drop-target-container');
@@ -21,49 +37,63 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
   newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
     var depth = 0;
     var nodeType = newState.doc.type.schema.nodes[activeNodeType];
+    var endDec = null;
     if (fg('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
-      if (node.isInline) {
+      if (node.isInline || !parent) {
+        prevNode = node;
         return false;
       }
       if (IGNORE_NODES.includes(node.type.name)) {
+        prevNode = node;
         return true; //skip over, don't consider it a valid depth
       }
-      var canDrop = parent && activeNodeType && canMoveToIndex(parent, index, nodeType);
+      var canDrop = activeNodeType && canMoveToIndex(parent, index, nodeType);
 
       //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
-      if (!canDrop) {
+      if (!canDrop && !isBlocksDragTargetDebug()) {
+        prevNode = node;
         return false; //not valid pos, so nested not valid either
       }
       decorationState.push({
         id: pos,
         pos: pos
       });
+      if (parent.lastChild === node && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
+        var endpos = pos + node.nodeSize;
+        endDec = {
+          id: endpos,
+          pos: endpos
+        };
+        decorationState.push({
+          id: endpos,
+          pos: endpos
+        });
+      }
     } else {
       decorationState.push({
         id: index,
         pos: pos
       });
     }
-    var dropTargetDec = /*#__PURE__*/createElement(DropTarget, {
+    decs.push(createDropTargetDecoration(pos, /*#__PURE__*/createElement(DropTarget, {
       api: api,
       id: fg('platform_editor_elements_dnd_nested') ? pos : index,
       formatMessage: formatMessage,
       prevNode: prevNode,
-      nextNode: node
-    });
-    decs.push(Decoration.widget(pos, function () {
-      var element = document.createElement('div');
-      element.setAttribute('data-blocks-drop-target-container', 'true');
-      element.style.clear = 'unset';
-      ReactDOM.render(dropTargetDec, element);
-      return element;
-    }, {
-      type: 'drop-target-decoration',
-      side: -1
-    }));
+      nextNode: node,
+      parentNode: parent
+    })));
+    if (endDec) {
+      decs.push(createDropTargetDecoration(endDec.pos, /*#__PURE__*/createElement(DropTarget, {
+        api: api,
+        id: endDec.id,
+        parentNode: parent,
+        formatMessage: formatMessage
+      })));
+    }
     prevNode = node;
-    return depth < NESTED_DEPTH;
+    return depth < getNestedDepth();
   });
 
   /**
@@ -73,7 +103,6 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
    * node and not its size.
    *
    */
-
   var lastPos = newState.doc.content.size;
   if (fg('platform_editor_elements_dnd_nested')) {
     decorationState.push({
@@ -136,7 +165,7 @@ export var nodeDecorations = function nodeDecorations(newState) {
     }, _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: 'node-decoration'
     }));
-    return depth < NESTED_DEPTH;
+    return depth < getNestedDepth();
   });
   return decs;
 };

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

@@ -157,15 +157,11 @@ export var createPlugin = function createPlugin(api, getIntl) {
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          if (fg('platform_editor_elements_drag_and_drop_ed_24000')) {
-            var oldNodeDecs = decorations.find().filter(function (_ref9) {
-              var spec = _ref9.spec;
-              return spec.type !== 'drop-target-decoration';
-            });
-            decorations = decorations.remove(oldNodeDecs);
-          } else {
-            decorations = DecorationSet.create(newState.doc, []);
-          }
+          var oldNodeDecs = decorations.find().filter(function (_ref9) {
+            var spec = _ref9.spec;
+            return spec.type !== 'drop-target-decoration';
+          });
+          decorations = decorations.remove(oldNodeDecs);
           var nodeDecs = nodeDecorations(newState);
           decorations = decorations.add(newState.doc, _toConsumableArray(nodeDecs));
 
@@ -177,9 +173,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
 
             // When a node type changed to be nested inside another node, the position of the active node is off by 1
             // This is a workaround to fix the position of the active node when it is nested
-
-            var shouldUpdateNestedPosition = fg('platform_editor_element_drag_and_drop_ed_24049') ? tr.docChanged && !nodeCountChanged : true;
-            if (shouldUpdateNestedPosition && mappedPosisiton === prevMappedPos + 1) {
+            if (tr.docChanged && !nodeCountChanged && mappedPosisiton === prevMappedPos + 1) {
               mappedPosisiton = prevMappedPos;
             }
             var newActiveNode = tr.doc.nodeAt(mappedPosisiton);

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

@@ -112,7 +112,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       });
       var resolvedMovingNode = tr.doc.resolve(startPos);
       var maybeNode = resolvedMovingNode.nodeAfter;
-      fg('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
+      tr.setMeta('scrollIntoView', false);
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
         eventType: EVENT_TYPE.UI,
         action: ACTION.CLICKED,

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * @jsxRuntime classic
@@ -23,13 +24,16 @@ var styleDropTarget = css({
   display: 'block',
   zIndex: layers.card()
 });
-var marginLookupMap = Object.fromEntries(
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-Object.entries(spaceLookupMap).map(function (_ref, i) {
+var nestedDropIndicatorStyle = css({
+  position: 'relative'
+});
+var marginLookupMap = Object.fromEntries(Object.entries(spaceLookupMap).map(function (_ref, i) {
   var _ref2 = _slicedToArray(_ref, 2),
     key = _ref2[0],
     value = _ref2[1];
-  return [key, css({
+  return [key,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+  css({
     marginTop: value
   })];
 }));
@@ -57,17 +61,19 @@ var getDropTargetPositionStyle = function getDropTargetPositionStyle(prevNode, n
     return marginLookupMap[space];
   }
 };
+var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
 var styleDropIndicator = css({
   height: '100%',
-  width: '100%',
   margin: '0 auto',
-  position: 'relative'
+  position: 'relative',
+  width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
 });
 export var DropTarget = function DropTarget(_ref3) {
   var api = _ref3.api,
     id = _ref3.id,
     prevNode = _ref3.prevNode,
     nextNode = _ref3.nextNode,
+    parentNode = _ref3.parentNode,
     formatMessage = _ref3.formatMessage;
   var ref = useRef(null);
   var _useState = useState(false),
@@ -76,7 +82,7 @@ export var DropTarget = function DropTarget(_ref3) {
     setIsDraggedOver = _useState2[1];
   var _useSharedPluginState = useSharedPluginState(api, ['width']),
     widthState = _useSharedPluginState.widthState;
-  var lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
+  var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
   useEffect(function () {
     var element = ref.current;
     if (!element) {
@@ -114,22 +120,30 @@ export var DropTarget = function DropTarget(_ref3) {
     });
   }, [id, api, formatMessage]);
   var topTargetMarginStyle = useMemo(function () {
+    /**
+     * First child of a nested node.
+     * Disable the position adjustment for the nested node temporarily
+     */
+    if (parentNode === prevNode || isNestedDropTarget) {
+      return null;
+    }
     return getDropTargetPositionStyle(prevNode, nextNode);
-  }, [prevNode, nextNode]);
+  }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
+  var widthStyle = _defineProperty({}, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px"));
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     jsx("div", {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css: [styleDropTarget, topTargetMarginStyle],
+      css: [styleDropTarget, topTargetMarginStyle, isNestedDropTarget && nestedDropIndicatorStyle]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: widthStyle,
       ref: ref,
       "data-testid": "block-ctrl-drop-target"
     },
     // 4px gap to clear expand node border
     (isDraggedOver || isBlocksDragTargetDebug()) && jsx("div", {
       css: styleDropIndicator,
-      style: {
-        width: "".concat(lineLength, "px")
-      },
       "data-testid": "block-ctrl-drop-indicator"
     }, jsx(DropIndicator, {
       edge: "bottom",

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

@@ -1,16 +1,14 @@
-/// <reference types="react" />
 import { jsx } from '@emotion/react';
 import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
-export declare const DropTarget: ({ api, id, prevNode, nextNode, formatMessage, }: {
+export type DropTargetProps = {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     id: number;
-    prevNode?: PMNode | undefined;
-    nextNode?: PMNode | undefined;
-    formatMessage?: {
-        (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, import("intl-messageformat").PrimitiveType | import("intl-messageformat").FormatXMLElementFn<string, string>> | undefined, opts?: import("intl-messageformat").Options | undefined): string;
-        (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | import("react").ReactPortal | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
-    } | undefined;
-}) => jsx.JSX.Element;
+    prevNode?: PMNode;
+    nextNode?: PMNode;
+    parentNode?: PMNode;
+    formatMessage?: IntlShape['formatMessage'];
+};
+export declare const DropTarget: ({ api, id, prevNode, nextNode, parentNode, formatMessage, }: DropTargetProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/drop-target.d.ts

@@ -1,16 +1,14 @@
-/// <reference types="react" />
 import { jsx } from '@emotion/react';
 import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
-export declare const DropTarget: ({ api, id, prevNode, nextNode, formatMessage, }: {
+export type DropTargetProps = {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     id: number;
-    prevNode?: PMNode | undefined;
-    nextNode?: PMNode | undefined;
-    formatMessage?: {
-        (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, import("intl-messageformat").PrimitiveType | import("intl-messageformat").FormatXMLElementFn<string, string>> | undefined, opts?: import("intl-messageformat").Options | undefined): string;
-        (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | import("react").ReactPortal | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
-    } | undefined;
-}) => jsx.JSX.Element;
+    prevNode?: PMNode;
+    nextNode?: PMNode;
+    parentNode?: PMNode;
+    formatMessage?: IntlShape['formatMessage'];
+};
+export declare const DropTarget: ({ api, id, prevNode, nextNode, parentNode, formatMessage, }: DropTargetProps) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.10.7",
+	"version": "1.11.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,18 +31,18 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^87.5.0",
+		"@atlaskit/editor-common": "^87.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
-		"@atlaskit/editor-plugin-analytics": "^1.6.0",
+		"@atlaskit/editor-plugin-analytics": "^1.7.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
 		"@atlaskit/editor-plugin-width": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.10.0",
+		"@atlaskit/icon": "^22.11.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/theme": "^12.11.0",
@@ -94,16 +94,10 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform.editor.elements.drag-and-drop-long-node-scroll": {
-			"type": "boolean"
-		},
 		"platform.editor.media.extended-resize-experience": {
 			"type": "boolean",
 			"referenceOnly": true
 		},
-		"platform_editor_elements_drag_and_drop_ed_24000": {
-			"type": "boolean"
-		},
 		"platform_editor_elements_drag_and_drop_ed_23189": {
 			"type": "boolean"
 		},
@@ -116,9 +110,6 @@
 		"platform_editor_elements_drag_and_drop_ed_23394": {
 			"type": "boolean"
 		},
-		"platform_editor_element_drag_and_drop_ed_24049": {
-			"type": "boolean"
-		},
 		"platform_editor_element_controls_chrome_input_fix": {
 			"type": "boolean"
 		},