@atlaskit/editor-plugin-block-menu 5.2.9 → 5.2.11

package/dist/es2019/editor-commands/transform-node-utils/wrapStep.js

@@ -1,9 +1,29 @@
+import { convertExpandToNestedExpand } from './utils';
+
+/**
+ * Wraps nodes into the target container type.
+ * When wrapping into expand, any expand children are converted to nestedExpand
+ * since expand cannot be a direct child of expand.
+ */
 export const wrapStep = (nodes, context) => {
   const {
     schema,
     targetNodeTypeName
   } = context;
-  const outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, nodes);
+
+  // When wrapping into expand, convert any expand children to nestedExpand
+  // since expand cannot be a direct child of expand
+  let processedNodes = nodes;
+  if (targetNodeTypeName === 'expand') {
+    processedNodes = nodes.map(node => {
+      if (node.type.name === 'expand') {
+        const nestedExpandNode = convertExpandToNestedExpand(node, schema);
+        return nestedExpandNode !== null && nestedExpandNode !== void 0 ? nestedExpandNode : node;
+      }
+      return node;
+    });
+  }
+  const outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, processedNodes);
   if (outputNode) {
     return [outputNode];
   }

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

@@ -9,7 +9,8 @@ import { FormatMenuComponent } from './format-menu-nested';
 import { FormatMenuSection } from './format-menu-section';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
-import { SuggestedItemsRenderer } from './suggested-items-renderer';
+import { SuggestedItemsMenuSection } from './suggested-items-menu-section';
+import { SuggestedMenuItems } from './suggested-menu-items';
 const getMoveUpMoveDownMenuComponents = api => {
   return [{
     type: 'block-menu-item',
@@ -61,9 +62,13 @@ const getTurnIntoMenuComponents = api => {
       key: TRANSFORM_MENU_ITEM.key,
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_SUGGESTED_MENU_SECTION.key]
     },
-    component: () => /*#__PURE__*/React.createElement(SuggestedItemsRenderer, {
+    component: ({
+      children
+    } = {
+      children: null
+    }) => /*#__PURE__*/React.createElement(SuggestedItemsMenuSection, {
       api: api
-    })
+    }, children)
   }, {
     type: 'block-menu-item',
     key: TRANSFORM_SUGGESTED_MENU_ITEM.key,
@@ -71,7 +76,10 @@ const getTurnIntoMenuComponents = api => {
       type: 'block-menu-section',
       key: TRANSFORM_SUGGESTED_MENU_SECTION.key,
       rank: TRANSFORM_SUGGESTED_MENU_SECTION_RANK[TRANSFORM_SUGGESTED_MENU_ITEM.key]
-    }
+    },
+    component: () => /*#__PURE__*/React.createElement(SuggestedMenuItems, {
+      api: api
+    })
   }, {
     type: 'block-menu-section',
     key: TRANSFORM_CREATE_MENU_SECTION.key,

package/dist/es2019/ui/hooks/useSuggestedItems.js

@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { getBlockNodesInRange, expandSelectionToBlockRange } from '../../editor-commands/transform-node-utils/utils';
+import { getSortedSuggestedItems } from '../utils/suggested-items-rank';
+export const useSuggestedItems = api => {
+  var _api$blockMenu;
+  const {
+    preservedSelection,
+    selection
+  } = useSharedPluginStateWithSelector(api, ['blockControls', 'selection'], states => {
+    var _states$blockControls, _states$selectionStat;
+    return {
+      preservedSelection: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.preservedSelection,
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+    };
+  });
+  const blockMenuComponents = api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
+  const menuItemsMap = useMemo(() => {
+    if (!blockMenuComponents) {
+      return new Map();
+    }
+    return new Map(blockMenuComponents.filter(c => c.type === 'block-menu-item').map(item => [item.key, item]));
+  }, [blockMenuComponents]);
+  const suggestedItems = useMemo(() => {
+    const currentSelection = preservedSelection || selection;
+    if (menuItemsMap.size === 0 || !currentSelection) {
+      return [];
+    }
+    const {
+      range
+    } = expandSelectionToBlockRange(currentSelection, currentSelection.$from.doc.type.schema);
+    if (!range) {
+      return [];
+    }
+    const blockNodes = getBlockNodesInRange(range);
+    const singleNode = blockNodes.length === 1 ? blockNodes[0] : undefined;
+    if (!singleNode) {
+      return [];
+    }
+    const nodeTypeName = singleNode.type.name;
+    const sortedKeys = getSortedSuggestedItems(nodeTypeName);
+    return sortedKeys.map(key => menuItemsMap.get(key)).filter(item => item !== undefined);
+  }, [menuItemsMap, preservedSelection, selection]);
+  return suggestedItems;
+};

package/dist/es2019/ui/suggested-items-menu-section.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { useSuggestedItems } from './hooks/useSuggestedItems';
+export const SuggestedItemsMenuSection = /*#__PURE__*/React.memo(({
+  api,
+  children
+}) => {
+  const suggestedItems = useSuggestedItems(api);
+  if (suggestedItems.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    title: "Suggested"
+  }, children);
+});

