@atlaskit/editor-common 70.3.0 → 71.0.0

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

@@ -51,9 +51,11 @@ var _DropList = _interopRequireDefault(require("../../ui/DropList"));
 
 var _Popup = _interopRequireDefault(require("../../ui/Popup"));
 
+var _MenuArrowKeyNavigationProvider = require("../MenuArrowKeyNavigationProvider");
+
 var _excluded = ["children"];
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -64,6 +66,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
+var focusedMenuItemStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), (0, _tokens.token)('color.border.focused', _colors.B100));
 
 var buttonStyles = function buttonStyles(isActive) {
   return function (theme) {
@@ -71,9 +74,9 @@ var buttonStyles = function buttonStyles(isActive) {
       /**
        * Hack for item to imitate old dropdown-menu selected styles
        */
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n    "])), (0, _tokens.token)('color.background.selected', '#6c798f'), (0, _tokens.token)('color.text', '#fff'));
+      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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    "])), (0, _tokens.token)('color.background.selected', '#6c798f'), (0, _tokens.token)('color.text', '#fff'), focusedMenuItemStyle);
     } else {
-      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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    "])), (0, _components.themed)({
+      return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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    "])), (0, _components.themed)({
         light: (0, _tokens.token)('color.text', _colors.N900),
         dark: (0, _tokens.token)('color.text', _colors.DN600)
       })(theme), (0, _components.themed)({
@@ -85,7 +88,7 @@ var buttonStyles = function buttonStyles(isActive) {
       })(theme), (0, _components.themed)({
         light: (0, _tokens.token)('color.text.disabled', _colors.N70),
         dark: (0, _tokens.token)('color.text.disabled', _colors.DN80)
-      })(theme));
+      })(theme), focusedMenuItemStyle); // The deafut focus-visible style is removed to ensure consistency across browsers
     }
   };
 };
@@ -130,6 +133,13 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         });
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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();
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClose", function () {
       if (_this.props.onOpenChange) {
         _this.props.onOpenChange({
@@ -158,7 +168,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 (0, _react2.jsx)(_Popup.default, {
         target: isOpen ? target : undefined,
         mountTo: mountTo,
@@ -169,6 +181,11 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         fitWidth: fitWidth,
         zIndex: zIndex || _editorSharedStyles.akEditorFloatingPanelZIndex,
         offset: offset
+      }, (0, _react2.jsx)(_MenuArrowKeyNavigationProvider.MenuArrowKeyNavigationProvider, {
+        disableArrowKeyNavigation: disableArrowKeyNavigation,
+        handleClose: this.handleCloseandFocus,
+        keyDownHandlerContext: keyDownHandlerContext,
+        closeonTab: true
       }, (0, _react2.jsx)(DropListWithOutsideListeners, {
         isOpen: true,
         appearance: "tall",
@@ -177,7 +194,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         shouldFitContainer: true,
         isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
-        handleEscapeKeydown: this.handleClose
+        handleEscapeKeydown: this.handleCloseandFocus,
+        targetRef: this.state.target
       }, (0, _react2.jsx)("div", {
         style: {
           height: 0,
@@ -199,7 +217,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
             onMouseLeave: _this2.props.onMouseLeave
           });
         }));
-      })));
+      }))));
     }
   }, {
     key: "render",
@@ -249,7 +267,8 @@ function DropdownMenuItem(_ref) {
       return buttonStyles(item.isActive)({
         theme: theme
       });
-    }
+    },
+    tabIndex: -1
   }, (0, _react2.jsx)(_menu.CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),

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

@@ -0,0 +1,162 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuArrowKeyNavigationProvider = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * This component is a wrapper of vertical menus which listens to keydown events of children
+ * and handles up/down arrow key navigation
+ */
+var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_ref) {
+  var children = _ref.children,
+      handleClose = _ref.handleClose,
+      disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
+      keyDownHandlerContext = _ref.keyDownHandlerContext,
+      closeonTab = _ref.closeonTab;
+  var wrapperRef = (0, _react.useRef)(null);
+  var currentSelectedItemIndex = (0, _react.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;
+    }
+  };
+
+  (0, _react.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.default.createElement("div", {
+    className: "custom-key-handler-wrapper",
+    ref: wrapperRef
+  }, children);
+};
+
+exports.MenuArrowKeyNavigationProvider = MenuArrowKeyNavigationProvider;
+
+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/cjs/ui-react/with-react-editor-view-outer-listeners.js

@@ -31,7 +31,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _ReactEditorViewContext = _interopRequireDefault(require("./ReactEditorViewContext"));
 
