@atlaskit/editor-plugin-block-menu 4.0.0 → 4.0.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 4.0.2
+
+### Patch Changes
+
+- [`9cf29da7572b3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9cf29da7572b3) -
+  [ux] Fires Element converted event when Turn into menu is used to transform a node from one node
+  type to another.
+- Updated dependencies
+
+## 4.0.1
+
+### Patch Changes
+
+- [`f4c0936dc05fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f4c0936dc05fe) -
+  ED-29391 Add keyboard support for block menu
+- Updated dependencies
+
 ## 4.0.0
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -23,6 +23,9 @@
 		{
 			"path": "../../../design-system/dropdown-menu/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-analytics/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-controls/afm-cc/tsconfig.json"
 		},

package/dist/cjs/blockMenuPlugin.js

@@ -38,7 +38,7 @@ var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
     },
     commands: {
       formatNode: function formatNode(targetType) {
-        return (0, _formatNode2.formatNode)(targetType);
+        return (0, _formatNode2.formatNode)(api)(targetType);
       }
     },
     getSharedState: function getSharedState(editorState) {

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.formatNode = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
@@ -51,62 +52,83 @@ var formatNodeWhenSelectionEmpty = function formatNodeWhenSelectionEmpty(tr, tar
 
 /**
  * Formats the current node or selection to the specified target type
+ * @param api - The editor API injection that provides access to analytics and other plugin actions
  * @param targetType - The target node type to convert to
  */
-var formatNode = exports.formatNode = function formatNode(targetType) {
-  return function (_ref) {
-    var tr = _ref.tr;
-    var selection = tr.selection;
-    var schema = tr.doc.type.schema;
-    var nodes = schema.nodes;
+var formatNode = exports.formatNode = function formatNode(api) {
+  return function (targetType) {
+    return function (_ref) {
+      var tr = _ref.tr;
+      var selection = tr.selection;
+      var schema = tr.doc.type.schema;
+      var nodes = schema.nodes;
 
-    // Find the node to format from the current selection
-    var nodeToFormat;
-    var nodePos = selection.from;
+      // Find the node to format from the current selection
+      var nodeToFormat;
+      var nodePos = selection.from;
 
-    // when selection is empty, we insert a empty target node
-    if (selection.empty && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
-      return formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
-    }
+      // when selection is empty, we insert a empty target node
+      if (selection.empty && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+        return formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
+      }
 
-    // Try to find the current node from selection
-    var selectedNode = (0, _utils.findSelectedNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.expand, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection])(selection);
-    if (selectedNode) {
-      nodeToFormat = selectedNode.node;
-      nodePos = selectedNode.pos;
-    } else {
-      // Try to find parent node (including list parents)
-      var parentNode = (0, _utils.findParentNodeOfType)([nodes.blockquote, nodes.panel, nodes.expand, nodes.codeBlock, nodes.listItem, nodes.taskItem, nodes.layoutSection])(selection);
-      if (parentNode) {
-        nodeToFormat = parentNode.node;
-        nodePos = parentNode.pos;
-        var paragraphOrHeadingNode = (0, _utils.findParentNodeOfType)([nodes.paragraph, nodes.heading])(selection);
-        // Special case: if we found a listItem, check if we need the parent list instead
-        if (parentNode.node.type === nodes.listItem || parentNode.node.type === nodes.taskItem) {
-          var listParent = (0, _utils.findParentNodeOfType)([nodes.bulletList, nodes.orderedList, nodes.taskList])(selection);
-          if (listParent) {
-            // For list transformations, we want the list parent, not the listItem
-            nodeToFormat = listParent.node;
-            nodePos = listParent.pos;
+      // Try to find the current node from selection
+      var selectedNode = (0, _utils.findSelectedNodeOfType)([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.expand, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection])(selection);
+      if (selectedNode) {
+        nodeToFormat = selectedNode.node;
+        nodePos = selectedNode.pos;
+      } else {
+        // Try to find parent node (including list parents)
+        var parentNode = (0, _utils.findParentNodeOfType)([nodes.blockquote, nodes.panel, nodes.expand, nodes.codeBlock, nodes.listItem, nodes.taskItem, nodes.layoutSection])(selection);
+        if (parentNode) {
+          nodeToFormat = parentNode.node;
+          nodePos = parentNode.pos;
+          var paragraphOrHeadingNode = (0, _utils.findParentNodeOfType)([nodes.paragraph, nodes.heading])(selection);
+          // Special case: if we found a listItem, check if we need the parent list instead
+          if (parentNode.node.type === nodes.listItem || parentNode.node.type === nodes.taskItem) {
+            var listParent = (0, _utils.findParentNodeOfType)([nodes.bulletList, nodes.orderedList, nodes.taskList])(selection);
+            if (listParent) {
+              // For list transformations, we want the list parent, not the listItem
+              nodeToFormat = listParent.node;
+              nodePos = listParent.pos;
+            }
+          } else if (parentNode.node.type !== nodes.blockquote && paragraphOrHeadingNode) {
+            nodeToFormat = paragraphOrHeadingNode.node;
+            nodePos = paragraphOrHeadingNode.pos;
           }
-        } else if (parentNode.node.type !== nodes.blockquote && paragraphOrHeadingNode) {
-          nodeToFormat = paragraphOrHeadingNode.node;
-          nodePos = paragraphOrHeadingNode.pos;
         }
       }
-    }
-    if (!nodeToFormat) {
-      nodeToFormat = selection.$from.node();
-      nodePos = selection.$from.pos;
-    }
-    try {
-      var newTr = (0, _transformNodeToTargetType.transformNodeToTargetType)(tr, nodeToFormat, nodePos, targetType);
-      if (newTr && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_selection_fix')) {
-        return (0, _selection.setSelectionAfterTransform)(newTr, nodePos, targetType);
+      if (!nodeToFormat) {
+        nodeToFormat = selection.$from.node();
+        nodePos = selection.$from.pos;
       }
-      return newTr;
-    } catch (_unused) {
-      return null;
-    }
+      try {
+        var _nodeToFormat$attrs;
+        var newTr = (0, _transformNodeToTargetType.transformNodeToTargetType)(tr, nodeToFormat, nodePos, targetType);
+        var sourceTypeName = nodeToFormat.type.name;
+        if (sourceTypeName === 'heading' && (_nodeToFormat$attrs = nodeToFormat.attrs) !== null && _nodeToFormat$attrs !== void 0 && _nodeToFormat$attrs.level) {
+          sourceTypeName = "heading".concat(nodeToFormat.attrs.level);
+        }
+        if (newTr && sourceTypeName !== targetType) {
+          var _api$analytics;
+          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
+            action: _analytics.ACTION.CONVERTED,
+            actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+            eventType: _analytics.EVENT_TYPE.TRACK,
+            attributes: {
+              from: sourceTypeName,
+              to: targetType,
+              inputMethod: _analytics.INPUT_METHOD.BLOCK_MENU
+            }
+          })(newTr);
+        }
+        if (newTr && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_selection_fix')) {
+          return (0, _selection.setSelectionAfterTransform)(newTr, nodePos, targetType);
+        }
+        return newTr;
+      } catch (_unused) {
+        return null;
+      }
+    };
   };
 };

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.BlockMenuRenderer = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 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 NoOp = function NoOp(props) {
   return null;
@@ -49,7 +50,9 @@ var BlockMenuRenderer = exports.BlockMenuRenderer = function BlockMenuRenderer(_
   var menuSections = getSortedNonNestedSections(components);
   var menuItems = components.filter(isMenuItem);
   var nestedMenus = components.filter(isNestedMenu);
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, menuSections.map(function (section) {
+  return /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+    type: _uiMenu.ArrowKeyNavigationType.MENU
+  }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, menuSections.map(function (section) {
     // Get all items for the current section, including nested menus, and sort them by rank
     var currentSectionItemsSorted = getSortedChildren([].concat((0, _toConsumableArray2.default)(menuItems), (0, _toConsumableArray2.default)(nestedMenus)), section.key);
     if (currentSectionItemsSorted.length === 0) {
@@ -90,5 +93,5 @@ var BlockMenuRenderer = exports.BlockMenuRenderer = function BlockMenuRenderer(_
     return /*#__PURE__*/_react.default.createElement(SectionComponent, {
       key: section.key
     }, children);
-  }));
+  })));
 };

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

@@ -83,13 +83,13 @@ var BlockMenu = function BlockMenu(_ref2) {
   var prevIsMenuOpenRef = (0, _react.useRef)(false);
   var hasFocus = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref3 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref3 !== void 0 ? _ref3 : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   var hasSelection = !!editorView && !editorView.state.selection.empty;
-
   // hasSelection true, always show block menu
   // hasSelection false, only show block menu when empty line experiment is enabled
   var shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true);
+  var selectedByShortcutORDragHandle = isSelectedViaDragHandle;
   (0, _react.useEffect)(function () {
     var _api$userIntent;
-    if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+    if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
       return;
     }
 
@@ -108,7 +108,7 @@ var BlockMenu = function BlockMenu(_ref2) {
     // Update the previous state
     prevIsMenuOpenRef.current = isMenuOpen;
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
-  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
+  }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutORDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
   if (!isMenuOpen) {
     return null;
   }
@@ -128,7 +128,7 @@ var BlockMenu = function BlockMenu(_ref2) {
       return tr;
     });
   };
-  if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+  if (!menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;
   }
@@ -149,6 +149,7 @@ var BlockMenu = function BlockMenu(_ref2) {
       preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
       ,
       stick: true,
+      focusTrap: true,
       offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
       api: api

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

@@ -18,6 +18,7 @@ var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _box = require("@atlaskit/primitives/box");
 var _text = _interopRequireDefault(require("@atlaskit/primitives/text"));
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _blockMenuProvider = require("./block-menu-provider");
 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) {
@@ -64,7 +65,7 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
     });
     api === null || api === void 0 || api.core.actions.focus();
   };
-  var onMouseEnter = (0, _react.useCallback)(function () {
+  var onShowHoverDecoration = (0, _react.useCallback)(function () {
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
       var _api$decorations, _api$decorations$hove;
       var tr = _ref3.tr;
@@ -77,14 +78,16 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
       return tr;
     });
   }, [api, nodeTypes]);
-  var onMouseLeave = function onMouseLeave() {
+  var onRemoveHoverDecoration = function onRemoveHoverDecoration() {
     var _api$decorations2, _api$decorations2$rem;
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 || (_api$decorations2 = _api$decorations2.commands) === null || _api$decorations2 === void 0 || (_api$decorations2$rem = _api$decorations2.removeDecoration) === null || _api$decorations2$rem === void 0 ? void 0 : _api$decorations2$rem.call(_api$decorations2));
   };
   var text = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_1') ? formatMessage(_messages.blockMenuMessages.deleteBlock) : formatMessage(_blockMenu.messages.deleteBlock);
   return /*#__PURE__*/_react.default.createElement(_box.Box, {
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
+    onMouseEnter: onShowHoverDecoration,
+    onMouseLeave: onRemoveHoverDecoration,
+    onFocus: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? onShowHoverDecoration : undefined,
+    onBlur: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? onRemoveHoverDecoration : undefined
   }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(_delete.default, {
       color: "var(--ds-icon-danger, #C9372C)",

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

@@ -50,6 +50,7 @@ var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuCompo
     }),
     enableMaxHeight: true,
     isDisabled: isDisabled,
-    onClick: handleClick
+    onClick: handleClick,
+    dropdownTestId: "editor-nested-turn-into-menu"
   }, children);
 };

