@atlaskit/editor-plugin-block-controls 3.1.5 → 3.1.7

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.1.7
+
+### Patch Changes
+
+- [#120533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120533)
+  [`f1bec731e278f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f1bec731e278f) -
+  Adds a `sideEffects` field to ensure this package does not have Compiled styles tree-shaken in the
+  future to avoid an accidental regression.
+
+  This is related to
+  https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953
+
+- [#120887](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120887)
+  [`ab17c525aee48`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ab17c525aee48) -
+  Fix multi-select drag previews
+- [#120893](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120893)
+  [`8070e79030a9b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8070e79030a9b) -
+  Prevent multi-select layoutColumns from dropping
+- Updated dependencies
+
+## 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

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

@@ -650,7 +650,7 @@ 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
               })));

package/dist/cjs/pm-plugins/utils/validation.js

@@ -122,6 +122,7 @@ function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos,
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }
 function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent, indexIntoParent, $destNodePos, destNode) {
+  var _slice$content$firstC;
   var canMoveNodes = true;
   var doc = $destNodePos.doc;
   var nodesPos = [];
@@ -130,6 +131,11 @@ function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent, indexI
   if ($destNodePos.pos < sliceToPos && $destNodePos.pos >= sliceFromPos) {
     return false;
   }
+
+  // Multiple layout columns do not drop correctly.
+  if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'layoutColumn' && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_multi_select_patch_1')) {
+    return false;
+  }
   for (var i = 0; i < slice.content.childCount; i++) {
     var node = slice.content.maybeChild(i);
     if (i === 0) {

package/dist/cjs/ui/consts.js

@@ -324,6 +324,14 @@ var nodeMargins = exports.nodeMargins = {
     top: 12,
     bottom: 0
   },
+  expand: {
+    top: 4,
+    bottom: 0
+  },
+  nestedExpand: {
+    top: 1,
+    bottom: 0
+  },
   default: {
     top: 0,
     bottom: 0

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

@@ -124,8 +124,18 @@ var getNodeSpacingForPreview = function getNodeSpacingForPreview(node) {
   }
   return _consts.spacingBetweenNodesForPreview[nodeTypeName] || _consts.spacingBetweenNodesForPreview['default'];
 };
+var getNodeMargins = function getNodeMargins(node) {
+  if (!node) {
+    return _consts.nodeMargins['default'];
+  }
+  var nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    return _consts.nodeMargins["heading".concat(node.attrs.level)] || _consts.nodeMargins['default'];
+  }
+  return _consts.nodeMargins[nodeTypeName] || _consts.nodeMargins['default'];
+};
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
-  var _api$core2, _api$analytics2, _api$blockControls3, _api$core4;
+  var _api$core2, _api$blockControls3, _api$analytics2, _api$core4;
   var view = _ref.view,
     api = _ref.api,
     formatMessage = _ref.formatMessage,
@@ -153,7 +163,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     featureFlagsState = _useSharedPluginState.featureFlagsState;
   var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
   var isShiftDown = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isShiftDown');
-  var multiSelectDnD = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.multiSelectDnD');
   var isLayoutColumn = nodeType === 'layoutColumn';
   var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
     exposure: true
@@ -181,13 +190,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       setDragHandleSelected(!dragHandleSelected);
     }
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
-      var _api$analytics;
+      var _api$blockControls$sh, _api$analytics;
       var tr = _ref2.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
       }
-      var $anchor = (multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) !== undefined ? tr.doc.resolve(multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) : tr.selection.$anchor;
+      var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
+      var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
       if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
         tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
         if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
@@ -199,7 +209,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);
@@ -224,7 +234,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       return tr;
     });
     view.focus();
-  }, [isMultiSelect, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands, view, dragHandleSelected, getPos, multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor, isTopLevelNode, nodeType, anchorName]);
+  }, [isMultiSelect, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : api.blockControls.sharedState, api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, dragHandleSelected, getPos, isTopLevelNode, nodeType, anchorName]);
 
   // TODO - This needs to be investigated further. Drag preview generation is not always working
   // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
@@ -287,6 +297,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         };
       },
       onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