-var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown"];
+var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "closeonTab"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -66,7 +66,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();
+          }
         }
       }
     });
@@ -76,22 +85,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);
       }
     });
     return _this;
@@ -107,7 +112,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);
       }
     }
   }, {
@@ -120,7 +126,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);
       }
     }
   }, {
@@ -141,6 +147,7 @@ function withReactEditorViewOuterListeners(Component) {
     var handleClickOutside = _ref.handleClickOutside,
         handleEnterKeydown = _ref.handleEnterKeydown,
         handleEscapeKeydown = _ref.handleEscapeKeydown,
+        closeonTab = _ref.closeonTab,
         props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
     var isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
     return /*#__PURE__*/_react.default.createElement(_ReactEditorViewContext.default.Consumer, null, function (_ref2) {
@@ -149,10 +156,12 @@ function withReactEditorViewOuterListeners(Component) {
       return /*#__PURE__*/_react.default.createElement(WithOutsideClick, {
         editorView: editorView,
         editorRef: editorRef,
+        targetRef: props.targetRef,
         isActiveComponent: isActiveComponent,
         handleClickOutside: handleClickOutside,
         handleEnterKeydown: handleEnterKeydown,
-        handleEscapeKeydown: handleEscapeKeydown
+        handleEscapeKeydown: handleEscapeKeydown,
+        closeonTab: closeonTab
       }, /*#__PURE__*/_react.default.createElement(Component, props));
     });
   };

package/dist/cjs/utils/index.js

@@ -215,6 +215,12 @@ Object.defineProperty(exports, "getAnnotationIdsFromRange", {
     return _annotation.getAnnotationIdsFromRange;
   }
 });
+Object.defineProperty(exports, "getDistortedDurationMonitor", {
+  enumerable: true,
+  get: function get() {
+    return _measureRender.getDistortedDurationMonitor;
+  }
+});
 Object.defineProperty(exports, "getExtensionLozengeData", {
   enumerable: true,
   get: function get() {

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

@@ -3,10 +3,46 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getDistortedDurationMonitor = getDistortedDurationMonitor;
 exports.measureRender = measureRender;
 
 var _isPerformanceApiAvailable = require("./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).
+ */
+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.
  *
@@ -20,6 +56,8 @@ var _isPerformanceApiAvailable = require("./is-performance-api-available");
  * | javascript (framework)           | style | layout | paint | composite | javascript  | ...
  *  | startMark + scheduling rAF |                                                       | rAF callback, endMark
  */
+
+
 function measureRender(
 /**
  * Unique name for the measurement
@@ -44,29 +82,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 {
@@ -77,20 +98,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/cjs/version.json

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

package/dist/es2019/analytics/types/enums.js

@@ -92,6 +92,7 @@ export let ACTION;
   ACTION["DEDUPE_MARKS_TRANSFORMED"] = "dedupeMarksTransformed";
   ACTION["NODES_MISSING_CONTENT_TRANSFORMED"] = "nodesMissingContentTransformed";
   ACTION["INDENTATION_MARKS_TRANSFORMED"] = "indentationMarksTransformed";
+  ACTION["INVALID_MEDIA_CONTENT_TRANSFORMED"] = "invalidMediaContentTransformed";
   ACTION["TOGGLE_EXPAND"] = "toggleExpand";
   ACTION["TRANSACTION_DISPATCHED"] = "transactionDispatched";
   ACTION["TRANSACTION_MUTATED_AFTER_DISPATCH"] = "transactionMutatedAfterDispatched";

package/dist/es2019/keymaps/index.js

@@ -2,6 +2,7 @@
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { browser } from '../utils';
 export const addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
 export const toggleBold = makeKeyMapWithCommon('Bold', 'Mod-b');
@@ -65,21 +66,18 @@ export const paste = makeKeyMapWithCommon('Paste', 'Mod-v');
 export const altPaste = makeKeyMapWithCommon('Paste', 'Mod-Shift-v');
 export const find = makeKeyMapWithCommon('Find', 'Mod-f');
 export const alignLeft = makeKeyMapWithCommon('Align Left', 'Mod-Shift-l');
-export const alignRight = makeKeyMapWithCommon('Align Right', 'Mod-Shift-r');
 const arrowKeysMap = {
   // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
   ARROWLEFT: '\u2190',
   ARROWRIGHT: '\u2192',
   ARROWUP: '\u2191',
   ARROWDOWN: '\u2193'
-}; // TOOD: https://product-fabric.atlassian.net/browse/DSP-4460
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
+};
 const tooltipShortcutStyle = css`
   border-radius: 2px;
-  background-color: ${N400};
+  background-color: ${token('color.background.inverse.subtle', N400)};
   padding: 0 2px;
+
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: tooltip-shortcut;

package/dist/es2019/messages/insert-block.js

@@ -20,13 +20,18 @@ export const toolbarInsertBlockMessages = defineMessages({
     defaultMessage: 'Insert a link',
     description: 'Insert a hyperlink'
   },
-  filesAndImages: {
-    id: 'fabric.editor.filesAndImages',
-    defaultMessage: 'Files & images',
-    description: 'Insert one or more files or images'
-  },
-  filesAndImagesDescription: {
-    id: 'fabric.editor.filesAndImages.description',
+  mediaFiles: {
+    id: 'fabric.editor.mediaFiles',
+    defaultMessage: 'Image, video, or file',
+    description: 'Insert one or more files, videos or images'
+  },
+  addMediaFiles: {
+    id: 'fabric.editor.addMediaFiles',
+    defaultMessage: 'Add image, video, or file',
+    description: 'Insert one or more files, videos or images'
+  },
+  mediaFilesDescription: {
+    id: 'fabric.editor.mediaFiles.description',
     defaultMessage: 'Add images and other files to your page',
     description: 'Insert one or more files or images'
   },

package/dist/es2019/panel.js

@@ -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/es2019/styles/shared/code-block.js

@@ -8,6 +8,7 @@ export const CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
   CODEBLOCK_END: 'code-block--end',
+  CODEBLOCK_CONTENT_WRAPPER: 'code-block-content-wrapper',
   CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
   CODEBLOCK_CONTENT: 'code-content',
   DS_CODEBLOCK: '[data-ds--code--code-block]'
@@ -15,36 +16,18 @@ export const CodeBlockSharedCssClassName = {
 export const codeBlockSharedStyles = props => css`
   .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
     position: relative;
-    background-color: ${themed({
-  light: token('color.background.neutral', N20),
-  dark: token('color.background.neutral', DN50)
-})(props)};
+    background-color: ${token('elevation.surface.raised', 'transparent')};
     border-radius: ${borderRadius()}px;
-    counter-reset: line;
-    display: flex;
-    overflow-x: auto;
-
-    background-image: ${overflowShadow({
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  background: themed({
-    light: N20,
-    dark: DN50
-  })(props),
-  width: '8px'
-})};
-
-    --ds--code--bg-color: transparent;
-
-    background-repeat: no-repeat;
-    background-attachment: local, scroll, scroll;
-    background-size: 8px 100%, 8px 100%, 8px 100%;
-    background-position: 100% 0, 100% 0, 0 0;
-    font-family: ${akEditorCodeFontFamily};
     margin: ${blockNodesVerticalMargin} 0 0 0;
+    font-family: ${akEditorCodeFontFamily};
     min-width: ${akEditorTableCellMinWidth}px;
     cursor: pointer;
 
+    --ds--code--bg-color: transparent;
+
+    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */
+    white-space: normal;
+
     .${CodeBlockSharedCssClassName.CODEBLOCK_START} {
       position: absolute;
       visibility: hidden;
@@ -61,6 +44,36 @@ export const codeBlockSharedStyles = props => css`
       right: 0px;
     }
 
+    .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
+      background-color: ${themed({
+  light: token('color.background.neutral', N20),
+  dark: token('color.background.neutral', DN50)
+})(props)};
+      display: flex;
+      border-radius: ${borderRadius()}px;
+      width: 100%;
+      counter-reset: line;
+      overflow-x: auto;
+
+      background-image: ${overflowShadow({
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
+  background: themed({
+    light: token('color.background.neutral', N20),
+    dark: token('color.background.neutral', DN50)
+  })(props),
+  width: '8px'
+})};
+
+      background-repeat: no-repeat;
+      background-attachment: local, local, local, local, scroll, scroll;
+      background-size: 8px 100%, 8px 100%, 8px 100%, 8px 100%, 8px 100%,
+        8px 100%;
+      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0;
+
+      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */
+      overflow-y: hidden;
+    }
+
     .${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
       flex-shrink: 0;
       text-align: right;
@@ -69,6 +82,7 @@ export const codeBlockSharedStyles = props => css`
   dark: token('color.background.neutral', DN20)
 })(props)};
       padding: ${gridSize()}px;
+      position: relative;
 
       span {
         display: block;