@atlaskit/editor-plugin-block-controls 3.1.4 → 3.1.6

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.1.6
+
+### Patch Changes
+
+- [#120473](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120473)
+  [`6d0a06b4b6689`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d0a06b4b6689) -
+  Put DnD shift-select behind FG
+- [#119967](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119967)
+  [`9c072f388dcaa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9c072f388dcaa) -
+  Add check for selection before triggering quick insert, and move selection if not within target
+  node
+
+## 3.1.5
+
+### Patch Changes
+
+- [#119444](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119444)
+  [`853538e68d556`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/853538e68d556) -
+  Fix cancelled drag causing layout duplication and locked handle
+- Updated dependencies
+
 ## 3.1.4
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -142,7 +142,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7;
+      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8;
       if (!editorState) {
         return undefined;
       }
@@ -153,7 +153,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         isDragging: (_key$getState$isDragg = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
         isPMDragging: (_key$getState$isPMDra = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
         multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = _main.key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
-        isShiftDown: (_key$getState$isShift = (_key$getState7 = _main.key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined
+        isShiftDown: (_key$getState$isShift = (_key$getState7 = _main.key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
+        lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = _main.key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false
       };
     },
     contentComponent: function contentComponent(_ref7) {

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

@@ -13,11 +13,9 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _selection2 = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view2 = require("@atlaskit/editor-prosemirror/view");
-var _editorTables = require("@atlaskit/editor-tables");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
@@ -32,7 +30,8 @@ var _keymap = require("./keymap");
 var _activeAnchorTracker = require("./utils/active-anchor-tracker");
 var _analytics2 = require("./utils/analytics");
 var _anchorUtils = require("./utils/anchor-utils");
-var _selection3 = require("./utils/selection");
+var _getSelection = require("./utils/getSelection");
+var _selection2 = require("./utils/selection");
 var _transactions = require("./utils/transactions");
 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; }
@@ -96,7 +95,14 @@ var destroyFn = function destroyFn(api, editorView) {
             // If the TextSelection between the drag start and end has changed, the document has changed, and we should not reapply the last selection
             var expandedSelectionUnchanged = multiSelectDnD.textAnchor === tr.selection.anchor && multiSelectDnD.textHead === tr.selection.head;
             if (expandedSelectionUnchanged) {
-              tr.setSelection(_state.TextSelection.create(tr.doc, multiSelectDnD.userAnchor, multiSelectDnD.userHead));
+              var $anchor = tr.doc.resolve(multiSelectDnD.userAnchor);
+              var $head = tr.doc.resolve(multiSelectDnD.userHead);
+              if ($head.node() === $anchor.node()) {
+                var $from = $anchor.min($head);
+                (0, _getSelection.selectNode)(tr, $from.pos, $from.node().type.name);
+              } else {
+                tr.setSelection(_state.TextSelection.create(tr.doc, multiSelectDnD.userAnchor, multiSelectDnD.userHead));
+              }
             }
           }
           api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || _api$selection.commands.clearManualSelection()({
@@ -106,11 +112,12 @@ var destroyFn = function destroyFn(api, editorView) {
         var _ref5 = source.data,
           start = _ref5.start;
         // if no drop targets are rendered, assume that drop is invalid
-        if (location.current.dropTargets.length === 0) {
+        var lastDragCancelled = location.current.dropTargets.length === 0;
+        if (lastDragCancelled) {
           var _api$analytics2;
           var nodeTypes, hasSelectedMultipleNodes;
           if (isMultiSelect && api) {
-            var position = (0, _selection3.getSelectedSlicePosition)(start, tr, api);
+            var position = (0, _selection2.getSelectedSlicePosition)(start, tr, api);
             var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, position.from, position.to);
             nodeTypes = attributes.nodeTypes;
             hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
@@ -133,7 +140,8 @@ var destroyFn = function destroyFn(api, editorView) {
         }
         return tr.setMeta(key, _objectSpread(_objectSpread({}, tr.getMeta(key)), {}, {
           isDragging: false,
-          isPMDragging: false
+          isPMDragging: false,
+          lastDragCancelled: lastDragCancelled
         }));
       });
     }
@@ -151,14 +159,15 @@ var initialState = {
   isResizerResizing: false,
   isDocSizeLimitEnabled: null,
   isPMDragging: false,
-  multiSelectDnD: undefined
+  multiSelectDnD: undefined,
+  lastDragCancelled: false
 };
 var getDecorations = exports.getDecorations = function getDecorations(state) {
   var _key$getState;
   return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
 };
 var newApply = exports.newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
-  var _meta$multiSelectDnD, _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown;
+  var _meta$multiSelectDnD, _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
@@ -170,7 +179,8 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     isMenuOpen = currentState.isMenuOpen,
     menuTriggerBy = currentState.menuTriggerBy,
     isPMDragging = currentState.isPMDragging,
-    isShiftDown = currentState.isShiftDown;
+    isShiftDown = currentState.isShiftDown,
+    lastDragCancelled = currentState.lastDragCancelled;
   var isActiveNodeDeleted = false;
 
   // When steps exist, remap existing decorations, activeNode and multi select positions
@@ -326,11 +336,12 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
     multiSelectDnD: multiSelectDnD,
-    isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown
+    isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown,
+    lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled
   };
 };
 var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
-  var _meta$activeNode2, _meta$activeNode$hand2, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2;
+  var _meta$activeNode2, _meta$activeNode$hand2, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2, _meta$lastDragCancell2;
   var isNestedEnabled = flags.isNestedEnabled;
   var activeNode = currentState.activeNode,
     isMenuOpen = currentState.isMenuOpen,
@@ -338,7 +349,8 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
     editorWidthLeft = currentState.editorWidthLeft,
     editorWidthRight = currentState.editorWidthRight,
     isDragging = currentState.isDragging,
-    isPMDragging = currentState.isPMDragging;
+    isPMDragging = currentState.isPMDragging,
+    lastDragCancelled = currentState.lastDragCancelled;
   var decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing;
 
@@ -488,7 +500,8 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
     editorWidthRight: (_meta$editorWidthRigh2 = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh2 !== void 0 ? _meta$editorWidthRigh2 : currentState.editorWidthRight,
     isResizerResizing: isResizerResizing,
     isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
-    isPMDragging: (_meta$isPMDragging2 = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging2 !== void 0 ? _meta$isPMDragging2 : isPMDragging
+    isPMDragging: (_meta$isPMDragging2 = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging2 !== void 0 ? _meta$isPMDragging2 : isPMDragging,
+    lastDragCancelled: (_meta$lastDragCancell2 = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell2 !== void 0 ? _meta$lastDragCancell2 : lastDragCancelled
   };
 };
 var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI) {
@@ -533,26 +546,28 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
       },
       handleDOMEvents: {
         drop: function drop(view, event) {
-          var _event$target;
-          // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
-          // this duplicates 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,
-            dragging = view.dragging;
+          var _pluginState, _pluginState2, _pluginState3, _event$target;
+          // Prevent native DnD from triggering if we are in drag
+          var dispatch = view.dispatch,
+            dragging = view.dragging,
+            state = view.state;
+          var tr = state.tr;
           var pluginState = key.getState(state);
-          if (pluginState !== null && pluginState !== void 0 && pluginState.isPMDragging) {
-            dispatch(state.tr.setMeta(key, _objectSpread(_objectSpread({}, state.tr.getMeta(key)), {}, {
-              isPMDragging: false
+          var dndDragCancelled = (_pluginState = pluginState) === null || _pluginState === void 0 ? void 0 : _pluginState.lastDragCancelled;
+          if ((_pluginState2 = pluginState) !== null && _pluginState2 !== void 0 && _pluginState2.isPMDragging || dndDragCancelled && isMultiSelectEnabled) {
+            dispatch(tr.setMeta(key, _objectSpread(_objectSpread({}, tr.getMeta(key)), {}, {
+              isPMDragging: false,
+              lastDragCancelled: false
             })));
           }
-          if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
+          pluginState = key.getState(view.state);
+          if (!(event.target instanceof HTMLElement) || !((_pluginState3 = pluginState) !== null && _pluginState3 !== void 0 && _pluginState3.activeNode)) {
             return false;
           }
           // 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;
-          if ((draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn' && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
+          if (dndDragCancelled && isMultiSelectEnabled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn' && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
             // we prevent native DnD for layoutColumn to prevent single column layout.
             event.preventDefault();
             return false;
@@ -566,26 +581,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           var domPos = Math.max(view.posAtDOM(nodeElement, 0) - 1, 0);
           var nodeTarget = state.doc.nodeAt(domPos);
           var isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
-
-          // CellSelection doesn't expose true from/to positions, we need to query the ranges
-          var selectionRange = state.selection instanceof _editorTables.CellSelection ? state.selection.ranges.reduce(function (previousValue, currentValue, _currentIndex, _array) {
-            return {
-              $from: currentValue.$from.min(previousValue.$from),
-              $to: currentValue.$to.max(previousValue.$to)
-            };
-          }) : {
-            $from: state.selection.$from,
-            $to: state.selection.$to
-          };
-          var expandedSelection = (0, _selection2.expandSelectionBounds)(selectionRange.$from, selectionRange.$to);
-          var expandedAnchor = expandedSelection.$anchor;
-          var expandedHead = expandedSelection.$head;
-          var expandedSelectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
-          var expandedSelectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
-          var isInExpandedSelection = domPos >= expandedSelectionFrom && domPos < expandedSelectionTo;
-
-          // Prevent the default drop behavior if the position is within the activeNode or within the expanded selection when multiselect is on
-          if (isSameNode || isInExpandedSelection && isMultiSelectEnabled) {
+          if (isSameNode) {
             event.preventDefault();
             return true;
           }
@@ -654,11 +650,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
                 return true;
               }
             }
-            if (!event.repeat && event.shiftKey) {
+            if (!event.repeat && event.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
               view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
                 isShiftDown: true
               })));
-              return true;
             }
             return false;
           } else {

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

@@ -199,7 +199,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           });
           e.stopPropagation();
         }
-      } else if (isTopLevelNode && $anchor.depth <= _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey) {
+      } else if (isTopLevelNode && $anchor.depth <= _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
         var _api$blockControls2;
         var alignAnchorHeadToSel = (0, _selection.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
         var selectionWithExpandedHead = (0, _selection.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
@@ -529,7 +529,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     setDragHandleSelected((0, _getSelection.isHandleCorrelatedToSelection)(view.state, selection, start));
   }, [start, selection, view.state, isMultiSelect]);
   (0, _react.useEffect)(function () {
-    if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty) {
+    if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty || !(0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
       return;
     }
     var $anchor = (multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) !== undefined ? view.state.doc.resolve(multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) : view.state.selection.$anchor;

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

@@ -155,6 +155,18 @@ var topLevelNodeMarginStyles = (0, _react.css)({
     }
   }
 });
+
+// when quick insert is rendered there are 2 widgets before the first block node
+var topLevelNodeMarginWithQuickInsertStyles = (0, _react.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': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-widget:nth-child(-n + 2) + .ProseMirror-gapcursor + *:not([data-layout-section="true"]), > .ProseMirror-widget:nth-child(-n + 2) + *:not([data-layout-section="true"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginTop: '0 !important'
+    }
+  }
+});
 var withDividerInPanelStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dividerBodiedInCustomPanelWithNoIconSelector), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   marginTop: '0 !important'
@@ -216,6 +228,6 @@ var blockCardWithoutLayout = (0, _react.css)({
 });
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles(), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
+    styles: [globalStyles(), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? topLevelNodeMarginWithQuickInsertStyles : topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
   });
 };

package/dist/cjs/ui/quick-insert-button.js

@@ -30,7 +30,7 @@ var buttonStyles = (0, _primitives.xcss)({
   height: "var(--ds-space-300, 24px)",
   width: "var(--ds-space-300, 24px)",
   border: 'none',
-  backgroundColor: 'color.background.neutral',
+  backgroundColor: 'color.background.neutral.subtle',
   borderRadius: '50%',
   color: 'color.text.accent.gray',
   zIndex: 'card',
@@ -52,6 +52,18 @@ var containerStaticStyles = (0, _primitives.xcss)({
 
 // TODO: Share prop types between DragHandle - generic enough to create a type for block control decoration
 
+var isSelectionInNode = function isSelectionInNode(start, view) {
+  var node = view.state.doc.nodeAt(start);
+  if (node === null) {
+    return false;
+  }
+  var endPos = start + node.nodeSize;
+  var startPos = start;
+  var _view$state$selection = view.state.selection,
+    $from = _view$state$selection.$from,
+    $to = _view$state$selection.$to;
+  return $from.pos >= startPos && endPos >= $to.pos;
+};
 var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref) {
   var view = _ref.view,
     api = _ref.api,
@@ -62,7 +74,9 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     rootAnchorName = _ref.rootAnchorName,
     rootNodeType = _ref.rootNodeType;
   var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
-  var _useState = (0, _react.useState)({}),
+  var _useState = (0, _react.useState)({
+      display: 'none'
+    }),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     positionStyles = _useState2[0],
     setPositionStyles = _useState2[1];
@@ -145,15 +159,23 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       "aria-label": formatMessage(_messages.blockControlsMessages.insert),
       xcss: [buttonStyles],
       onClick: function onClick() {
-        var _api$core, _api$quickInsert;
-        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
-          var tr = _ref2.tr;
-          var start = getPos();
-          if (!start) {
-            return null;
-          }
-          return tr.setSelection(_state.TextSelection.create(tr.doc, start));
-        });
+        var _api$quickInsert;
+        // if the selection is not within the node this decoration is rendered at
+        // then insert a newline and trigger quick insert
+        var start = getPos();
+        if (start !== undefined && !isSelectionInNode(start, view)) {
+          api.core.actions.execute(function (_ref2) {
+            var _tr$doc$nodeAt;
+            var tr = _ref2.tr;
+            var nodeSize = (_tr$doc$nodeAt = tr.doc.nodeAt(start)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize;
+            if (nodeSize === undefined) {
+              return tr;
+            }
+            var position = start + nodeSize;
+            tr.insert(position, tr.doc.type.schema.nodes.paragraph.create());
+            return tr.setSelection(_state.TextSelection.create(tr.doc, position));
+          });
+        }
         api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
       }
     }, /*#__PURE__*/_react.default.createElement(_add.default, {

package/dist/es2019/blockControlsPlugin.js

@@ -133,7 +133,7 @@ export const blockControlsPlugin = ({
     }
   },
   getSharedState(editorState) {
-    var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7;
+    var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8;
     if (!editorState) {
       return undefined;
     }
@@ -144,7 +144,8 @@ export const blockControlsPlugin = ({
       isDragging: (_key$getState$isDragg = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
       isPMDragging: (_key$getState$isPMDra = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
       multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
-      isShiftDown: (_key$getState$isShift = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined
+      isShiftDown: (_key$getState$isShift = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
+      lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false
     };
   },
   contentComponent({

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

@@ -4,11 +4,9 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { browser } from '@atlaskit/editor-common/browser';
 import { isMeasuring, startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyDocument, isTextInput } from '@atlaskit/editor-common/utils';
 import { NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { CellSelection } from '@atlaskit/editor-tables';
 import { fg } 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';
@@ -23,6 +21,7 @@ import { boundKeydownHandler } from './keymap';
 import { defaultActiveAnchorTracker } from './utils/active-anchor-tracker';
 import { getMultiSelectAnalyticsAttributes } from './utils/analytics';
 import { AnchorRectCache, isAnchorSupported } from './utils/anchor-utils';
+import { selectNode } from './utils/getSelection';
 import { getSelectedSlicePosition } from './utils/selection';
 import { getTrMetadata } from './utils/transactions';
 export const key = new PluginKey('blockControls');
@@ -89,7 +88,14 @@ const destroyFn = (api, editorView) => {
             // If the TextSelection between the drag start and end has changed, the document has changed, and we should not reapply the last selection
             const expandedSelectionUnchanged = multiSelectDnD.textAnchor === tr.selection.anchor && multiSelectDnD.textHead === tr.selection.head;
             if (expandedSelectionUnchanged) {
-              tr.setSelection(TextSelection.create(tr.doc, multiSelectDnD.userAnchor, multiSelectDnD.userHead));
+              const $anchor = tr.doc.resolve(multiSelectDnD.userAnchor);
+              const $head = tr.doc.resolve(multiSelectDnD.userHead);
+              if ($head.node() === $anchor.node()) {
+                const $from = $anchor.min($head);
+                selectNode(tr, $from.pos, $from.node().type.name);
+              } else {
+                tr.setSelection(TextSelection.create(tr.doc, multiSelectDnD.userAnchor, multiSelectDnD.userHead));
+              }
             }
           }
           api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.commands.clearManualSelection()({
@@ -100,7 +106,8 @@ const destroyFn = (api, editorView) => {
           start
         } = source.data;
         // if no drop targets are rendered, assume that drop is invalid
-        if (location.current.dropTargets.length === 0) {
+        const lastDragCancelled = location.current.dropTargets.length === 0;
+        if (lastDragCancelled) {
           var _api$analytics2;
           let nodeTypes, hasSelectedMultipleNodes;
           if (isMultiSelect && api) {
@@ -129,7 +136,8 @@ const destroyFn = (api, editorView) => {
         return tr.setMeta(key, {
           ...tr.getMeta(key),
           isDragging: false,
-          isPMDragging: false
+          isPMDragging: false,
+          lastDragCancelled
         });
       });
     }
@@ -147,14 +155,15 @@ const initialState = {
   isResizerResizing: false,
   isDocSizeLimitEnabled: null,
   isPMDragging: false,
-  multiSelectDnD: undefined
+  multiSelectDnD: undefined,
+  lastDragCancelled: false
 };
 export const getDecorations = state => {
   var _key$getState;
   return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
 };
 export const newApply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
-  var _meta$multiSelectDnD, _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown;
+  var _meta$multiSelectDnD, _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   let {
     activeNode,
     decorations,
@@ -169,7 +178,8 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     isMenuOpen,
     menuTriggerBy,
     isPMDragging,
-    isShiftDown
+    isShiftDown,
+    lastDragCancelled
   } = currentState;
   let isActiveNodeDeleted = false;
 
@@ -325,11 +335,12 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
     multiSelectDnD,
-    isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown
+    isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown,
+    lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled
   };
 };
 export const oldApply = (api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
-  var _meta$activeNode2, _meta$activeNode$hand2, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2;
+  var _meta$activeNode2, _meta$activeNode$hand2, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2, _meta$lastDragCancell2;
   const {
     isNestedEnabled
   } = flags;
@@ -340,7 +351,8 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
     editorWidthLeft,
     editorWidthRight,
     isDragging,
-    isPMDragging
+    isPMDragging,
+    lastDragCancelled
   } = currentState;
   let {
     decorations,
@@ -468,7 +480,8 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
     editorWidthRight: (_meta$editorWidthRigh2 = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh2 !== void 0 ? _meta$editorWidthRigh2 : currentState.editorWidthRight,
     isResizerResizing: isResizerResizing,
     isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
-    isPMDragging: (_meta$isPMDragging2 = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging2 !== void 0 ? _meta$isPMDragging2 : isPMDragging
+    isPMDragging: (_meta$isPMDragging2 = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging2 !== void 0 ? _meta$isPMDragging2 : isPMDragging,
+    lastDragCancelled: (_meta$lastDragCancell2 = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell2 !== void 0 ? _meta$lastDragCancell2 : lastDragCancelled
   };
 };
 export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
@@ -514,29 +527,31 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
       },
       handleDOMEvents: {
         drop(view, event) {
-          var _event$target;
-          // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
-          // this duplicates an empty version of the node it was dropping,
-          // Adding some check here to prevent that if drop position is within activeNode
+          var _pluginState, _pluginState2, _pluginState3, _event$target;
+          // Prevent native DnD from triggering if we are in drag
           const {
-            state,
             dispatch,
-            dragging
+            dragging,
+            state
           } = view;
-          const pluginState = key.getState(state);
-          if (pluginState !== null && pluginState !== void 0 && pluginState.isPMDragging) {
-            dispatch(state.tr.setMeta(key, {
-              ...state.tr.getMeta(key),
-              isPMDragging: false
+          const tr = state.tr;
+          let pluginState = key.getState(state);
+          const dndDragCancelled = (_pluginState = pluginState) === null || _pluginState === void 0 ? void 0 : _pluginState.lastDragCancelled;
+          if ((_pluginState2 = pluginState) !== null && _pluginState2 !== void 0 && _pluginState2.isPMDragging || dndDragCancelled && isMultiSelectEnabled) {
+            dispatch(tr.setMeta(key, {
+              ...tr.getMeta(key),
+              isPMDragging: false,
+              lastDragCancelled: false
             }));
           }
-          if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
+          pluginState = key.getState(view.state);
+          if (!(event.target instanceof HTMLElement) || !((_pluginState3 = pluginState) !== null && _pluginState3 !== void 0 && _pluginState3.activeNode)) {
             return false;
           }
           // 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;
-          if ((draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn' && fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+          if (dndDragCancelled && isMultiSelectEnabled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn' && fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
             // we prevent native DnD for layoutColumn to prevent single column layout.
             event.preventDefault();
             return false;
@@ -550,26 +565,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           const domPos = Math.max(view.posAtDOM(nodeElement, 0) - 1, 0);
           const nodeTarget = state.doc.nodeAt(domPos);
           const isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
-
-          // CellSelection doesn't expose true from/to positions, we need to query the ranges
-          const selectionRange = state.selection instanceof CellSelection ? state.selection.ranges.reduce((previousValue, currentValue, _currentIndex, _array) => {
-            return {
-              $from: currentValue.$from.min(previousValue.$from),
-              $to: currentValue.$to.max(previousValue.$to)
-            };
-          }) : {
-            $from: state.selection.$from,
-            $to: state.selection.$to
-          };
-          const expandedSelection = expandSelectionBounds(selectionRange.$from, selectionRange.$to);
-          const expandedAnchor = expandedSelection.$anchor;
-          const expandedHead = expandedSelection.$head;
-          const expandedSelectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
-          const expandedSelectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
-          const isInExpandedSelection = domPos >= expandedSelectionFrom && domPos < expandedSelectionTo;
-
-          // Prevent the default drop behavior if the position is within the activeNode or within the expanded selection when multiselect is on
-          if (isSameNode || isInExpandedSelection && isMultiSelectEnabled) {
+          if (isSameNode) {
             event.preventDefault();
             return true;
           }
@@ -643,12 +639,11 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
                 return true;
               }
             }
-            if (!event.repeat && event.shiftKey) {
+            if (!event.repeat && event.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
               view.dispatch(view.state.tr.setMeta(key, {
                 ...view.state.tr.getMeta(key),
                 isShiftDown: true
               }));
-              return true;
             }
             return false;
           } else {

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

@@ -180,7 +180,7 @@ export const DragHandle = ({
           });
           e.stopPropagation();
         }
-      } else if (isTopLevelNode && $anchor.depth <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey) {
+      } else if (isTopLevelNode && $anchor.depth <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
         var _api$blockControls2;
         const alignAnchorHeadToSel = alignAnchorHeadInDirectionOfPos(tr.selection, startPos);
         const selectionWithExpandedHead = expandSelectionHeadToNodeAtPos(alignAnchorHeadToSel, startPos);
@@ -513,7 +513,7 @@ export const DragHandle = ({
     setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
   }, [start, selection, view.state, isMultiSelect]);
   useEffect(() => {
-    if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty) {
+    if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
       return;
     }
     const $anchor = (multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) !== undefined ? view.state.doc.resolve(multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) : view.state.selection.$anchor;

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

@@ -178,6 +178,18 @@ const topLevelNodeMarginStyles = css({
     }
   }
 });
+
+// when quick insert is rendered there are 2 widgets before the first block node
+const topLevelNodeMarginWithQuickInsertStyles = 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': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-widget:nth-child(-n + 2) + .ProseMirror-gapcursor + *:not([data-layout-section="true"]), > .ProseMirror-widget:nth-child(-n + 2) + *:not([data-layout-section="true"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginTop: '0 !important'
+    }
+  }
+});
 const withDividerInPanelStyleFix = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   [`${dividerBodiedInCustomPanelWithNoIconSelector}`]: {
@@ -260,6 +272,6 @@ const blockCardWithoutLayout = css({
 });
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
-    styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
+    styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, editorExperiment('platform_editor_controls', 'variant1') ? topLevelNodeMarginWithQuickInsertStyles : topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
   });
 };

package/dist/es2019/ui/quick-insert-button.js

@@ -19,7 +19,7 @@ const buttonStyles = xcss({
   height: "var(--ds-space-300, 24px)",
   width: "var(--ds-space-300, 24px)",
   border: 'none',
-  backgroundColor: 'color.background.neutral',
+  backgroundColor: 'color.background.neutral.subtle',
   borderRadius: '50%',
   color: 'color.text.accent.gray',
   zIndex: 'card',
@@ -41,6 +41,19 @@ const containerStaticStyles = xcss({
 
 // TODO: Share prop types between DragHandle - generic enough to create a type for block control decoration
 
+const isSelectionInNode = (start, view) => {
+  const node = view.state.doc.nodeAt(start);
+  if (node === null) {
+    return false;
+  }
+  const endPos = start + node.nodeSize;
+  const startPos = start;
+  const {
+    $from,
+    $to
+  } = view.state.selection;
+  return $from.pos >= startPos && endPos >= $to.pos;
+};
 export const TypeAheadControl = ({
   view,
   api,
@@ -52,7 +65,9 @@ export const TypeAheadControl = ({
   rootNodeType
 }) => {
   const macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
-  const [positionStyles, setPositionStyles] = useState({});
+  const [positionStyles, setPositionStyles] = useState({
+    display: 'none'
+  });
 
   // Adapted from `src/ui/drag-handle.tsx` as positioning logic is similar
   // CHANGES - added an offset so quick insert button can be positioned beside drag handle
@@ -132,16 +147,24 @@ export const TypeAheadControl = ({
       "aria-label": formatMessage(messages.insert),
       xcss: [buttonStyles],
       onClick: () => {
-        var _api$core, _api$quickInsert;
-        api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
-          tr
-        }) => {
-          const start = getPos();
-          if (!start) {
-            return null;
-          }
-          return tr.setSelection(TextSelection.create(tr.doc, start));
-        });
+        var _api$quickInsert;
+        // if the selection is not within the node this decoration is rendered at
+        // then insert a newline and trigger quick insert
+        const start = getPos();
+        if (start !== undefined && !isSelectionInNode(start, view)) {
+          api.core.actions.execute(({
+            tr
+          }) => {
+            var _tr$doc$nodeAt;
+            const nodeSize = (_tr$doc$nodeAt = tr.doc.nodeAt(start)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize;
+            if (nodeSize === undefined) {
+              return tr;
+            }
+            const position = start + nodeSize;
+            tr.insert(position, tr.doc.type.schema.nodes.paragraph.create());
+            return tr.setSelection(TextSelection.create(tr.doc, position));
+          });
+        }
         api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.actions.openTypeAhead('blockControl');
       }
     }, /*#__PURE__*/React.createElement(EditorAddIcon, {

package/dist/esm/blockControlsPlugin.js

@@ -135,7 +135,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7;
+      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8;
       if (!editorState) {
         return undefined;
       }
@@ -146,7 +146,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         isDragging: (_key$getState$isDragg = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
         isPMDragging: (_key$getState$isPMDra = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
         multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
-        isShiftDown: (_key$getState$isShift = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined
+        isShiftDown: (_key$getState$isShift = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
+        lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false
       };
     },
     contentComponent: function contentComponent(_ref7) {

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

@@ -8,11 +8,9 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { browser } from '@atlaskit/editor-common/browser';
 import { isMeasuring, startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyDocument, isTextInput } from '@atlaskit/editor-common/utils';
 import { NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { CellSelection } from '@atlaskit/editor-tables';
 import { fg } 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';
@@ -27,6 +25,7 @@ import { boundKeydownHandler } from './keymap';
 import { defaultActiveAnchorTracker } from './utils/active-anchor-tracker';
 import { getMultiSelectAnalyticsAttributes } from './utils/analytics';
 import { AnchorRectCache, isAnchorSupported } from './utils/anchor-utils';
+import { selectNode } from './utils/getSelection';
 import { getSelectedSlicePosition } from './utils/selection';
 import { getTrMetadata } from './utils/transactions';
 export var key = new PluginKey('blockControls');
@@ -89,7 +88,14 @@ var destroyFn = function destroyFn(api, editorView) {
             // If the TextSelection between the drag start and end has changed, the document has changed, and we should not reapply the last selection
             var expandedSelectionUnchanged = multiSelectDnD.textAnchor === tr.selection.anchor && multiSelectDnD.textHead === tr.selection.head;
             if (expandedSelectionUnchanged) {
-              tr.setSelection(TextSelection.create(tr.doc, multiSelectDnD.userAnchor, multiSelectDnD.userHead));
+              var $anchor = tr.doc.resolve(multiSelectDnD.userAnchor);
+              var $head = tr.doc.resolve(multiSelectDnD.userHead);
+              if ($head.node() === $anchor.node()) {
+                var $from = $anchor.min($head);
+                selectNode(tr, $from.pos, $from.node().type.name);
+              } else {
+                tr.setSelection(TextSelection.create(tr.doc, multiSelectDnD.userAnchor, multiSelectDnD.userHead));
+              }
             }
           }
           api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || _api$selection.commands.clearManualSelection()({
@@ -99,7 +105,8 @@ var destroyFn = function destroyFn(api, editorView) {
         var _ref5 = source.data,
           start = _ref5.start;
         // if no drop targets are rendered, assume that drop is invalid
-        if (location.current.dropTargets.length === 0) {
+        var lastDragCancelled = location.current.dropTargets.length === 0;
+        if (lastDragCancelled) {
           var _api$analytics2;
           var nodeTypes, hasSelectedMultipleNodes;
           if (isMultiSelect && api) {
@@ -126,7 +133,8 @@ var destroyFn = function destroyFn(api, editorView) {
         }
         return tr.setMeta(key, _objectSpread(_objectSpread({}, tr.getMeta(key)), {}, {
           isDragging: false,
-          isPMDragging: false
+          isPMDragging: false,
+          lastDragCancelled: lastDragCancelled
         }));
       });
     }
@@ -144,14 +152,15 @@ var initialState = {
   isResizerResizing: false,
   isDocSizeLimitEnabled: null,
   isPMDragging: false,
-  multiSelectDnD: undefined
+  multiSelectDnD: undefined,
+  lastDragCancelled: false
 };
 export var getDecorations = function getDecorations(state) {
   var _key$getState;
   return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
 };
 export var newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
-  var _meta$multiSelectDnD, _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown;
+  var _meta$multiSelectDnD, _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
@@ -163,7 +172,8 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     isMenuOpen = currentState.isMenuOpen,
     menuTriggerBy = currentState.menuTriggerBy,
     isPMDragging = currentState.isPMDragging,
-    isShiftDown = currentState.isShiftDown;
+    isShiftDown = currentState.isShiftDown,
+    lastDragCancelled = currentState.lastDragCancelled;
   var isActiveNodeDeleted = false;
 
   // When steps exist, remap existing decorations, activeNode and multi select positions
@@ -319,11 +329,12 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
     multiSelectDnD: multiSelectDnD,
-    isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown
+    isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown,
+    lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled
   };
 };
 export var oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
-  var _meta$activeNode2, _meta$activeNode$hand2, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2;
+  var _meta$activeNode2, _meta$activeNode$hand2, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2, _meta$lastDragCancell2;
   var isNestedEnabled = flags.isNestedEnabled;
   var activeNode = currentState.activeNode,
     isMenuOpen = currentState.isMenuOpen,
@@ -331,7 +342,8 @@ export var oldApply = function oldApply(api, formatMessage, tr, currentState, ol
     editorWidthLeft = currentState.editorWidthLeft,
     editorWidthRight = currentState.editorWidthRight,
     isDragging = currentState.isDragging,
-    isPMDragging = currentState.isPMDragging;
+    isPMDragging = currentState.isPMDragging,
+    lastDragCancelled = currentState.lastDragCancelled;
   var decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing;
 
@@ -481,7 +493,8 @@ export var oldApply = function oldApply(api, formatMessage, tr, currentState, ol
     editorWidthRight: (_meta$editorWidthRigh2 = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh2 !== void 0 ? _meta$editorWidthRigh2 : currentState.editorWidthRight,
     isResizerResizing: isResizerResizing,
     isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
-    isPMDragging: (_meta$isPMDragging2 = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging2 !== void 0 ? _meta$isPMDragging2 : isPMDragging
+    isPMDragging: (_meta$isPMDragging2 = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging2 !== void 0 ? _meta$isPMDragging2 : isPMDragging,
+    lastDragCancelled: (_meta$lastDragCancell2 = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell2 !== void 0 ? _meta$lastDragCancell2 : lastDragCancelled
   };
 };
 export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI) {
@@ -526,26 +539,28 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
       },
       handleDOMEvents: {
         drop: function drop(view, event) {
-          var _event$target;
-          // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
-          // this duplicates 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,
-            dragging = view.dragging;
+          var _pluginState, _pluginState2, _pluginState3, _event$target;
+          // Prevent native DnD from triggering if we are in drag
+          var dispatch = view.dispatch,
+            dragging = view.dragging,
+            state = view.state;
+          var tr = state.tr;
           var pluginState = key.getState(state);
-          if (pluginState !== null && pluginState !== void 0 && pluginState.isPMDragging) {
-            dispatch(state.tr.setMeta(key, _objectSpread(_objectSpread({}, state.tr.getMeta(key)), {}, {
-              isPMDragging: false
+          var dndDragCancelled = (_pluginState = pluginState) === null || _pluginState === void 0 ? void 0 : _pluginState.lastDragCancelled;
+          if ((_pluginState2 = pluginState) !== null && _pluginState2 !== void 0 && _pluginState2.isPMDragging || dndDragCancelled && isMultiSelectEnabled) {
+            dispatch(tr.setMeta(key, _objectSpread(_objectSpread({}, tr.getMeta(key)), {}, {
+              isPMDragging: false,
+              lastDragCancelled: false
             })));
           }
-          if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
+          pluginState = key.getState(view.state);
+          if (!(event.target instanceof HTMLElement) || !((_pluginState3 = pluginState) !== null && _pluginState3 !== void 0 && _pluginState3.activeNode)) {
             return false;
           }
           // 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;
-          if ((draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn' && fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+          if (dndDragCancelled && isMultiSelectEnabled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn' && fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
             // we prevent native DnD for layoutColumn to prevent single column layout.
             event.preventDefault();
             return false;
@@ -559,26 +574,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
           var domPos = Math.max(view.posAtDOM(nodeElement, 0) - 1, 0);
           var nodeTarget = state.doc.nodeAt(domPos);
           var isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
-
-          // CellSelection doesn't expose true from/to positions, we need to query the ranges
-          var selectionRange = state.selection instanceof CellSelection ? state.selection.ranges.reduce(function (previousValue, currentValue, _currentIndex, _array) {
-            return {
-              $from: currentValue.$from.min(previousValue.$from),
-              $to: currentValue.$to.max(previousValue.$to)
-            };
-          }) : {
-            $from: state.selection.$from,
-            $to: state.selection.$to
-          };
-          var expandedSelection = expandSelectionBounds(selectionRange.$from, selectionRange.$to);
-          var expandedAnchor = expandedSelection.$anchor;
-          var expandedHead = expandedSelection.$head;
-          var expandedSelectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
-          var expandedSelectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
-          var isInExpandedSelection = domPos >= expandedSelectionFrom && domPos < expandedSelectionTo;
-
-          // Prevent the default drop behavior if the position is within the activeNode or within the expanded selection when multiselect is on
-          if (isSameNode || isInExpandedSelection && isMultiSelectEnabled) {
+          if (isSameNode) {
             event.preventDefault();
             return true;
           }
@@ -647,11 +643,10 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
                 return true;
               }
             }
-            if (!event.repeat && event.shiftKey) {
+            if (!event.repeat && event.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
               view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
                 isShiftDown: true
               })));
-              return true;
             }
             return false;
           } else {

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

@@ -194,7 +194,7 @@ export var DragHandle = function DragHandle(_ref) {
           });
           e.stopPropagation();
         }
-      } else if (isTopLevelNode && $anchor.depth <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey) {
+      } else if (isTopLevelNode && $anchor.depth <= DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
         var _api$blockControls2;
         var alignAnchorHeadToSel = alignAnchorHeadInDirectionOfPos(tr.selection, startPos);
         var selectionWithExpandedHead = expandSelectionHeadToNodeAtPos(alignAnchorHeadToSel, startPos);
@@ -524,7 +524,7 @@ export var DragHandle = function DragHandle(_ref) {
     setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
   }, [start, selection, view.state, isMultiSelect]);
   useEffect(function () {
-    if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty) {
+    if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
       return;
     }
     var $anchor = (multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) !== undefined ? view.state.doc.resolve(multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) : view.state.selection.$anchor;

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

@@ -148,6 +148,18 @@ var topLevelNodeMarginStyles = css({
     }
   }
 });
+
+// when quick insert is rendered there are 2 widgets before the first block node
+var topLevelNodeMarginWithQuickInsertStyles = 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': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-widget:nth-child(-n + 2) + .ProseMirror-gapcursor + *:not([data-layout-section="true"]), > .ProseMirror-widget:nth-child(-n + 2) + *:not([data-layout-section="true"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginTop: '0 !important'
+    }
+  }
+});
 var withDividerInPanelStyleFix = css(_defineProperty({}, "".concat(dividerBodiedInCustomPanelWithNoIconSelector), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   marginTop: '0 !important'
@@ -209,6 +221,6 @@ var blockCardWithoutLayout = css({
 });
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
+    styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, editorExperiment('platform_editor_controls', 'variant1') ? topLevelNodeMarginWithQuickInsertStyles : topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
   });
 };

package/dist/esm/ui/quick-insert-button.js

@@ -20,7 +20,7 @@ var buttonStyles = xcss({
   height: "var(--ds-space-300, 24px)",
   width: "var(--ds-space-300, 24px)",
   border: 'none',
-  backgroundColor: 'color.background.neutral',
+  backgroundColor: 'color.background.neutral.subtle',
   borderRadius: '50%',
   color: 'color.text.accent.gray',
   zIndex: 'card',
@@ -42,6 +42,18 @@ var containerStaticStyles = xcss({
 
 // TODO: Share prop types between DragHandle - generic enough to create a type for block control decoration
 
+var isSelectionInNode = function isSelectionInNode(start, view) {
+  var node = view.state.doc.nodeAt(start);
+  if (node === null) {
+    return false;
+  }
+  var endPos = start + node.nodeSize;
+  var startPos = start;
+  var _view$state$selection = view.state.selection,
+    $from = _view$state$selection.$from,
+    $to = _view$state$selection.$to;
+  return $from.pos >= startPos && endPos >= $to.pos;
+};
 export var TypeAheadControl = function TypeAheadControl(_ref) {
   var view = _ref.view,
     api = _ref.api,
@@ -52,7 +64,9 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
     rootAnchorName = _ref.rootAnchorName,
     rootNodeType = _ref.rootNodeType;
   var macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
-  var _useState = useState({}),
+  var _useState = useState({
+      display: 'none'
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     positionStyles = _useState2[0],
     setPositionStyles = _useState2[1];
@@ -135,15 +149,23 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       "aria-label": formatMessage(messages.insert),
       xcss: [buttonStyles],
       onClick: function onClick() {
-        var _api$core, _api$quickInsert;
-        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
-          var tr = _ref2.tr;
-          var start = getPos();
-          if (!start) {
-            return null;
-          }
-          return tr.setSelection(TextSelection.create(tr.doc, start));
-        });
+        var _api$quickInsert;
+        // if the selection is not within the node this decoration is rendered at
+        // then insert a newline and trigger quick insert
+        var start = getPos();
+        if (start !== undefined && !isSelectionInNode(start, view)) {
+          api.core.actions.execute(function (_ref2) {
+            var _tr$doc$nodeAt;
+            var tr = _ref2.tr;
+            var nodeSize = (_tr$doc$nodeAt = tr.doc.nodeAt(start)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize;
+            if (nodeSize === undefined) {
+              return tr;
+            }
+            var position = start + nodeSize;
+            tr.insert(position, tr.doc.type.schema.nodes.paragraph.create());
+            return tr.setSelection(TextSelection.create(tr.doc, position));
+          });
+        }
         api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
       }
     }, /*#__PURE__*/React.createElement(EditorAddIcon, {

package/dist/types/blockControlsPluginType.d.ts

@@ -47,6 +47,7 @@ export interface PluginState {
     isPMDragging: boolean;
     multiSelectDnD?: MultiSelectDnD;
     isShiftDown?: boolean;
+    lastDragCancelled: boolean;
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsSharedState = {

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

@@ -27,6 +27,7 @@ export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> |
     isPMDragging: any;
     multiSelectDnD: import("../blockControlsPluginType").MultiSelectDnD | undefined;
     isShiftDown: any;
+    lastDragCancelled: any;
 };
 export declare const oldApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, oldState: EditorState, newState: EditorState, flags: FlagType, nodeViewPortalProviderAPI: PortalProviderAPI, anchorRectCache?: AnchorRectCache) => {
     decorations: DecorationSet;
@@ -39,5 +40,6 @@ export declare const oldApply: (api: ExtractInjectionAPI<BlockControlsPlugin> |
     isResizerResizing: boolean;
     isDocSizeLimitEnabled: boolean | null;
     isPMDragging: any;
+    lastDragCancelled: any;
 };
 export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI) => SafePlugin<PluginState>;

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

@@ -47,6 +47,7 @@ export interface PluginState {
     isPMDragging: boolean;
     multiSelectDnD?: MultiSelectDnD;
     isShiftDown?: boolean;
+    lastDragCancelled: boolean;
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsSharedState = {

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

@@ -27,6 +27,7 @@ export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> |
     isPMDragging: any;
     multiSelectDnD: import("../blockControlsPluginType").MultiSelectDnD | undefined;
     isShiftDown: any;
+    lastDragCancelled: any;
 };
 export declare const oldApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, oldState: EditorState, newState: EditorState, flags: FlagType, nodeViewPortalProviderAPI: PortalProviderAPI, anchorRectCache?: AnchorRectCache) => {
     decorations: DecorationSet;
@@ -39,5 +40,6 @@ export declare const oldApply: (api: ExtractInjectionAPI<BlockControlsPlugin> |
     isResizerResizing: boolean;
     isDocSizeLimitEnabled: boolean | null;
     isPMDragging: any;
+    lastDragCancelled: any;
 };
 export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI) => SafePlugin<PluginState>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.1.4",
+	"version": "3.1.6",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"@atlaskit/editor-plugin-selection": "^2.0.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.3.0",
+		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^2.0.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.2.0",
+		"@atlaskit/tmp-editor-statsig": "^3.3.0",
 		"@atlaskit/tokens": "^4.2.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -151,6 +151,9 @@
 		},
 		"platform_editor_disable_drag_handle_nested_tables": {
 			"type": "boolean"
+		},
+		"platform_editor_elements_dnd_shift_click_select": {
+			"type": "boolean"
 		}
 	}
 }