@atlaskit/editor-plugin-block-menu 5.1.6 → 5.1.8

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 5.1.8
+
+### Patch Changes
+
+- [`1ce87340b7e3e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1ce87340b7e3e) -
+  [ux] Implement wrapMixedContentStep function to handle complex container transformations
+- [`4e0c1ce981b5e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4e0c1ce981b5e) -
+  EDITOR-2930: Add SuggestedItemsRenderer for suggested block menu section
+- Updated dependencies
+
+## 5.1.7
+
+### Patch Changes
+
+- [`65ef204463ce4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/65ef204463ce4) -
+  Add predicate param to expandBlockRange, add logic to cater for selection being broken in lists
+- Updated dependencies
+
 ## 5.1.6
 
 ### Patch Changes

package/dist/cjs/editor-commands/transform-node-utils/flattenListStep.js

@@ -5,39 +5,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.flattenListStep = void 0;
 var _model = require("@atlaskit/editor-prosemirror/model");
-var extractNestedLists = function extractNestedLists(node, listTypes, itemTypes) {
+var extractNestedLists = function extractNestedLists(node, listTypes, itemTypes, schema) {
   var items = [];
+  var paragraph = schema.nodes.paragraph;
   var _extract = function extract(currentNode) {
     currentNode.forEach(function (child) {
-      // list item -> take content without nested lists, then recurse into nested lists
       if (itemTypes.some(function (type) {
         return child.type === type;
       })) {
-        // Filter out nested list nodes from the list item's content
         var contentWithoutNestedLists = [];
         var nestedLists = [];
         child.forEach(function (grandChild) {
           if (listTypes.some(function (type) {
             return grandChild.type === type;
           })) {
-            // This is a nested list - collect it for later processing
             nestedLists.push(grandChild);
           } else {
-            // This is regular content (paragraph, etc.) - keep it
-            contentWithoutNestedLists.push(grandChild);
+            if (grandChild.isText) {
+              contentWithoutNestedLists.push(paragraph.createAndFill({}, grandChild));
+            } else {
+              contentWithoutNestedLists.push(grandChild);
+            }
           }
         });
-
-        // Add the list item with only its non-list content
         items.push(child.copy(_model.Fragment.from(contentWithoutNestedLists)));
-
-        // Now process nested lists to maintain document order
         nestedLists.forEach(function (nestedList) {
           _extract(nestedList);
         });
-      }
-      // lists -> keep operating
-      else if (listTypes.some(function (type) {
+      } else if (listTypes.some(function (type) {
         return child.type === type;
       })) {
         _extract(child);
@@ -53,24 +48,6 @@ var extractNestedLists = function extractNestedLists(node, listTypes, itemTypes)
  * to it's first ancestor list, maintaining document order.
  *
  * @example
- * Input:
- * - bulletList
- *   - listItem "A"
- *   - listItem "B"
- *     - bulletList
- *       - listItem "C"
- *       - listItem "D"
- *   - listItem "E"
- *
- * Output:
- * - bulletList
- *   - listItem "A"
- *   - listItem "B"
- *   - listItem "C"
- *   - listItem "D"
- *   - listItem "E"
- *
- * @example
  * Input (deeply nested):
  * - bulletList
  *   - listItem "1"
@@ -101,7 +78,7 @@ var flattenListStep = exports.flattenListStep = function flattenListStep(nodes,
     if (listTypes.some(function (type) {
       return node.type === type;
     })) {
-      return node.copy(_model.Fragment.from(extractNestedLists(node, listTypes, [context.schema.nodes.listItem, context.schema.nodes.taskItem])));
+      return node.copy(_model.Fragment.from(extractNestedLists(node, listTypes, [context.schema.nodes.listItem, context.schema.nodes.taskItem], context.schema)));
     }
     return node;
   });

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

@@ -14,6 +14,7 @@ var _unwrapExpandStep = require("./unwrapExpandStep");
 var _unwrapListStep = require("./unwrapListStep");
 var _unwrapStep = require("./unwrapStep");
 var _wrapIntoLayoutStep = require("./wrapIntoLayoutStep");
+var _wrapMixedContentStep = require("./wrapMixedContentStep");
 var _wrapStep = require("./wrapStep");
 // Exampled step for overrides:
 // - open Block menu on a paragraph, click 'Panel' in the Turn into'
@@ -62,15 +63,15 @@ var TRANSFORM_STEPS_OVERRIDE = {
     codeBlock: [_unwrapStep.unwrapStep, _flattenStep.flattenStep, _wrapStep.wrapStep]
   },
   expand: {
-    panel: [_unwrapExpandStep.unwrapExpandStep, _wrapStep.wrapStep],
-    blockquote: [_unwrapExpandStep.unwrapExpandStep, _wrapStep.wrapStep],
+    panel: [_unwrapExpandStep.unwrapExpandStep, _wrapMixedContentStep.wrapMixedContentStep],
+    blockquote: [_unwrapExpandStep.unwrapExpandStep, _wrapMixedContentStep.wrapMixedContentStep],
     layoutSection: [_unwrapExpandStep.unwrapExpandStep, _wrapIntoLayoutStep.wrapIntoLayoutStep],
     paragraph: [_unwrapExpandStep.unwrapExpandStep],
     codeBlock: [_unwrapExpandStep.unwrapExpandStep, _flattenStep.flattenStep, _wrapStep.wrapStep]
   },
   nestedExpand: {
-    panel: [_unwrapExpandStep.unwrapExpandStep, _wrapStep.wrapStep],
-    blockquote: [_unwrapExpandStep.unwrapExpandStep, _wrapStep.wrapStep],
+    panel: [_unwrapExpandStep.unwrapExpandStep, _wrapMixedContentStep.wrapMixedContentStep],
+    blockquote: [_unwrapExpandStep.unwrapExpandStep, _wrapMixedContentStep.wrapMixedContentStep],
     paragraph: [_unwrapExpandStep.unwrapExpandStep],
     codeBlock: [_unwrapExpandStep.unwrapExpandStep, _flattenStep.flattenStep, _wrapStep.wrapStep]
   },

package/dist/cjs/editor-commands/transform-node-utils/unwrapListStep.js

@@ -7,8 +7,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.unwrapListStep = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 /**
- * Given an array of nodes, returns an array with the flattened children of any list nodes.
+ * Given an array of nodes, processes each list removing all parent list nodes and
+ * just returning their child contents.
+ *
+ * @example
+ * Input:
+ * - bulletList
+ *   - listItem "1"
+ *     - paragraph "1"
+ *   - listItem "2"
+ *     - paragraph "2"
+ *
+ * Output:
+ * - paragraph "1"
+ * - paragraph "2"
+ *
  * @param nodes
+ * @param context
  * @returns
  */
 var unwrapListStep = exports.unwrapListStep = function unwrapListStep(nodes, context) {

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

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTargetNodeTypeNameInContext = exports.getSelectedNode = void 0;
+exports.getTargetNodeTypeNameInContext = exports.getSelectedNode = exports.expandSelectionToBlockRange = void 0;
+var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorTables = require("@atlaskit/editor-tables");
@@ -54,4 +55,32 @@ var getTargetNodeTypeNameInContext = exports.getTargetNodeTypeNameInContext = fu
     return 'nestedExpand';
   }
   return nodeTypeName;
+};
+
+/**
+ * Use common expandToBlockRange function, but account for edge cases with lists.
+ *
+ * @param selection
+ * @param schema
+ * @returns
+ */
+var expandSelectionToBlockRange = exports.expandSelectionToBlockRange = function expandSelectionToBlockRange(selection, schema) {
+  var isListInSelection = (0, _utils.hasParentNode)(function (node) {
+    return node.type === schema.nodes.bulletList || node.type === schema.nodes.orderedList;
+  })(selection);
+  var _expandToBlockRange = (0, _selection.expandToBlockRange)(selection.$from, selection.$to, function (node) {
+      if (!isListInSelection) {
+        return true;
+      }
+      if (node.type === schema.nodes.bulletList || node.type === schema.nodes.orderedList) {
+        return true;
+      }
+      return false;
+    }),
+    $from = _expandToBlockRange.$from,
+    $to = _expandToBlockRange.$to;
+  return {
+    $from: $from,
+    $to: $to
+  };
 };

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

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapMixedContentStep = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _types = require("./types");
+var _unwrapStep = require("./unwrapStep");
+/**
+ * Determines if a node can be flattened (unwrapped and its contents merged).
+ *
+ * According to the text transformations list, flattenable nodes are:
+ * - Bulleted list, Numbered list, Task list
+ * - Text nodes (heading, paragraph)
+ *
+ * Containers (panels, expands, layouts, blockquotes) and atomic nodes (tables, media, macros) break out.
+ */
+var canFlatten = function canFlatten(node) {
+  var category = _types.NODE_CATEGORY_BY_TYPE[node.type.name];
+  // Text and list nodes can be flattened (converted to simpler forms)
+  return category === 'text' || category === 'list';
+};
+
+/**
+ * Flattens a node by extracting its contents using the appropriate unwrap step.
+ * This is only called for text and list nodes that can be converted to simpler forms.
+ * Uses unwrapStep to extract children from list containers.
+ */
+var flattenNode = function flattenNode(node, context) {
+  return (0, _unwrapStep.unwrapStep)([node], context);
+};
+
+/**
+ * Determines if a node can be wrapped in the target container type.
+ * Uses the schema's validContent to check if the target container can hold this node.
+ *
+ * Note: What can be wrapped depends on the target container type - for example:
+ * - Tables and media CAN go inside expand nodes
+ * - Tables CANNOT go inside panels or blockquotes
+ */
+var canWrapInTarget = function canWrapInTarget(node, targetNodeType, targetNodeTypeName) {
+  // Same-type containers should break out as separate containers
+  if (node.type.name === targetNodeTypeName) {
+    return false;
+  }
+
+  // Use the schema to determine if this node can be contained in the target
+  try {
+    return targetNodeType.validContent(_model.Fragment.from(node));
+  } catch (_unused) {
+    return false;
+  }
+};
+
+/**
+ * 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
+ * - Same-type containers break out as separate containers (preserved as-is)
+ * - NestedExpands break out as regular expands (converted since nestedExpand can't exist outside expand)
+ * - Container structures that can't be nested in target break out (not flattened)
+ * - Text/list nodes that can't be wrapped are flattened and merged into the container
+ * - Atomic nodes (tables, media, macros) break out
+ *
+ * What can be wrapped depends on the target container's schema:
+ * - expand → panel: tables break out, nestedExpands convert to expands and break out
+ * - expand → blockquote: tables/media break out, nestedExpands convert to expands and break out
+ * - expand → expand: tables/media stay inside (expands can contain them)
+ *
+ * Example: expand(p('a'), table(), p('b')) → panel: [panel(p('a')), table(), panel(p('b'))]
+ * Example: expand(p('a'), panel(p('x')), p('b')) → panel: [panel(p('a')), panel(p('x')), panel(p('b'))]
+ * Example: expand(p('a'), nestedExpand({title: 'inner'})(p('x')), p('b')) → panel: [panel(p('a')), expand({title: 'inner'})(p('x')), panel(p('b'))]
+ */
+var wrapMixedContentStep = exports.wrapMixedContentStep = function wrapMixedContentStep(nodes, context) {
+  var schema = context.schema,
+    targetNodeTypeName = context.targetNodeTypeName;
+  var targetNodeType = schema.nodes[targetNodeTypeName];
+  if (!targetNodeType) {
+    return nodes;
+  }
+  var result = [];
+  var currentContainerContent = [];
+  var flushCurrentContainer = function flushCurrentContainer() {
+    if (currentContainerContent.length > 0) {
+      var containerNode = targetNodeType.createAndFill({}, _model.Fragment.fromArray(currentContainerContent));
+      if (containerNode) {
+        result.push(containerNode);
+      }
+      currentContainerContent = [];
+    }
+  };
+  nodes.forEach(function (node) {
+    if (canWrapInTarget(node, targetNodeType, targetNodeTypeName)) {
+      // Node can be wrapped - add to current container content
+      currentContainerContent.push(node);
+    } else if (node.type.name === targetNodeTypeName) {
+      // Same-type container - breaks out as a separate container (preserved as-is)
+      // 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 (canFlatten(node)) {
+      var _currentContainerCont;
+      // Node cannot be wrapped but CAN be flattened - flatten and add to container
+      var flattenedNodes = flattenNode(node, context);
+      (_currentContainerCont = currentContainerContent).push.apply(_currentContainerCont, (0, _toConsumableArray2.default)(flattenedNodes));
+    } else {
+      // Node cannot be wrapped AND cannot be flattened (containers, tables, media, macros) - break out
+      flushCurrentContainer();
+      result.push(node);
+    }
+  });
+
+  // Flush any remaining content into a container
+  flushCurrentContainer();
+  return result.length > 0 ? result : nodes;
+};

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

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.transformNode = void 0;
-var _selection = require("@atlaskit/editor-common/selection");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _isNestedNode = require("../ui/utils/isNestedNode");
 var _transform = require("./transform-node-utils/transform");
-var _utils = require("./transforms/utils");
+var _utils = require("./transform-node-utils/utils");
+var _utils2 = require("./transforms/utils");
 var transformNode = exports.transformNode = function transformNode(api) {
   return (
     // eslint-disable-next-line no-unused-vars
@@ -20,13 +20,13 @@ var transformNode = exports.transformNode = function transformNode(api) {
         if (!preservedSelection) {
           return tr;
         }
-        var _expandToBlockRange = (0, _selection.expandToBlockRange)(preservedSelection.$from, preservedSelection.$to),
-          $from = _expandToBlockRange.$from,
-          $to = _expandToBlockRange.$to;
+        var _expandSelectionToBlo = (0, _utils.expandSelectionToBlockRange)(preservedSelection, tr.doc.type.schema),
+          $from = _expandSelectionToBlo.$from,
+          $to = _expandSelectionToBlo.$to;
         var isNested = (0, _isNestedNode.isNestedNode)(preservedSelection, '');
         var selectedParent = $from.parent;
         var fragment = _model.Fragment.empty;
-        var isList = (0, _utils.isListNode)(selectedParent);
+        var isList = (0, _utils2.isListNode)(selectedParent);
         var slice = tr.doc.slice(isList ? $from.pos - 1 : $from.pos, isList ? $to.pos + 1 : $to.pos);
         slice.content.forEach(function (node) {
           var outputNode = (0, _transform.getOutputNodes)({

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

@@ -17,6 +17,7 @@ var _formatMenuNested = require("./format-menu-nested");
 var _formatMenuSection = require("./format-menu-section");
 var _moveDown = require("./move-down");
 var _moveUp = require("./move-up");
+var _suggestedItemsRenderer = require("./suggested-items-renderer");
 var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
   return [{
     type: 'block-menu-item',
@@ -73,13 +74,17 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: _blockMenu.TRANSFORM_MENU_ITEM_RANK[_blockMenu.TRANSFORM_SUGGESTED_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-          children: null
-        },
-        children = _ref2.children;
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
-        title: "Suggested"
-      }, children);
+      return /*#__PURE__*/_react.default.createElement(_suggestedItemsRenderer.SuggestedItemsRenderer, {
+        api: api
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: _blockMenu.TRANSFORM_SUGGESTED_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: _blockMenu.TRANSFORM_SUGGESTED_MENU_SECTION.key,
+      rank: _blockMenu.TRANSFORM_SUGGESTED_MENU_SECTION_RANK[_blockMenu.TRANSFORM_SUGGESTED_MENU_ITEM.key]
     }
   }, {
     type: 'block-menu-section',
@@ -90,10 +95,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: _blockMenu.TRANSFORM_MENU_ITEM_RANK[_blockMenu.TRANSFORM_CREATE_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           children: null
         },
-        children = _ref3.children;
+        children = _ref2.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         title: "Create"
       }, children);
@@ -107,10 +112,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: _blockMenu.TRANSFORM_MENU_ITEM_RANK[_blockMenu.TRANSFORM_STRUCTURE_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           children: null
         },
-        children = _ref4.children;
+        children = _ref3.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         title: "Structure"
       }, children);
@@ -124,10 +129,10 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
       rank: _blockMenu.TRANSFORM_MENU_ITEM_RANK[_blockMenu.TRANSFORM_HEADINGS_MENU_SECTION.key]
     },
     component: function component() {
-      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           children: null
         },
-        children = _ref5.children;
+        children = _ref4.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         title: "Headings",
         hasSeparator: true
@@ -137,23 +142,23 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
     type: 'block-menu-section',
     key: _blockMenu.TRANSFORM_MENU_SECTION.key,
     rank: _blockMenu.MAIN_BLOCK_MENU_SECTION_RANK[_blockMenu.TRANSFORM_MENU_SECTION.key],
-    component: function component(_ref6) {
-      var children = _ref6.children;
+    component: function component(_ref5) {
+      var children = _ref5.children;
       return /*#__PURE__*/_react.default.createElement(_formatMenuSection.FormatMenuSection, {
         api: api
       }, children);
     }
   }];
 };
-var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockMenuComponents(_ref7) {
-  var api = _ref7.api,
-    config = _ref7.config;
+var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockMenuComponents(_ref6) {
+  var api = _ref6.api,
+    config = _ref6.config;
   return [].concat((0, _toConsumableArray2.default)(getTurnIntoMenuComponents(api)), [{
     type: 'block-menu-section',
     key: _blockMenu.BLOCK_ACTIONS_MENU_SECTION.key,
     rank: _blockMenu.MAIN_BLOCK_MENU_SECTION_RANK[_blockMenu.BLOCK_ACTIONS_MENU_SECTION.key],
-    component: function component(_ref8) {
-      var children = _ref8.children;
+    component: function component(_ref7) {
+      var children = _ref7.children;
       return /*#__PURE__*/_react.default.createElement(_copySection.CopySection, {
         api: api
       }, children);
@@ -176,8 +181,8 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     type: 'block-menu-section',
     key: _blockMenu.POSITION_MENU_SECTION.key,
     rank: _blockMenu.MAIN_BLOCK_MENU_SECTION_RANK[_blockMenu.POSITION_MENU_SECTION.key],
-    component: function component(_ref9) {
-      var children = _ref9.children;
+    component: function component(_ref8) {
+      var children = _ref8.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
@@ -186,8 +191,8 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     type: 'block-menu-section',
     key: _blockMenu.DELETE_MENU_SECTION.key,
     rank: _blockMenu.MAIN_BLOCK_MENU_SECTION_RANK[_blockMenu.DELETE_MENU_SECTION.key],
-    component: function component(_ref0) {
-      var children = _ref0.children;
+    component: function component(_ref9) {
+      var children = _ref9.children;
       return /*#__PURE__*/_react.default.createElement(_deleteSection.DeleteSection, {
         api: api
       }, children);

package/dist/cjs/ui/suggested-items-renderer.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SuggestedItemsRenderer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _utils = require("../editor-commands/transform-node-utils/utils");
+var _suggestedItemsRank = require("./utils/suggested-items-rank");
+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 SuggestedItemsRenderer = exports.SuggestedItemsRenderer = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var _api$blockMenu;
+  var api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
+      var _states$blockControls;
+      return {
+        preservedSelection: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.preservedSelection
+      };
+    }),
+    preservedSelection = _useSharedPluginState.preservedSelection;
+  var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
+  var menuItemsMap = (0, _react.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 = (0, _react.useMemo)(function () {
+    if (!preservedSelection || menuItemsMap.size === 0) {
+      return [];
+    }
+    var selectedNode = (0, _utils.getSelectedNode)(preservedSelection);
+    if (!selectedNode) {
+      return [];
+    }
+    var nodeTypeName = selectedNode.node.type.name;
+    var sortedKeys = (0, _suggestedItemsRank.getSortedSuggestedItems)(nodeTypeName);
+    return sortedKeys.map(function (key) {
+      return menuItemsMap.get(key);
+    }).filter(function (item) {
+      return item !== undefined;
+    });
+  }, [menuItemsMap, preservedSelection]);
+  if (suggestedItems.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+    title: "Suggested"
+  }, suggestedItems.map(function (item) {
+    var ItemComponent = item.component;
+    return ItemComponent ? /*#__PURE__*/_react.default.createElement(ItemComponent, {
+      key: item.key
+    }) : null;
+  }));
+});

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSuggestedItemsForNodeType = exports.getSortedSuggestedItems = exports.TRANSFORM_SUGGESTED_ITEMS_RANK = exports.BLOCK_MENU_NODE_TYPES = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _TRANSFORM_SUGGESTED_;
+/**
+ * Suggested transformations mapping for each block type.
+ * Based on the Block Menu Compatibility Matrix:
+ * https://hello.atlassian.net/wiki/spaces/egcuc/pages/5868774224/Block+Menu+Compatibility+Matrix#Suggested-for-each-block-type
+ *
+ * This mapping defines which transform items should appear in the TRANSFORM_SUGGESTED_MENU_SECTION
+ * for each block type, ranked by priority (lower rank = higher priority).
+ *
+ * Structure:
+ * {
+ *   [sourceNodeType]: {
+ *     [targetMenuItemKey]: rank
+ *   }
+ * }
+ */
+var BLOCK_MENU_NODE_TYPES = exports.BLOCK_MENU_NODE_TYPES = {
+  PARAGRAPH: 'paragraph',
+  EXPAND: 'expand',
+  BLOCKQUOTE: 'blockquote',
+  LAYOUT_SECTION: 'layoutSection',
+  PANEL: 'panel',
+  CODE_BLOCK: 'codeBlock',
+  DECISION: 'decisionList',
+  BULLET_LIST: 'bulletList',
+  ORDERED_LIST: 'orderedList',
+  HEADING: 'heading',
+  TASK_LIST: 'taskList',
+  MEDIA_SINGLE: 'mediaSingle',
+  EXTENSION: 'extension',
+  BODIED_EXTENSION: 'bodiedExtension',
+  BLOCK_CARD: 'blockCard',
+  EMBED_CARD: 'embedCard',
+  TABLE: 'table'
+};
+var TRANSFORM_SUGGESTED_ITEMS_RANK = exports.TRANSFORM_SUGGESTED_ITEMS_RANK = (_TRANSFORM_SUGGESTED_ = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_TRANSFORM_SUGGESTED_, BLOCK_MENU_NODE_TYPES.PARAGRAPH, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_HEADINGS_H2_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_HEADINGS_H3_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.EXPAND, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BLOCKQUOTE, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.LAYOUT_SECTION, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_HEADINGS_H2_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.PANEL, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.CODE_BLOCK, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.DECISION, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BULLET_LIST, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.ORDERED_LIST, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_BULLETED_LIST_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_TASK_LIST_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.HEADING, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_HEADINGS_H2_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 300)), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_TRANSFORM_SUGGESTED_, BLOCK_MENU_NODE_TYPES.TASK_LIST, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_NUMBERED_LIST_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.MEDIA_SINGLE, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.EXTENSION, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BODIED_EXTENSION, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200), _blockMenu.TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 300)), BLOCK_MENU_NODE_TYPES.BLOCK_CARD, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200)), BLOCK_MENU_NODE_TYPES.EMBED_CARD, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_PANEL_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key, 200)), BLOCK_MENU_NODE_TYPES.TABLE, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _blockMenu.TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM.key, 100), _blockMenu.TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key, 200)));
+var getSuggestedItemsForNodeType = exports.getSuggestedItemsForNodeType = function getSuggestedItemsForNodeType(nodeType) {
+  return TRANSFORM_SUGGESTED_ITEMS_RANK[nodeType];
+};
+var getSortedSuggestedItems = exports.getSortedSuggestedItems = function getSortedSuggestedItems(nodeType) {
+  var suggestions = getSuggestedItemsForNodeType(nodeType);
+  if (!suggestions) {
+    return [];
+  }
+  return Object.entries(suggestions).sort(function (_ref, _ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref, 2),
+      rankA = _ref3[1];
+    var _ref4 = (0, _slicedToArray2.default)(_ref2, 2),
+      rankB = _ref4[1];
+    return rankA - rankB;
+  }).map(function (_ref5) {
+    var _ref6 = (0, _slicedToArray2.default)(_ref5, 1),
+      key = _ref6[0];
+    return key;
+  });
+};