@atlaskit/editor-plugin-block-menu 3.2.0 → 3.2.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 3.2.1
+
+### Patch Changes
+
+- [`7958282e36bdf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7958282e36bdf) -
+  [ux] ED-29222: Show block menu on empty line
+- Updated dependencies
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/cjs/blockMenuPlugin.js

@@ -11,6 +11,7 @@ var _formatNode2 = require("./editor-commands/formatNode");
 var _main = require("./pm-plugins/main");
 var _blockMenu = _interopRequireDefault(require("./ui/block-menu"));
 var _blockMenuComponents = require("./ui/block-menu-components");
+var _blockMenuProvider = require("./ui/block-menu-provider");
 var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
@@ -59,13 +60,15 @@ var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
         popupsMountPoint = _ref2.popupsMountPoint,
         popupsBoundariesElement = _ref2.popupsBoundariesElement,
         popupsScrollableElement = _ref2.popupsScrollableElement;
-      return /*#__PURE__*/_react.default.createElement(_blockMenu.default, {
+      return /*#__PURE__*/_react.default.createElement(_blockMenuProvider.BlockMenuProvider, {
+        api: api
+      }, /*#__PURE__*/_react.default.createElement(_blockMenu.default, {
         editorView: editorView,
         api: api,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement
-      });
+      }));
     }
   };
 };

package/dist/cjs/editor-commands/formatNode.js

@@ -5,7 +5,48 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.formatNode = void 0;
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _layoutTransforms = require("./transforms/layout-transforms");
 var _transformNodeToTargetType = require("./transforms/transformNodeToTargetType");
+/**
+ * Handles formatting when selection is empty by inserting a new target node
+ */
+var formatNodeWhenSelectionEmpty = function formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema) {
+  var _pmSafeInsert;
+  var nodes = schema.nodes;
+  var paragraph = nodes.paragraph;
+  // if not using the ' ' here, the safeInsert from editor-common will fail to insert the heading
+  // and the pmSafeInsert introduce an issue that after inserting heading, and click on the handle, selection will go to top of the doc
+  // as an workaround, use the spaceTextNode here
+  var spaceTextNode = schema.text(' ');
+  var targetNode;
+  if (targetType.startsWith('heading')) {
+    var levelString = targetType.slice(-1);
+    var level = parseInt(levelString, 10);
+    if (isNaN(level) || level < 1 || level > 6) {
+      return null;
+    }
+    targetNode = nodes.heading.createAndFill({
+      level: level
+    }, spaceTextNode);
+  } else if (targetType === 'paragraph') {
+    targetNode = nodes.paragraph.createAndFill({}, spaceTextNode);
+  } else if (targetType === 'layoutSection') {
+    var contentAsParagraph = paragraph.createAndFill({}, spaceTextNode);
+    if (contentAsParagraph) {
+      targetNode = (0, _layoutTransforms.createDefaultLayoutSection)(schema, contentAsParagraph);
+    }
+  } else {
+    var targetNodeType = nodes[targetType];
+    targetNode = targetNodeType.createAndFill();
+  }
+  if (!targetNode) {
+    return tr;
+  }
+  tr = (_pmSafeInsert = (0, _utils.safeInsert)(targetNode, nodePos)(tr)) !== null && _pmSafeInsert !== void 0 ? _pmSafeInsert : tr;
+  return tr;
+};
+
 /**
  * Formats the current node or selection to the specified target type
  * @param targetType - The target node type to convert to
@@ -14,12 +55,18 @@ var formatNode = exports.formatNode = function formatNode(targetType) {
   return function (_ref) {
     var tr = _ref.tr;
     var selection = tr.selection;
-    var nodes = tr.doc.type.schema.nodes;
+    var schema = tr.doc.type.schema;
+    var nodes = schema.nodes;
 
     // Find the node to format from the current selection
     var nodeToFormat;
     var nodePos = selection.from;
 
+    // when selection is empty, we insert a empty target node
+    if (selection.empty && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+      return formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
+    }
+
     // Try to find the current node from selection
     var selectedNode = (0, _utils.findSelectedNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.expand, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection])(selection);
     if (selectedNode) {

package/dist/cjs/editor-commands/transforms/layout-transforms.js

@@ -4,31 +4,38 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transformLayoutNode = exports.convertToLayout = void 0;
+exports.transformLayoutNode = exports.createDefaultLayoutSection = exports.convertToLayout = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils = require("./layout/utils");
+var _utils2 = require("./utils");
+var createDefaultLayoutSection = exports.createDefaultLayoutSection = function createDefaultLayoutSection(schema, content) {
+  var _schema$nodes = schema.nodes,
+    layoutSection = _schema$nodes.layoutSection,
+    layoutColumn = _schema$nodes.layoutColumn,
+    paragraph = _schema$nodes.paragraph;
+  var layoutContent = _model.Fragment.fromArray([layoutColumn.createChecked({
+    width: _styles.DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
+  }, content), layoutColumn.create({
+    width: _styles.DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
+  }, paragraph.createAndFill())]);
+  return layoutSection.createChecked(undefined, layoutContent);
+};
 var convertToLayout = exports.convertToLayout = function convertToLayout(context) {
   var tr = context.tr,
     sourceNode = context.sourceNode,
     sourcePos = context.sourcePos;
-  var _ref = tr.doc.type.schema.nodes || {},
-    layoutSection = _ref.layoutSection,
-    layoutColumn = _ref.layoutColumn,
-    paragraph = _ref.paragraph;
   var content = sourceNode.mark(sourceNode.marks.filter(function (mark) {
     return mark.type.name !== 'breakout';
   }));
-  var layoutContent = _model.Fragment.fromArray([layoutColumn.createChecked({
-    width: _styles.DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
-  }, content), layoutColumn.create({
-    width: _styles.DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
-  }, paragraph.createAndFill())]);
-  var layoutSectionNode = layoutSection.createChecked(undefined, layoutContent);
-
-  // Replace the original node with the new layout node
-  tr.replaceRangeWith(sourcePos, sourcePos + sourceNode.nodeSize, layoutSectionNode);
+  var layoutSectionNode = createDefaultLayoutSection(tr.doc.type.schema, content);
+  if ((0, _utils2.isHeadingOrParagraphNode)(sourceNode)) {
+    // -1 to fix when sourceNode is the last node in the document, unable to convert to layout
+    tr.replaceRangeWith(sourcePos > 0 ? sourcePos - 1 : sourcePos, sourcePos + sourceNode.nodeSize - 1, layoutSectionNode);
+  } else {
+    tr.replaceRangeWith(sourcePos, sourcePos + sourceNode.nodeSize, layoutSectionNode);
+  }
   return tr;
 };
 var transformLayoutNode = exports.transformLayoutNode = function transformLayoutNode(context) {
@@ -38,11 +45,11 @@ var transformLayoutNode = exports.transformLayoutNode = function transformLayout
     sourcePos = context.sourcePos,
     targetAttrs = context.targetAttrs;
   var schema = tr.doc.type.schema || {};
-  var _ref2 = schema.nodes || {},
-    layoutSection = _ref2.layoutSection,
-    layoutColumn = _ref2.layoutColumn,
-    paragraph = _ref2.paragraph,
-    heading = _ref2.heading;
+  var _ref = schema.nodes || {},
+    layoutSection = _ref.layoutSection,
+    layoutColumn = _ref.layoutColumn,
+    paragraph = _ref.paragraph,
+    heading = _ref.heading;
   var layoutColumnNodes = [];
   var targetTextNodeType = targetNodeType === heading ? heading : paragraph;
   sourceNode.children.forEach(function (child) {

package/dist/cjs/ui/block-menu-components.js

@@ -15,6 +15,7 @@ var _copyBlock = _interopRequireDefault(require("./copy-block"));
 var _copyLink = require("./copy-link");
 var _copySection = require("./copy-section");
 var _deleteButton = require("./delete-button");
+var _deleteSection = require("./delete-section");
 var _formatMenuSection = require("./format-menu-section");
 var _moveDown = require("./move-down");
 var _moveUp = require("./move-up");
@@ -155,8 +156,8 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     rank: _blockMenu.BLOCK_MENU_SECTION_RANK[_blockMenu.DELETE_MENU_SECTION.key],
     component: function component(_ref7) {
       var children = _ref7.children;
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
-        hasSeparator: true
+      return /*#__PURE__*/_react.default.createElement(_deleteSection.DeleteSection, {
+        api: api
       }, children);
     }
   }], (0, _toConsumableArray2.default)(getMoveUpMoveDownMenuComponents(api)), [{

package/dist/cjs/ui/block-menu-provider.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBlockMenu = exports.BlockMenuProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var BlockMenuContext = /*#__PURE__*/(0, _react.createContext)({
+  onDropdownOpenChanged: function onDropdownOpenChanged() {}
+});
+var useBlockMenu = exports.useBlockMenu = function useBlockMenu() {
+  var context = (0, _react.useContext)(BlockMenuContext);
+  if (!context) {
+    throw new Error('useBlockMenu must be used within BlockMenuProvider');
+  }
+  return context;
+};
+var BlockMenuProvider = exports.BlockMenuProvider = function BlockMenuProvider(_ref) {
+  var children = _ref.children,
+    api = _ref.api;
+  var onDropdownOpenChanged = (0, _react.useCallback)(function (isOpen) {
+    if (!isOpen) {
+      // On Dropdown closed, return focus to editor
+      setTimeout(function () {
+        return requestAnimationFrame(function () {
+          api === null || api === void 0 || api.core.actions.focus({
+            scrollIntoView: false
+          });
+        });
+      }, 1);
+    }
+  }, [api]);
+  return /*#__PURE__*/_react.default.createElement(BlockMenuContext.Provider, {
+    value: {
+      onDropdownOpenChanged: onDropdownOpenChanged
+    }
+  }, children);
+};

package/dist/cjs/ui/block-menu.js

@@ -18,6 +18,8 @@ var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _blockMenuProvider = require("./block-menu-provider");
 var _blockMenuRenderer = require("./block-menu-renderer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
@@ -73,15 +75,22 @@ var BlockMenu = function BlockMenu(_ref2) {
     isSelectedViaDragHandle = _useSharedPluginState.isSelectedViaDragHandle,
     isMenuOpen = _useSharedPluginState.isMenuOpen,
     currentUserIntent = _useSharedPluginState.currentUserIntent;
+  var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
+    onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
   var hasFocus = (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   var hasSelection = !!editorView && !editorView.state.selection.empty;
+  var emptyLineEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true);
+
+  // hasSelection true, always show block menu
+  // hasSelection false, only show block menu when empty line experiment is enabled
+  var shouldShowBlockMenuForEmptyLine = hasSelection || emptyLineEnabled && !hasSelection;
   (0, _react.useEffect)(function () {
     var _api$userIntent;
-    if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+    if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
       return;
     }
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
-  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, hasSelection, currentUserIntent]);
+  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent]);
   if (!isMenuOpen) {
     return null;
   }
@@ -94,13 +103,14 @@ var BlockMenu = function BlockMenu(_ref2) {
       })({
         tr: tr
       });
+      onDropdownOpenChanged(false);
       api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
         tr: tr
       });
       return tr;
     });
   };
-  if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+  if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;
   }

package/dist/cjs/ui/copy-block.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
@@ -15,6 +16,8 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var toDOMFromFragment = function toDOMFromFragment(fragment, schema) {
   return _model.DOMSerializer.fromSchema(schema).serializeFragment(fragment);
 };
@@ -80,10 +83,15 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
         // When nodeType.inlineContent is true, it will be treated as an inline node in the copyDomNode function,
         // but we want to treat it as a block node when copying, hence setting it to false here
         if (selection.node.type.name === 'codeBlock') {
-          _nodeType.inlineContent = false;
+          var codeBlockNodeType = _objectSpread(_objectSpread({}, _nodeType), {}, {
+            inlineContent: false
+          });
+          var _domNode2 = (0, _copyButton.toDOM)(selection.node, schema);
+          (0, _copyButton.copyDomNode)(_domNode2, codeBlockNodeType, selection);
+        } else {
+          var _domNode3 = (0, _copyButton.toDOM)(selection.node, schema);
+          (0, _copyButton.copyDomNode)(_domNode3, _nodeType, selection);
         }
-        var _domNode2 = (0, _copyButton.toDOM)(selection.node, schema);
-        (0, _copyButton.copyDomNode)(_domNode2, _nodeType, selection);
       }
 
       // close the block menu after copying

package/dist/cjs/ui/copy-section.js

@@ -7,14 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.CopySection = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _checkIsFormatMenuHidden = require("./utils/checkIsFormatMenuHidden");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var CopySection = exports.CopySection = function CopySection(_ref) {
+  var _api$selection;
   var api = _ref.api,
     children = _ref.children;
   var isFormatMenuHidden = (0, _react.useCallback)(function () {
     return (0, _checkIsFormatMenuHidden.checkIsFormatMenuHidden)(api);
   }, [api]);
+  var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
+  var isEmptyLineSelected = !!(selection !== null && selection !== void 0 && selection.empty) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true);
+  if (isEmptyLineSelected) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
     hasSeparator: !isFormatMenuHidden()
   }, children);

package/dist/cjs/ui/delete-section.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeleteSection = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var DeleteSection = exports.DeleteSection = function DeleteSection(_ref) {
+  var _api$selection;
+  var api = _ref.api,
+    children = _ref.children;
+  var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
+  var isEmptyLineSelected = !!(selection !== null && selection !== void 0 && selection.empty) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true);
+  if (isEmptyLineSelected) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, children);
+};

package/dist/cjs/ui/utils/checkIsFormatMenuHidden.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.checkIsFormatMenuHidden = void 0;
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _isNestedNode = require("./isNestedNode");
 var getIsFormatMenuHidden = function getIsFormatMenuHidden(selection, schema, menuTriggerBy) {
   var nodes = schema.nodes;
@@ -32,6 +33,39 @@ var getIsFormatMenuHidden = function getIsFormatMenuHidden(selection, schema, me
   var isNested = (0, _isNestedNode.isNestedNode)(selection, menuTriggerBy);
   return !content || isNested;
 };
+var getIsFormatMenuHiddenEmptyLine = function getIsFormatMenuHiddenEmptyLine(selection, schema, menuTriggerBy) {
+  var nodes = schema.nodes;
+  if (!nodes) {
+    return false;
+  }
+  var isNested = (0, _isNestedNode.isNestedNode)(selection, menuTriggerBy);
+  if (selection.empty || selection.content().size === 0) {
+    // if empty selection, show format menu
+    return false;
+  } else if (isNested) {
+    // if nested,  always hide format menu
+    return true;
+  } else {
+    var content;
+    var allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList];
+    if ((0, _expValEquals.expValEquals)('platform_editor_block_menu_layout_format', 'isEnabled', true)) {
+      allowedNodes.push(nodes.layoutSection);
+    }
+    if ((0, _expValEquals.expValEquals)('platform_editor_block_menu_expand_format', 'isEnabled', true)) {
+      allowedNodes.push(nodes.expand);
+    }
+    var selectedNode = (0, _utils.findSelectedNodeOfType)(allowedNodes)(selection);
+    if (selectedNode) {
+      content = selectedNode.node;
+    } else {
+      var listTypeOrBlockQuoteNode = (0, _utils.findParentNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.listItem, nodes.taskItem])(selection);
+      if (listTypeOrBlockQuoteNode) {
+        content = listTypeOrBlockQuoteNode.node;
+      }
+    }
+    return !content;
+  }
+};
 var checkIsFormatMenuHidden = exports.checkIsFormatMenuHidden = function checkIsFormatMenuHidden(api) {
   var _api$selection, _api$core$sharedState, _api$blockControls;
   var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
@@ -40,5 +74,5 @@ var checkIsFormatMenuHidden = exports.checkIsFormatMenuHidden = function checkIs
   if (!selection || !schema || !menuTriggerBy) {
     return false;
   }
-  return getIsFormatMenuHidden(selection, schema, menuTriggerBy);
+  return (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true) ? getIsFormatMenuHiddenEmptyLine(selection, schema, menuTriggerBy) : getIsFormatMenuHidden(selection, schema, menuTriggerBy);
 };

package/dist/es2019/blockMenuPlugin.js

@@ -4,6 +4,7 @@ import { formatNode } from './editor-commands/formatNode';
 import { createPlugin } from './pm-plugins/main';
 import BlockMenu from './ui/block-menu';
 import { getBlockMenuComponents } from './ui/block-menu-components';
+import { BlockMenuProvider } from './ui/block-menu-provider';
 export const blockMenuPlugin = ({
   api,
   config
@@ -54,13 +55,15 @@ export const blockMenuPlugin = ({
       popupsBoundariesElement,
       popupsScrollableElement
     }) {
-      return /*#__PURE__*/React.createElement(BlockMenu, {
+      return /*#__PURE__*/React.createElement(BlockMenuProvider, {
+        api: api
+      }, /*#__PURE__*/React.createElement(BlockMenu, {
         editorView: editorView,
         api: api,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement
-      });
+      }));
     }
   };
 };

package/dist/es2019/editor-commands/formatNode.js

@@ -1,5 +1,50 @@
-import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfType, findSelectedNodeOfType, safeInsert as pmSafeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { createDefaultLayoutSection } from './transforms/layout-transforms';
 import { transformNodeToTargetType } from './transforms/transformNodeToTargetType';
+/**
+ * Handles formatting when selection is empty by inserting a new target node
+ */
+const formatNodeWhenSelectionEmpty = (tr, targetType, nodePos, schema) => {
+  var _pmSafeInsert;
+  const {
+    nodes
+  } = schema;
+  const {
+    paragraph
+  } = nodes;
+  // if not using the ' ' here, the safeInsert from editor-common will fail to insert the heading
+  // and the pmSafeInsert introduce an issue that after inserting heading, and click on the handle, selection will go to top of the doc
+  // as an workaround, use the spaceTextNode here
+  const spaceTextNode = schema.text(' ');
+  let targetNode;
+  if (targetType.startsWith('heading')) {
+    const levelString = targetType.slice(-1);
+    const level = parseInt(levelString, 10);
+    if (isNaN(level) || level < 1 || level > 6) {
+      return null;
+    }
+    targetNode = nodes.heading.createAndFill({
+      level
+    }, spaceTextNode);
+  } else if (targetType === 'paragraph') {
+    targetNode = nodes.paragraph.createAndFill({}, spaceTextNode);
+  } else if (targetType === 'layoutSection') {
+    const contentAsParagraph = paragraph.createAndFill({}, spaceTextNode);
+    if (contentAsParagraph) {
+      targetNode = createDefaultLayoutSection(schema, contentAsParagraph);
+    }
+  } else {
+    const targetNodeType = nodes[targetType];
+    targetNode = targetNodeType.createAndFill();
+  }
+  if (!targetNode) {
+    return tr;
+  }
+  tr = (_pmSafeInsert = pmSafeInsert(targetNode, nodePos)(tr)) !== null && _pmSafeInsert !== void 0 ? _pmSafeInsert : tr;
+  return tr;
+};
+
 /**
  * Formats the current node or selection to the specified target type
  * @param targetType - The target node type to convert to
@@ -11,14 +56,20 @@ export const formatNode = targetType => {
     const {
       selection
     } = tr;
+    const schema = tr.doc.type.schema;
     const {
       nodes
-    } = tr.doc.type.schema;
+    } = schema;
 
     // Find the node to format from the current selection
     let nodeToFormat;
     let nodePos = selection.from;
 
+    // when selection is empty, we insert a empty target node
+    if (selection.empty && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+      return formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
+    }
+
     // Try to find the current node from selection
     const selectedNode = findSelectedNodeOfType([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.expand, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection])(selection);
     if (selectedNode) {

package/dist/es2019/editor-commands/transforms/layout-transforms.js

@@ -1,27 +1,34 @@
 import { DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH } from '@atlaskit/editor-common/styles';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { convertUnwrappedLayoutContent, unwrapLayoutNodesToTextNodes } from './layout/utils';
-export const convertToLayout = context => {
-  const {
-    tr,
-    sourceNode,
-    sourcePos
-  } = context;
+import { isHeadingOrParagraphNode } from './utils';
+export const createDefaultLayoutSection = (schema, content) => {
   const {
     layoutSection,
     layoutColumn,
     paragraph
-  } = tr.doc.type.schema.nodes || {};
-  const content = sourceNode.mark(sourceNode.marks.filter(mark => mark.type.name !== 'breakout'));
+  } = schema.nodes;
   const layoutContent = Fragment.fromArray([layoutColumn.createChecked({
     width: DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
   }, content), layoutColumn.create({
     width: DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
   }, paragraph.createAndFill())]);
-  const layoutSectionNode = layoutSection.createChecked(undefined, layoutContent);
-
-  // Replace the original node with the new layout node
-  tr.replaceRangeWith(sourcePos, sourcePos + sourceNode.nodeSize, layoutSectionNode);
+  return layoutSection.createChecked(undefined, layoutContent);
+};
+export const convertToLayout = context => {
+  const {
+    tr,
+    sourceNode,
+    sourcePos
+  } = context;
+  const content = sourceNode.mark(sourceNode.marks.filter(mark => mark.type.name !== 'breakout'));
+  const layoutSectionNode = createDefaultLayoutSection(tr.doc.type.schema, content);
+  if (isHeadingOrParagraphNode(sourceNode)) {
+    // -1 to fix when sourceNode is the last node in the document, unable to convert to layout
+    tr.replaceRangeWith(sourcePos > 0 ? sourcePos - 1 : sourcePos, sourcePos + sourceNode.nodeSize - 1, layoutSectionNode);
+  } else {
+    tr.replaceRangeWith(sourcePos, sourcePos + sourceNode.nodeSize, layoutSectionNode);
+  }
   return tr;
 };
 export const transformLayoutNode = context => {

package/dist/es2019/ui/block-menu-components.js

@@ -7,6 +7,7 @@ import CopyBlockMenuItem from './copy-block';
 import { CopyLinkDropdownItem } from './copy-link';
 import { CopySection } from './copy-section';
 import { DeleteDropdownItem } from './delete-button';
+import { DeleteSection } from './delete-section';
 import { FormatMenuSection } from './format-menu-section';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
@@ -144,8 +145,8 @@ export const getBlockMenuComponents = ({
     component: ({
       children
     }) => {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-        hasSeparator: true
+      return /*#__PURE__*/React.createElement(DeleteSection, {
+        api: api
       }, children);
     }
   }, ...getMoveUpMoveDownMenuComponents(api), {

package/dist/es2019/ui/block-menu-provider.js

@@ -0,0 +1,31 @@
+import React, { useCallback, createContext, useContext } from 'react';
+const BlockMenuContext = /*#__PURE__*/createContext({
+  onDropdownOpenChanged: () => {}
+});
+export const useBlockMenu = () => {
+  const context = useContext(BlockMenuContext);
+  if (!context) {
+    throw new Error('useBlockMenu must be used within BlockMenuProvider');
+  }
+  return context;
+};
+export const BlockMenuProvider = ({
+  children,
+  api
+}) => {
+  const onDropdownOpenChanged = useCallback(isOpen => {
+    if (!isOpen) {
+      // On Dropdown closed, return focus to editor
+      setTimeout(() => requestAnimationFrame(() => {
+        api === null || api === void 0 ? void 0 : api.core.actions.focus({
+          scrollIntoView: false
+        });
+      }), 1);
+    }
+  }, [api]);
+  return /*#__PURE__*/React.createElement(BlockMenuContext.Provider, {
+    value: {
+      onDropdownOpenChanged
+    }
+  }, children);
+};