@atlaskit/editor-common 70.3.0 → 71.0.1

package/dist/esm/ui-menu/Dropdown/index.js

@@ -14,6 +14,7 @@ import React, { PureComponent } from 'react';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropdownList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
+import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvider';
 
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
@@ -65,7 +66,9 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
           onOpenChange = _this$props.onOpenChange,
           fitHeight = _this$props.fitHeight,
           fitWidth = _this$props.fitWidth,
-          zIndex = _this$props.zIndex;
+          zIndex = _this$props.zIndex,
+          disableArrowKeyNavigation = _this$props.disableArrowKeyNavigation,
+          keyDownHandlerContext = _this$props.keyDownHandlerContext;
       return /*#__PURE__*/React.createElement(Popup, {
         target: target,
         mountTo: mountTo,
@@ -75,6 +78,16 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
         fitHeight: fitHeight,
         fitWidth: fitWidth,
         zIndex: zIndex
+      }, /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, {
+        disableArrowKeyNavigation: disableArrowKeyNavigation,
+        keyDownHandlerContext: keyDownHandlerContext,
+        closeonTab: true,
+        handleClose: function handleClose(event) {
+          return onOpenChange && onOpenChange({
+            isOpen: false,
+            event: event
+          });
+        }
       }, /*#__PURE__*/React.createElement("div", {
         style: {
           height: 0,
@@ -85,7 +98,7 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
         onOpenChange: onOpenChange,
         position: popupPlacement.join(' '),
         shouldFitContainer: true
-      }, children)));
+      }, children))));
     }
   }, {
     key: "render",

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children"];
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -21,14 +21,16 @@ import React, { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup } from '@atlaskit/menu';
-import { DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
+import { B100, DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
+import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvider';
 var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
+var focusedMenuItemStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), token('color.border.focused', B100));
 
 var buttonStyles = function buttonStyles(isActive) {
   return function (theme) {
@@ -36,9 +38,9 @@ var buttonStyles = function buttonStyles(isActive) {
       /**
        * Hack for item to imitate old dropdown-menu selected styles
        */
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n    "])), token('color.background.selected', '#6c798f'), token('color.text', '#fff'));
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), token('color.background.selected', '#6c798f'), token('color.text', '#fff'), focusedMenuItemStyle);
     } else {
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      > span:active[aria-disabled='false'] {\n        background-color: ", ";\n      }\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n    "])), themed({
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      > span:active[aria-disabled='false'] {\n        background-color: ", ";\n      }\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), themed({
         light: token('color.text', N900),
         dark: token('color.text', DN600)
       })(theme), themed({
@@ -50,7 +52,7 @@ var buttonStyles = function buttonStyles(isActive) {
       })(theme), themed({
         light: token('color.text.disabled', N70),
         dark: token('color.text.disabled', DN80)
-      })(theme));
+      })(theme), focusedMenuItemStyle); // The deafut focus-visible style is removed to ensure consistency across browsers
     }
   };
 };
@@ -99,6 +101,14 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleCloseandFocus", function () {
+      var _this$state$target, _this$state$target$qu;
+
+      _this.handleClose();
+
+      (_this$state$target = _this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
       if (_this.props.onOpenChange) {
         _this.props.onOpenChange({
@@ -128,7 +138,9 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           fitWidth = _this$props.fitWidth,
           isOpen = _this$props.isOpen,
           zIndex = _this$props.zIndex,
-          shouldUseDefaultRole = _this$props.shouldUseDefaultRole;
+          shouldUseDefaultRole = _this$props.shouldUseDefaultRole,
+          disableArrowKeyNavigation = _this$props.disableArrowKeyNavigation,
+          keyDownHandlerContext = _this$props.keyDownHandlerContext;
       return jsx(Popup, {
         target: isOpen ? target : undefined,
         mountTo: mountTo,
@@ -139,6 +151,11 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         fitWidth: fitWidth,
         zIndex: zIndex || akEditorFloatingPanelZIndex,
         offset: offset
+      }, jsx(MenuArrowKeyNavigationProvider, {
+        disableArrowKeyNavigation: disableArrowKeyNavigation,
+        handleClose: this.handleCloseandFocus,
+        keyDownHandlerContext: keyDownHandlerContext,
+        closeonTab: true
       }, jsx(DropListWithOutsideListeners, {
         isOpen: true,
         appearance: "tall",
@@ -147,7 +164,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         shouldFitContainer: true,
         isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
-        handleEscapeKeydown: this.handleClose
+        handleEscapeKeydown: this.handleCloseandFocus,
+        targetRef: this.state.target
       }, jsx("div", {
         style: {
           height: 0,
@@ -169,7 +187,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
             onMouseLeave: _this2.props.onMouseLeave
           });
         }));
-      })));
+      }))));
     }
   }, {
     key: "render",
@@ -220,7 +238,8 @@ function DropdownMenuItem(_ref) {
       return buttonStyles(item.isActive)({
         theme: theme
       });
-    }
+    },
+    tabIndex: -1
   }, jsx(CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),

