@atlaskit/editor-plugin-block-controls 1.4.33 → 1.4.35

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.35
+
+### Patch Changes
+
+- [#115170](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115170)
+  [`d3d39a486f0d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d3d39a486f0d9) -
+  Fix drag handle position when deleting a paragraph
+- [#115170](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115170)
+  [`108a85e557e41`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/108a85e557e41) -
+  Hide drag handle on empty paragraph
+
+## 1.4.34
+
+### Patch Changes
+
+- [#115110](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115110)
+  [`cc8cc2bbe88f8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cc8cc2bbe88f8) -
+  Fix a regression where drag and drop a node at itself duplicates the node
+- [#114841](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114841)
+  [`2ea1a74c41971`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2ea1a74c41971) -
+  Fix drag handle position when change from paragraph to blockQuote
+- [#115110](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115110)
+  [`bfa2f902f0cb3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bfa2f902f0cb3) -
+  change doc size limit to child count
+
 ## 1.4.33
 
 ### Patch Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.nodeDecorations = exports.mouseMoveWrapperDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = void 0;
+exports.nodeDecorations = exports.mouseMoveWrapperDecorations = exports.emptyParagraphNodeDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -69,10 +69,19 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     decorationState: decorationState
   };
 };
+var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
+  var anchorName = "--node-anchor-paragraph-0";
+  var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
+  return _view.Decoration.node(0, 2, (0, _defineProperty2.default)({
+    style: style
+  }, 'data-drag-handler-anchor-name', anchorName), {
+    type: 'node-decoration'
+  });
+};
 var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState) {
   var decs = [];
   newState.doc.descendants(function (node, pos, _parent, index) {
-    var _Decoration$node;
+    var _Decoration$node2;
     var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
     var style;
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
@@ -80,9 +89,11 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     } else {
       style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '');
     }
-    decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
+    decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node2 = {
       style: style
-    }, (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-node-type', node.type.name), _Decoration$node)));
+    }, (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), _Decoration$node2), {
+      type: 'node-decoration'
+    }));
     return false;
   });
   return decs;

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

@@ -78,13 +78,10 @@ var initialState = {
   isMenuOpen: false,
   editorHeight: 0,
   isResizerResizing: false,
-  isDocSizeLimitEnabled: false,
+  isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
-if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
-  initialState.isDocSizeLimitEnabled = true;
-}
-var DRAG_AND_DROP_DOC_SIZE_LIMIT = 20000;
+var DRAG_AND_DROP_DOC_SIZE_LIMIT = 50;
 var createPlugin = exports.createPlugin = function createPlugin(api) {
   return new _safePlugin.SafePlugin({
     key: key,
@@ -94,7 +91,14 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
       },
       apply: function apply(tr, currentState, oldState, newState) {
         var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$isPMDragging;
-        if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
+        if (initialState.isDocSizeLimitEnabled === null) {
+          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
+            initialState.isDocSizeLimitEnabled = true;
+          } else {
+            initialState.isDocSizeLimitEnabled = false;
+          }
+        }
+        if (initialState.isDocSizeLimitEnabled && newState.doc.childCount > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
         var activeNode = currentState.activeNode,
@@ -166,10 +170,18 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           // Note: Quite often the handle is not in the right position after a node is moved
           // it is safer for now to not show it when a node is moved
           if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
-            var newActiveNode = activeNode && tr.doc.nodeAt(tr.mapping.map(activeNode.pos));
+            var mappedPosisiton = tr.mapping.map(activeNode.pos);
+            var prevMappedPos = oldState.tr.mapping.map(activeNode.pos);
+
+            // 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
+            if (mappedPosisiton === prevMappedPos + 1) {
+              mappedPosisiton = prevMappedPos;
+            }
+            var newActiveNode = tr.doc.nodeAt(mappedPosisiton);
             var nodeType = activeNode.nodeType;
             var anchorName = activeNode.anchorName;
-            if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
+            if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType) {
               nodeType = newActiveNode.type.name;
               anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
             }
@@ -224,6 +236,14 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         if (tr.docChanged && !redrawDecorations) {
           decorations = decorations.map(tr.mapping, tr.doc);
         }
+        var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
+        var hasNodeDecoration = decorations.find().some(function (_ref11) {
+          var spec = _ref11.spec;
+          return spec.type === 'node-decoration';
+        });
+        if (!hasNodeDecoration && isEmptyDoc) {
+          decorations = decorations.add(newState.doc, [(0, _decorations.emptyParagraphNodeDecorations)()]);
+        }
 
         // Map active node position when the document changes
         var mappedActiveNodePos = tr.docChanged && activeNode ? {
@@ -231,7 +251,6 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           anchorName: activeNode.anchorName,
           nodeType: activeNode.nodeType
         } : activeNode;
-        var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
         return {
           decorations: decorations,
           decorationState: decorationState,
@@ -256,12 +275,12 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
       },
       handleDOMEvents: {
         drop: function drop(view, event) {
-          var _pluginState$activeNo;
           // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
           // this duplicates the an empty version of the node it was dropping,
           // Adding some check here to prevent that if drop position is within activeNode
           var state = view.state,
-            dispatch = view.dispatch;
+            dispatch = view.dispatch,
+            dragging = view.dragging;
           var pluginState = key.getState(state);
           if (pluginState !== null && pluginState !== void 0 && pluginState.isPMDragging) {
             dispatch(state.tr.setMeta(key, {
@@ -271,9 +290,11 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
             return false;
           }
-          var node = view.nodeDOM(pluginState === null || pluginState === void 0 || (_pluginState$activeNo = pluginState.activeNode) === null || _pluginState$activeNo === void 0 ? void 0 : _pluginState$activeNo.pos);
-          var isActiveNode = event.target === node;
-          if (isActiveNode) {
+          // Currently we can only drag one node at a time
+          // so we only need to check first child
+          var draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
+          var activeNode = state.tr.doc.nodeAt(pluginState.activeNode.pos);
+          if (draggable === activeNode) {
             // Prevent the default drop behavior if the position is within the activeNode
             event.preventDefault();
             return true;

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

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GlobalStylesWrapper = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /** @jsx jsx */
@@ -32,13 +34,18 @@ var extendedHoverZone = (0, _react.css)({
     display: 'none'
   }
 });
-var globalStyles = (0, _react.css)({
+var paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
+var paragraphWithCursorTarget = '+ p > .cursor-target';
+var globalStyles = (0, _react.css)((0, _defineProperty2.default)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror-widget:first-child + *': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     marginTop: '0 !important'
   }
-});
+}, ".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 GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
     styles: [globalStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') && extendedHoverZone]

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

@@ -61,6 +61,16 @@ export const dropTargetDecorations = (oldState, newState, api) => {
     decorationState
   };
 };
+export const emptyParagraphNodeDecorations = () => {
+  const anchorName = `--node-anchor-paragraph-0`;
+  const style = `anchor-name: ${anchorName}; margin-top: 0px;`;
+  return Decoration.node(0, 2, {
+    style,
+    ['data-drag-handler-anchor-name']: anchorName
+  }, {
+    type: 'node-decoration'
+  });
+};
 export const nodeDecorations = newState => {
   const decs = [];
   newState.doc.descendants((node, pos, _parent, index) => {
@@ -75,6 +85,8 @@ export const nodeDecorations = newState => {
       style,
       ['data-drag-handler-anchor-name']: anchorName,
       ['data-drag-handler-node-type']: node.type.name
+    }, {
+      type: 'node-decoration'
     }));
     return false;
   });

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

@@ -9,7 +9,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { dragHandleDecoration, dropTargetDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
+import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
 import { handleMouseOver } from './handle-mouse-over';
 export const key = new PluginKey('blockControls');
 const destroyFn = api => {
@@ -72,13 +72,10 @@ const initialState = {
   isMenuOpen: false,
   editorHeight: 0,
   isResizerResizing: false,
-  isDocSizeLimitEnabled: false,
+  isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
-if (getBooleanFF('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
-  initialState.isDocSizeLimitEnabled = true;
-}
-const DRAG_AND_DROP_DOC_SIZE_LIMIT = 20000;
+const DRAG_AND_DROP_DOC_SIZE_LIMIT = 50;
 export const createPlugin = api => {
   return new SafePlugin({
     key,
@@ -88,7 +85,14 @@ export const createPlugin = api => {
       },
       apply(tr, currentState, oldState, newState) {
         var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$isPMDragging;
-        if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
+        if (initialState.isDocSizeLimitEnabled === null) {
+          if (getBooleanFF('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
+            initialState.isDocSizeLimitEnabled = true;
+          } else {
+            initialState.isDocSizeLimitEnabled = false;
+          }
+        }
+        if (initialState.isDocSizeLimitEnabled && newState.doc.childCount > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
         let {
@@ -157,10 +161,18 @@ export const createPlugin = api => {
           // Note: Quite often the handle is not in the right position after a node is moved
           // it is safer for now to not show it when a node is moved
           if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
-            const newActiveNode = activeNode && tr.doc.nodeAt(tr.mapping.map(activeNode.pos));
+            let mappedPosisiton = tr.mapping.map(activeNode.pos);
+            const prevMappedPos = oldState.tr.mapping.map(activeNode.pos);
+
+            // 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
+            if (mappedPosisiton === prevMappedPos + 1) {
+              mappedPosisiton = prevMappedPos;
+            }
+            const newActiveNode = tr.doc.nodeAt(mappedPosisiton);
             let nodeType = activeNode.nodeType;
             let anchorName = activeNode.anchorName;
-            if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
+            if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType) {
               nodeType = newActiveNode.type.name;
               anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
             }
@@ -215,6 +227,13 @@ export const createPlugin = api => {
         if (tr.docChanged && !redrawDecorations) {
           decorations = decorations.map(tr.mapping, tr.doc);
         }
+        const isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
+        const hasNodeDecoration = decorations.find().some(({
+          spec
+        }) => spec.type === 'node-decoration');
+        if (!hasNodeDecoration && isEmptyDoc) {
+          decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
+        }
 
         // Map active node position when the document changes
         const mappedActiveNodePos = tr.docChanged && activeNode ? {
@@ -222,7 +241,6 @@ export const createPlugin = api => {
           anchorName: activeNode.anchorName,
           nodeType: activeNode.nodeType
         } : activeNode;
-        const isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
         return {
           decorations,
           decorationState,
@@ -247,13 +265,13 @@ export const createPlugin = api => {
       },
       handleDOMEvents: {
         drop(view, event) {
-          var _pluginState$activeNo;
           // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
           // this duplicates the an empty version of the node it was dropping,
           // Adding some check here to prevent that if drop position is within activeNode
           const {
             state,
-            dispatch
+            dispatch,
+            dragging
           } = view;
           const pluginState = key.getState(state);
           if (pluginState !== null && pluginState !== void 0 && pluginState.isPMDragging) {
@@ -264,9 +282,11 @@ export const createPlugin = api => {
           if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
             return false;
           }
-          const node = view.nodeDOM(pluginState === null || pluginState === void 0 ? void 0 : (_pluginState$activeNo = pluginState.activeNode) === null || _pluginState$activeNo === void 0 ? void 0 : _pluginState$activeNo.pos);
-          const isActiveNode = event.target === node;
-          if (isActiveNode) {
+          // Currently we can only drag one node at a time
+          // so we only need to check first child
+          const draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
+          const activeNode = state.tr.doc.nodeAt(pluginState.activeNode.pos);
+          if (draggable === activeNode) {
             // Prevent the default drop behavior if the position is within the activeNode
             event.preventDefault();
             return true;

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

@@ -25,11 +25,20 @@ const extendedHoverZone = css({
     display: 'none'
   }
 });
+const paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
+const paragraphWithCursorTarget = '+ p > .cursor-target';
 const globalStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror-widget:first-child + *': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     marginTop: '0 !important'
+  },
+  // 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'
   }
 });
 export const GlobalStylesWrapper = () => {

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

@@ -62,10 +62,19 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
     decorationState: decorationState
   };
 };
+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: 'node-decoration'
+  });
+};
 export var nodeDecorations = function nodeDecorations(newState) {
   var decs = [];
   newState.doc.descendants(function (node, pos, _parent, index) {
-    var _Decoration$node;
+    var _Decoration$node2;
     var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
     var style;
     if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
@@ -73,9 +82,11 @@ export var nodeDecorations = function nodeDecorations(newState) {
     } else {
       style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '');
     }
-    decs.push(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
+    decs.push(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node2 = {
       style: style
-    }, _defineProperty(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node, 'data-drag-handler-node-type', node.type.name), _Decoration$node)));
+    }, _defineProperty(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), _Decoration$node2), {
+      type: 'node-decoration'
+    }));
     return false;
   });
   return decs;

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

@@ -10,7 +10,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { dragHandleDecoration, dropTargetDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
+import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
 import { handleMouseOver } from './handle-mouse-over';
 export var key = new PluginKey('blockControls');
 var destroyFn = function destroyFn(api) {
@@ -71,13 +71,10 @@ var initialState = {
   isMenuOpen: false,
   editorHeight: 0,
   isResizerResizing: false,
-  isDocSizeLimitEnabled: false,
+  isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
-if (getBooleanFF('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
-  initialState.isDocSizeLimitEnabled = true;
-}
-var DRAG_AND_DROP_DOC_SIZE_LIMIT = 20000;
+var DRAG_AND_DROP_DOC_SIZE_LIMIT = 50;
 export var createPlugin = function createPlugin(api) {
   return new SafePlugin({
     key: key,
@@ -87,7 +84,14 @@ export var createPlugin = function createPlugin(api) {
       },
       apply: function apply(tr, currentState, oldState, newState) {
         var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$isPMDragging;
-        if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
+        if (initialState.isDocSizeLimitEnabled === null) {
+          if (getBooleanFF('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
+            initialState.isDocSizeLimitEnabled = true;
+          } else {
+            initialState.isDocSizeLimitEnabled = false;
+          }
+        }
+        if (initialState.isDocSizeLimitEnabled && newState.doc.childCount > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
         var activeNode = currentState.activeNode,
@@ -159,10 +163,18 @@ export var createPlugin = function createPlugin(api) {
           // Note: Quite often the handle is not in the right position after a node is moved
           // it is safer for now to not show it when a node is moved
           if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
-            var newActiveNode = activeNode && tr.doc.nodeAt(tr.mapping.map(activeNode.pos));
+            var mappedPosisiton = tr.mapping.map(activeNode.pos);
+            var prevMappedPos = oldState.tr.mapping.map(activeNode.pos);
+
+            // 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
+            if (mappedPosisiton === prevMappedPos + 1) {
+              mappedPosisiton = prevMappedPos;
+            }
+            var newActiveNode = tr.doc.nodeAt(mappedPosisiton);
             var nodeType = activeNode.nodeType;
             var anchorName = activeNode.anchorName;
-            if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
+            if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType) {
               nodeType = newActiveNode.type.name;
               anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
             }
@@ -217,6 +229,14 @@ export var createPlugin = function createPlugin(api) {
         if (tr.docChanged && !redrawDecorations) {
           decorations = decorations.map(tr.mapping, tr.doc);
         }
+        var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
+        var hasNodeDecoration = decorations.find().some(function (_ref11) {
+          var spec = _ref11.spec;
+          return spec.type === 'node-decoration';
+        });
+        if (!hasNodeDecoration && isEmptyDoc) {
+          decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
+        }
 
         // Map active node position when the document changes
         var mappedActiveNodePos = tr.docChanged && activeNode ? {
@@ -224,7 +244,6 @@ export var createPlugin = function createPlugin(api) {
           anchorName: activeNode.anchorName,
           nodeType: activeNode.nodeType
         } : activeNode;
-        var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
         return {
           decorations: decorations,
           decorationState: decorationState,
@@ -249,12 +268,12 @@ export var createPlugin = function createPlugin(api) {
       },
       handleDOMEvents: {
         drop: function drop(view, event) {
-          var _pluginState$activeNo;
           // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
           // this duplicates the an empty version of the node it was dropping,
           // Adding some check here to prevent that if drop position is within activeNode
           var state = view.state,
-            dispatch = view.dispatch;
+            dispatch = view.dispatch,
+            dragging = view.dragging;
           var pluginState = key.getState(state);
           if (pluginState !== null && pluginState !== void 0 && pluginState.isPMDragging) {
             dispatch(state.tr.setMeta(key, {
@@ -264,9 +283,11 @@ export var createPlugin = function createPlugin(api) {
           if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
             return false;
           }
-          var node = view.nodeDOM(pluginState === null || pluginState === void 0 || (_pluginState$activeNo = pluginState.activeNode) === null || _pluginState$activeNo === void 0 ? void 0 : _pluginState$activeNo.pos);
-          var isActiveNode = event.target === node;
-          if (isActiveNode) {
+          // Currently we can only drag one node at a time
+          // so we only need to check first child
+          var draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
+          var activeNode = state.tr.doc.nodeAt(pluginState.activeNode.pos);
+          if (draggable === activeNode) {
             // Prevent the default drop behavior if the position is within the activeNode
             event.preventDefault();
             return true;

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
@@ -25,13 +26,18 @@ var extendedHoverZone = css({
     display: 'none'
   }
 });
-var globalStyles = css({
+var paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
+var paragraphWithCursorTarget = '+ p > .cursor-target';
+var globalStyles = css(_defineProperty({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror-widget:first-child + *': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     marginTop: '0 !important'
   }
-});
+}, ".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'
+}));
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
     styles: [globalStyles, getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') && extendedHoverZone]

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

@@ -9,6 +9,7 @@ export declare const dropTargetDecorations: (oldState: EditorState, newState: Ed
         pos: number;
     }[];
 };
+export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const nodeDecorations: (newState: EditorState) => Decoration[];
 /**
  * Setting up decorations around each node to track mousemove events into each node

package/dist/types/types.d.ts

@@ -16,7 +16,7 @@ export interface PluginState {
         nodeType: string;
     } | null;
     isResizerResizing: boolean;
-    isDocSizeLimitEnabled: boolean;
+    isDocSizeLimitEnabled: boolean | null;
     /**
      * is dragging the node without using drag handle, i,e, native prosemirror DnD
      */

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

@@ -9,6 +9,7 @@ export declare const dropTargetDecorations: (oldState: EditorState, newState: Ed
         pos: number;
     }[];
 };
+export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const nodeDecorations: (newState: EditorState) => Decoration[];
 /**
  * Setting up decorations around each node to track mousemove events into each node

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

@@ -16,7 +16,7 @@ export interface PluginState {
         nodeType: string;
     } | null;
     isResizerResizing: boolean;
-    isDocSizeLimitEnabled: boolean;
+    isDocSizeLimitEnabled: boolean | null;
     /**
      * is dragging the node without using drag handle, i,e, native prosemirror DnD
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.4.33",
+	"version": "1.4.35",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",