package/dist/es2019/ui/suggested-menu-items.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useSuggestedItems } from './hooks/useSuggestedItems';
+export const SuggestedMenuItems = /*#__PURE__*/React.memo(({
+  api
+}) => {
+  const suggestedItems = useSuggestedItems(api);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, suggestedItems.map(item => {
+    const ItemComponent = item.component;
+    return ItemComponent ? /*#__PURE__*/React.createElement(ItemComponent, {
+      key: item.key
+    }) : null;
+  }));
+});

package/dist/es2019/ui/utils/suggested-items-rank.js

@@ -14,7 +14,7 @@
  * }
  */
 
-import { TRANSFORM_STRUCTURE_PANEL_MENU_ITEM, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM, TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM, TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM, TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM, TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM, TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM, TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM, TRANSFORM_HEADINGS_H2_MENU_ITEM, TRANSFORM_HEADINGS_H3_MENU_ITEM, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
+import { TRANSFORM_STRUCTURE_PANEL_MENU_ITEM, TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM, TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM, TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM, TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM, TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM, TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM, TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM, TRANSFORM_HEADINGS_H1_MENU_ITEM, TRANSFORM_HEADINGS_H2_MENU_ITEM, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
 export const BLOCK_MENU_NODE_TYPES = {
   PARAGRAPH: 'paragraph',
   EXPAND: 'expand',
@@ -37,85 +37,73 @@ export const BLOCK_MENU_NODE_TYPES = {
 export const TRANSFORM_SUGGESTED_ITEMS_RANK = {
   [BLOCK_MENU_NODE_TYPES.PARAGRAPH]: {
     [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 100,
-    [TRANSFORM_HEADINGS_H2_MENU_ITEM.key]: 200,
-    [TRANSFORM_HEADINGS_H3_MENU_ITEM.key]: 300
+    [TRANSFORM_HEADINGS_H1_MENU_ITEM.key]: 200,
+    [TRANSFORM_HEADINGS_H2_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.EXPAND]: {
-    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 100,
-    [TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key]: 200,
+    [TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key]: 100,
+    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 200,
     [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.BLOCKQUOTE]: {
-    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 100,
-    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 200,
-    [TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key]: 300
+    [TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key]: 100,
+    [TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key]: 200,
+    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.LAYOUT_SECTION]: {
     [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 100,
     [TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key]: 200,
-    [TRANSFORM_HEADINGS_H2_MENU_ITEM.key]: 300
+    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.PANEL]: {
-    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 100,
-    [TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key]: 200,
-    [TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM.key]: 300
+    [TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key]: 100,
+    [TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM.key]: 200,
+    [TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.CODE_BLOCK]: {
     [TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key]: 100,
-    [TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key]: 200,
-    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 300
+    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 200,
+    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.DECISION]: {
     [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 100,
-    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 200,
-    [TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM.key]: 300
+    [TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key]: 200,
+    [TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.BULLET_LIST]: {
     [TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM.key]: 100,
     [TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key]: 200,
-    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 300
+    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.ORDERED_LIST]: {
-    [TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM.key]: 100,
-    [TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM.key]: 200,
-    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 300
+    [TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM.key]: 100,
+    [TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM.key]: 200,
+    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.HEADING]: {
     [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 100,
-    [TRANSFORM_HEADINGS_H2_MENU_ITEM.key]: 200,
-    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 300
+    [TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM.key]: 200,
+    [TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.TASK_LIST]: {
-    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 100,
+    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 100,
     [TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM.key]: 200,
-    [TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM.key]: 300
+    [TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.MEDIA_SINGLE]: {
     [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 100,
-    [TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key]: 200,
-    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 300
+    [TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key]: 200,
+    [TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.EXTENSION]: {
-    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 100,
-    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 200,
-    [TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key]: 300
+    [TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key]: 100,
+    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 200,
+    [TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key]: 300
   },
   [BLOCK_MENU_NODE_TYPES.BODIED_EXTENSION]: {
-    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 100,
-    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 200,
-    [TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key]: 300
-  },
-  [BLOCK_MENU_NODE_TYPES.BLOCK_CARD]: {
-    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 100,
-    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 200
-  },
-  [BLOCK_MENU_NODE_TYPES.EMBED_CARD]: {
-    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 100,
-    [TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]: 200
-  },
-  [BLOCK_MENU_NODE_TYPES.TABLE]: {
     [TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key]: 100,
-    [TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key]: 200
+    [TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key]: 200,
+    [TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key]: 300
   }
 };
 export const getSuggestedItemsForNodeType = nodeType => {

package/dist/esm/editor-commands/transform-node-utils/steps/wrapMixedContentStep.js

@@ -43,21 +43,6 @@ var canWrapInTarget = function canWrapInTarget(node, targetNodeType, targetNodeT
   return targetNodeType.validContent(Fragment.from(node));
 };
 
-/**
- * Converts a nestedExpand to a regular expand node.
- * NestedExpands can only exist inside expands, so when breaking out they must be converted.
- */
-var convertNestedExpandToExpand = function convertNestedExpandToExpand(node, schema) {
-  var _node$attrs;
-  var expandType = schema.nodes.expand;
-  if (!expandType) {
-    return null;
-  }
-  return expandType.createAndFill({
-    title: ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.title) || ''
-  }, node.content);
-};
-
 /**
  * A wrap step that handles mixed content according to the Compatibility Matrix:
  * - Wraps consecutive compatible nodes into the target container
@@ -103,14 +88,6 @@ export var wrapMixedContentStep = function wrapMixedContentStep(nodes, context)
       // This handles: "If there's a panel in the expand, it breaks out into a separate panel"
       flushCurrentContainer();
       result.push(node);
-    } else if (node.type.name === 'nestedExpand') {
-      // NestedExpand can't be wrapped and can't exist outside an expand
-      // Convert to regular expand and break out
-      flushCurrentContainer();
-      var expandNode = convertNestedExpandToExpand(node, schema);
-      if (expandNode) {
-        result.push(expandNode);
-      }
     } else if (isTextNode(node)) {
       // Text node (heading, paragraph) that can't be wrapped - convert to paragraph
       // Example: heading can't go in blockquote, so convert to paragraph with same content

package/dist/esm/editor-commands/transform-node-utils/transform.js

@@ -84,9 +84,9 @@ var TRANSFORM_STEPS_OVERRIDE = {
     decisionList: [unwrapStep, wrapBlockquoteToDecisionListStep]
   },
   layoutSection: {
-    blockquote: [unwrapLayoutStep, wrapStep],
+    blockquote: [unwrapLayoutStep, wrapMixedContentStep],
     expand: [unwrapLayoutStep, wrapStep],
-    panel: [unwrapLayoutStep, wrapStep],
+    panel: [unwrapLayoutStep, wrapMixedContentStep],
     codeBlock: [unwrapLayoutStep, flattenStep, wrapStep],
     paragraph: [unwrapLayoutStep]
   },

package/dist/esm/editor-commands/transform-node-utils/unwrapExpandStep.js

@@ -1,11 +1,16 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { unwrapStep } from './unwrapStep';
+import { convertNestedExpandToExpand } from './utils';
 
 /**
  * Unwraps an expand/nestedExpand node, converting its title attribute to a paragraph
  * and prepending it to the children.
  *
+ * Any nestedExpand children are converted to regular expands since nestedExpand
+ * can only exist inside an expand.
+ *
  * Example: expand({ title: 'title' })(p('b')) → [p('title'), p('b')]
+ * Example: expand({ title: 'outer' })(nestedExpand({ title: 'inner' })(p('x')))
+ *        → [p('outer'), expand({ title: 'inner' })(p('x'))]
  */
 export var unwrapExpandStep = function unwrapExpandStep(nodes, context) {
   var schema = context.schema;
@@ -27,8 +32,20 @@ export var unwrapExpandStep = function unwrapExpandStep(nodes, context) {
         }
       }
 
-      // Add the children
-      outputNodes.push.apply(outputNodes, _toConsumableArray(node.children));
+      // Add the children, converting any nestedExpands to regular expands
+      // since nestedExpand can only exist inside an expand
+      node.children.forEach(function (child) {
+        if (child.type.name === nestedExpand.name) {
+          var expandNode = convertNestedExpandToExpand(child, schema);
+          if (expandNode) {
+            outputNodes.push(expandNode);
+          } else {
+            outputNodes.push(child);
+          }
+        } else {
+          outputNodes.push(child);
+        }
+      });
     } else {
       unwrapStep([node], context);
     }

package/dist/esm/editor-commands/transform-node-utils/utils.js

@@ -61,7 +61,7 @@ export var getTargetNodeTypeNameInContext = function getTargetNodeTypeNameInCont
  */
 export var expandSelectionToBlockRange = function expandSelectionToBlockRange(selection, schema) {
   var nodes = schema.nodes;
-  var nodesNeedToExpandRange = [nodes.listItem, nodes.taskItem];
+  var nodesNeedToExpandRange = [nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.listItem, nodes.taskItem];
 
   // when adding nodes.tableRow, tableHeader, tableCell in nodesNeedToExpandRang,
   // expandToBlockRange does not return expected table start position, sometimes even freeze editor
@@ -70,10 +70,11 @@ export var expandSelectionToBlockRange = function expandSelectionToBlockRange(se
     var table = findTable(selection);
     if (table) {
       var $from = selection.$from.doc.resolve(table.pos);
-      var $to = selection.$from.doc.resolve(table.pos + table.node.nodeSize);
+      var $to = selection.$from.doc.resolve(table.pos + table.node.nodeSize - 1);
       return {
         $from: $from,
-        $to: $to
+        $to: $to,
+        range: $from.blockRange($to)
       };
     }
   }
@@ -106,7 +107,42 @@ export var isListType = function isListType(node, schema) {
     return list === node.type;
   });
 };
+
+/**
+ * Converts a nestedExpand to a regular expand node.
+ * NestedExpands can only exist inside expands, so when breaking out or placing
+ * in containers that don't support nesting, they must be converted.
+ */
+export var convertNestedExpandToExpand = function convertNestedExpandToExpand(node, schema) {
+  var _node$attrs;
+  var expandType = schema.nodes.expand;
+  if (!expandType) {
+    return null;
+  }
+  return expandType.createAndFill({
+    title: ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.title) || ''
+  }, node.content);
+};
+
+/**
+ * Converts an expand to a nestedExpand node.
+ * When placing an expand inside another expand, it must become a nestedExpand
+ * since expand cannot be a direct child of expand.
+ */
+export var convertExpandToNestedExpand = function convertExpandToNestedExpand(node, schema) {
+  var _node$attrs2;
+  var nestedExpandType = schema.nodes.nestedExpand;
+  if (!nestedExpandType) {
+    return null;
+  }
+  return nestedExpandType.createAndFill({
+    title: ((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.title) || ''
+  }, node.content);
+};
 export var getBlockNodesInRange = function getBlockNodesInRange(range) {
+  if (range.startIndex === range.endIndex) {
+    return [];
+  }
   if (range.endIndex - range.startIndex <= 1) {
     return [range.parent.child(range.startIndex)];
   }

package/dist/esm/editor-commands/transform-node-utils/wrapStep.js

@@ -1,7 +1,27 @@
+import { convertExpandToNestedExpand } from './utils';
+
+/**
+ * Wraps nodes into the target container type.
+ * When wrapping into expand, any expand children are converted to nestedExpand
+ * since expand cannot be a direct child of expand.
+ */
 export var wrapStep = function wrapStep(nodes, context) {
   var schema = context.schema,
     targetNodeTypeName = context.targetNodeTypeName;
-  var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, nodes);
+
+  // When wrapping into expand, convert any expand children to nestedExpand
+  // since expand cannot be a direct child of expand
+  var processedNodes = nodes;
+  if (targetNodeTypeName === 'expand') {
+    processedNodes = nodes.map(function (node) {
+      if (node.type.name === 'expand') {
+        var nestedExpandNode = convertExpandToNestedExpand(node, schema);
+        return nestedExpandNode !== null && nestedExpandNode !== void 0 ? nestedExpandNode : node;
+      }
+      return node;
+    });
+  }
+  var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, processedNodes);
   if (outputNode) {
     return [outputNode];
   }

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

@@ -10,7 +10,8 @@ import { FormatMenuComponent } from './format-menu-nested';
 import { FormatMenuSection } from './format-menu-section';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
-import { SuggestedItemsRenderer } from './suggested-items-renderer';
+import { SuggestedItemsMenuSection } from './suggested-items-menu-section';
+import { SuggestedMenuItems } from './suggested-menu-items';
 var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
   return [{
     type: 'block-menu-item',
@@ -67,9 +68,13 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_SUGGESTED_MENU_SECTION.key]
     },
     component: function component() {
-      return /*#__PURE__*/React.createElement(SuggestedItemsRenderer, {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+          children: null
+        },
+        children = _ref2.children;
+      return /*#__PURE__*/React.createElement(SuggestedItemsMenuSection, {
         api: api
-      });
+      }, children);
     }
   }, {
     type: 'block-menu-item',
@@ -78,6 +83,11 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       type: 'block-menu-section',
       key: TRANSFORM_SUGGESTED_MENU_SECTION.key,
       rank: TRANSFORM_SUGGESTED_MENU_SECTION_RANK[TRANSFORM_SUGGESTED_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(SuggestedMenuItems, {
+        api: api
+      });
     }
   }, {
     type: 'block-menu-section',
@@ -88,10 +98,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_CREATE_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           children: null
         },
-        children = _ref2.children;
+        children = _ref3.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         title: "Create"
       }, children);
@@ -105,10 +115,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_STRUCTURE_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           children: null
         },
-        children = _ref3.children;
+        children = _ref4.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         title: "Structure"
       }, children);
@@ -122,10 +132,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: TRANSFORM_MENU_ITEM_RANK[TRANSFORM_HEADINGS_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           children: null
         },
-        children = _ref4.children;
+        children = _ref5.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         title: "Headings",
         hasSeparator: true
@@ -135,23 +145,23 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
     type: 'block-menu-section',
     key: TRANSFORM_MENU_SECTION.key,
     rank: MAIN_BLOCK_MENU_SECTION_RANK[TRANSFORM_MENU_SECTION.key],
-    component: function component(_ref5) {
-      var children = _ref5.children;
+    component: function component(_ref6) {
+      var children = _ref6.children;
       return /*#__PURE__*/React.createElement(FormatMenuSection, {
         api: api
       }, children);
     }
   }];
 };
-export var getBlockMenuComponents = function getBlockMenuComponents(_ref6) {
-  var api = _ref6.api,
-    config = _ref6.config;
+export var getBlockMenuComponents = function getBlockMenuComponents(_ref7) {
+  var api = _ref7.api,
+    config = _ref7.config;
   return [].concat(_toConsumableArray(getTurnIntoMenuComponents(api)), [{
     type: 'block-menu-section',
     key: BLOCK_ACTIONS_MENU_SECTION.key,
     rank: MAIN_BLOCK_MENU_SECTION_RANK[BLOCK_ACTIONS_MENU_SECTION.key],
-    component: function component(_ref7) {
-      var children = _ref7.children;
+    component: function component(_ref8) {
+      var children = _ref8.children;
       return /*#__PURE__*/React.createElement(CopySection, {
         api: api
       }, children);
@@ -174,8 +184,8 @@ export var getBlockMenuComponents = function getBlockMenuComponents(_ref6) {
     type: 'block-menu-section',
     key: POSITION_MENU_SECTION.key,
     rank: MAIN_BLOCK_MENU_SECTION_RANK[POSITION_MENU_SECTION.key],
-    component: function component(_ref8) {
-      var children = _ref8.children;
+    component: function component(_ref9) {
+      var children = _ref9.children;
       return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
@@ -184,8 +194,8 @@ export var getBlockMenuComponents = function getBlockMenuComponents(_ref6) {
     type: 'block-menu-section',
     key: DELETE_MENU_SECTION.key,
     rank: MAIN_BLOCK_MENU_SECTION_RANK[DELETE_MENU_SECTION.key],
-    component: function component(_ref9) {
-      var children = _ref9.children;
+    component: function component(_ref0) {
+      var children = _ref0.children;
       return /*#__PURE__*/React.createElement(DeleteSection, {
         api: api
       }, children);

package/dist/esm/ui/hooks/useSuggestedItems.js

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { getBlockNodesInRange, expandSelectionToBlockRange } from '../../editor-commands/transform-node-utils/utils';
+import { getSortedSuggestedItems } from '../utils/suggested-items-rank';
+export var useSuggestedItems = function useSuggestedItems(api) {
+  var _api$blockMenu;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls', 'selection'], function (states) {
+      var _states$blockControls, _states$selectionStat;
+      return {
+        preservedSelection: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.preservedSelection,
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+      };
+    }),
+    preservedSelection = _useSharedPluginState.preservedSelection,
+    selection = _useSharedPluginState.selection;
+  var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
+  var menuItemsMap = useMemo(function () {
+    if (!blockMenuComponents) {
+      return new Map();
+    }
+    return new Map(blockMenuComponents.filter(function (c) {
+      return c.type === 'block-menu-item';
+    }).map(function (item) {
+      return [item.key, item];
+    }));
+  }, [blockMenuComponents]);
+  var suggestedItems = useMemo(function () {
+    var currentSelection = preservedSelection || selection;
+    if (menuItemsMap.size === 0 || !currentSelection) {
+      return [];
+    }
+    var _expandSelectionToBlo = expandSelectionToBlockRange(currentSelection, currentSelection.$from.doc.type.schema),
+      range = _expandSelectionToBlo.range;
+    if (!range) {
+      return [];
+    }
+    var blockNodes = getBlockNodesInRange(range);
+    var singleNode = blockNodes.length === 1 ? blockNodes[0] : undefined;
+    if (!singleNode) {
+      return [];
+    }
+    var nodeTypeName = singleNode.type.name;
+    var sortedKeys = getSortedSuggestedItems(nodeTypeName);
+    return sortedKeys.map(function (key) {
+      return menuItemsMap.get(key);
+    }).filter(function (item) {
+      return item !== undefined;
+    });
+  }, [menuItemsMap, preservedSelection, selection]);
+  return suggestedItems;
+};

package/dist/esm/ui/suggested-items-menu-section.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { useSuggestedItems } from './hooks/useSuggestedItems';
+export var SuggestedItemsMenuSection = /*#__PURE__*/React.memo(function (_ref) {
+  var api = _ref.api,
+    children = _ref.children;
+  var suggestedItems = useSuggestedItems(api);
+  if (suggestedItems.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    title: "Suggested"
+  }, children);
+});