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

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/container-transforms.js

@@ -1,7 +1,7 @@
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { getInlineNodeTextContent } from './inline-node-transforms';
-import { isBlockNodeType, isListNodeType, isContainerNodeType, isBlockNodeForExtraction, convertNodeToInlineContent, getContentSupportChecker, convertCodeBlockContentToParagraphs, filterMarksForTargetNodeType } from './utils';
+import { isBlockNodeType, isListNodeType, isContainerNodeType, isBlockNodeForExtraction, convertNodeToInlineContent, getContentSupportChecker, convertCodeBlockContentToParagraphs, filterMarksForTargetNodeType, getMarksWithBreakout } from './utils';
 const convertInvalidNodeToValidNodeType = (sourceContent, sourceNodeType, validNodeType, withMarks) => {
   const validTransformedContent = [];
   // Headings are not valid inside headings so convert heading nodes to paragraphs
@@ -28,9 +28,11 @@ export const transformToContainer = ({
   const schema = tr.doc.type.schema;
   const content = selection.content().content;
   let transformedContent = content;
+  let marks = [];
   if (sourceNode.type === schema.nodes.codeBlock) {
     const paragraphNodes = convertCodeBlockContentToParagraphs(sourceNode, schema);
     transformedContent = Fragment.fromArray(paragraphNodes);
+    marks = getMarksWithBreakout(sourceNode, targetNodeType);
   }
   if (targetNodeType === schema.nodes.blockquote) {
     transformedContent = convertInvalidNodeToValidNodeType(transformedContent, schema.nodes.heading, schema.nodes.paragraph, true);
@@ -42,7 +44,7 @@ export const transformToContainer = ({
   if (sourceNode.type === schema.nodes.paragraph || sourceNode.type === schema.nodes.heading) {
     transformedContent = filterMarksForTargetNodeType(transformedContent, targetNodeType);
   }
-  const newNode = targetNodeType.createAndFill(targetAttrs, transformedContent);
+  const newNode = targetNodeType.createAndFill(targetAttrs, transformedContent, marks);
   if (!newNode) {
     return null;
   }
@@ -172,7 +174,8 @@ export const unwrapAndConvertToBlockType = context => {
   // if target node is code block, do unwrap and convert to code block
   if (targetNodeType === codeBlock) {
     const codeBlockContent = sourceChildren.map(node => node.content.textBetween(0, node.content.size, '\n')).join('\n');
-    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent))];
+    const marks = getMarksWithBreakout(sourceNode, targetNodeType);
+    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent), marks)];
   }
   const slice = new Slice(Fragment.fromArray(transformedContent), 0, 0);
   tr.replaceRange(rangeStart, rangeStart + sourceNode.nodeSize, slice);
@@ -273,6 +276,14 @@ export const transformBetweenContainerTypes = context => {
   // Special handling for codeBlock target
   if (targetNodeType.name === 'codeBlock') {
     const contentSplits = splitContentForCodeBlock(sourceNode, targetNodeType, targetAttrs, tr.doc.type.schema);
+    if (contentSplits.length === 0) {
+      const {
+        schema
+      } = tr.doc.type;
+      const marks = getMarksWithBreakout(sourceNode, targetNodeType);
+      const codeBlock = schema.nodes.codeBlock.create(targetAttrs, null, marks);
+      return tr.replaceWith(sourcePos, sourcePos + sourceNode.nodeSize, codeBlock);
+    }
     return applySplitsToTransaction(tr, sourcePos, sourceNode.nodeSize, contentSplits);
   }
 
@@ -320,7 +331,8 @@ const splitContentForCodeBlock = (sourceNode, targetNodeType, targetAttrs, schem
   const flushCurrentCodeBlock = () => {
     if (currentTextContent.length > 0) {
       const codeText = currentTextContent.join('\n');
-      const codeBlockNode = targetNodeType.create(targetAttrs, schema.text(codeText));
+      const marks = getMarksWithBreakout(sourceNode, targetNodeType);
+      const codeBlockNode = targetNodeType.create(targetAttrs, schema.text(codeText), marks);
       splits.push(codeBlockNode);
       currentTextContent = [];
     }
@@ -391,7 +403,8 @@ const splitContentAroundUnsupportedBlocks = (sourceNode, isContentSupported, tar
   }
   const flushCurrentContainer = () => {
     if (currentContainerContent.length > 0) {
-      const containerNode = targetNodeType.create(targetAttrs, Fragment.fromArray(currentContainerContent));
+      const marks = getMarksWithBreakout(sourceNode, targetNodeType);
+      const containerNode = targetNodeType.create(targetAttrs, Fragment.fromArray(currentContainerContent), marks);
       splits.push(containerNode);
       currentContainerContent = [];
     }

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

@@ -1,27 +1,38 @@
 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 { getMarksWithBreakout, isHeadingOrParagraphNode } from './utils';
+export const createDefaultLayoutSection = (schema, content, marks) => {
   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);
+  return layoutSection.createChecked(undefined, layoutContent, marks);
+};
+export const convertToLayout = context => {
+  const {
+    tr,
+    sourceNode,
+    sourcePos
+  } = context;
+  const content = sourceNode.mark(sourceNode.marks.filter(mark => mark.type.name !== 'breakout'));
 
-  // 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
+  const marks = getMarksWithBreakout(sourceNode, tr.doc.type.schema.nodes.layoutSection);
+  const layoutSectionNode = createDefaultLayoutSection(tr.doc.type.schema, content, marks);
+  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/editor-commands/transforms/utils.js

@@ -196,4 +196,17 @@ export const convertCodeBlockContentToParagraphs = (codeBlockNode, schema) => {
     paragraphNodes.push(paragraphNode);
   });
   return paragraphNodes;
+};
+const isBreakoutMarkSupported = nodeType => {
+  return ['codeBlock', 'expand', 'layoutSection'].includes(nodeType.name);
+};
+export const getMarksWithBreakout = (sourceNode, targetNodeType) => {
+  const allowedMarks = targetNodeType.allowedMarks(sourceNode.marks);
+  const sourceBreakoutMark = sourceNode.marks.find(mark => mark.type.name === 'breakout');
+  if (sourceBreakoutMark && isBreakoutMarkSupported(targetNodeType)) {
+    // Check if breakout mark is already in allowedMarks to avoid duplicates
+    const hasBreakoutMark = allowedMarks.some(mark => mark.type.name === 'breakout');
+    return hasBreakoutMark ? allowedMarks : [...allowedMarks, sourceBreakoutMark];
+  }
+  return allowedMarks;
 };

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { MOVE_UP_MENU_ITEM, MOVE_UP_DOWN_MENU_SECTION, MOVE_DOWN_MENU_ITEM, MOVE_BLOCK_SECTION_RANK, PRIMARY_MENU_SECTION, BLOCK_MENU_SECTION_RANK, COPY_MENU_SECTION, COPY_BLOCK_MENU_ITEM, COPY_MENU_SECTION_RANK, COPY_LINK_MENU_ITEM, DELETE_MENU_SECTION, DELETE_MENU_ITEM, DELETE_SECTION_RANK, NESTED_FORMAT_MENU_SECTION, NESTED_FORMAT_MENU } from '@atlaskit/editor-common/block-menu';
-import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
-import ChangesIcon from '@atlaskit/icon/core/changes';
-import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 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 { FormatMenuComponent } from './format-menu-nested';
 import { FormatMenuSection } from './format-menu-section';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
@@ -49,16 +49,7 @@ const getFormatMenuComponents = api => {
     } = {
       children: null
     }) => {
-      return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
-        text: "Format",
-        elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
-          label: ""
-        }),
-        elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-          label: 'example nested menu'
-        }),
-        enableMaxHeight: true
-      }, children);
+      return /*#__PURE__*/React.createElement(FormatMenuComponent, null, children);
     }
   }, {
     type: 'block-menu-section',
@@ -144,8 +135,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);
+};