+        var _api$blockControls$sh2;
         var nativeSetDragImage = _ref4.nativeSetDragImage;
         if (isMultiSelect) {
           var _api$core5;
@@ -311,9 +322,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           selection = state.selection;
         var sliceFrom = selection.from;
         var sliceTo = selection.to;
-        if (multiSelectDnD) {
-          var anchor = multiSelectDnD.anchor,
-            head = multiSelectDnD.head;
+        var mSelect = api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.multiSelectDnD;
+        if (mSelect) {
+          var anchor = mSelect.anchor,
+            head = mSelect.head;
           sliceFrom = Math.min(anchor, head);
           sliceTo = Math.max(anchor, head);
         }
@@ -350,12 +362,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
                   // eslint-disable-next-line @atlaskit/editor/no-as-casting
                   var currentNodeElement = (0, _utils.findDomRefAtPos)(nodesStartPos[i], domAtPos);
                   var maybeCurrentNode = expandedSlice.content.maybeChild(i);
-                  var currentNodeSpacing = maybeCurrentNode ? _consts.nodeMargins[maybeCurrentNode.type.name].top + _consts.nodeMargins[maybeCurrentNode.type.name].bottom : 0;
+                  var currentNodeSpacing = maybeCurrentNode ? getNodeMargins(maybeCurrentNode).top + getNodeMargins(maybeCurrentNode).bottom : 0;
                   domElementsHeightBeforeHandle = domElementsHeightBeforeHandle + currentNodeElement.offsetHeight + currentNodeSpacing;
                 } else {
                   // when the node is after the handle, calculate the top margin of the active node
                   var maybeNextNode = expandedSlice.content.maybeChild(i);
-                  activeNodeMarginTop = maybeNextNode ? _consts.nodeMargins[maybeNextNode.type.name].top : 0;
+                  activeNodeMarginTop = maybeNextNode ? getNodeMargins(maybeNextNode).top : 0;
                   break;
                 }
               }
