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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 3.2.2
+
+### Patch Changes
+
+- [`0cde512c00691`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0cde512c00691) -
+  [ux] When resized node it transformed to another resized node, the width should be preserved.
+- [`245e047a2f6e9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/245e047a2f6e9) -
+  [ux] Change `Format` option text to `Turn into` in block menu
+- Updated dependencies
+
+## 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/container-transforms.js

@@ -35,9 +35,11 @@ var transformToContainer = exports.transformToContainer = function transformToCo
   var schema = tr.doc.type.schema;
   var content = selection.content().content;
   var transformedContent = content;
+  var marks = [];
   if (sourceNode.type === schema.nodes.codeBlock) {
     var paragraphNodes = (0, _utils2.convertCodeBlockContentToParagraphs)(sourceNode, schema);
     transformedContent = _model.Fragment.fromArray(paragraphNodes);
+    marks = (0, _utils2.getMarksWithBreakout)(sourceNode, targetNodeType);
   }
   if (targetNodeType === schema.nodes.blockquote) {
     transformedContent = convertInvalidNodeToValidNodeType(transformedContent, schema.nodes.heading, schema.nodes.paragraph, true);
@@ -49,7 +51,7 @@ var transformToContainer = exports.transformToContainer = function transformToCo
   if (sourceNode.type === schema.nodes.paragraph || sourceNode.type === schema.nodes.heading) {
     transformedContent = (0, _utils2.filterMarksForTargetNodeType)(transformedContent, targetNodeType);
   }
-  var newNode = targetNodeType.createAndFill(targetAttrs, transformedContent);
+  var newNode = targetNodeType.createAndFill(targetAttrs, transformedContent, marks);
   if (!newNode) {
     return null;
   }
@@ -175,7 +177,8 @@ var unwrapAndConvertToBlockType = exports.unwrapAndConvertToBlockType = function
     var codeBlockContent = sourceChildren.map(function (node) {
       return node.content.textBetween(0, node.content.size, '\n');
     }).join('\n');
-    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent))];
+    var marks = (0, _utils2.getMarksWithBreakout)(sourceNode, targetNodeType);
+    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent), marks)];
   }
   var slice = new _model.Slice(_model.Fragment.fromArray(transformedContent), 0, 0);
   tr.replaceRange(rangeStart, rangeStart + sourceNode.nodeSize, slice);
@@ -272,6 +275,12 @@ var transformBetweenContainerTypes = exports.transformBetweenContainerTypes = fu
   // Special handling for codeBlock target
   if (targetNodeType.name === 'codeBlock') {
     var _contentSplits = splitContentForCodeBlock(sourceNode, targetNodeType, targetAttrs, tr.doc.type.schema);
+    if (_contentSplits.length === 0) {
+      var schema = tr.doc.type.schema;
+      var marks = (0, _utils2.getMarksWithBreakout)(sourceNode, targetNodeType);
+      var codeBlock = schema.nodes.codeBlock.create(targetAttrs, null, marks);
+      return tr.replaceWith(sourcePos, sourcePos + sourceNode.nodeSize, codeBlock);
+    }
     return applySplitsToTransaction(tr, sourcePos, sourceNode.nodeSize, _contentSplits);
   }
 
@@ -319,7 +328,8 @@ var splitContentForCodeBlock = function splitContentForCodeBlock(sourceNode, tar
   var flushCurrentCodeBlock = function flushCurrentCodeBlock() {
     if (currentTextContent.length > 0) {
       var codeText = currentTextContent.join('\n');
-      var codeBlockNode = targetNodeType.create(targetAttrs, schema.text(codeText));
+      var marks = (0, _utils2.getMarksWithBreakout)(sourceNode, targetNodeType);
+      var codeBlockNode = targetNodeType.create(targetAttrs, schema.text(codeText), marks);
       splits.push(codeBlockNode);
       currentTextContent = [];
     }
@@ -390,7 +400,8 @@ var splitContentAroundUnsupportedBlocks = function splitContentAroundUnsupported
   }
   var flushCurrentContainer = function flushCurrentContainer() {
     if (currentContainerContent.length > 0) {
-      var containerNode = targetNodeType.create(targetAttrs, _model.Fragment.fromArray(currentContainerContent));
+      var marks = (0, _utils2.getMarksWithBreakout)(sourceNode, targetNodeType);
+      var containerNode = targetNodeType.create(targetAttrs, _model.Fragment.fromArray(currentContainerContent), marks);
       splits.push(containerNode);
       currentContainerContent = [];
     }

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

@@ -4,31 +4,42 @@ 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, marks) {
+  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, marks);
+};
 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);
+  // Layout supports breakout mark that can have width attribute
+  // When other nodes with breakout (codeBlock and expand) are converted to a layout, the layout should get width of original node
+  var marks = (0, _utils2.getMarksWithBreakout)(sourceNode, tr.doc.type.schema.nodes.layoutSection);
+  var layoutSectionNode = createDefaultLayoutSection(tr.doc.type.schema, content, marks);
+  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 +49,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/editor-commands/transforms/utils.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isListNodeType = exports.isListNode = exports.isLayoutNodeType = exports.isLayoutNode = exports.isHeadingOrParagraphNode = exports.isContainerNodeType = exports.isContainerNode = exports.isBlockNodeType = exports.isBlockNodeForExtraction = exports.isBlockNode = exports.getTargetNodeInfo = exports.getContentSupportChecker = exports.filterMarksForTargetNodeType = exports.convertNodeToInlineContent = exports.convertCodeBlockContentToParagraphs = void 0;
+exports.isListNodeType = exports.isListNode = exports.isLayoutNodeType = exports.isLayoutNode = exports.isHeadingOrParagraphNode = exports.isContainerNodeType = exports.isContainerNode = exports.isBlockNodeType = exports.isBlockNodeForExtraction = exports.isBlockNode = exports.getTargetNodeInfo = exports.getMarksWithBreakout = exports.getContentSupportChecker = exports.filterMarksForTargetNodeType = exports.convertNodeToInlineContent = exports.convertCodeBlockContentToParagraphs = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var getTargetNodeInfo = exports.getTargetNodeInfo = function getTargetNodeInfo(targetType, nodes) {
   switch (targetType) {
@@ -202,4 +204,21 @@ var convertCodeBlockContentToParagraphs = exports.convertCodeBlockContentToParag
     paragraphNodes.push(paragraphNode);
   });
   return paragraphNodes;
+};
+var isBreakoutMarkSupported = function isBreakoutMarkSupported(nodeType) {
+  return ['codeBlock', 'expand', 'layoutSection'].includes(nodeType.name);
+};
+var getMarksWithBreakout = exports.getMarksWithBreakout = function getMarksWithBreakout(sourceNode, targetNodeType) {
+  var allowedMarks = targetNodeType.allowedMarks(sourceNode.marks);
+  var sourceBreakoutMark = sourceNode.marks.find(function (mark) {
+    return mark.type.name === 'breakout';
+  });
+  if (sourceBreakoutMark && isBreakoutMarkSupported(targetNodeType)) {
+    // Check if breakout mark is already in allowedMarks to avoid duplicates
+    var hasBreakoutMark = allowedMarks.some(function (mark) {
+      return mark.type.name === 'breakout';
+    });
+    return hasBreakoutMark ? allowedMarks : [].concat((0, _toConsumableArray2.default)(allowedMarks), [sourceBreakoutMark]);
+  }
+  return allowedMarks;
 };

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

@@ -9,12 +9,12 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = _interopRequireDefault(require("react"));
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
-var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 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 _formatMenuNested = require("./format-menu-nested");
 var _formatMenuSection = require("./format-menu-section");
 var _moveDown = require("./move-down");
 var _moveUp = require("./move-up");
@@ -61,16 +61,7 @@ var getFormatMenuComponents = function getFormatMenuComponents(api) {
           children: null
         },
         children = _ref.children;
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
-        text: "Format",
-        elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
-          label: ""
-        }),
-        elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
-          label: 'example nested menu'
-        }),
-        enableMaxHeight: true
-      }, children);
+      return /*#__PURE__*/_react.default.createElement(_formatMenuNested.FormatMenuComponent, null, children);
     }
   }, {
     type: 'block-menu-section',
@@ -155,8 +146,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

@@ -1,4 +1,4 @@
-/* block-menu.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* block-menu.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -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/format-menu-nested.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormatMenuComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuComponent(_ref) {
+  var children = _ref.children;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
+    text: formatMessage(_blockMenu.messages.turnInto),
+    elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
+      label: ""
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
+      label: ""
+    }),
+    enableMaxHeight: 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
-      });
+      }));
     }
   };
 };