package/dist/es2019/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 */
 import "./block-menu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useContext, useEffect } from 'react';
@@ -11,6 +11,8 @@ import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import { Box } from '@atlaskit/primitives/compiled';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { useBlockMenu } from './block-menu-provider';
 import { BlockMenuRenderer } from './block-menu-renderer';
 const styles = {
   base: "_2rko12b0 _bfhk1bhr _16qs1cd0"
@@ -62,15 +64,23 @@ const BlockMenu = ({
       currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
     };
   });
+  const {
+    onDropdownOpenChanged
+  } = useBlockMenu();
   const hasFocus = (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   const hasSelection = !!editorView && !editorView.state.selection.empty;
+  const emptyLineEnabled = 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
+  const shouldShowBlockMenuForEmptyLine = hasSelection || emptyLineEnabled && !hasSelection;
   useEffect(() => {
     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 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? 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;
   }
@@ -84,13 +94,14 @@ const BlockMenu = ({
       })({
         tr
       });
+      onDropdownOpenChanged(false);
       api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
         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/es2019/ui/copy-block.js

@@ -75,10 +75,16 @@ const CopyBlockMenuItem = ({
         // 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;
+          const codeBlockNodeType = {
+            ...nodeType,
+            inlineContent: false
+          };
+          const domNode = toDOM(selection.node, schema);
+          copyDomNode(domNode, codeBlockNodeType, selection);
+        } else {
+          const domNode = toDOM(selection.node, schema);
+          copyDomNode(domNode, nodeType, selection);
         }
-        const domNode = toDOM(selection.node, schema);
-        copyDomNode(domNode, nodeType, selection);
       }
 
       // close the block menu after copying

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

@@ -1,13 +1,20 @@
 import React, { useCallback } from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
 export const CopySection = ({
   api,
   children
 }) => {
+  var _api$selection, _api$selection$shared, _api$selection$shared2;
   const isFormatMenuHidden = useCallback(() => {
     return checkIsFormatMenuHidden(api);
   }, [api]);
+  const selection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$shared = _api$selection.sharedState) === null || _api$selection$shared === void 0 ? void 0 : (_api$selection$shared2 = _api$selection$shared.currentState()) === null || _api$selection$shared2 === void 0 ? void 0 : _api$selection$shared2.selection;
+  const isEmptyLineSelected = !!(selection !== null && selection !== void 0 && selection.empty) && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
+  if (isEmptyLineSelected) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
     hasSeparator: !isFormatMenuHidden()
   }, children);

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+export const DeleteSection = ({
+  api,
+  children
+}) => {
+  var _api$selection, _api$selection$shared, _api$selection$shared2;
+  const selection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$shared = _api$selection.sharedState) === null || _api$selection$shared === void 0 ? void 0 : (_api$selection$shared2 = _api$selection$shared.currentState()) === null || _api$selection$shared2 === void 0 ? void 0 : _api$selection$shared2.selection;
+  const isEmptyLineSelected = !!(selection !== null && selection !== void 0 && selection.empty) && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
+  if (isEmptyLineSelected) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    hasSeparator: true
+  }, children);
+};

