@atlaskit/editor-plugin-block-controls 1.10.2 → 1.10.3

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.10.3
+
+### Patch Changes
+
+- [#127123](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127123)
+  [`7a68ab6404094`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7a68ab6404094) -
+  [ux] Add validation to node move, only show valid drop targets
+- [#126802](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126802)
+  [`2cd334b37d1d8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2cd334b37d1d8) -
+  Clean up FFs
+
 ## 1.10.2
 
 ### Patch Changes

package/dist/cjs/commands/move-node.js

@@ -15,12 +15,14 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../consts");
 var _main = require("../pm-plugins/main");
 var _utils2 = require("../utils");
+var _validation = require("../utils/validation");
 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) { (0, _defineProperty2.default)(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; }
 function transformNested(nodeCopy, destType) {
-  var firstChild = nodeCopy.content.firstChild;
-  if (firstChild && firstChild.type.name === 'nestedExpand' && destType === 'doc') {
-    return (0, _transforms.transformSliceNestedExpandToExpand)(nodeCopy, firstChild.type.schema);
+  var srcNode = nodeCopy.content.firstChild;
+  var schema = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.schema;
+  if (srcNode && schema && srcNode.type === schema.nodes.nestedExpand && destType === schema.nodes.doc) {
+    return (0, _transforms.transformSliceNestedExpandToExpand)(nodeCopy, schema);
   }
   return nodeCopy;
 }
@@ -119,7 +121,14 @@ var moveNode = exports.moveNode = function moveNode(api) {
       var mappedTo;
       if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
         var nodeCopy = tr.doc.slice(start, end, false); // cut the content
-        var destType = tr.doc.resolve(to).node().type.name;
+        var $to = tr.doc.resolve(to);
+        var $from = tr.doc.resolve(start);
+        var destType = $to.node().type;
+        var srcType = $from.node().child($from.index()).type;
+        var destParent = $to.node($to.depth);
+        if (!(0, _validation.canMoveToIndex)(destParent, $to.index(), srcType)) {
+          return tr;
+        }
         var convertedNode = transformNested(nodeCopy, destType).content;
         tr.delete(start, end); // delete the content from the original position
         mappedTo = tr.mapping.map(to);

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

@@ -15,9 +15,10 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _dragHandle = require("../ui/drag-handle");
 var _dropTarget = require("../ui/drop-target");
 var _mouseMoveWrapper = require("../ui/mouse-move-wrapper");
+var _validation = require("../utils/validation");
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
 var NESTED_DEPTH = (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? 100 : 0;
-var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage) {
+var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage, activeNodeType) {
   var decs = [];
   unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
@@ -25,8 +26,9 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
   var decorationState = [];
   var prevNode;
   var state = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24372') ? newState : oldState;
-  state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, _parent, index) {
+  state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
     var depth = 0;
+    var nodeType = newState.doc.type.schema.nodes[activeNodeType];
     if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
       if (node.isInline) {
@@ -35,6 +37,12 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       if (IGNORE_NODES.includes(node.type.name)) {
         return true; //skip over, don't consider it a valid depth
       }
+      var canDrop = parent && 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) {
+        return false; //not valid pos, so nested not valid either
+      }
       decorationState.push({
         id: pos,
         pos: pos

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

@@ -94,7 +94,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode4, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled === null) {
           if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
@@ -275,7 +275,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             // Add drop targets when node is being dragged
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             if (shouldUpdateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
-              var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api, formatMessage),
+              var _meta$activeNode2;
+              var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api, formatMessage, meta === null || meta === void 0 || (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType),
                 _decs2 = _dropTargetDecoration.decs,
                 updatedDecorationState = _dropTargetDecoration.decorationState;
               decorationState = updatedDecorationState;
@@ -300,7 +301,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             var shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
             if (shouldShowDragTarget || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
-              var _dropTargetDecoration2 = (0, _decorations.dropTargetDecorations)(oldState, newState, api, formatMessage),
+              var _meta$activeNode3;
+              var _dropTargetDecoration2 = (0, _decorations.dropTargetDecorations)(oldState, newState, api, formatMessage, meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.nodeType),
                 _decs3 = _dropTargetDecoration2.decs,
                 _updatedDecorationState = _dropTargetDecoration2.decorationState;
               decorationState = _updatedDecorationState;
@@ -361,7 +363,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         return {
           decorations: decorations,
           decorationState: decorationState,
-          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode2 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode2 !== void 0 ? _meta$activeNode2 : mappedActiveNodePos,
+          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode4 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode4 !== void 0 ? _meta$activeNode4 : mappedActiveNodePos,
           isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
           editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,

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

@@ -90,30 +90,15 @@ var extendedHoverZoneNested = (0, _react.css)({
     display: 'none'
   }
 });
-var paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
-var paragraphWithCursorTarget = '+ p > .cursor-target';
 var paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
 var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
 var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
 var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
-var withoutInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, "))"), {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-  display: 'none !important'
-}));
 var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(paragraphWithPlaceholder, ")"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   display: 'none !important'
 }));
 
-/**
- * Please do not change change transform to display:none, or visibility:hidden
- * Otherwise it might break composition input for Chrome
- * https://product-fabric.atlassian.net/browse/ED-24136
- */
-var withoutInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, ")) ").concat(dragHandleSelector), {
-  transform: 'scale(0)'
-}));
-
 /**
  * Please do not change change transform to display:none, or visibility:hidden
  * Otherwise it might break composition input for Chrome
@@ -141,14 +126,10 @@ var withMediaSingleStyleFix = (0, _react.css)((0, _defineProperty2.default)({},
   cursor: 'pointer'
 }));
 var getTextNodeStyle = function getTextNodeStyle() {
-  if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23868')) {
-    return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
-  } else {
-    return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withoutInlineNodeStyleWithChromeFix : withoutInlineNodeStyle;
-  }
+  return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles, (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23932') && withDeleteLinesStyleFix, (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24005') && withMediaSingleStyleFix]
+    styles: [globalStyles, (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
   });
 };

package/dist/cjs/utils/validation.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.canMoveToIndex = canMoveToIndex;
+function canMoveToIndex(destParent, indexIntoParent, srcType) {
+  return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcType);
+}

package/dist/es2019/commands/move-node.js

@@ -7,10 +7,12 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { DIRECTION } from '../consts';
 import { key } from '../pm-plugins/main';
 import { selectNode } from '../utils';
+import { canMoveToIndex } from '../utils/validation';
 function transformNested(nodeCopy, destType) {
-  const firstChild = nodeCopy.content.firstChild;
-  if (firstChild && firstChild.type.name === 'nestedExpand' && destType === 'doc') {
-    return transformSliceNestedExpandToExpand(nodeCopy, firstChild.type.schema);
+  const srcNode = nodeCopy.content.firstChild;
+  const schema = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.schema;
+  if (srcNode && schema && srcNode.type === schema.nodes.nestedExpand && destType === schema.nodes.doc) {
+    return transformSliceNestedExpandToExpand(nodeCopy, schema);
   }
   return nodeCopy;
 }
@@ -111,7 +113,14 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   let mappedTo;
   if (fg('platform_editor_elements_dnd_nested')) {
     const nodeCopy = tr.doc.slice(start, end, false); // cut the content
-    const destType = tr.doc.resolve(to).node().type.name;
+    const $to = tr.doc.resolve(to);
+    const $from = tr.doc.resolve(start);
+    const destType = $to.node().type;
+    const srcType = $from.node().child($from.index()).type;
+    const destParent = $to.node($to.depth);
+    if (!canMoveToIndex(destParent, $to.index(), srcType)) {
+      return tr;
+    }
     const convertedNode = transformNested(nodeCopy, destType).content;
     tr.delete(start, end); // delete the content from the original position
     mappedTo = tr.mapping.map(to);

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

@@ -7,9 +7,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
+import { canMoveToIndex } from '../utils/validation';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
 const NESTED_DEPTH = fg('platform_editor_elements_dnd_nested') ? 100 : 0;
-export const dropTargetDecorations = (oldState, newState, api, formatMessage) => {
+export const dropTargetDecorations = (oldState, newState, api, formatMessage, activeNodeType) => {
   const decs = [];
   unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
@@ -17,8 +18,9 @@ export const dropTargetDecorations = (oldState, newState, api, formatMessage) =>
   const decorationState = [];
   let prevNode;
   const state = fg('platform_editor_element_drag_and_drop_ed_24372') ? newState : oldState;
-  state.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, _parent, index) => {
+  state.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, parent, index) => {
     let depth = 0;
+    const nodeType = newState.doc.type.schema.nodes[activeNodeType];
     if (fg('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
       if (node.isInline) {
@@ -27,6 +29,12 @@ export const dropTargetDecorations = (oldState, newState, api, formatMessage) =>
       if (IGNORE_NODES.includes(node.type.name)) {
         return true; //skip over, don't consider it a valid depth
       }
+      const canDrop = parent && 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) {
+        return false; //not valid pos, so nested not valid either
+      }
       decorationState.push({
         id: pos,
         pos

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

@@ -88,7 +88,7 @@ export const createPlugin = (api, getIntl) => {
         return initialState;
       },
       apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode4, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled === null) {
           if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
@@ -262,10 +262,11 @@ export const createPlugin = (api, getIntl) => {
             // Add drop targets when node is being dragged
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             if (shouldUpdateDropTargets || isBlocksDragTargetDebug()) {
+              var _meta$activeNode2;
               const {
                 decs,
                 decorationState: updatedDecorationState
-              } = dropTargetDecorations(oldState, newState, api, formatMessage);
+              } = dropTargetDecorations(oldState, newState, api, formatMessage, meta === null || meta === void 0 ? void 0 : (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType);
               decorationState = updatedDecorationState;
               decorations = decorations.add(newState.doc, decs);
             }
@@ -289,10 +290,11 @@ export const createPlugin = (api, getIntl) => {
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             const shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
             if (shouldShowDragTarget || isBlocksDragTargetDebug()) {
+              var _meta$activeNode3;
               const {
                 decs,
                 decorationState: updatedDecorationState
-              } = dropTargetDecorations(oldState, newState, api, formatMessage);
+              } = dropTargetDecorations(oldState, newState, api, formatMessage, meta === null || meta === void 0 ? void 0 : (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.nodeType);
               decorationState = updatedDecorationState;
               decorations = decorations.add(newState.doc, decs);
             }
@@ -350,7 +352,7 @@ export const createPlugin = (api, getIntl) => {
         return {
           decorations,
           decorationState,
-          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode2 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode2 !== void 0 ? _meta$activeNode2 : mappedActiveNodePos,
+          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode4 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode4 !== void 0 ? _meta$activeNode4 : mappedActiveNodePos,
           isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
           editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,

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

@@ -81,21 +81,10 @@ const extendedHoverZoneNested = css({
     display: 'none'
   }
 });
-const paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
-const paragraphWithCursorTarget = '+ p > .cursor-target';
 const paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
 const paragraphWithPlaceholder = '+ p > .placeholder-decoration';
 const dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
 const dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
-const withoutInlineNodeStyle = css({
-  // Currently, we are hiding the drag handle container by checking if the paragraph has a trailing break and no cursor target
-  // TODO ED-23827 add a classname to empty paragraphs for easier targeting
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithTrailingBreak}):not(:has(${paragraphWithCursorTarget}))`]: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    display: 'none !important'
-  }
-});
 const withInlineNodeStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   [`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithTrailingBreakAsOnlyChild}), .ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithPlaceholder})`]: {
@@ -104,20 +93,6 @@ const withInlineNodeStyle = css({
   }
 });
 