@@ -379,7 +391,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
             } else {
               var domAtPos = view.domAtPos.bind(view);
               var previewContent = [];
-              expandedSlice.content.descendants(function (node, pos, parent, index) {
+              expandedSlice.content.descendants(function (node, pos, _parent, _index) {
                 // Get the dom element of the node
                 //eslint-disable-next-line @atlaskit/editor/no-as-casting
                 var nodeDomElement = (0, _utils.findDomRefAtPos)(sliceFrom + pos, domAtPos);
@@ -403,13 +415,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           return;
         }
         api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
-          var _api$blockControls5, _api$analytics3;
+          var _api$blockControls$sh3, _api$blockControls5, _api$analytics3;
           var tr = _ref7.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
-          if (multiSelectDnD) {
-            var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, multiSelectDnD.anchor, multiSelectDnD.head);
+          var mSelect = api === null || api === void 0 || (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.multiSelectDnD;
+          if (mSelect) {
+            var attributes = (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, mSelect.anchor, mSelect.head);
             nodeTypes = attributes.nodeTypes;
             hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
           } else {
@@ -438,7 +451,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         view.focus();
       }
     });
-  }, [anchorName, api, getPos, isMultiSelect, multiSelectDnD, nodeType, start, view]);
+  }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
   var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var calculatePosition = (0, _react.useCallback)(function () {
     var parentNodeType;
@@ -529,16 +542,18 @@ 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) {
+    var _api$blockControls$sh4;
+    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;
+    var mSelect = api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
+    var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
     if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
       setDragHandleDisabled(true);
     } else {
       setDragHandleDisabled(false);
     }
-  }, [isMultiSelect, isShiftDown, isTopLevelNode, multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor, view.state.doc, view.state.selection]);
+  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view.state.doc, view.state.selection]);
   var helpDescriptors = isTopLevelNode && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility') ? [{
     description: formatMessage(_messages.blockControlsMessages.dragToMove)
   }, {

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/pm-plugins/main.js

@@ -639,7 +639,7 @@ 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

package/dist/es2019/pm-plugins/utils/validation.js

@@ -115,6 +115,7 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }
 export function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent, indexIntoParent, $destNodePos, destNode) {
+  var _slice$content$firstC;
   let canMoveNodes = true;
   const doc = $destNodePos.doc;
   const nodesPos = [];
@@ -123,6 +124,11 @@ export function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent,
   if ($destNodePos.pos < sliceToPos && $destNodePos.pos >= sliceFromPos) {
     return false;
   }
+
+  // Multiple layout columns do not drop correctly.
+  if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'layoutColumn' && fg('platform_editor_elements_dnd_multi_select_patch_1')) {
+    return false;
+  }
   for (let i = 0; i < slice.content.childCount; i++) {
     const node = slice.content.maybeChild(i);
     if (i === 0) {

package/dist/es2019/ui/consts.js

@@ -333,6 +333,14 @@ export const nodeMargins = {
     top: 12,
     bottom: 0
   },
+  expand: {
+    top: 4,
+    bottom: 0
+  },
+  nestedExpand: {
+    top: 1,
+    bottom: 0
+  },
   default: {
     top: 0,
     bottom: 0

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

@@ -114,6 +114,16 @@ const getNodeSpacingForPreview = node => {
   }
   return spacingBetweenNodesForPreview[nodeTypeName] || spacingBetweenNodesForPreview['default'];
 };
+const getNodeMargins = node => {
+  if (!node) {
+    return nodeMargins['default'];
+  }
+  const nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    return nodeMargins[`heading${node.attrs.level}`] || nodeMargins['default'];
+  }
+  return nodeMargins[nodeTypeName] || nodeMargins['default'];
+};
 export const DragHandle = ({
   view,
   api,
@@ -124,7 +134,7 @@ export const DragHandle = ({
   handleOptions,
   isTopLevelNode = true
 }) => {
-  var _api$core2, _api$analytics2, _api$blockControls3, _api$core4;
+  var _api$core2, _api$blockControls3, _api$analytics2, _api$core4;
   const start = getPos();
   const buttonRef = useRef(null);
   const [blockCardWidth, setBlockCardWidth] = useState(768);
@@ -135,7 +145,6 @@ export const DragHandle = ({
   } = useSharedPluginState(api, ['featureFlags']);
   const selection = useSharedPluginStateSelector(api, 'selection.selection');
   const isShiftDown = useSharedPluginStateSelector(api, 'blockControls.isShiftDown');
-  const multiSelectDnD = useSharedPluginStateSelector(api, 'blockControls.multiSelectDnD');
   const isLayoutColumn = nodeType === 'layoutColumn';
   const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
     exposure: true
@@ -163,12 +172,13 @@ export const DragHandle = ({
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
       tr
     }) => {
-      var _api$analytics;
+      var _api$blockControls$sh, _api$analytics;
       const startPos = getPos();
       if (startPos === undefined) {
         return tr;
       }
-      const $anchor = (multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) !== undefined ? tr.doc.resolve(multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) : tr.selection.$anchor;
+      const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
+      const $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
       if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
         tr = selectNode(tr, startPos, nodeType);
         if (editorExperiment('platform_editor_controls', 'variant1')) {
@@ -180,7 +190,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);
@@ -205,7 +215,7 @@ export const DragHandle = ({
       return tr;
     });
     view.focus();
-  }, [isMultiSelect, api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands, view, dragHandleSelected, getPos, multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor, isTopLevelNode, nodeType, anchorName]);
+  }, [isMultiSelect, api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : api.blockControls.sharedState, api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, dragHandleSelected, getPos, isTopLevelNode, nodeType, anchorName]);
 
   // TODO - This needs to be investigated further. Drag preview generation is not always working
   // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
@@ -267,6 +277,7 @@ export const DragHandle = ({
       onGenerateDragPreview: ({
         nativeSetDragImage
       }) => {
+        var _api$blockControls$sh2;
         if (isMultiSelect) {
           var _api$core5;
           api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
@@ -293,11 +304,12 @@ export const DragHandle = ({
         } = state;
         let sliceFrom = selection.from;
         let sliceTo = selection.to;
-        if (multiSelectDnD) {
+        const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.multiSelectDnD;
+        if (mSelect) {
           const {
             anchor,
             head
-          } = multiSelectDnD;
+          } = mSelect;
           sliceFrom = Math.min(anchor, head);
           sliceTo = Math.max(anchor, head);
         }
@@ -334,12 +346,12 @@ export const DragHandle = ({
                   // eslint-disable-next-line @atlaskit/editor/no-as-casting
                   const currentNodeElement = findDomRefAtPos(nodesStartPos[i], domAtPos);
                   const maybeCurrentNode = expandedSlice.content.maybeChild(i);
-                  const currentNodeSpacing = maybeCurrentNode ? nodeMargins[maybeCurrentNode.type.name].top + nodeMargins[maybeCurrentNode.type.name].bottom : 0;
+                  const currentNodeSpacing = maybeCurrentNode ? getNodeMargins(maybeCurrentNode).top + getNodeMargins(maybeCurrentNode).bottom : 0;
                   domElementsHeightBeforeHandle = domElementsHeightBeforeHandle + currentNodeElement.offsetHeight + currentNodeSpacing;
                 } else {
                   // when the node is after the handle, calculate the top margin of the active node
                   const maybeNextNode = expandedSlice.content.maybeChild(i);
-                  activeNodeMarginTop = maybeNextNode ? nodeMargins[maybeNextNode.type.name].top : 0;
+                  activeNodeMarginTop = maybeNextNode ? getNodeMargins(maybeNextNode).top : 0;
                   break;
                 }
               }
@@ -364,7 +376,7 @@ export const DragHandle = ({
             } else {
               const domAtPos = view.domAtPos.bind(view);
               const previewContent = [];
-              expandedSlice.content.descendants((node, pos, parent, index) => {
+              expandedSlice.content.descendants((node, pos, _parent, _index) => {
                 // Get the dom element of the node
                 //eslint-disable-next-line @atlaskit/editor/no-as-casting
                 const nodeDomElement = findDomRefAtPos(sliceFrom + pos, domAtPos);
@@ -390,12 +402,13 @@ export const DragHandle = ({
         api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.execute(({
           tr
         }) => {
-          var _api$blockControls5, _api$analytics3;
+          var _api$blockControls$sh3, _api$blockControls5, _api$analytics3;
           let nodeTypes, hasSelectedMultipleNodes;
           const resolvedMovingNode = tr.doc.resolve(start);
           const maybeNode = resolvedMovingNode.nodeAfter;
-          if (multiSelectDnD) {
-            const attributes = getMultiSelectAnalyticsAttributes(tr, multiSelectDnD.anchor, multiSelectDnD.head);
+          const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.multiSelectDnD;
+          if (mSelect) {
+            const attributes = getMultiSelectAnalyticsAttributes(tr, mSelect.anchor, mSelect.head);
             nodeTypes = attributes.nodeTypes;
             hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
           } else {
@@ -425,7 +438,7 @@ export const DragHandle = ({
         view.focus();
       }
     });
-  }, [anchorName, api, getPos, isMultiSelect, multiSelectDnD, nodeType, start, view]);
+  }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
   const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   const calculatePosition = useCallback(() => {
     let parentNodeType;
@@ -513,16 +526,18 @@ export const DragHandle = ({
     setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
   }, [start, selection, view.state, isMultiSelect]);
   useEffect(() => {
-    if (!isMultiSelect || isShiftDown === undefined || view.state.selection.empty) {
+    var _api$blockControls$sh4;
+    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;
+    const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
+    const $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
     if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
       setDragHandleDisabled(true);
     } else {
       setDragHandleDisabled(false);
     }
-  }, [isMultiSelect, isShiftDown, isTopLevelNode, multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor, view.state.doc, view.state.selection]);
+  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view.state.doc, view.state.selection]);
   let helpDescriptors = isTopLevelNode && fg('platform_editor_advanced_layouts_accessibility') ? [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {

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/pm-plugins/main.js

@@ -643,7 +643,7 @@ 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
               })));

package/dist/esm/pm-plugins/utils/validation.js

@@ -113,6 +113,7 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }
 export function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent, indexIntoParent, $destNodePos, destNode) {
+  var _slice$content$firstC;
   var canMoveNodes = true;
   var doc = $destNodePos.doc;
   var nodesPos = [];
@@ -121,6 +122,11 @@ export function canMoveSliceToIndex(slice, sliceFromPos, sliceToPos, destParent,
   if ($destNodePos.pos < sliceToPos && $destNodePos.pos >= sliceFromPos) {
     return false;
   }
+
+  // Multiple layout columns do not drop correctly.
+  if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'layoutColumn' && fg('platform_editor_elements_dnd_multi_select_patch_1')) {
+    return false;
+  }
   for (var i = 0; i < slice.content.childCount; i++) {
     var node = slice.content.maybeChild(i);
     if (i === 0) {

package/dist/esm/ui/consts.js

@@ -317,6 +317,14 @@ export var nodeMargins = {
     top: 12,
     bottom: 0
   },
+  expand: {
+    top: 4,
+    bottom: 0
+  },
+  nestedExpand: {
+    top: 1,
+    bottom: 0
+  },
   default: {
     top: 0,
     bottom: 0

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

@@ -119,8 +119,18 @@ var getNodeSpacingForPreview = function getNodeSpacingForPreview(node) {
   }
   return spacingBetweenNodesForPreview[nodeTypeName] || spacingBetweenNodesForPreview['default'];
 };
+var getNodeMargins = function getNodeMargins(node) {
+  if (!node) {
+    return nodeMargins['default'];
+  }
+  var nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    return nodeMargins["heading".concat(node.attrs.level)] || nodeMargins['default'];
+  }
+  return nodeMargins[nodeTypeName] || nodeMargins['default'];
+};
 export var DragHandle = function DragHandle(_ref) {
-  var _api$core2, _api$analytics2, _api$blockControls3, _api$core4;
+  var _api$core2, _api$blockControls3, _api$analytics2, _api$core4;
   var view = _ref.view,
     api = _ref.api,
     formatMessage = _ref.formatMessage,
@@ -148,7 +158,6 @@ export var DragHandle = function DragHandle(_ref) {
     featureFlagsState = _useSharedPluginState.featureFlagsState;
   var selection = useSharedPluginStateSelector(api, 'selection.selection');
   var isShiftDown = useSharedPluginStateSelector(api, 'blockControls.isShiftDown');
-  var multiSelectDnD = useSharedPluginStateSelector(api, 'blockControls.multiSelectDnD');
   var isLayoutColumn = nodeType === 'layoutColumn';
   var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
     exposure: true
@@ -176,13 +185,14 @@ export var DragHandle = function DragHandle(_ref) {
       setDragHandleSelected(!dragHandleSelected);
     }
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
-      var _api$analytics;
+      var _api$blockControls$sh, _api$analytics;
       var tr = _ref2.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
       }
-      var $anchor = (multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) !== undefined ? tr.doc.resolve(multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor) : tr.selection.$anchor;
+      var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
+      var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
       if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
         tr = selectNode(tr, startPos, nodeType);
         if (editorExperiment('platform_editor_controls', 'variant1')) {
@@ -194,7 +204,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);
@@ -219,7 +229,7 @@ export var DragHandle = function DragHandle(_ref) {
       return tr;
     });
     view.focus();
-  }, [isMultiSelect, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands, view, dragHandleSelected, getPos, multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor, isTopLevelNode, nodeType, anchorName]);
+  }, [isMultiSelect, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : api.blockControls.sharedState, api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, dragHandleSelected, getPos, isTopLevelNode, nodeType, anchorName]);
 
   // TODO - This needs to be investigated further. Drag preview generation is not always working
   // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
@@ -282,6 +292,7 @@ export var DragHandle = function DragHandle(_ref) {
         };
       },
       onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
+        var _api$blockControls$sh2;
         var nativeSetDragImage = _ref4.nativeSetDragImage;
         if (isMultiSelect) {
           var _api$core5;
@@ -306,9 +317,10 @@ export var DragHandle = function DragHandle(_ref) {
           selection = state.selection;
         var sliceFrom = selection.from;
         var sliceTo = selection.to;
-        if (multiSelectDnD) {
-          var anchor = multiSelectDnD.anchor,
-            head = multiSelectDnD.head;
+        var mSelect = api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.multiSelectDnD;
+        if (mSelect) {
+          var anchor = mSelect.anchor,
+            head = mSelect.head;
           sliceFrom = Math.min(anchor, head);
           sliceTo = Math.max(anchor, head);
         }
@@ -345,12 +357,12 @@ export var DragHandle = function DragHandle(_ref) {
                   // eslint-disable-next-line @atlaskit/editor/no-as-casting
                   var currentNodeElement = findDomRefAtPos(nodesStartPos[i], domAtPos);
                   var maybeCurrentNode = expandedSlice.content.maybeChild(i);
-                  var currentNodeSpacing = maybeCurrentNode ? nodeMargins[maybeCurrentNode.type.name].top + nodeMargins[maybeCurrentNode.type.name].bottom : 0;
+                  var currentNodeSpacing = maybeCurrentNode ? getNodeMargins(maybeCurrentNode).top + getNodeMargins(maybeCurrentNode).bottom : 0;
                   domElementsHeightBeforeHandle = domElementsHeightBeforeHandle + currentNodeElement.offsetHeight + currentNodeSpacing;
                 } else {
                   // when the node is after the handle, calculate the top margin of the active node
                   var maybeNextNode = expandedSlice.content.maybeChild(i);
-                  activeNodeMarginTop = maybeNextNode ? nodeMargins[maybeNextNode.type.name].top : 0;
+                  activeNodeMarginTop = maybeNextNode ? getNodeMargins(maybeNextNode).top : 0;
                   break;
                 }
               }
@@ -374,7 +386,7 @@ export var DragHandle = function DragHandle(_ref) {
             } else {
               var domAtPos = view.domAtPos.bind(view);
               var previewContent = [];
-              expandedSlice.content.descendants(function (node, pos, parent, index) {
+              expandedSlice.content.descendants(function (node, pos, _parent, _index) {
                 // Get the dom element of the node
                 //eslint-disable-next-line @atlaskit/editor/no-as-casting
                 var nodeDomElement = findDomRefAtPos(sliceFrom + pos, domAtPos);
@@ -398,13 +410,14 @@ export var DragHandle = function DragHandle(_ref) {
           return;
         }
         api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
-          var _api$blockControls5, _api$analytics3;
+          var _api$blockControls$sh3, _api$blockControls5, _api$analytics3;
           var tr = _ref7.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
-          if (multiSelectDnD) {
-            var attributes = getMultiSelectAnalyticsAttributes(tr, multiSelectDnD.anchor, multiSelectDnD.head);
+          var mSelect = api === null || api === void 0 || (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.multiSelectDnD;
+          if (mSelect) {
+            var attributes = getMultiSelectAnalyticsAttributes(tr, mSelect.anchor, mSelect.head);
             nodeTypes = attributes.nodeTypes;
             hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
           } else {
@@ -433,7 +446,7 @@ export var DragHandle = function DragHandle(_ref) {
         view.focus();
       }
     });
-  }, [anchorName, api, getPos, isMultiSelect, multiSelectDnD, nodeType, start, view]);
+  }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
   var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var calculatePosition = useCallback(function () {
     var parentNodeType;
@@ -524,16 +537,18 @@ 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) {
+    var _api$blockControls$sh4;
+    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;
+    var mSelect = api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
+    var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
     if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
       setDragHandleDisabled(true);
     } else {
       setDragHandleDisabled(false);
     }
-  }, [isMultiSelect, isShiftDown, isTopLevelNode, multiSelectDnD === null || multiSelectDnD === void 0 ? void 0 : multiSelectDnD.anchor, view.state.doc, view.state.selection]);
+  }, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view.state.doc, view.state.selection]);
   var helpDescriptors = isTopLevelNode && fg('platform_editor_advanced_layouts_accessibility') ? [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.1.5",
+	"version": "3.1.7",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -24,14 +24,16 @@
 			]
 		}
 	},
-	"sideEffects": false,
+	"sideEffects": [
+		"*.compiled.css"
+	],
 	"atlaskit:src": "src/index.ts",
 	"af:exports": {
 		".": "./src/index.ts"
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.2.1",
-		"@atlaskit/editor-common": "^100.2.0",
+		"@atlaskit/editor-common": "^100.4.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -46,7 +48,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
-		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^2.0.0",
+		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^2.1.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^17.0.0",
 		"@atlaskit/tmp-editor-statsig": "^3.3.0",
@@ -151,6 +153,12 @@
 		},
 		"platform_editor_disable_drag_handle_nested_tables": {
 			"type": "boolean"
+		},
+		"platform_editor_elements_dnd_shift_click_select": {
+			"type": "boolean"
+		},
+		"platform_editor_elements_dnd_multi_select_patch_1": {
+			"type": "boolean"
 		}
 	}
 }