@atlaskit/editor-plugin-block-controls 3.3.6 → 3.3.8

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.3.8
+
+### Patch Changes
+
+- [#124180](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124180)
+  [`f3f332175bf17`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f3f332175bf17) -
+  add case for quick insert button to handle block nodes which are leaf nodes, and handle media
+- Updated dependencies
+
+## 3.3.7
+
+### Patch Changes
+
+- [#124718](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124718)
+  [`d923941c82bb4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d923941c82bb4) -
+  Disable block menu in Editor controls
+
 ## 3.3.6
 
 ### Patch Changes

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

@@ -21,6 +21,7 @@ var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _consts = require("../ui/consts");
 var _decorationsAnchor = require("./decorations-anchor");
 var _decorationsDragHandle = require("./decorations-drag-handle");
 var _decorationsDropTarget = require("./decorations-drop-target");
@@ -363,7 +364,7 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   }
   var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
   var isMenuOpenNew = isMenuOpen;
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+  if (_consts.BLOCK_MENU_ENABLED && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     if (meta !== null && meta !== void 0 && meta.closeMenu) {
       isMenuOpenNew = false;
     } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_MENU_WIDTH = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_MENU_WIDTH = exports.BLOCK_MENU_ENABLED = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -344,4 +344,8 @@ var DEFAULT_COLUMN_DISTRIBUTIONS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = {
   4: 25,
   5: 20
 };
-var BLOCK_MENU_WIDTH = exports.BLOCK_MENU_WIDTH = 220;
+var BLOCK_MENU_WIDTH = exports.BLOCK_MENU_WIDTH = 220;
+
+// 	Temporarily disable BLOCK MENU feature until Q4 FY25.
+//  For more details, refer to ticket ED-26972 https://product-fabric.atlassian.net/browse/ED-26972
+var BLOCK_MENU_ENABLED = exports.BLOCK_MENU_ENABLED = false;

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

@@ -200,7 +200,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       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')) {
+        if (_consts.BLOCK_MENU_ENABLED && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
           var _api$blockControls;
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
             anchorName: anchorName

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

@@ -19,6 +19,8 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
 var _widgetPositions = require("../pm-plugins/utils/widget-positions");
 var _consts = require("./consts");
+var _documentChecks = require("./utils/document-checks");
+var _editorCommands = require("./utils/editor-commands");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var buttonStyles = (0, _primitives.xcss)({
@@ -52,18 +54,6 @@ var containerStaticStyles = (0, _primitives.xcss)({
 
 // TODO: ED-26959 - 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,
@@ -143,6 +133,38 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
   }, [calculatePosition, view.dom, rootAnchorName, rootNodeType]);
+  var handleQuickInsert = (0, _react.useCallback)(function () {
+    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) {
+      // if the selection is not within the node this decoration is rendered at
+      // or the node is non-editable, then insert a newline and trigger quick insert
+      if (!(0, _documentChecks.isSelectionInNode)(start, view) || (0, _documentChecks.isNonEditableBlock)(start, view)) {
+        api.core.actions.execute((0, _editorCommands.createNewLine)(start));
+      }
+      if ((0, _documentChecks.isSelectionInNode)(start, view) && (0, _documentChecks.isNestedNodeSelected)(view)) {
+        // if the nested selected node is non-editable, then insert a newline below the selected node
+        if ((0, _documentChecks.isNonEditableBlock)(view.state.selection.from, view)) {
+          api.core.actions.execute((0, _editorCommands.createNewLine)(view.state.selection.from));
+        } else {
+          // otherwise need to force the selection to be at the start of the node, because
+          // prosemirror is keeping it as NodeSelection for nested nodes. Do this to keep it
+          // consistent NodeSelection for root level nodes.
+          api.core.actions.execute(function (_ref2) {
+            var tr = _ref2.tr;
+            (0, _editorCommands.createNewLine)(view.state.selection.from)({
+              tr: tr
+            });
+            tr.setSelection(_state.TextSelection.create(tr.doc, view.state.selection.from));
+            return tr;
+          });
+        }
+      }
+    }
+    api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
+  }, [api, getPos, view]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -157,26 +179,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       type: "button",
       "aria-label": formatMessage(_messages.blockControlsMessages.insert),
       xcss: [buttonStyles],
-      onClick: function onClick() {
-        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');
-      }
+      onClick: handleQuickInsert
     }, /*#__PURE__*/_react.default.createElement(_add.default, {
       label: "add"
     }))))

package/dist/cjs/ui/utils/document-checks.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSelectionInNode = exports.isNonEditableBlock = exports.isNestedNodeSelected = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var isNestedNodeSelected = exports.isNestedNodeSelected = function isNestedNodeSelected(view) {
+  var selection = view.state.selection;
+  return selection instanceof _state.NodeSelection && selection.$from.depth > 1;
+};
+var isSelectionInNode = exports.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 isNonEditableBlock = exports.isNonEditableBlock = function isNonEditableBlock(start, view) {
+  var node = view.state.doc.nodeAt(start);
+  if (node === null) {
+    return false;
+  }
+
+  // We want to treat some elements as if they are non-editable blocks for
+  // the purposes of quick insert.
+  switch (node.type.name) {
+    // mediaSingle and mediaGroup always contain a media child node, which is
+    // both a block and an atom. mediaSingle can also have a caption child node
+    // which is an editable block.
+    case 'mediaGroup':
+    case 'mediaSingle':
+      return true;
+  }
+  return node.isBlock && (node.isAtom || node.isLeaf);
+};

package/dist/cjs/ui/utils/editor-commands.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createNewLine = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var createNewLine = exports.createNewLine = function createNewLine(start) {
+  return function (_ref) {
+    var _tr$doc$nodeAt;
+    var tr = _ref.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));
+  };
+};

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

@@ -12,6 +12,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { BLOCK_MENU_ENABLED } from '../ui/consts';
 import { findNodeDecs, nodeDecorations } from './decorations-anchor';
 import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
@@ -360,7 +361,7 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
   }
   const newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
   let isMenuOpenNew = isMenuOpen;
-  if (editorExperiment('platform_editor_controls', 'variant1')) {
+  if (BLOCK_MENU_ENABLED && editorExperiment('platform_editor_controls', 'variant1')) {
     if (meta !== null && meta !== void 0 && meta.closeMenu) {
       isMenuOpenNew = false;
     } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {

package/dist/es2019/ui/consts.js

@@ -353,4 +353,8 @@ export const DEFAULT_COLUMN_DISTRIBUTIONS = {
   4: 25,
   5: 20
 };
-export const BLOCK_MENU_WIDTH = 220;
+export const BLOCK_MENU_WIDTH = 220;
+
+// 	Temporarily disable BLOCK MENU feature until Q4 FY25.
+//  For more details, refer to ticket ED-26972 https://product-fabric.atlassian.net/browse/ED-26972
+export const BLOCK_MENU_ENABLED = false;

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

@@ -2,7 +2,9 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 import { useCallback, useEffect, useRef, useState } from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
@@ -26,7 +28,7 @@ import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics
 import { getLeftPosition, getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
-import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
+import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 const iconWrapperStyles = xcss({
   display: 'flex',
@@ -181,7 +183,7 @@ export const DragHandle = ({
       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')) {
+        if (BLOCK_MENU_ENABLED && editorExperiment('platform_editor_controls', 'variant1')) {
           var _api$blockControls;
           api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu({
             anchorName

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

@@ -10,6 +10,8 @@ import Tooltip from '@atlaskit/tooltip';
 import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
 import { QUICK_INSERT_DIMENSIONS, rootElementGap, topPositionAdjustment } from './consts';
+import { isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
+import { createNewLine } from './utils/editor-commands';
 const buttonStyles = xcss({
   boxSizing: 'border-box',
   display: 'flex',
@@ -41,19 +43,6 @@ const containerStaticStyles = xcss({
 
 // TODO: ED-26959 - 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,
@@ -131,6 +120,39 @@ export const TypeAheadControl = ({
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 ? void 0 : _cleanUpTransitionLis();
     };
   }, [calculatePosition, view.dom, rootAnchorName, rootNodeType]);
+  const handleQuickInsert = useCallback(() => {
+    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) {
+      // if the selection is not within the node this decoration is rendered at
+      // or the node is non-editable, then insert a newline and trigger quick insert
+      if (!isSelectionInNode(start, view) || isNonEditableBlock(start, view)) {
+        api.core.actions.execute(createNewLine(start));
+      }
+      if (isSelectionInNode(start, view) && isNestedNodeSelected(view)) {
+        // if the nested selected node is non-editable, then insert a newline below the selected node
+        if (isNonEditableBlock(view.state.selection.from, view)) {
+          api.core.actions.execute(createNewLine(view.state.selection.from));
+        } else {
+          // otherwise need to force the selection to be at the start of the node, because
+          // prosemirror is keeping it as NodeSelection for nested nodes. Do this to keep it
+          // consistent NodeSelection for root level nodes.
+          api.core.actions.execute(({
+            tr
+          }) => {
+            createNewLine(view.state.selection.from)({
+              tr
+            });
+            tr.setSelection(TextSelection.create(tr.doc, view.state.selection.from));
+            return tr;
+          });
+        }
+      }
+    }
+    api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.actions.openTypeAhead('blockControl');
+  }, [api, getPos, view]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -145,27 +167,7 @@ export const TypeAheadControl = ({
       type: "button",
       "aria-label": formatMessage(messages.insert),
       xcss: [buttonStyles],
-      onClick: () => {
-        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');
-      }
+      onClick: handleQuickInsert
     }, /*#__PURE__*/React.createElement(AddIcon, {
       label: "add"
     }))))

package/dist/es2019/ui/utils/document-checks.js

@@ -0,0 +1,36 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export const isNestedNodeSelected = view => {
+  const selection = view.state.selection;
+  return selection instanceof NodeSelection && selection.$from.depth > 1;
+};
+export 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 isNonEditableBlock = (start, view) => {
+  const node = view.state.doc.nodeAt(start);
+  if (node === null) {
+    return false;
+  }
+
+  // We want to treat some elements as if they are non-editable blocks for
+  // the purposes of quick insert.
+  switch (node.type.name) {
+    // mediaSingle and mediaGroup always contain a media child node, which is
+    // both a block and an atom. mediaSingle can also have a caption child node
+    // which is an editable block.
+    case 'mediaGroup':
+    case 'mediaSingle':
+      return true;
+  }
+  return node.isBlock && (node.isAtom || node.isLeaf);
+};

package/dist/es2019/ui/utils/editor-commands.js

@@ -0,0 +1,13 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export const createNewLine = start => ({
+  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));
+};

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

@@ -16,6 +16,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { BLOCK_MENU_ENABLED } from '../ui/consts';
 import { findNodeDecs, nodeDecorations } from './decorations-anchor';
 import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
@@ -356,7 +357,7 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
   }
   var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
   var isMenuOpenNew = isMenuOpen;
-  if (editorExperiment('platform_editor_controls', 'variant1')) {
+  if (BLOCK_MENU_ENABLED && editorExperiment('platform_editor_controls', 'variant1')) {
     if (meta !== null && meta !== void 0 && meta.closeMenu) {
       isMenuOpenNew = false;
     } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {

package/dist/esm/ui/consts.js

@@ -337,4 +337,8 @@ export var DEFAULT_COLUMN_DISTRIBUTIONS = {
   4: 25,
   5: 20
 };
-export var BLOCK_MENU_WIDTH = 220;
+export var BLOCK_MENU_WIDTH = 220;
+
+// 	Temporarily disable BLOCK MENU feature until Q4 FY25.
+//  For more details, refer to ticket ED-26972 https://product-fabric.atlassian.net/browse/ED-26972
+export var BLOCK_MENU_ENABLED = false;

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

@@ -7,7 +7,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 import { useCallback, useEffect, useRef, useState } from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
@@ -31,7 +33,7 @@ import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics
 import { getLeftPosition, getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
-import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
+import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 var iconWrapperStyles = xcss({
   display: 'flex',
@@ -195,7 +197,7 @@ export var DragHandle = function DragHandle(_ref) {
       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')) {
+        if (BLOCK_MENU_ENABLED && editorExperiment('platform_editor_controls', 'variant1')) {
           var _api$blockControls;
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
             anchorName: anchorName

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

@@ -11,6 +11,8 @@ import Tooltip from '@atlaskit/tooltip';
 import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
 import { QUICK_INSERT_DIMENSIONS, rootElementGap, topPositionAdjustment } from './consts';
+import { isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
+import { createNewLine } from './utils/editor-commands';
 var buttonStyles = xcss({
   boxSizing: 'border-box',
   display: 'flex',
@@ -42,18 +44,6 @@ var containerStaticStyles = xcss({
 
 // TODO: ED-26959 - 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,
@@ -133,6 +123,38 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
   }, [calculatePosition, view.dom, rootAnchorName, rootNodeType]);
+  var handleQuickInsert = useCallback(function () {
+    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) {
+      // if the selection is not within the node this decoration is rendered at
+      // or the node is non-editable, then insert a newline and trigger quick insert
+      if (!isSelectionInNode(start, view) || isNonEditableBlock(start, view)) {
+        api.core.actions.execute(createNewLine(start));
+      }
+      if (isSelectionInNode(start, view) && isNestedNodeSelected(view)) {
+        // if the nested selected node is non-editable, then insert a newline below the selected node
+        if (isNonEditableBlock(view.state.selection.from, view)) {
+          api.core.actions.execute(createNewLine(view.state.selection.from));
+        } else {
+          // otherwise need to force the selection to be at the start of the node, because
+          // prosemirror is keeping it as NodeSelection for nested nodes. Do this to keep it
+          // consistent NodeSelection for root level nodes.
+          api.core.actions.execute(function (_ref2) {
+            var tr = _ref2.tr;
+            createNewLine(view.state.selection.from)({
+              tr: tr
+            });
+            tr.setSelection(TextSelection.create(tr.doc, view.state.selection.from));
+            return tr;
+          });
+        }
+      }
+    }
+    api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
+  }, [api, getPos, view]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -147,26 +169,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       type: "button",
       "aria-label": formatMessage(messages.insert),
       xcss: [buttonStyles],
-      onClick: function onClick() {
-        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');
-      }
+      onClick: handleQuickInsert
     }, /*#__PURE__*/React.createElement(AddIcon, {
       label: "add"
     }))))

package/dist/esm/ui/utils/document-checks.js

@@ -0,0 +1,35 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export var isNestedNodeSelected = function isNestedNodeSelected(view) {
+  var selection = view.state.selection;
+  return selection instanceof NodeSelection && selection.$from.depth > 1;
+};
+export 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 isNonEditableBlock = function isNonEditableBlock(start, view) {
+  var node = view.state.doc.nodeAt(start);
+  if (node === null) {
+    return false;
+  }
+
+  // We want to treat some elements as if they are non-editable blocks for
+  // the purposes of quick insert.
+  switch (node.type.name) {
+    // mediaSingle and mediaGroup always contain a media child node, which is
+    // both a block and an atom. mediaSingle can also have a caption child node
+    // which is an editable block.
+    case 'mediaGroup':
+    case 'mediaSingle':
+      return true;
+  }
+  return node.isBlock && (node.isAtom || node.isLeaf);
+};

package/dist/esm/ui/utils/editor-commands.js

@@ -0,0 +1,14 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export var createNewLine = function createNewLine(start) {
+  return function (_ref) {
+    var _tr$doc$nodeAt;
+    var tr = _ref.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));
+  };
+};

package/dist/types/ui/consts.d.ts

@@ -59,3 +59,4 @@ export declare const DEFAULT_COLUMN_DISTRIBUTIONS: {
     [key: number]: number;
 };
 export declare const BLOCK_MENU_WIDTH = 220;
+export declare const BLOCK_MENU_ENABLED = false;

package/dist/types/ui/utils/document-checks.d.ts

@@ -0,0 +1,4 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const isNestedNodeSelected: (view: EditorView) => boolean;
+export declare const isSelectionInNode: (start: number, view: EditorView) => boolean;
+export declare const isNonEditableBlock: (start: number, view: EditorView) => boolean;

package/dist/types/ui/utils/editor-commands.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const createNewLine: (start: number) => EditorCommand;

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

@@ -59,3 +59,4 @@ export declare const DEFAULT_COLUMN_DISTRIBUTIONS: {
     [key: number]: number;
 };
 export declare const BLOCK_MENU_WIDTH = 220;
+export declare const BLOCK_MENU_ENABLED = false;

package/dist/types-ts4.5/ui/utils/document-checks.d.ts

@@ -0,0 +1,4 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const isNestedNodeSelected: (view: EditorView) => boolean;
+export declare const isSelectionInNode: (start: number, view: EditorView) => boolean;
+export declare const isNonEditableBlock: (start: number, view: EditorView) => boolean;

package/dist/types-ts4.5/ui/utils/editor-commands.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const createNewLine: (start: number) => EditorCommand;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.3.6",
+	"version": "3.3.8",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^3.5.0",
-		"@atlaskit/tokens": "^4.3.0",
+		"@atlaskit/tokens": "^4.4.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",