-/**
- * Please do not change change transform to display:none, or visibility:hidden
- * Otherwise it might break composition input for Chrome
- * https://product-fabric.atlassian.net/browse/ED-24136
- */
-const withoutInlineNodeStyleWithChromeFix = css({
-  // Currently, we are hiding the drag handle container by checking if the paragraph has a trailing break and no cursor target
-  // TODO ED-23827 add a classname to empty paragraphs for easier targeting
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [`${dragHandleContainer}:has(${paragraphWithTrailingBreak}):not(:has(${paragraphWithCursorTarget})) ${dragHandleSelector}`]: {
-    transform: 'scale(0)'
-  }
-});
-
 /**
  * Please do not change change transform to display:none, or visibility:hidden
  * Otherwise it might break composition input for Chrome
@@ -155,14 +130,10 @@ const withMediaSingleStyleFix = css({
   }
 });
 const getTextNodeStyle = () => {
-  if (fg('platform.editor.elements.drag-and-drop-ed-23868')) {
-    return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
-  } else {
-    return fg('platform_editor_element_controls_chrome_input_fix') ? withoutInlineNodeStyleWithChromeFix : withoutInlineNodeStyle;
-  }
+  return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
-    styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), fg('platform.editor.elements.drag-and-drop-ed-23932') && withDeleteLinesStyleFix, fg('platform_editor_element_drag_and_drop_ed_24005') && withMediaSingleStyleFix]
+    styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
   });
 };

package/dist/es2019/utils/validation.js

@@ -0,0 +1,3 @@
+export function canMoveToIndex(destParent, indexIntoParent, srcType) {
+  return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcType);
+}

package/dist/esm/commands/move-node.js

@@ -10,10 +10,12 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { DIRECTION } from '../consts';
 import { key } from '../pm-plugins/main';
 import { selectNode } from '../utils';
+import { canMoveToIndex } from '../utils/validation';
 function transformNested(nodeCopy, destType) {
-  var firstChild = nodeCopy.content.firstChild;
-  if (firstChild && firstChild.type.name === 'nestedExpand' && destType === 'doc') {
-    return transformSliceNestedExpandToExpand(nodeCopy, firstChild.type.schema);
+  var srcNode = nodeCopy.content.firstChild;
+  var schema = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.schema;
+  if (srcNode && schema && srcNode.type === schema.nodes.nestedExpand && destType === schema.nodes.doc) {
+    return transformSliceNestedExpandToExpand(nodeCopy, schema);
   }
   return nodeCopy;
 }
@@ -112,7 +114,14 @@ export var moveNode = function moveNode(api) {
       var mappedTo;
       if (fg('platform_editor_elements_dnd_nested')) {
         var nodeCopy = tr.doc.slice(start, end, false); // cut the content
-        var destType = tr.doc.resolve(to).node().type.name;
+        var $to = tr.doc.resolve(to);
+        var $from = tr.doc.resolve(start);
+        var destType = $to.node().type;
+        var srcType = $from.node().child($from.index()).type;
+        var destParent = $to.node($to.depth);
+        if (!canMoveToIndex(destParent, $to.index(), srcType)) {
+          return tr;
+        }
         var convertedNode = transformNested(nodeCopy, destType).content;
         tr.delete(start, end); // delete the content from the original position
         mappedTo = tr.mapping.map(to);

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

@@ -8,9 +8,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
+import { canMoveToIndex } from '../utils/validation';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
 var NESTED_DEPTH = fg('platform_editor_elements_dnd_nested') ? 100 : 0;
-export var dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage) {
+export var dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage, activeNodeType) {
   var decs = [];
   unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
@@ -18,8 +19,9 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
   var decorationState = [];
   var prevNode;
   var state = fg('platform_editor_element_drag_and_drop_ed_24372') ? newState : oldState;
-  state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, _parent, index) {
+  state.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
     var depth = 0;
+    var nodeType = newState.doc.type.schema.nodes[activeNodeType];
     if (fg('platform_editor_elements_dnd_nested')) {
       depth = newState.doc.resolve(pos).depth;
       if (node.isInline) {
@@ -28,6 +30,12 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
       if (IGNORE_NODES.includes(node.type.name)) {
         return true; //skip over, don't consider it a valid depth
       }
+      var canDrop = parent && 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) {
+        return false; //not valid pos, so nested not valid either
+      }
       decorationState.push({
         id: pos,
         pos: pos

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

@@ -87,7 +87,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode4, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled === null) {
           if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
@@ -268,7 +268,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
             // Add drop targets when node is being dragged
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             if (shouldUpdateDropTargets || isBlocksDragTargetDebug()) {
-              var _dropTargetDecoration = dropTargetDecorations(oldState, newState, api, formatMessage),
+              var _meta$activeNode2;
+              var _dropTargetDecoration = dropTargetDecorations(oldState, newState, api, formatMessage, meta === null || meta === void 0 || (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType),
                 _decs2 = _dropTargetDecoration.decs,
                 updatedDecorationState = _dropTargetDecoration.decorationState;
               decorationState = updatedDecorationState;
@@ -293,7 +294,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             var shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
             if (shouldShowDragTarget || isBlocksDragTargetDebug()) {
-              var _dropTargetDecoration2 = dropTargetDecorations(oldState, newState, api, formatMessage),
+              var _meta$activeNode3;
+              var _dropTargetDecoration2 = dropTargetDecorations(oldState, newState, api, formatMessage, meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.nodeType),
                 _decs3 = _dropTargetDecoration2.decs,
                 _updatedDecorationState = _dropTargetDecoration2.decorationState;
               decorationState = _updatedDecorationState;
@@ -354,7 +356,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
         return {
           decorations: decorations,
           decorationState: decorationState,
-          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode2 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode2 !== void 0 ? _meta$activeNode2 : mappedActiveNodePos,
+          activeNode: isEmptyDoc || isHandleMissing ? null : (_meta$activeNode4 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode4 !== void 0 ? _meta$activeNode4 : mappedActiveNodePos,
           isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging,
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
           editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,

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

@@ -82,30 +82,15 @@ var extendedHoverZoneNested = css({
     display: 'none'
   }
 });
-var paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
-var paragraphWithCursorTarget = '+ p > .cursor-target';
 var paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
 var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
 var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
 var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
-var withoutInlineNodeStyle = css(_defineProperty({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, "))"), {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-  display: 'none !important'
-}));
 var withInlineNodeStyle = css(_defineProperty({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(paragraphWithPlaceholder, ")"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   display: 'none !important'
 }));
 
-/**
- * Please do not change change transform to display:none, or visibility:hidden
- * Otherwise it might break composition input for Chrome
- * https://product-fabric.atlassian.net/browse/ED-24136
- */
-var withoutInlineNodeStyleWithChromeFix = css(_defineProperty({}, "".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, ")) ").concat(dragHandleSelector), {
-  transform: 'scale(0)'
-}));
-
 /**
  * Please do not change change transform to display:none, or visibility:hidden
  * Otherwise it might break composition input for Chrome
@@ -133,14 +118,10 @@ var withMediaSingleStyleFix = css(_defineProperty({}, '.ProseMirror.ua-firefox .
   cursor: 'pointer'
 }));
 var getTextNodeStyle = function getTextNodeStyle() {
-  if (fg('platform.editor.elements.drag-and-drop-ed-23868')) {
-    return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
-  } else {
-    return fg('platform_editor_element_controls_chrome_input_fix') ? withoutInlineNodeStyleWithChromeFix : withoutInlineNodeStyle;
-  }
+  return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), fg('platform.editor.elements.drag-and-drop-ed-23932') && withDeleteLinesStyleFix, fg('platform_editor_element_drag_and_drop_ed_24005') && withMediaSingleStyleFix]
+    styles: [globalStyles, fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
   });
 };

package/dist/esm/utils/validation.js

@@ -0,0 +1,3 @@
+export function canMoveToIndex(destParent, indexIntoParent, srcType) {
+  return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcType);
+}

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

@@ -3,7 +3,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../types';
-export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage']) => {
+export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNodeType: string) => {
     decs: Decoration[];
     decorationState: {
         id: number;

package/dist/types/utils/validation.d.ts

@@ -0,0 +1,2 @@
+import type { NodeType, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare function canMoveToIndex(destParent: PMNode, indexIntoParent: number, srcType: NodeType): boolean;

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

@@ -3,7 +3,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../types';
-export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage']) => {
+export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNodeType: string) => {
     decs: Decoration[];
     decorationState: {
         id: number;

package/dist/types-ts4.5/utils/validation.d.ts

@@ -0,0 +1,2 @@
+import type { NodeType, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare function canMoveToIndex(destParent: PMNode, indexIntoParent: number, srcType: NodeType): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.10.2",
+	"version": "1.10.3",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,13 +41,13 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.9.0",
+		"@atlaskit/icon": "^22.10.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.2.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",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -98,9 +98,6 @@
 		"platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq": {
 			"type": "boolean"
 		},
-		"platform.editor.elements.drag-and-drop-ed-23868": {
-			"type": "boolean"
-		},
 		"platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2": {
 			"type": "boolean"
 		},
@@ -126,9 +123,6 @@
 		"platform_editor_elements_drag_and_drop_ed_23189": {
 			"type": "boolean"
 		},
-		"platform.editor.elements.drag-and-drop-ed-23932": {
-			"type": "boolean"
-		},
 		"platform_editor_elements_dnd_ed_23674": {
 			"type": "boolean"
 		},
@@ -147,9 +141,6 @@
 		"platform_editor_element_drag_and_drop_ed_23896": {
 			"type": "boolean"
 		},
-		"platform_editor_element_drag_and_drop_ed_24005": {
-			"type": "boolean"
-		},
 		"platform_editor_element_controls_chrome_input_fix": {
 			"type": "boolean"
 		},