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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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

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

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.1.5",
+	"version": "3.1.6",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -151,6 +151,9 @@
 		},
 		"platform_editor_disable_drag_handle_nested_tables": {
 			"type": "boolean"
+		},
+		"platform_editor_elements_dnd_shift_click_select": {
+			"type": "boolean"
 		}
 	}
 }