@atlaskit/editor-plugin-block-menu 6.0.19 → 6.0.21

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 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
+
+- [`edb1034803ecf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/edb1034803ecf) -
+  Fix undo/redo via keyboard when block menu is open
+- Updated dependencies
+
 ## 6.0.19
 
 ### Patch Changes

package/afm-cc/tsconfig.json

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

package/afm-jira/tsconfig.json

@@ -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/pm-plugins/main.js

@@ -35,12 +35,13 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         }
 
         // Block further handling of key events when block menu is open
-        // Except for backspace/delete/copy/cut/paste which should be handled by the selection preservation plugin
+        // Except for backspace/delete/copy/cut/paste/undo/redo which should be handled by the selection preservation plugin
         var key = event.key.toLowerCase();
         var isMetaCtrl = event.metaKey || event.ctrlKey;
         var isBackspaceDelete = ['backspace', 'delete'].includes(key);
         var isCopyCutPaste = isMetaCtrl && ['c', 'x', 'v'].includes(key);
-        var suppressNativeHandling = !isCopyCutPaste && !isBackspaceDelete;
+        var isUndoRedo = isMetaCtrl && ['z', 'y'].includes(key);
+        var suppressNativeHandling = !isCopyCutPaste && !isBackspaceDelete && !isUndoRedo;
         return suppressNativeHandling;
       }
     }

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

@@ -9,6 +9,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = _interopRequireDefault(require("react"));
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _utils = require("./block-menu-renderer/utils");
 var _copyLink = require("./copy-link");
 var _copySection = require("./copy-section");
 var _deleteButton = require("./delete-button");
@@ -21,6 +22,20 @@ 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 +116,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;

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

@@ -24,6 +24,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _prosemirrorHistory = require("@atlaskit/prosemirror-history");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _blockMenuProvider = require("./block-menu-provider");
 var _BlockMenuRenderer = require("./block-menu-renderer/BlockMenuRenderer");
@@ -198,12 +199,22 @@ var BlockMenu = function BlockMenu(_ref4) {
     if (!editorView || editorView !== null && editorView !== void 0 && editorView.hasFocus() || isSelectionWithinCodeBlock(editorView.state)) {
       return;
     }
+    var key = event.key.toLowerCase();
+    var isMetaCtrl = event.metaKey || event.ctrlKey;
+    var isDelete = ['backspace', 'delete'].includes(key);
+    var isUndo = isMetaCtrl && key === 'z' && !event.shiftKey;
+    var isRedo = isMetaCtrl && (key === 'y' || key === 'z' && event.shiftKey);
 
     // Necessary to prevent the editor from handling the delete natively
-    if (['backspace', 'delete'].includes(event.key.toLowerCase())) {
+    if (isDelete || isUndo || isRedo) {
       event.preventDefault();
       event.stopPropagation();
     }
+    if (isUndo) {
+      (0, _prosemirrorHistory.undo)(editorView.state, editorView.dispatch);
+    } else if (isRedo) {
+      (0, _prosemirrorHistory.redo)(editorView.state, editorView.dispatch);
+    }
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.handleKeyDownWithPreservedSelection(event));
   };
   var handleClickOutside = function handleClickOutside(e) {

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/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/pm-plugins/main.js

@@ -29,12 +29,13 @@ export const createPlugin = api => {
         }
 
         // Block further handling of key events when block menu is open
-        // Except for backspace/delete/copy/cut/paste which should be handled by the selection preservation plugin
+        // Except for backspace/delete/copy/cut/paste/undo/redo which should be handled by the selection preservation plugin
         const key = event.key.toLowerCase();
         const isMetaCtrl = event.metaKey || event.ctrlKey;
         const isBackspaceDelete = ['backspace', 'delete'].includes(key);
         const isCopyCutPaste = isMetaCtrl && ['c', 'x', 'v'].includes(key);
-        const suppressNativeHandling = !isCopyCutPaste && !isBackspaceDelete;
+        const isUndoRedo = isMetaCtrl && ['z', 'y'].includes(key);
+        const suppressNativeHandling = !isCopyCutPaste && !isBackspaceDelete && !isUndoRedo;
         return suppressNativeHandling;
       }
     }

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

@@ -1,6 +1,7 @@
 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 { 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';
@@ -13,6 +14,18 @@ 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 +98,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;

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

@@ -15,6 +15,7 @@ import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styl
 import { fg } from '@atlaskit/platform-feature-flags';
 import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
 import { Box } from '@atlaskit/primitives/compiled';
+import { redo, undo } from '@atlaskit/prosemirror-history';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useBlockMenu } from './block-menu-provider';
 import { BlockMenuRenderer } from './block-menu-renderer/BlockMenuRenderer';
@@ -188,12 +189,22 @@ const BlockMenu = ({
     if (!editorView || editorView !== null && editorView !== void 0 && editorView.hasFocus() || isSelectionWithinCodeBlock(editorView.state)) {
       return;
     }
+    const key = event.key.toLowerCase();
+    const isMetaCtrl = event.metaKey || event.ctrlKey;
+    const isDelete = ['backspace', 'delete'].includes(key);
+    const isUndo = isMetaCtrl && key === 'z' && !event.shiftKey;
+    const isRedo = isMetaCtrl && (key === 'y' || key === 'z' && event.shiftKey);
 
     // Necessary to prevent the editor from handling the delete natively
-    if (['backspace', 'delete'].includes(event.key.toLowerCase())) {
+    if (isDelete || isUndo || isRedo) {
       event.preventDefault();
       event.stopPropagation();
     }
+    if (isUndo) {
+      undo(editorView.state, editorView.dispatch);
+    } else if (isRedo) {
+      redo(editorView.state, editorView.dispatch);
+    }
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$co = _api$blockControls.commands) === null || _api$blockControls$co === void 0 ? void 0 : _api$blockControls$co.handleKeyDownWithPreservedSelection(event));
   };
   const handleClickOutside = e => {

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/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/pm-plugins/main.js

@@ -29,12 +29,13 @@ export var createPlugin = function createPlugin(api) {
         }
 
         // Block further handling of key events when block menu is open
-        // Except for backspace/delete/copy/cut/paste which should be handled by the selection preservation plugin
+        // Except for backspace/delete/copy/cut/paste/undo/redo which should be handled by the selection preservation plugin
         var key = event.key.toLowerCase();
         var isMetaCtrl = event.metaKey || event.ctrlKey;
         var isBackspaceDelete = ['backspace', 'delete'].includes(key);
         var isCopyCutPaste = isMetaCtrl && ['c', 'x', 'v'].includes(key);
-        var suppressNativeHandling = !isCopyCutPaste && !isBackspaceDelete;
+        var isUndoRedo = isMetaCtrl && ['z', 'y'].includes(key);
+        var suppressNativeHandling = !isCopyCutPaste && !isBackspaceDelete && !isUndoRedo;
         return suppressNativeHandling;
       }
     }

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

@@ -2,6 +2,7 @@ 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 { 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';
@@ -14,6 +15,20 @@ 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 +109,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;

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

@@ -16,6 +16,7 @@ import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styl
 import { fg } from '@atlaskit/platform-feature-flags';
 import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
 import { Box } from '@atlaskit/primitives/compiled';
+import { redo, undo } from '@atlaskit/prosemirror-history';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useBlockMenu } from './block-menu-provider';
 import { BlockMenuRenderer } from './block-menu-renderer/BlockMenuRenderer';
@@ -189,12 +190,22 @@ var BlockMenu = function BlockMenu(_ref4) {
     if (!editorView || editorView !== null && editorView !== void 0 && editorView.hasFocus() || isSelectionWithinCodeBlock(editorView.state)) {
       return;
     }
+    var key = event.key.toLowerCase();
+    var isMetaCtrl = event.metaKey || event.ctrlKey;
+    var isDelete = ['backspace', 'delete'].includes(key);
+    var isUndo = isMetaCtrl && key === 'z' && !event.shiftKey;
+    var isRedo = isMetaCtrl && (key === 'y' || key === 'z' && event.shiftKey);
 
     // Necessary to prevent the editor from handling the delete natively
-    if (['backspace', 'delete'].includes(event.key.toLowerCase())) {
+    if (isDelete || isUndo || isRedo) {
       event.preventDefault();
       event.stopPropagation();
     }
+    if (isUndo) {
+      undo(editorView.state, editorView.dispatch);
+    } else if (isRedo) {
+      redo(editorView.state, editorView.dispatch);
+    }
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.handleKeyDownWithPreservedSelection(event));
   };
   var handleClickOutside = function handleClickOutside(e) {

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "6.0.19",
+	"version": "6.0.21",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -45,8 +45,9 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^17.1.0",
-		"@atlaskit/tmp-editor-statsig": "^16.23.0",
-		"@atlaskit/tokens": "^10.0.0",
+		"@atlaskit/prosemirror-history": "^0.2.0",
+		"@atlaskit/tmp-editor-statsig": "^16.27.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.*"
-	]
-}