package/dist/es2019/ui/format-menu-nested.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/editor-common/block-menu';
+import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import ChangesIcon from '@atlaskit/icon/core/changes';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+export const FormatMenuComponent = ({
+  children
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    text: formatMessage(messages.turnInto),
+    elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
+      label: ""
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
+      label: ""
+    }),
+    enableMaxHeight: true
+  }, children);
+};

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

@@ -1,5 +1,6 @@
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { isNestedNode } from './isNestedNode';
 const getIsFormatMenuHidden = (selection, schema, menuTriggerBy) => {
   const nodes = schema.nodes;
@@ -26,6 +27,39 @@ const getIsFormatMenuHidden = (selection, schema, menuTriggerBy) => {
   const isNested = isNestedNode(selection, menuTriggerBy);
   return !content || isNested;
 };
+const getIsFormatMenuHiddenEmptyLine = (selection, schema, menuTriggerBy) => {
+  const nodes = schema.nodes;
+  if (!nodes) {
+    return false;
+  }
+  const isNested = 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 {
+    let content;
+    const allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList];
+    if (expValEquals('platform_editor_block_menu_layout_format', 'isEnabled', true)) {
+      allowedNodes.push(nodes.layoutSection);
+    }
+    if (expValEquals('platform_editor_block_menu_expand_format', 'isEnabled', true)) {
+      allowedNodes.push(nodes.expand);
+    }
+    const selectedNode = findSelectedNodeOfType(allowedNodes)(selection);
+    if (selectedNode) {
+      content = selectedNode.node;
+    } else {
+      const listTypeOrBlockQuoteNode = findParentNodeOfType([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.listItem, nodes.taskItem])(selection);
+      if (listTypeOrBlockQuoteNode) {
+        content = listTypeOrBlockQuoteNode.node;
+      }
+    }
+    return !content;
+  }
+};
 export const checkIsFormatMenuHidden = api => {
   var _api$selection, _api$selection$shared, _api$selection$shared2, _api$core$sharedState, _api$blockControls, _api$blockControls$sh;
   const selection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$shared = _api$selection.sharedState) === null || _api$selection$shared === void 0 ? void 0 : (_api$selection$shared2 = _api$selection$shared.currentState()) === null || _api$selection$shared2 === void 0 ? void 0 : _api$selection$shared2.selection;
@@ -34,5 +68,5 @@ export const checkIsFormatMenuHidden = api => {
   if (!selection || !schema || !menuTriggerBy) {
     return false;
   }
-  return getIsFormatMenuHidden(selection, schema, menuTriggerBy);
+  return expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true) ? getIsFormatMenuHiddenEmptyLine(selection, schema, menuTriggerBy) : getIsFormatMenuHidden(selection, schema, menuTriggerBy);
 };

package/dist/esm/blockMenuPlugin.js

@@ -4,6 +4,7 @@ import { formatNode as _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 var blockMenuPlugin = function blockMenuPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
@@ -52,13 +53,15 @@ export var blockMenuPlugin = function blockMenuPlugin(_ref) {
         popupsMountPoint = _ref2.popupsMountPoint,
         popupsBoundariesElement = _ref2.popupsBoundariesElement,
         popupsScrollableElement = _ref2.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/esm/editor-commands/formatNode.js

@@ -1,5 +1,46 @@
-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
+ */
+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 = createDefaultLayoutSection(schema, contentAsParagraph);
+    }
+  } else {
+    var 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
@@ -8,12 +49,18 @@ export var 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 && 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 = findSelectedNodeOfType([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.expand, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection])(selection);
     if (selectedNode) {