@atlaskit/editor-plugin-block-menu 6.0.20 → 6.0.22

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 6.0.22
+
+### Patch Changes
+
+- [`33f11753a7104`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/33f11753a7104) -
+  [ux] Added i18n for sections' titles in the Turn into menu.
+- Updated dependencies
+
+## 6.0.21
+
+### Patch Changes
+
+- [`b30d6077b3e91`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b30d6077b3e91) -
+  [ux] Suggested section should be hidden when total number to native transfroms is less than 7.
+- [`265980d7959cf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/265980d7959cf) -
+  [ux] recursive node decoration and 'selected danger' classname
+- Updated dependencies
+
 ## 6.0.20
 
 ### Patch Changes

package/afm-jira/tsconfig.json

@@ -1,5 +1,5 @@
 {
-	"extends": "../../../../tsconfig.entry-points.jira.json",
+	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
 		"target": "es5",
 		"outDir": "../../../../../jira/tsDist/@atlaskit__editor-plugin-block-menu/app",
@@ -69,6 +69,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../prosemirror-history/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -69,6 +69,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../prosemirror-history/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-products/tsconfig.json"
 		},

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

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.transformNode = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
 var _selection = require("@atlaskit/editor-common/selection");
@@ -33,10 +31,7 @@ var transformNode = exports.transformNode = function transformNode(api) {
       var isParentLayout = selectedParent.type === nodes.layoutColumn;
       var isNested = (0, _isNestedNode.isNestedNode)(preservedSelection, '') && !isParentLayout;
       var isList = (0, _utils.isListNode)(selectedParent);
-      var sliceStart = isList ? $from.pos - 1 : $from.pos;
-      var sliceEnd = isList ? $to.pos + 1 : $to.pos;
-      var slice = tr.doc.slice(sliceStart, sliceEnd);
-      var sourceNodes = (0, _toConsumableArray2.default)(slice.content.content);
+      var sourceNodes = (0, _selection.getSourceNodesFromSelectionRange)(tr, preservedSelection);
       var sourceNodeTypes = {};
       sourceNodes.forEach(function (node) {
         var typeName = node.type.name;
@@ -50,7 +45,8 @@ var transformNode = exports.transformNode = function transformNode(api) {
         targetAttrs: metadata === null || metadata === void 0 ? void 0 : metadata.targetAttrs,
         parentNode: selectedParent
       });
-      var content = resultNodes.length > 0 ? resultNodes : slice.content;
+      var content = resultNodes.length > 0 ? resultNodes : sourceNodes;
+      var sliceStart = isList ? $from.pos - 1 : $from.pos;
       if (preservedSelection instanceof _state.NodeSelection && preservedSelection.node.type === nodes.mediaSingle) {
         var _api$blockControls2;
         // when node is media single, use tr.replaceWith freeze editor, if modify position, tr.replaceWith creates duplicats
@@ -65,10 +61,12 @@ var transformNode = exports.transformNode = function transformNode(api) {
         // when we replace and insert content, we need to manually map the preserved selection
         // through the transaction, otherwise it will treat the selection as having been deleted
         // and stop preserving it
-        var oldSize = slice.size;
-        var newSize = Array.isArray(content) ? content.reduce(function (sum, node) {
+        var oldSize = sourceNodes.reduce(function (sum, node) {
+          return sum + node.nodeSize;
+        }, 0);
+        var newSize = content.reduce(function (sum, node) {
           return sum + node.nodeSize;
-        }, 0) : content.size;
+        }, 0);
         api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.mapPreservedSelection(new _transform.Mapping([new _transform.StepMap([0, oldSize, newSize])]))({
           tr: tr
         });

package/dist/cjs/ui/MenuSection.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuSection = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var MenuSection = exports.MenuSection = function MenuSection(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    hasSeparator = _ref.hasSeparator;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+    title: formatMessage(title),
+    hasSeparator: hasSeparator
+  }, children);
+};

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

@@ -8,19 +8,36 @@ exports.getBlockMenuComponents = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _utils = require("./block-menu-renderer/utils");
 var _copyLink = require("./copy-link");
 var _copySection = require("./copy-section");
 var _deleteButton = require("./delete-button");
 var _deleteSection = require("./delete-section");
 var _formatMenuNested = require("./format-menu-nested");
 var _formatMenuSection = require("./format-menu-section");
+var _MenuSection = require("./MenuSection");
 var _moveDown = require("./move-down");
 var _moveUp = require("./move-up");
 var _suggestedItemsMenuSection = require("./suggested-items-menu-section");
 var _suggestedMenuItems = require("./suggested-menu-items");
 var _createMenuItemsMap = require("./utils/createMenuItemsMap");
 var _getSuggestedItemsFromSelection = require("./utils/getSuggestedItemsFromSelection");
+var MIN_NUMBER_OF_AVAILABLE_NATIVE_TRANSFORMS = 7;
+var getTotalNumberOfAvailableNativeTransforms = function getTotalNumberOfAvailableNativeTransforms(blockMenuComponents) {
+  if (!blockMenuComponents) {
+    return 0;
+  }
+  var childrenMap = (0, _utils.buildChildrenMap)(blockMenuComponents);
+  var headingsKey = (0, _utils.getChildrenMapKey)(_blockMenu.TRANSFORM_HEADINGS_MENU_SECTION.key, 'block-menu-section');
+  var structureKey = (0, _utils.getChildrenMapKey)(_blockMenu.TRANSFORM_STRUCTURE_MENU_SECTION.key, 'block-menu-section');
+  var headingsChildren = childrenMap.get(headingsKey) || [];
+  var structureChildren = childrenMap.get(structureKey) || [];
+  return [].concat((0, _toConsumableArray2.default)(headingsChildren), (0, _toConsumableArray2.default)(structureChildren)).filter(function (c) {
+    return (0, _utils.willComponentRender)(c, childrenMap);
+  }).length;
+};
 var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
   return [{
     type: 'block-menu-item',
@@ -101,6 +118,9 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
     isHidden: function isHidden() {
       var _api$blockMenu, _api$selection, _api$blockControls;
       var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
+      if (getTotalNumberOfAvailableNativeTransforms(blockMenuComponents) < MIN_NUMBER_OF_AVAILABLE_NATIVE_TRANSFORMS) {
+        return true;
+      }
       var menuItemsMap = (0, _createMenuItemsMap.createMenuItemsMap)(blockMenuComponents);
       var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
       var preservedSelection = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.preservedSelection;
@@ -121,8 +141,8 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
           children: null
         },
         children = _ref3.children;
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
-        title: "Create"
+      return /*#__PURE__*/_react.default.createElement(_MenuSection.MenuSection, {
+        title: _messages.blockMenuMessages.create
       }, children);
     }
   }, {
@@ -138,8 +158,8 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
           children: null
         },
         children = _ref4.children;
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
-        title: "Structure"
+      return /*#__PURE__*/_react.default.createElement(_MenuSection.MenuSection, {
+        title: _messages.blockMenuMessages.structure
       }, children);
     }
   }, {
@@ -155,8 +175,8 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
           children: null
         },
         children = _ref5.children;
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
-        title: "Headings",
+      return /*#__PURE__*/_react.default.createElement(_MenuSection.MenuSection, {
+        title: _messages.blockMenuMessages.headings,
         hasSeparator: true
       }, children);
     }

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

@@ -18,11 +18,9 @@ var _text = _interopRequireDefault(require("@atlaskit/primitives/text"));
 var _consts = require("./consts");
 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 DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
-  var _api$core$sharedState;
   var api = _ref.api;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var nodeTypes = Object.values((api === null || api === void 0 || (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 || (_api$core$sharedState = _api$core$sharedState.schema) === null || _api$core$sharedState === void 0 ? void 0 : _api$core$sharedState.nodes) || {});
   var onClick = function onClick() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
       var _api$analytics, _api$blockControls, _api$blockControls2;
@@ -51,14 +49,13 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
       var _api$decorations, _api$decorations$hove;
       var tr = _ref3.tr;
       api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 || (_api$decorations = _api$decorations.commands) === null || _api$decorations === void 0 || (_api$decorations$hove = _api$decorations.hoverDecoration) === null || _api$decorations$hove === void 0 || _api$decorations$hove.call(_api$decorations, {
-        nodeType: nodeTypes,
         add: true
       })({
         tr: tr
       });
       return tr;
     });
-  }, [api, nodeTypes]);
+  }, [api]);
   var onRemoveHoverDecoration = (0, _react.useCallback)(function () {
     api === null || api === void 0 || api.core.actions.execute(function (_ref4) {
       var _api$decorations2, _api$decorations2$rem;

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

@@ -6,16 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SuggestedItemsMenuSection = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _useSuggestedItems = require("./hooks/useSuggestedItems");
 var SuggestedItemsMenuSection = exports.SuggestedItemsMenuSection = /*#__PURE__*/_react.default.memo(function (_ref) {
   var api = _ref.api,
     children = _ref.children;
   var suggestedItems = (0, _useSuggestedItems.useSuggestedItems)(api);
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   if (suggestedItems.length === 0) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
-    title: "Suggested"
+    title: formatMessage(_messages.blockMenuMessages.suggested)
   }, children);
 });

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

@@ -1,6 +1,6 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
-import { expandSelectionToBlockRange } from '@atlaskit/editor-common/selection';
+import { expandSelectionToBlockRange, getSourceNodesFromSelectionRange } from '@atlaskit/editor-common/selection';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
 import { isNestedNode } from '../ui/utils/isNestedNode';
@@ -27,10 +27,7 @@ export const transformNode = api => (targetType, metadata) => ({
   const isParentLayout = selectedParent.type === nodes.layoutColumn;
   const isNested = isNestedNode(preservedSelection, '') && !isParentLayout;
   const isList = isListNode(selectedParent);
-  const sliceStart = isList ? $from.pos - 1 : $from.pos;
-  const sliceEnd = isList ? $to.pos + 1 : $to.pos;
-  const slice = tr.doc.slice(sliceStart, sliceEnd);
-  const sourceNodes = [...slice.content.content];
+  const sourceNodes = getSourceNodesFromSelectionRange(tr, preservedSelection);
   const sourceNodeTypes = {};
   sourceNodes.forEach(node => {
     const typeName = node.type.name;
@@ -44,7 +41,8 @@ export const transformNode = api => (targetType, metadata) => ({
     targetAttrs: metadata === null || metadata === void 0 ? void 0 : metadata.targetAttrs,
     parentNode: selectedParent
   });
-  const content = resultNodes.length > 0 ? resultNodes : slice.content;
+  const content = resultNodes.length > 0 ? resultNodes : sourceNodes;
+  const sliceStart = isList ? $from.pos - 1 : $from.pos;
   if (preservedSelection instanceof NodeSelection && preservedSelection.node.type === nodes.mediaSingle) {
     var _api$blockControls2;
     // when node is media single, use tr.replaceWith freeze editor, if modify position, tr.replaceWith creates duplicats
@@ -59,8 +57,8 @@ export const transformNode = api => (targetType, metadata) => ({
     // when we replace and insert content, we need to manually map the preserved selection
     // through the transaction, otherwise it will treat the selection as having been deleted
     // and stop preserving it
-    const oldSize = slice.size;
-    const newSize = Array.isArray(content) ? content.reduce((sum, node) => sum + node.nodeSize, 0) : content.size;
+    const oldSize = sourceNodes.reduce((sum, node) => sum + node.nodeSize, 0);
+    const newSize = content.reduce((sum, node) => sum + node.nodeSize, 0);
     api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.mapPreservedSelection(new Mapping([new StepMap([0, oldSize, newSize])]))({
       tr
     });

package/dist/es2019/ui/MenuSection.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+export const MenuSection = ({
+  children,
+  title,
+  hasSeparator
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    title: formatMessage(title),
+    hasSeparator: hasSeparator
+  }, children);
+};

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

@@ -1,18 +1,33 @@
 import React from 'react';
 import { BLOCK_ACTIONS_COPY_LINK_TO_BLOCK_MENU_ITEM, BLOCK_ACTIONS_MENU_SECTION, BLOCK_ACTIONS_MENU_SECTION_RANK, DELETE_MENU_SECTION, DELETE_MENU_SECTION_RANK, DELETE_MENU_ITEM, POSITION_MENU_SECTION, POSITION_MENU_SECTION_RANK, POSITION_MOVE_DOWN_MENU_ITEM, POSITION_MOVE_UP_MENU_ITEM, TRANSFORM_MENU_ITEM, TRANSFORM_MENU_ITEM_RANK, TRANSFORM_MENU_SECTION, TRANSFORM_MENU_SECTION_RANK, TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_SUGGESTED_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_HEADINGS_MENU_SECTION, MAIN_BLOCK_MENU_SECTION_RANK, TRANSFORM_SUGGESTED_MENU_SECTION_RANK, TRANSFORM_SUGGESTED_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { buildChildrenMap, getChildrenMapKey, willComponentRender } from './block-menu-renderer/utils';
 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 { MenuSection } from './MenuSection';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
 import { SuggestedItemsMenuSection } from './suggested-items-menu-section';
 import { SuggestedMenuItems } from './suggested-menu-items';
 import { createMenuItemsMap } from './utils/createMenuItemsMap';
 import { getSuggestedItemsFromSelection } from './utils/getSuggestedItemsFromSelection';
+const MIN_NUMBER_OF_AVAILABLE_NATIVE_TRANSFORMS = 7;
+const getTotalNumberOfAvailableNativeTransforms = blockMenuComponents => {
+  if (!blockMenuComponents) {
+    return 0;
+  }
+  const childrenMap = buildChildrenMap(blockMenuComponents);
+  const headingsKey = getChildrenMapKey(TRANSFORM_HEADINGS_MENU_SECTION.key, 'block-menu-section');
+  const structureKey = getChildrenMapKey(TRANSFORM_STRUCTURE_MENU_SECTION.key, 'block-menu-section');
+  const headingsChildren = childrenMap.get(headingsKey) || [];
+  const structureChildren = childrenMap.get(structureKey) || [];
+  return [...headingsChildren, ...structureChildren].filter(c => willComponentRender(c, childrenMap)).length;
+};
 const getMoveUpMoveDownMenuComponents = api => {
   return [{
     type: 'block-menu-item',
@@ -85,6 +100,9 @@ const getTurnIntoMenuComponents = api => {
     isHidden: () => {
       var _api$blockMenu, _api$selection, _api$selection$shared, _api$blockControls, _api$blockControls$sh;
       const blockMenuComponents = api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
+      if (getTotalNumberOfAvailableNativeTransforms(blockMenuComponents) < MIN_NUMBER_OF_AVAILABLE_NATIVE_TRANSFORMS) {
+        return true;
+      }
       const menuItemsMap = createMenuItemsMap(blockMenuComponents);
       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.currentState()) === null || _api$selection$shared === void 0 ? void 0 : _api$selection$shared.selection;
       const preservedSelection = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection;
@@ -105,8 +123,8 @@ const getTurnIntoMenuComponents = api => {
     } = {
       children: null
     }) => {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-        title: "Create"
+      return /*#__PURE__*/React.createElement(MenuSection, {
+        title: blockMenuMessages.create
       }, children);
     }
   }, {
@@ -122,8 +140,8 @@ const getTurnIntoMenuComponents = api => {
     } = {
       children: null
     }) => {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-        title: "Structure"
+      return /*#__PURE__*/React.createElement(MenuSection, {
+        title: blockMenuMessages.structure
       }, children);
     }
   }, {
@@ -139,8 +157,8 @@ const getTurnIntoMenuComponents = api => {
     } = {
       children: null
     }) => {
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-        title: "Headings",
+      return /*#__PURE__*/React.createElement(MenuSection, {
+        title: blockMenuMessages.headings,
         hasSeparator: true
       }, children);
     }

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

@@ -11,11 +11,9 @@ import { BLOCK_MENU_ITEM_NAME } from './consts';
 const DeleteDropdownItemContent = ({
   api
 }) => {
-  var _api$core$sharedState, _api$core$sharedState2;
   const {
     formatMessage
   } = useIntl();
-  const nodeTypes = Object.values((api === null || api === void 0 ? void 0 : (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 ? void 0 : (_api$core$sharedState2 = _api$core$sharedState.schema) === null || _api$core$sharedState2 === void 0 ? void 0 : _api$core$sharedState2.nodes) || {});
   const onClick = () => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
@@ -46,14 +44,13 @@ const DeleteDropdownItemContent = ({
     }) => {
       var _api$decorations, _api$decorations$comm, _api$decorations$comm2;
       api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : (_api$decorations$comm = _api$decorations.commands) === null || _api$decorations$comm === void 0 ? void 0 : (_api$decorations$comm2 = _api$decorations$comm.hoverDecoration) === null || _api$decorations$comm2 === void 0 ? void 0 : _api$decorations$comm2.call(_api$decorations$comm, {
-        nodeType: nodeTypes,
         add: true
       })({
         tr
       });
       return tr;
     });
-  }, [api, nodeTypes]);
+  }, [api]);
   const onRemoveHoverDecoration = useCallback(() => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { useSuggestedItems } from './hooks/useSuggestedItems';
 export const SuggestedItemsMenuSection = /*#__PURE__*/React.memo(({
@@ -6,10 +8,13 @@ export const SuggestedItemsMenuSection = /*#__PURE__*/React.memo(({
   children
 }) => {
   const suggestedItems = useSuggestedItems(api);
+  const {
+    formatMessage
+  } = useIntl();
   if (suggestedItems.length === 0) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-    title: "Suggested"
+    title: formatMessage(blockMenuMessages.suggested)
   }, children);
 });

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

@@ -1,7 +1,6 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
-import { expandSelectionToBlockRange } from '@atlaskit/editor-common/selection';
+import { expandSelectionToBlockRange, getSourceNodesFromSelectionRange } from '@atlaskit/editor-common/selection';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
 import { isNestedNode } from '../ui/utils/isNestedNode';
@@ -26,10 +25,7 @@ export var transformNode = function transformNode(api) {
       var isParentLayout = selectedParent.type === nodes.layoutColumn;
       var isNested = isNestedNode(preservedSelection, '') && !isParentLayout;
       var isList = isListNode(selectedParent);
-      var sliceStart = isList ? $from.pos - 1 : $from.pos;
-      var sliceEnd = isList ? $to.pos + 1 : $to.pos;
-      var slice = tr.doc.slice(sliceStart, sliceEnd);
-      var sourceNodes = _toConsumableArray(slice.content.content);
+      var sourceNodes = getSourceNodesFromSelectionRange(tr, preservedSelection);
       var sourceNodeTypes = {};
       sourceNodes.forEach(function (node) {
         var typeName = node.type.name;
@@ -43,7 +39,8 @@ export var transformNode = function transformNode(api) {
         targetAttrs: metadata === null || metadata === void 0 ? void 0 : metadata.targetAttrs,
         parentNode: selectedParent
       });
-      var content = resultNodes.length > 0 ? resultNodes : slice.content;
+      var content = resultNodes.length > 0 ? resultNodes : sourceNodes;
+      var sliceStart = isList ? $from.pos - 1 : $from.pos;
       if (preservedSelection instanceof NodeSelection && preservedSelection.node.type === nodes.mediaSingle) {
         var _api$blockControls2;
         // when node is media single, use tr.replaceWith freeze editor, if modify position, tr.replaceWith creates duplicats
@@ -58,10 +55,12 @@ export var transformNode = function transformNode(api) {
         // when we replace and insert content, we need to manually map the preserved selection
         // through the transaction, otherwise it will treat the selection as having been deleted
         // and stop preserving it
-        var oldSize = slice.size;
-        var newSize = Array.isArray(content) ? content.reduce(function (sum, node) {
+        var oldSize = sourceNodes.reduce(function (sum, node) {
+          return sum + node.nodeSize;
+        }, 0);
+        var newSize = content.reduce(function (sum, node) {
           return sum + node.nodeSize;
-        }, 0) : content.size;
+        }, 0);
         api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.mapPreservedSelection(new Mapping([new StepMap([0, oldSize, newSize])]))({
           tr: tr
         });

package/dist/esm/ui/MenuSection.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+export var MenuSection = function MenuSection(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    hasSeparator = _ref.hasSeparator;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    title: formatMessage(title),
+    hasSeparator: hasSeparator
+  }, children);
+};

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

@@ -1,19 +1,36 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
 import { BLOCK_ACTIONS_COPY_LINK_TO_BLOCK_MENU_ITEM, BLOCK_ACTIONS_MENU_SECTION, BLOCK_ACTIONS_MENU_SECTION_RANK, DELETE_MENU_SECTION, DELETE_MENU_SECTION_RANK, DELETE_MENU_ITEM, POSITION_MENU_SECTION, POSITION_MENU_SECTION_RANK, POSITION_MOVE_DOWN_MENU_ITEM, POSITION_MOVE_UP_MENU_ITEM, TRANSFORM_MENU_ITEM, TRANSFORM_MENU_ITEM_RANK, TRANSFORM_MENU_SECTION, TRANSFORM_MENU_SECTION_RANK, TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_SUGGESTED_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_HEADINGS_MENU_SECTION, MAIN_BLOCK_MENU_SECTION_RANK, TRANSFORM_SUGGESTED_MENU_SECTION_RANK, TRANSFORM_SUGGESTED_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { buildChildrenMap, getChildrenMapKey, willComponentRender } from './block-menu-renderer/utils';
 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 { MenuSection } from './MenuSection';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
 import { SuggestedItemsMenuSection } from './suggested-items-menu-section';
 import { SuggestedMenuItems } from './suggested-menu-items';
 import { createMenuItemsMap } from './utils/createMenuItemsMap';
 import { getSuggestedItemsFromSelection } from './utils/getSuggestedItemsFromSelection';
+var MIN_NUMBER_OF_AVAILABLE_NATIVE_TRANSFORMS = 7;
+var getTotalNumberOfAvailableNativeTransforms = function getTotalNumberOfAvailableNativeTransforms(blockMenuComponents) {
+  if (!blockMenuComponents) {
+    return 0;
+  }
+  var childrenMap = buildChildrenMap(blockMenuComponents);
+  var headingsKey = getChildrenMapKey(TRANSFORM_HEADINGS_MENU_SECTION.key, 'block-menu-section');
+  var structureKey = getChildrenMapKey(TRANSFORM_STRUCTURE_MENU_SECTION.key, 'block-menu-section');
+  var headingsChildren = childrenMap.get(headingsKey) || [];
+  var structureChildren = childrenMap.get(structureKey) || [];
+  return [].concat(_toConsumableArray(headingsChildren), _toConsumableArray(structureChildren)).filter(function (c) {
+    return willComponentRender(c, childrenMap);
+  }).length;
+};
 var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
   return [{
     type: 'block-menu-item',
@@ -94,6 +111,9 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
     isHidden: function isHidden() {
       var _api$blockMenu, _api$selection, _api$blockControls;
       var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
+      if (getTotalNumberOfAvailableNativeTransforms(blockMenuComponents) < MIN_NUMBER_OF_AVAILABLE_NATIVE_TRANSFORMS) {
+        return true;
+      }
       var menuItemsMap = createMenuItemsMap(blockMenuComponents);
       var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
       var preservedSelection = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.preservedSelection;
@@ -114,8 +134,8 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
           children: null
         },
         children = _ref3.children;
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-        title: "Create"
+      return /*#__PURE__*/React.createElement(MenuSection, {
+        title: blockMenuMessages.create
       }, children);
     }
   }, {
@@ -131,8 +151,8 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
           children: null
         },
         children = _ref4.children;
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-        title: "Structure"
+      return /*#__PURE__*/React.createElement(MenuSection, {
+        title: blockMenuMessages.structure
       }, children);
     }
   }, {
@@ -148,8 +168,8 @@ var getTurnIntoMenuComponents = function getTurnIntoMenuComponents(api) {
           children: null
         },
         children = _ref5.children;
-      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-        title: "Headings",
+      return /*#__PURE__*/React.createElement(MenuSection, {
+        title: blockMenuMessages.headings,
         hasSeparator: true
       }, children);
     }

package/dist/esm/ui/delete-button.js

@@ -9,11 +9,9 @@ import { Box } from '@atlaskit/primitives/box';
 import Text from '@atlaskit/primitives/text';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
 var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
-  var _api$core$sharedState;
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var nodeTypes = Object.values((api === null || api === void 0 || (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 || (_api$core$sharedState = _api$core$sharedState.schema) === null || _api$core$sharedState === void 0 ? void 0 : _api$core$sharedState.nodes) || {});
   var onClick = function onClick() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
       var _api$analytics, _api$blockControls, _api$blockControls2;
@@ -42,14 +40,13 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
       var _api$decorations, _api$decorations$hove;
       var tr = _ref3.tr;
       api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 || (_api$decorations = _api$decorations.commands) === null || _api$decorations === void 0 || (_api$decorations$hove = _api$decorations.hoverDecoration) === null || _api$decorations$hove === void 0 || _api$decorations$hove.call(_api$decorations, {
-        nodeType: nodeTypes,
         add: true
       })({
         tr: tr
       });
       return tr;
     });
-  }, [api, nodeTypes]);
+  }, [api]);
   var onRemoveHoverDecoration = useCallback(function () {
     api === null || api === void 0 || api.core.actions.execute(function (_ref4) {
       var _api$decorations2, _api$decorations2$rem;

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

@@ -1,14 +1,18 @@
 import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 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);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   if (suggestedItems.length === 0) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
-    title: "Suggested"
+    title: formatMessage(blockMenuMessages.suggested)
   }, children);
 });

package/dist/types/ui/MenuSection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type MessageDescriptor } from 'react-intl-next';
+type MenuSectionProps = {
+    children?: React.ReactNode;
+    hasSeparator?: boolean;
+    title: MessageDescriptor;
+};
+export declare const MenuSection: ({ children, title, hasSeparator, }: MenuSectionProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/MenuSection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type MessageDescriptor } from 'react-intl-next';
+type MenuSectionProps = {
+    children?: React.ReactNode;
+    hasSeparator?: boolean;
+    title: MessageDescriptor;
+};
+export declare const MenuSection: ({ children, title, hasSeparator, }: MenuSectionProps) => React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "6.0.20",
+	"version": "6.0.22",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,8 +46,8 @@
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^17.1.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^16.24.0",
-		"@atlaskit/tokens": "^10.0.0",
+		"@atlaskit/tmp-editor-statsig": "^16.28.0",
+		"@atlaskit/tokens": "^10.1.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {

package/build/tsconfig.json

@@ -1,17 +0,0 @@
-{
-	"extends": "../tsconfig",
-	"compilerOptions": {
-		"target": "es5",
-		"paths": {}
-	},
-	"include": [
-		"../src/**/*.ts",
-		"../src/**/*.tsx"
-	],
-	"exclude": [
-		"../src/**/__tests__/*",
-		"../src/**/*.test.*",
-		"../src/**/test.*",
-		"../src/**/examples.*"
-	]
-}