package/dist/es2019/blockMenuPlugin.js

@@ -32,7 +32,7 @@ export const blockMenuPlugin = ({
     },
     commands: {
       formatNode: targetType => {
-        return formatNode(targetType);
+        return formatNode(api)(targetType);
       }
     },
     getSharedState(editorState) {

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

@@ -1,3 +1,4 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { findParentNodeOfType, findSelectedNodeOfType, safeInsert as pmSafeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
@@ -49,9 +50,10 @@ const formatNodeWhenSelectionEmpty = (tr, targetType, nodePos, schema) => {
 
 /**
  * Formats the current node or selection to the specified target type
+ * @param api - The editor API injection that provides access to analytics and other plugin actions
  * @param targetType - The target node type to convert to
  */
-export const formatNode = targetType => {
+export const formatNode = api => targetType => {
   return ({
     tr
   }) => {
@@ -103,7 +105,25 @@ export const formatNode = targetType => {
       nodePos = selection.$from.pos;
     }
     try {
+      var _nodeToFormat$attrs;
       const newTr = transformNodeToTargetType(tr, nodeToFormat, nodePos, targetType);
+      let sourceTypeName = nodeToFormat.type.name;
+      if (sourceTypeName === 'heading' && (_nodeToFormat$attrs = nodeToFormat.attrs) !== null && _nodeToFormat$attrs !== void 0 && _nodeToFormat$attrs.level) {
+        sourceTypeName = `heading${nodeToFormat.attrs.level}`;
+      }
+      if (newTr && sourceTypeName !== targetType) {
+        var _api$analytics, _api$analytics$action;
+        api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
+          action: ACTION.CONVERTED,
+          actionSubject: ACTION_SUBJECT.ELEMENT,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            from: sourceTypeName,
+            to: targetType,
+            inputMethod: INPUT_METHOD.BLOCK_MENU
+          }
+        })(newTr);
+      }
       if (newTr && fg('platform_editor_block_menu_selection_fix')) {
         return setSelectionAfterTransform(newTr, nodePos, targetType);
       }

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

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 const NoOp = props => null;
 const isNonNestedMenuSection = component => {
   return component.type === 'block-menu-section' && !('parent' in component);
@@ -28,7 +29,9 @@ export const BlockMenuRenderer = ({
   const menuSections = getSortedNonNestedSections(components);
   const menuItems = components.filter(isMenuItem);
   const nestedMenus = components.filter(isNestedMenu);
-  return /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(section => {
+  return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    type: ArrowKeyNavigationType.MENU
+  }, /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(section => {
     // Get all items for the current section, including nested menus, and sort them by rank
     const currentSectionItemsSorted = getSortedChildren([...menuItems, ...nestedMenus], section.key);
     if (currentSectionItemsSorted.length === 0) {
@@ -69,5 +72,5 @@ export const BlockMenuRenderer = ({
     return /*#__PURE__*/React.createElement(SectionComponent, {
       key: section.key
     }, children);
-  }));
+  })));
 };

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

@@ -73,13 +73,13 @@ const BlockMenu = ({
   const prevIsMenuOpenRef = useRef(false);
   const hasFocus = expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref !== void 0 ? _ref : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   const hasSelection = !!editorView && !editorView.state.selection.empty;
-
   // hasSelection true, always show block menu
   // hasSelection false, only show block menu when empty line experiment is enabled
   const shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
+  const selectedByShortcutORDragHandle = isSelectedViaDragHandle;
   useEffect(() => {
     var _api$userIntent;
-    if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+    if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
       return;
     }
 
@@ -98,7 +98,7 @@ const BlockMenu = ({
     // Update the previous state
     prevIsMenuOpenRef.current = isMenuOpen;
     api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
-  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
+  }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutORDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
   if (!isMenuOpen) {
     return null;
   }
@@ -119,7 +119,7 @@ const BlockMenu = ({
       return tr;
     });
   };
-  if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+  if (!menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;
   }
@@ -140,6 +140,7 @@ const BlockMenu = ({
       preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
       ,
       stick: true,
+      focusTrap: true,
       offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {
       api: api

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

@@ -10,6 +10,7 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/box';
 import Text from '@atlaskit/primitives/text';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { useBlockMenu } from './block-menu-provider';
 const DeleteDropdownItemContent = ({
   api
@@ -59,7 +60,7 @@ const DeleteDropdownItemContent = ({
     });
     api === null || api === void 0 ? void 0 : api.core.actions.focus();
   };
-  const onMouseEnter = useCallback(() => {
+  const onShowHoverDecoration = useCallback(() => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {
@@ -73,14 +74,16 @@ const DeleteDropdownItemContent = ({
       return tr;
     });
   }, [api, nodeTypes]);
-  const onMouseLeave = () => {
+  const onRemoveHoverDecoration = () => {
     var _api$decorations2, _api$decorations2$com, _api$decorations2$com2;
     api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 ? void 0 : (_api$decorations2$com = _api$decorations2.commands) === null || _api$decorations2$com === void 0 ? void 0 : (_api$decorations2$com2 = _api$decorations2$com.removeDecoration) === null || _api$decorations2$com2 === void 0 ? void 0 : _api$decorations2$com2.call(_api$decorations2$com));
   };
   const text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.deleteBlock) : formatMessage(messages.deleteBlock);
   return /*#__PURE__*/React.createElement(Box, {
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
+    onMouseEnter: onShowHoverDecoration,
+    onMouseLeave: onRemoveHoverDecoration,
+    onFocus: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? onShowHoverDecoration : undefined,
+    onBlur: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? onRemoveHoverDecoration : undefined
   }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
       color: "var(--ds-icon-danger, #C9372C)",

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

@@ -44,6 +44,7 @@ export const FormatMenuComponent = ({
     }),
     enableMaxHeight: true,
     isDisabled: isDisabled,
-    onClick: handleClick
+    onClick: handleClick,
+    dropdownTestId: "editor-nested-turn-into-menu"
   }, children);
 };

package/dist/esm/blockMenuPlugin.js

@@ -31,7 +31,7 @@ export var blockMenuPlugin = function blockMenuPlugin(_ref) {
     },
     commands: {
       formatNode: function formatNode(targetType) {
-        return _formatNode(targetType);
+        return _formatNode(api)(targetType);
       }
     },
     getSharedState: function getSharedState(editorState) {

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

@@ -1,3 +1,4 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { findParentNodeOfType, findSelectedNodeOfType, safeInsert as pmSafeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
@@ -45,62 +46,83 @@ var formatNodeWhenSelectionEmpty = function formatNodeWhenSelectionEmpty(tr, tar
 
 /**
  * Formats the current node or selection to the specified target type
+ * @param api - The editor API injection that provides access to analytics and other plugin actions
  * @param targetType - The target node type to convert to
  */
-export var formatNode = function formatNode(targetType) {
-  return function (_ref) {
-    var tr = _ref.tr;
-    var selection = tr.selection;
-    var schema = tr.doc.type.schema;
-    var nodes = schema.nodes;
+export var formatNode = function formatNode(api) {
+  return function (targetType) {
+    return function (_ref) {
+      var tr = _ref.tr;
+      var selection = tr.selection;
+      var schema = tr.doc.type.schema;
+      var nodes = schema.nodes;
 
-    // Find the node to format from the current selection
-    var nodeToFormat;
-    var nodePos = selection.from;
+      // Find the node to format from the current selection
+      var nodeToFormat;
+      var nodePos = selection.from;
 
-    // when selection is empty, we insert a empty target node
-    if (selection.empty && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
-      return formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
-    }
+      // when selection is empty, we insert a empty target node
+      if (selection.empty && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+        return formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
+      }
 
-    // Try to find the current node from selection
-    var selectedNode = findSelectedNodeOfType([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.expand, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection])(selection);
-    if (selectedNode) {
-      nodeToFormat = selectedNode.node;
-      nodePos = selectedNode.pos;
-    } else {
-      // Try to find parent node (including list parents)
-      var parentNode = findParentNodeOfType([nodes.blockquote, nodes.panel, nodes.expand, nodes.codeBlock, nodes.listItem, nodes.taskItem, nodes.layoutSection])(selection);
-      if (parentNode) {
-        nodeToFormat = parentNode.node;
-        nodePos = parentNode.pos;
-        var paragraphOrHeadingNode = findParentNodeOfType([nodes.paragraph, nodes.heading])(selection);
-        // Special case: if we found a listItem, check if we need the parent list instead
-        if (parentNode.node.type === nodes.listItem || parentNode.node.type === nodes.taskItem) {
-          var listParent = findParentNodeOfType([nodes.bulletList, nodes.orderedList, nodes.taskList])(selection);
-          if (listParent) {
-            // For list transformations, we want the list parent, not the listItem
-            nodeToFormat = listParent.node;
-            nodePos = listParent.pos;
+      // Try to find the current node from selection
+      var selectedNode = findSelectedNodeOfType([nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.expand, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection])(selection);
+      if (selectedNode) {
+        nodeToFormat = selectedNode.node;
+        nodePos = selectedNode.pos;
+      } else {
+        // Try to find parent node (including list parents)
+        var parentNode = findParentNodeOfType([nodes.blockquote, nodes.panel, nodes.expand, nodes.codeBlock, nodes.listItem, nodes.taskItem, nodes.layoutSection])(selection);
+        if (parentNode) {
+          nodeToFormat = parentNode.node;
+          nodePos = parentNode.pos;
+          var paragraphOrHeadingNode = findParentNodeOfType([nodes.paragraph, nodes.heading])(selection);
+          // Special case: if we found a listItem, check if we need the parent list instead
+          if (parentNode.node.type === nodes.listItem || parentNode.node.type === nodes.taskItem) {
+            var listParent = findParentNodeOfType([nodes.bulletList, nodes.orderedList, nodes.taskList])(selection);
+            if (listParent) {
+              // For list transformations, we want the list parent, not the listItem
+              nodeToFormat = listParent.node;
+              nodePos = listParent.pos;
+            }
+          } else if (parentNode.node.type !== nodes.blockquote && paragraphOrHeadingNode) {
+            nodeToFormat = paragraphOrHeadingNode.node;
+            nodePos = paragraphOrHeadingNode.pos;
           }
-        } else if (parentNode.node.type !== nodes.blockquote && paragraphOrHeadingNode) {
-          nodeToFormat = paragraphOrHeadingNode.node;
-          nodePos = paragraphOrHeadingNode.pos;
         }
       }
-    }
-    if (!nodeToFormat) {
-      nodeToFormat = selection.$from.node();
-      nodePos = selection.$from.pos;
-    }
-    try {
-      var newTr = transformNodeToTargetType(tr, nodeToFormat, nodePos, targetType);
-      if (newTr && fg('platform_editor_block_menu_selection_fix')) {
-        return setSelectionAfterTransform(newTr, nodePos, targetType);
+      if (!nodeToFormat) {
+        nodeToFormat = selection.$from.node();
+        nodePos = selection.$from.pos;
       }
-      return newTr;
-    } catch (_unused) {
-      return null;
-    }
+      try {
+        var _nodeToFormat$attrs;
+        var newTr = transformNodeToTargetType(tr, nodeToFormat, nodePos, targetType);
+        var sourceTypeName = nodeToFormat.type.name;
+        if (sourceTypeName === 'heading' && (_nodeToFormat$attrs = nodeToFormat.attrs) !== null && _nodeToFormat$attrs !== void 0 && _nodeToFormat$attrs.level) {
+          sourceTypeName = "heading".concat(nodeToFormat.attrs.level);
+        }
+        if (newTr && sourceTypeName !== targetType) {
+          var _api$analytics;
+          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
+            action: ACTION.CONVERTED,
+            actionSubject: ACTION_SUBJECT.ELEMENT,
+            eventType: EVENT_TYPE.TRACK,
+            attributes: {
+              from: sourceTypeName,
+              to: targetType,
+              inputMethod: INPUT_METHOD.BLOCK_MENU
+            }
+          })(newTr);
+        }
+        if (newTr && fg('platform_editor_block_menu_selection_fix')) {
+          return setSelectionAfterTransform(newTr, nodePos, targetType);
+        }
+        return newTr;
+      } catch (_unused) {
+        return null;
+      }
+    };
   };
 };

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

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React, { Fragment } from 'react';
+import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 var NoOp = function NoOp(props) {
   return null;
 };
@@ -40,7 +41,9 @@ export var BlockMenuRenderer = function BlockMenuRenderer(_ref) {
   var menuSections = getSortedNonNestedSections(components);
   var menuItems = components.filter(isMenuItem);
   var nestedMenus = components.filter(isNestedMenu);
-  return /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(function (section) {
+  return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    type: ArrowKeyNavigationType.MENU
+  }, /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(function (section) {
     // Get all items for the current section, including nested menus, and sort them by rank
     var currentSectionItemsSorted = getSortedChildren([].concat(_toConsumableArray(menuItems), _toConsumableArray(nestedMenus)), section.key);
     if (currentSectionItemsSorted.length === 0) {
@@ -81,5 +84,5 @@ export var BlockMenuRenderer = function BlockMenuRenderer(_ref) {
     return /*#__PURE__*/React.createElement(SectionComponent, {
       key: section.key
     }, children);
-  }));
+  })));
 };

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

@@ -75,13 +75,13 @@ var BlockMenu = function BlockMenu(_ref2) {
   var prevIsMenuOpenRef = useRef(false);
   var hasFocus = expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref3 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref3 !== void 0 ? _ref3 : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   var hasSelection = !!editorView && !editorView.state.selection.empty;
-
   // hasSelection true, always show block menu
   // hasSelection false, only show block menu when empty line experiment is enabled
   var shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
+  var selectedByShortcutORDragHandle = isSelectedViaDragHandle;
   useEffect(function () {
     var _api$userIntent;
-    if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+    if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
       return;
     }
 
@@ -100,7 +100,7 @@ var BlockMenu = function BlockMenu(_ref2) {
     // Update the previous state
     prevIsMenuOpenRef.current = isMenuOpen;
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
-  }, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
+  }, [api, isMenuOpen, menuTriggerBy, selectedByShortcutORDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
   if (!isMenuOpen) {
     return null;
   }
@@ -120,7 +120,7 @@ var BlockMenu = function BlockMenu(_ref2) {
       return tr;
     });
   };
-  if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
+  if (!menuTriggerBy || !selectedByShortcutORDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
     closeMenu();
     return null;
   }
@@ -141,6 +141,7 @@ var BlockMenu = function BlockMenu(_ref2) {
       preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
       ,
       stick: true,
+      focusTrap: true,
       offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {
       api: api

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

@@ -10,6 +10,7 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/box';
 import Text from '@atlaskit/primitives/text';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { useBlockMenu } from './block-menu-provider';
 var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
   var _api$core$sharedState;
@@ -55,7 +56,7 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
     });
     api === null || api === void 0 || api.core.actions.focus();
   };
-  var onMouseEnter = useCallback(function () {
+  var onShowHoverDecoration = useCallback(function () {
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
       var _api$decorations, _api$decorations$hove;
       var tr = _ref3.tr;
@@ -68,14 +69,16 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
       return tr;
     });
   }, [api, nodeTypes]);
-  var onMouseLeave = function onMouseLeave() {
+  var onRemoveHoverDecoration = function onRemoveHoverDecoration() {
     var _api$decorations2, _api$decorations2$rem;
     api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 || (_api$decorations2 = _api$decorations2.commands) === null || _api$decorations2 === void 0 || (_api$decorations2$rem = _api$decorations2.removeDecoration) === null || _api$decorations2$rem === void 0 ? void 0 : _api$decorations2$rem.call(_api$decorations2));
   };
   var text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.deleteBlock) : formatMessage(messages.deleteBlock);
   return /*#__PURE__*/React.createElement(Box, {
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
+    onMouseEnter: onShowHoverDecoration,
+    onMouseLeave: onRemoveHoverDecoration,
+    onFocus: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? onShowHoverDecoration : undefined,
+    onBlur: expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? onRemoveHoverDecoration : undefined
   }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
       color: "var(--ds-icon-danger, #C9372C)",

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

@@ -41,6 +41,7 @@ export var FormatMenuComponent = function FormatMenuComponent(_ref) {
     }),
     enableMaxHeight: true,
     isDisabled: isDisabled,
-    onClick: handleClick
+    onClick: handleClick,
+    dropdownTestId: "editor-nested-turn-into-menu"
   }, children);
 };

package/dist/types/editor-commands/formatNode.d.ts

@@ -1,7 +1,9 @@
-import type { EditorCommand } from '@atlaskit/editor-common/types';
+import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
 import type { FormatNodeTargetType } from './transforms/types';
 /**
  * Formats the current node or selection to the specified target type
+ * @param api - The editor API injection that provides access to analytics and other plugin actions
  * @param targetType - The target node type to convert to
  */
-export declare const formatNode: (targetType: FormatNodeTargetType) => EditorCommand;
+export declare const formatNode: (api?: ExtractInjectionAPI<BlockMenuPlugin>) => (targetType: FormatNodeTargetType) => EditorCommand;

package/dist/types-ts4.5/editor-commands/formatNode.d.ts

@@ -1,7 +1,9 @@
-import type { EditorCommand } from '@atlaskit/editor-common/types';
+import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
 import type { FormatNodeTargetType } from './transforms/types';
 /**
  * Formats the current node or selection to the specified target type
+ * @param api - The editor API injection that provides access to analytics and other plugin actions
  * @param targetType - The target node type to convert to
  */
-export declare const formatNode: (targetType: FormatNodeTargetType) => EditorCommand;
+export declare const formatNode: (api?: ExtractInjectionAPI<BlockMenuPlugin>) => (targetType: FormatNodeTargetType) => EditorCommand;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "4.0.0",
+	"version": "4.0.2",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,24 +30,25 @@
 	"dependencies": {
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/editor-plugin-block-controls": "^7.0.0",
-		"@atlaskit/editor-plugin-decorations": "^6.0.0",
+		"@atlaskit/editor-plugin-analytics": "^6.0.0",
+		"@atlaskit/editor-plugin-block-controls": "^7.1.0",
+		"@atlaskit/editor-plugin-decorations": "^6.1.0",
 		"@atlaskit/editor-plugin-selection": "^6.0.0",
 		"@atlaskit/editor-plugin-user-intent": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/editor-toolbar": "^0.9.0",
+		"@atlaskit/editor-toolbar": "^0.10.0",
 		"@atlaskit/icon": "^28.3.0",
 		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.15.0",
-		"@atlaskit/tmp-editor-statsig": "^12.31.0",
-		"@atlaskit/tokens": "^6.3.0",
+		"@atlaskit/tmp-editor-statsig": "^12.32.0",
+		"@atlaskit/tokens": "^6.4.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.0.0",
+		"@atlaskit/editor-common": "^110.2.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},