package/dist/esm/ui-menu/MenuArrowKeyNavigationProvider/index.js

@@ -0,0 +1,147 @@
+import React, { useLayoutEffect, useRef } from 'react';
+
+/**
+ * This component is a wrapper of vertical menus which listens to keydown events of children
+ * and handles up/down arrow key navigation
+ */
+export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_ref) {
+  var children = _ref.children,
+      handleClose = _ref.handleClose,
+      disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
+      keyDownHandlerContext = _ref.keyDownHandlerContext,
+      closeonTab = _ref.closeonTab;
+  var wrapperRef = useRef(null);
+  var currentSelectedItemIndex = useRef(-1);
+
+  var incrementIndex = function incrementIndex(list) {
+    if (currentSelectedItemIndex.current === list.length - 1 || currentSelectedItemIndex.current === -1) {
+      currentSelectedItemIndex.current = 0;
+    } else {
+      currentSelectedItemIndex.current = currentSelectedItemIndex.current + 1;
+    }
+  };
+
+  var decrementIndex = function decrementIndex(list) {
+    if (currentSelectedItemIndex.current === 0 || currentSelectedItemIndex.current === -1) {
+      currentSelectedItemIndex.current = list.length - 1;
+    } else {
+      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+    }
+  };
+
+  useLayoutEffect(function () {
+    if (disableArrowKeyNavigation) {
+      return;
+    }
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+
+
+    var handleKeyDown = function handleKeyDown(event) {
+      var _wrapperRef$current, _focusableElements$cu, _focusableElements$cu2;
+
+      var targetElement = event.target; //Tab key on menu items can be handled in the parent components of dropdown menus with KeydownHandlerContext
+
+      if (event.key === 'Tab' && closeonTab) {
+        handleClose(event);
+        keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleTab();
+        return;
+      } //To trap the focus inside the toolbar using left and right arrow keys
+
+
+      var focusableElements = getEnabledElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+
+      if (!focusableElements || (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) {
+        return;
+      }
+
+      if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
+        currentSelectedItemIndex.current = -1;
+      }
+
+      switch (event.key) {
+        case 'ArrowDown':
+          //If ArrowDown pressed
+          //If on last item
+          // Focus last item
+          //Else
+          // Focus next item
+          incrementIndex(focusableElements);
+          (_focusableElements$cu = focusableElements[currentSelectedItemIndex.current]) === null || _focusableElements$cu === void 0 ? void 0 : _focusableElements$cu.focus();
+          event.preventDefault();
+          break;
+
+        case 'ArrowUp':
+          //ArrowUP pressed
+          //If on First item
+          // Focus last item
+          //Else
+          // Focus previous item
+          decrementIndex(focusableElements);
+          (_focusableElements$cu2 = focusableElements[currentSelectedItemIndex.current]) === null || _focusableElements$cu2 === void 0 ? void 0 : _focusableElements$cu2.focus();
+          event.preventDefault();
+          break;
+        //ArrowLeft/Right on the menu should close the menus
+        //then logic to retain the focus can be handled in the parent components with KeydownHandlerContext
+
+        case 'ArrowLeft':
+          //Filter out the events from outside the menu
+          if (!targetElement.closest('.custom-key-handler-wrapper')) {
+            return;
+          }
+
+          handleClose(event);
+          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
+          break;
+
+        case 'ArrowRight':
+          //Filter out the events from outside the menu
+          if (!targetElement.closest('.custom-key-handler-wrapper')) {
+            return;
+          }
+
+          handleClose(event);
+          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
+          break;
+
+        case 'Escape':
+          handleClose(event);
+          break;
+
+        default:
+          return;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeonTab]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "custom-key-handler-wrapper",
+    ref: wrapperRef
+  }, children);
+};
+
+function getFocusableElements(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+
+  var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"]') || [];
+  return Array.from(focusableModalElements);
+}
+/**
+ * This method filters out all the disabled menu items
+ */
+
+
+function getEnabledElements(rootNode) {
+  var focusableElements = getFocusableElements(rootNode);
+  return focusableElements.filter(function (element) {
+    return !element.querySelector('[role="button"][aria-disabled="true"]') && !element.querySelector('[role="menuitem"][aria-disabled="true"]');
+  });
+}

package/dist/esm/ui-react/with-react-editor-view-outer-listeners.js

@@ -6,7 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown"];
+var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "closeonTab"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -41,7 +41,16 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
 
       if (!domNode || evt.target instanceof Node && !domNode.contains(evt.target)) {
         if (_this.props.handleClickOutside) {
-          _this.props.handleClickOutside(evt);
+          var _this$props$editorVie;
+
+          _this.props.handleClickOutside(evt); //When the menus are closed by clicking outside the focus is set on editor.
+
+
+          if (!((_this$props$editorVie = _this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
+            var _this$props$editorVie2;
+
+            (_this$props$editorVie2 = _this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
+          }
         }
       }
     });
@@ -52,22 +61,18 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
       }
 
       if (evt.code === 'Escape' && _this.props.handleEscapeKeydown) {
-        var _this$props$editorVie;
-
         evt.preventDefault();
         evt.stopPropagation();
 
-        _this.props.handleEscapeKeydown(evt);
-
-        if (!((_this$props$editorVie = _this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
-          var _this$props$editorVie2;
+        _this.props.handleEscapeKeydown(evt); //on 'Esc', Focus is handled in 'handleEscapeKeydown'.
 
-          (_this$props$editorVie2 = _this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
-        }
 
         return false;
       } else if (evt.code === 'Enter' && _this.props.handleEnterKeydown) {
         _this.props.handleEnterKeydown(evt);
+      } else if (evt.code === 'Tab' && _this.props.handleEscapeKeydown && _this.props.closeonTab) {
+        //The menus should be closed when the tab is pressed as it takes the focus out of the menu
+        _this.props.handleEscapeKeydown(evt);
       }
     });
 
@@ -84,7 +89,8 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
       if (this.props.handleEscapeKeydown) {
         var _this$props$editorRef;
 
-        (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || document).addEventListener('keydown', this.handleKeydown, false);
+        //Attached event to the menu so that 'ESC' events from the opened menu also will be handled.
+        (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || this.props.targetRef || document).addEventListener('keydown', this.handleKeydown, false);
       }
     }
   }, {
@@ -97,7 +103,7 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
       if (this.props.handleEscapeKeydown) {
         var _this$props$editorRef2;
 
-        (((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || document).removeEventListener('keydown', this.handleKeydown, false);
+        (((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || this.props.targetRef || document).removeEventListener('keydown', this.handleKeydown, false);
       }
     }
   }, {
@@ -119,6 +125,7 @@ export default function withReactEditorViewOuterListeners(Component) {
     var handleClickOutside = _ref.handleClickOutside,
         handleEnterKeydown = _ref.handleEnterKeydown,
         handleEscapeKeydown = _ref.handleEscapeKeydown,
+        closeonTab = _ref.closeonTab,
         props = _objectWithoutProperties(_ref, _excluded);
 
     var isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
@@ -128,10 +135,12 @@ export default function withReactEditorViewOuterListeners(Component) {
       return /*#__PURE__*/React.createElement(WithOutsideClick, {
         editorView: editorView,
         editorRef: editorRef,
+        targetRef: props.targetRef,
         isActiveComponent: isActiveComponent,
         handleClickOutside: handleClickOutside,
         handleEnterKeydown: handleEnterKeydown,
-        handleEscapeKeydown: handleEscapeKeydown
+        handleEscapeKeydown: handleEscapeKeydown,
+        closeonTab: closeonTab
       }, /*#__PURE__*/React.createElement(Component, props));
     });
   };

package/dist/esm/utils/index.js

@@ -13,7 +13,7 @@ export { walkUpTreeUntil, unwrap, removeNestedEmptyEls, containsClassName, close
 export { default as ADFTraversor } from './traversor';
 export { analyticsEventKey, getAnalyticsAppearance, getAnalyticsEventSeverity, SEVERITY, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS } from './analytics';
 export { findAndTrackUnsupportedContentNodes } from './track-unsupported-content';
-export { measureRender } from './performance/measure-render';
+export { getDistortedDurationMonitor, measureRender } from './performance/measure-render';
 export { startMeasure, stopMeasure, clearMeasure } from './performance/measure';
 export { measureTTI, getTTISeverity, TTI_SEVERITY_THRESHOLD_DEFAULTS, TTI_FROM_INVOCATION_SEVERITY_THRESHOLD_DEFAULTS } from './performance/measure-tti';
 export { isPerformanceAPIAvailable, isPerformanceObserverAvailable } from './performance/is-performance-api-available';

package/dist/esm/utils/performance/measure-render.js

@@ -1,4 +1,40 @@
 import { isPerformanceAPIAvailable } from './is-performance-api-available';
+/**
+ * Monitors if a pages enters a visibility state which will lead to
+ * distorted duration measurements (where the measurement uses the
+ * requestAnimationFrame api).
+ */
+
+export function getDistortedDurationMonitor() {
+  // If an editor is rendered when the document is not visible -- the callback passed to
+  // requestAnimationFrame will not fire until the document becomes visible again.
+  //
+  // For the purposes of using performance measurement -- this behaviour means the events
+  // which have been fired in the background are not useful -- and lead to other events
+  // being hard to draw conclusions from.
+  //
+  // To mitigate this -- we detect this state -- and fire a seperate callback when the
+  // measurement has occured when the render was in the backgroun
+  var distortedDuration = document.visibilityState !== 'visible';
+
+  function handleVisibilityChange() {
+    if (document.visibilityState !== 'visible') {
+      distortedDuration = true;
+    }
+  }
+
+  document.addEventListener('visibilitychange', handleVisibilityChange);
+  return {
+    distortedDuration: distortedDuration,
+
+    /**
+     * Cleans up the document visibility event listener
+     */
+    cleanup: function cleanup() {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    }
+  };
+}
 /**
  * Measures time it takes to render a frame including -> style, paint, layout and composition.
  *
@@ -37,29 +73,12 @@ onMeasureComplete) {
   var startMark = "[START]: ".concat(measureName);
   var endMark = "[END]: ".concat(measureName);
   var startTime = performance.now();
-  performance.mark(startMark); // If an editor is rendered when the document is not visible -- the callback passed to
-  // requestAnimationFrame will not fire until the document becomes visible again.
-  //
-  // For the purposes of using performance measurement -- this behaviour means the events
-  // which have been fired in the background are not useful -- and lead to other events
-  // being hard to draw conclusions from.
-  //
-  // To mitigate this -- we detect this state -- and fire a seperate callback when the
-  // measurement has occured when the render was in the backgroun
-
-  var distortedDuration = document.visibilityState !== 'visible';
-
-  function handleVisibilityChange() {
-    if (document.visibilityState !== 'visible') {
-      distortedDuration = true;
-    }
-  }
-
-  document.addEventListener('visibilitychange', handleVisibilityChange);
+  performance.mark(startMark);
+  var distortedDurationMonitor = getDistortedDurationMonitor();
   requestAnimationFrame(function () {
     requestAnimationFrame(function () {
       performance.mark(endMark);
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      distortedDurationMonitor.cleanup();
       var duration = performance.now() - startTime;
 
       try {
@@ -70,20 +89,20 @@ onMeasureComplete) {
           onMeasureComplete({
             duration: duration,
             startTime: startTime,
-            distortedDuration: distortedDuration
+            distortedDuration: distortedDurationMonitor.distortedDuration
           });
         } else {
           onMeasureComplete({
             duration: entry.duration,
             startTime: entry.startTime,
-            distortedDuration: distortedDuration
+            distortedDuration: distortedDurationMonitor.distortedDuration
           });
         }
       } catch (e) {
         onMeasureComplete({
           duration: duration,
           startTime: startTime,
-          distortedDuration: distortedDuration
+          distortedDuration: distortedDurationMonitor.distortedDuration
         });
       }
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "70.3.0",
+	"version": "71.0.1",
 	"sideEffects": false
 }

package/dist/types/analytics/types/enums.d.ts

@@ -92,6 +92,7 @@ export declare enum ACTION {
     DEDUPE_MARKS_TRANSFORMED = "dedupeMarksTransformed",
     NODES_MISSING_CONTENT_TRANSFORMED = "nodesMissingContentTransformed",
     INDENTATION_MARKS_TRANSFORMED = "indentationMarksTransformed",
+    INVALID_MEDIA_CONTENT_TRANSFORMED = "invalidMediaContentTransformed",
     TOGGLE_EXPAND = "toggleExpand",
     TRANSACTION_DISPATCHED = "transactionDispatched",
     TRANSACTION_MUTATED_AFTER_DISPATCH = "transactionMutatedAfterDispatched",

package/dist/types/analytics/types/general-events.d.ts

@@ -175,5 +175,6 @@ declare type DedupeMarksTransformedAEP = OperationalAEP<ACTION.DEDUPE_MARKS_TRAN
 }, undefined>;
 declare type IndentationMarksTransformedAEP = OperationalAEP<ACTION.INDENTATION_MARKS_TRANSFORMED, ACTION_SUBJECT.EDITOR, undefined, undefined, undefined>;
 declare type NodesMissingContentTransformedAEP = OperationalAEP<ACTION.NODES_MISSING_CONTENT_TRANSFORMED, ACTION_SUBJECT.EDITOR, undefined, undefined, undefined>;
-export declare type GeneralEventPayload<T = void> = AnnotateButtonAEP | AnnotationAEP | BrowserFreezePayload | ButtonFeedbackAEP | ButtonHelpAEP | ColorPickerAEP | DispatchedTransactionAEP | EditorPerfAEP | EditorRenderedAEP<T> | EditorStartAEP | EditorStopAEP | EditorTTIAEP | ExpandToggleAEP | FeedbackAEP | FullWidthModeAEP | HelpQuickInsertAEP | InputPerfSamlingAEP | InputPerfSamplingAvgAEP | PickerEmojiAEP | PickerImageAEP | ReactNodeViewRenderedAEP | RichMediaLayoutAEP | SelectionAEP | SlowInputAEP | TransactionMutatedAEP | UploadExternalFailedAEP | WithPluginStateCalledAEP | CodeBlockLanguageSelectedAEP | EditorContentRetrievalPerformedAEP | UfoSessionCompletePayloadAEP | MediaLinkTransformedAEP | TextLinkCodeMarkTransformedAEP | DedupeMarksTransformedAEP | IndentationMarksTransformedAEP | NodesMissingContentTransformedAEP | InvalidProsemirrorDocumentErrorAEP | DocumentProcessingErrorAEP;
+declare type InvalidMediaContentTransformedAEP = OperationalAEP<ACTION.INVALID_MEDIA_CONTENT_TRANSFORMED, ACTION_SUBJECT.EDITOR, undefined, undefined, undefined>;
+export declare type GeneralEventPayload<T = void> = AnnotateButtonAEP | AnnotationAEP | BrowserFreezePayload | ButtonFeedbackAEP | ButtonHelpAEP | ColorPickerAEP | DispatchedTransactionAEP | EditorPerfAEP | EditorRenderedAEP<T> | EditorStartAEP | EditorStopAEP | EditorTTIAEP | ExpandToggleAEP | FeedbackAEP | FullWidthModeAEP | HelpQuickInsertAEP | InputPerfSamlingAEP | InputPerfSamplingAvgAEP | PickerEmojiAEP | PickerImageAEP | ReactNodeViewRenderedAEP | RichMediaLayoutAEP | SelectionAEP | SlowInputAEP | TransactionMutatedAEP | UploadExternalFailedAEP | WithPluginStateCalledAEP | CodeBlockLanguageSelectedAEP | EditorContentRetrievalPerformedAEP | UfoSessionCompletePayloadAEP | MediaLinkTransformedAEP | TextLinkCodeMarkTransformedAEP | DedupeMarksTransformedAEP | IndentationMarksTransformedAEP | NodesMissingContentTransformedAEP | InvalidProsemirrorDocumentErrorAEP | DocumentProcessingErrorAEP | InvalidMediaContentTransformedAEP;
 export {};

package/dist/types/keymaps/index.d.ts

@@ -64,7 +64,6 @@ export declare const paste: Keymap;
 export declare const altPaste: Keymap;
 export declare const find: Keymap;
 export declare const alignLeft: Keymap;
-export declare const alignRight: Keymap;
 export declare function tooltip(keymap?: Keymap, description?: string): string | undefined;
 export declare const ToolTipContent: React.MemoExoticComponent<({ description, shortcutOverride, keymap, }: {
     description?: string | React.ReactNode;

package/dist/types/messages/insert-block.d.ts

@@ -19,12 +19,17 @@ export declare const toolbarInsertBlockMessages: {
         defaultMessage: string;
         description: string;
     };
-    filesAndImages: {
+    mediaFiles: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    filesAndImagesDescription: {
+    addMediaFiles: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    mediaFilesDescription: {
         id: string;
         defaultMessage: string;
         description: string;

package/dist/types/panel.d.ts

@@ -1 +1 @@
-export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors, } from './styles/shared/panel';
+export { getPanelTypeBackground, getPanelTypeBackgroundNoTokens, darkPanelColors, getPanelDarkColor, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors, } from './styles/shared/panel';

package/dist/types/styles/shared/code-block.d.ts

@@ -3,6 +3,7 @@ export declare const CodeBlockSharedCssClassName: {
     CODEBLOCK_CONTAINER: string;
     CODEBLOCK_START: string;
     CODEBLOCK_END: string;
+    CODEBLOCK_CONTENT_WRAPPER: string;
     CODEBLOCK_LINE_NUMBER_GUTTER: string;
     CODEBLOCK_CONTENT: string;
     DS_CODEBLOCK: string;

package/dist/types/styles/shared/panel.d.ts

@@ -79,6 +79,7 @@ export declare const PanelSharedSelectors: {
     yellowWarningIcon: string;
     copyButton: string;
 };
+export declare const getPanelTypeBackgroundNoTokens: (panelType: Exclude<PanelType, PanelType.CUSTOM>, props?: ThemeProps) => string;
 export declare const getPanelTypeBackground: (panelType: Exclude<PanelType, PanelType.CUSTOM>, props?: ThemeProps) => string;
 export declare const panelSharedStylesWithoutPrefix: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const panelSharedStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

package/dist/types/types/feature-flags.d.ts

@@ -244,12 +244,6 @@ export declare type FeatureFlags = {
      * @default false
      */
     saferDispatchedTransactions?: boolean;
-    /**
-     * Create non-smart hyperlinks on plain text paste (Cmd/Ctrl+Shift+v)
-     * @see https://product-fabric.atlassian.net/browse/EDM-2492
-     * @default false
-     */
-    plainTextPasteLinkification?: boolean;
     /**
      * @description
      * Enable new collab service
@@ -339,6 +333,33 @@ export declare type FeatureFlags = {
      * @default null
      */
     floatingToolbarLinkSettingsButton?: string;
+    /**
+     * @description
+     * Allow numbered lists to start from any number greater than 0, not just 1
+     *
+     * @see https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3257270398/MAKE+PP+Restart+Numbered+Lists
+     * @see https://product-fabric.atlassian.net/browse/ED-15210
+     * @default false
+     */
+    restartNumberedLists?: boolean;
+    /**
+     * @description
+     * Allow lists to continue their numbering when split by other nodes
+     *
+     * @see https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3257270398/MAKE+PP+Restart+Numbered+Lists
+     * @see https://product-fabric.atlassian.net/browse/ED-15210
+     * @default false
+     */
+    listNumberContinuity?: boolean;
+    /**
+     * @description
+     * Show a toolbar for users to restart the numbering of a list
+     *
+     * @see https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3257270398/MAKE+PP+Restart+Numbered+Lists
+     * @see https://product-fabric.atlassian.net/browse/ED-15210
+     * @default false
+     */
+    restartNumberedListsToolbar?: boolean;
 };
 export declare type FeatureFlagKey = keyof FeatureFlags;
 export declare type GetEditorFeatureFlags = () => FeatureFlags;

package/dist/types/types/floating-toolbar.d.ts

@@ -17,6 +17,9 @@ export interface DropdownOptionT<T> {
     id?: string;
     title: string;
     onClick: T;
+    onMouseOver?: T;
+    onMouseEnter?: T;
+    onMouseLeave?: T;
     selected?: boolean;
     disabled?: boolean;
     hidden?: boolean;
@@ -198,6 +201,7 @@ export interface FloatingToolbarConfig {
     className?: string;
     height?: number;
     width?: number;
+    zIndex?: number;
     offset?: [number, number];
     forcePlacement?: boolean;
     onPositionCalculated?: (editorView: EditorView, nextPos: Position) => Position;