@atlaskit/editor-core 176.0.2 → 177.0.0

package/dist/esm/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -14,12 +14,13 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import UndoIcon from '@atlaskit/icon/glyph/undo';
 import RedoIcon from '@atlaskit/icon/glyph/redo';
-import { undo as undoKeymap, redo as redoKeymap, ToolTipContent } from '../../../../keymaps';
+import { undo as undoKeymap, redo as redoKeymap, ToolTipContent, tooltip } from '../../../../keymaps';
 import { buttonGroupStyle, separatorStyles } from '../../../../ui/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../messages';
 import { createTypeAheadTools } from '../../../type-ahead/api';
 import { undoFromToolbar, redoFromToolbar } from '../../commands';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 
 var closeTypeAheadAndRunCommand = function closeTypeAheadAndRunCommand(editorView) {
   return function (command) {
@@ -90,7 +91,8 @@ export var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: handleUndo,
         disabled: !canUndo || disabled,
-        "aria-label": labelUndo,
+        "aria-label": tooltip(undoKeymap, labelUndo),
+        "aria-keyshortcuts": getAriaKeyshortcuts(undoKeymap),
         title: jsx(ToolTipContent, {
           description: labelUndo,
           keymap: undoKeymap
@@ -112,7 +114,8 @@ export var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
           label: ""
         }),
         testId: "ak-editor-toolbar-button-redo",
-        "aria-label": labelRedo
+        "aria-label": tooltip(redoKeymap, labelRedo),
+        "aria-keyshortcuts": getAriaKeyshortcuts(redoKeymap)
       }), jsx("span", {
         css: separatorStyles
       }));

package/dist/esm/ui/Alignment/AlignmentButton/index.js

@@ -13,7 +13,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { PureComponent } from 'react';
 import ToolbarButton from '../../ToolbarButton';
-import { ToolTipContent } from '../../../keymaps';
+import { ToolTipContent, tooltip } from '../../../keymaps';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 
 var AlignmentButton = /*#__PURE__*/function (_PureComponent) {
   _inherits(AlignmentButton, _PureComponent);
@@ -57,8 +58,9 @@ var AlignmentButton = /*#__PURE__*/function (_PureComponent) {
           description: label,
           keymap: shortcut
         }),
-        "aria-label": label,
+        "aria-label": shortcut ? tooltip(shortcut, label) : label,
         "aria-pressed": isSelected,
+        "aria-keyshortcuts": getAriaKeyshortcuts(shortcut),
         onClick: this.onClick,
         iconBefore: content
       });

package/dist/esm/ui/Appearance/Comment/Toolbar.js

@@ -9,10 +9,10 @@ import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N30 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { akEditorToolbarKeylineHeight, akEditorGridLineZIndex, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { akEditorToolbarKeylineHeight, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export var TableControlsPadding = 20;
 var mainToolbarWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  padding: ", "px ", "px 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), gridSize(), gridSize(), token('elevation.surface', 'white'), TableControlsPadding);
-var stickyToolbarWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0\n      ", ";\n  }\n"])), gridSize(), akEditorGridLineZIndex + akEditorMenuZIndex, akEditorToolbarKeylineHeight, token('color.border', N30));
+var stickyToolbarWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0\n      ", ";\n  }\n"])), gridSize(), akEditorMenuZIndex, akEditorToolbarKeylineHeight, token('color.border', N30));
 
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = useState(0),

package/dist/esm/ui/Appearance/FullPage/FullPageToolbar.js

@@ -78,7 +78,8 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
 
     var contextPanelWidth = _ref.width;
     return jsx(ToolbarArrowKeyNavigationProvider, {
-      editorView: props.editorView
+      editorView: props.editorView,
+      childComponentSelector: "[data-testid='ak-editor-main-toolbar']"
     }, jsx("div", {
       css: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)),
       "data-testid": "ak-editor-main-toolbar"

package/dist/esm/ui/CollapsedEditor/index.js

@@ -10,6 +10,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; } }
 
+import { IntlProviderIfMissingWrapper } from '@atlaskit/editor-common/ui';
 import React from 'react';
 import Editor from '../../editor';
 import EditorWithActions from '../../labs/EditorWithActions';
@@ -72,10 +73,10 @@ var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
       }
 
       if (!this.props.isExpanded) {
-        return /*#__PURE__*/React.createElement(ChromeCollapsed, {
+        return /*#__PURE__*/React.createElement(IntlProviderIfMissingWrapper, null, /*#__PURE__*/React.createElement(ChromeCollapsed, {
           onFocus: this.props.onFocus,
           text: this.props.placeholder
-        });
+        }));
       }
 
       return /*#__PURE__*/React.cloneElement(child, {

package/dist/esm/ui/ColorPickerButton/index.js

@@ -92,7 +92,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
       zIndex: props.setDisableParentScroll ? 600 : undefined,
       ariaLabel: "Color picker popup"
     }, jsx("div", {
-      css: colorPickerWrapper
+      css: colorPickerWrapper,
+      "data-test-id": "color-picker-menu"
     }, jsx(ColorPaletteWithListeners, {
       palette: props.colorPalette,
       cols: props.cols,

package/dist/esm/ui/ConfigPanel/Fields/Fieldset.js

@@ -27,9 +27,7 @@ import SectionMessage from '@atlaskit/section-message';
 import Button from '@atlaskit/button/custom-theme-button';
 import Select from '@atlaskit/select';
 import AddCircleIcon from '@atlaskit/icon/glyph/add-circle';
-import { messages } from '../messages'; // eslint-disable-next-line import/no-cycle
-
-import FormContent from '../FormContent';
+import { messages } from '../messages';
 import { getNameFromDuplicateField, isDuplicateField } from '../utils';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
@@ -267,7 +265,8 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
           extensionManifest = _this$props.extensionManifest,
           onFieldChange = _this$props.onFieldChange,
           firstVisibleFieldName = _this$props.firstVisibleFieldName,
-          error = _this$props.error;
+          error = _this$props.error,
+          FormComponent = _this$props.formComponent;
       var label = field.label,
           options = field.options;
       var _this$state3 = this.state,
@@ -277,7 +276,7 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
       var children = this.renderActions();
       return jsx(Fragment, null, error && jsx(FieldsetError, {
         message: error
-      }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormContent, {
+      }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormComponent, {
         fields: selectedFields,
         parentName: name,
         extensionManifest: extensionManifest,

package/dist/esm/ui/ConfigPanel/FormContent.js

@@ -11,8 +11,7 @@ import Boolean from './Fields/Boolean';
 import CustomSelect from './Fields/CustomSelect';
 import Date from './Fields/Date';
 import DateRange from './Fields/DateRange';
-import Enum from './Fields/Enum'; // eslint-disable-next-line import/no-cycle
-
+import Enum from './Fields/Enum';
 import Fieldset from './Fields/Fieldset';
 import Number from './Fields/Number';
 import String from './Fields/String';
@@ -125,7 +124,8 @@ export function FieldComponent(_ref) {
         onFieldChange: onFieldChange,
         extensionManifest: extensionManifest,
         parameters: defaultValue || {},
-        error: error
+        error: error,
+        formComponent: FormContent
       });
 
     case 'user':

package/dist/esm/ui/ContentStyles/index.js

@@ -40,7 +40,7 @@ import { useFeatureFlags } from '../../plugins/feature-flags-context';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 
 var contentStyles = function contentStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), editorFontSize({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), editorFontSize({
     theme: props.theme
   }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, token('color.border.focused', '#8cf'), placeholderTextStyles, placeholderStyles, codeBlockStyles(props), blocktypeStyles(props), textFormattingStyles(props), textColorStyles, listsStyles, ruleStyles(props), mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(props), fakeCursorStyles, mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(props), findReplaceStyles, taskDecisionStyles, statusStyles, annotationSharedStyles(props), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };

package/dist/esm/ui/LinkSearch/ToolbarComponents.js

@@ -6,6 +6,7 @@ import { css } from '@emotion/react';
 export var RECENT_SEARCH_WIDTH_IN_PX = 420;
 export var RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
 export var RECENT_SEARCH_HEIGHT_IN_PX = 360;
+export var LINKPICKER_HEIGHT_IN_PX = 570;
 export var inputWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
 export var container = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 0;\n\n  width: ", "px;\n  line-height: initial;\n"])), RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX);
 export var containerWithProvider = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), RECENT_SEARCH_WIDTH_IN_PX);

package/dist/esm/ui/ToolbarArrowKeyNavigationProvider/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
 
 /*
  **  The context is used to handle the keydown events of submenus.
@@ -20,32 +20,33 @@ export var KeyDownHandlerContext = /*#__PURE__*/React.createContext({
 
 export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigationProvider(_ref) {
   var children = _ref.children,
-      editorView = _ref.editorView;
+      editorView = _ref.editorView,
+      childComponentSelector = _ref.childComponentSelector,
+      handleEscape = _ref.handleEscape,
+      disableArrowKeyNavigation = _ref.disableArrowKeyNavigation;
   var wrapperRef = useRef(null);
-  var currentSelectedItemIndex = useRef(0);
-
-  var incrementIndex = function incrementIndex(list) {
-    if (currentSelectedItemIndex.current === list.length - 1) {
-      currentSelectedItemIndex.current = 0;
+  var selectedItemIndex = useRef(0);
+  var incrementIndex = useCallback(function (list) {
+    if (selectedItemIndex.current === list.length - 1) {
+      selectedItemIndex.current = 0;
     } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current + 1;
+      selectedItemIndex.current = selectedItemIndex.current + 1;
     }
-  };
-
-  var decrementIndex = function decrementIndex(list) {
-    if (currentSelectedItemIndex.current === 0) {
-      currentSelectedItemIndex.current = list.length - 1;
+  }, []);
+  var decrementIndex = useCallback(function (list) {
+    if (selectedItemIndex.current === 0) {
+      selectedItemIndex.current = list.length - 1;
     } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+      selectedItemIndex.current = selectedItemIndex.current - 1;
     }
-  };
+  }, []);
 
   var handleArrowRight = function handleArrowRight() {
     var _filteredFocusableEle;
 
     var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
     incrementIndex(filteredFocusableElements);
-    (_filteredFocusableEle = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
+    (_filteredFocusableEle = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
   };
 
   var handleArrowLeft = function handleArrowLeft() {
@@ -53,14 +54,23 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
 
     var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
     decrementIndex(filteredFocusableElements);
-    (_filteredFocusableEle2 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
+    (_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
   };
 
   var handleTab = function handleTab() {
     var _filteredFocusableEle3;
 
     var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    (_filteredFocusableEle3 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
+    (_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
+  };
+
+  var focusAndScrollToElement = function focusAndScrollToElement(element) {
+    element === null || element === void 0 ? void 0 : element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'nearest'
+    });
+    element.focus();
   };
 
   var submenuKeydownHandleContext = {
@@ -69,7 +79,7 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
     handleTab: handleTab
   };
   useLayoutEffect(function () {
-    if (!wrapperRef.current) {
+    if (!wrapperRef.current || disableArrowKeyNavigation) {
       return;
     }
 
@@ -80,17 +90,17 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
      */
 
     var handleKeyDown = function handleKeyDown(event) {
-      var _document$querySelect, _wrapperRef$current, _filteredFocusableEle4;
+      var _document$querySelect, _document$querySelect2, _wrapperRef$current;
 
-      //To trap the focus inside the horizontal main toolbar for left and right arrow keys
-      var targetElement = event.target; //To filter out the events outside the main toolbar
+      //To trap the focus inside the horizontal toolbar for left and right arrow keys
+      var targetElement = event.target; //To filter out the events outside the child component
 
-      if (!targetElement.closest("[data-testid='ak-editor-main-toolbar']")) {
+      if (!targetElement.closest("".concat(childComponentSelector))) {
         return;
       } //The key events are from child components such as dropdown menus / popups are ignored
 
 
-      if ((_document$querySelect = document.querySelector('[data-role="droplistContent"], [data-test-id="color-picker-menu"], [data-emoji-picker-container="true"]')) !== null && _document$querySelect !== void 0 && _document$querySelect.contains(targetElement) || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      if ((_document$querySelect = document.querySelector('[data-role="droplistContent"], [data-test-id="color-picker-menu"], [data-emoji-picker-container="true"]')) !== null && _document$querySelect !== void 0 && _document$querySelect.contains(targetElement) || (_document$querySelect2 = document.querySelector('[data-test-id="color-picker-menu"]')) !== null && _document$querySelect2 !== void 0 && _document$querySelect2.contains(targetElement) || event.key === 'ArrowUp' || event.key === 'ArrowDown' || disableArrowKeyNavigation) {
         return;
       }
 
@@ -103,25 +113,37 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
 
 
       if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
-        currentSelectedItemIndex.current = -1;
+        selectedItemIndex.current = -1;
       } else {
-        currentSelectedItemIndex.current = filteredFocusableElements.indexOf(targetElement) > -1 ? filteredFocusableElements.indexOf(targetElement) : currentSelectedItemIndex.current;
+        selectedItemIndex.current = filteredFocusableElements.indexOf(targetElement) > -1 ? filteredFocusableElements.indexOf(targetElement) : selectedItemIndex.current;
       }
 
-      if (event.key === 'ArrowRight') {
-        incrementIndex(filteredFocusableElements);
-      } else if (event.key === 'ArrowLeft') {
-        decrementIndex(filteredFocusableElements);
-      }
+      switch (event.key) {
+        case 'ArrowRight':
+          incrementIndex(filteredFocusableElements);
+          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current]);
+          event.preventDefault();
+          break;
+
+        case 'ArrowLeft':
+          decrementIndex(filteredFocusableElements);
+          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current]);
+          event.preventDefault();
+          break;
 
-      (_filteredFocusableEle4 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle4 === void 0 ? void 0 : _filteredFocusableEle4.focus();
+        case 'Escape':
+          handleEscape(event);
+          break;
+
+        default:
+      }
     };
 
     element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
     return function () {
       element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, editorView]);
+  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex]);
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef
@@ -142,6 +164,6 @@ function getFocusableElements(rootNode) {
 function getFilteredFocusableElements(rootNode) {
   //The focusable elements from child components such as dropdown menus / popups are ignored
   return getFocusableElements(rootNode).filter(function (elm) {
-    return !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]');
+    return !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons');
   });
 }

package/dist/esm/utils/commands.js

@@ -114,12 +114,27 @@ var applyMarkOnRange = function applyMarkOnRange(from, to, removeMark, mark, tr)
   return tr;
 };
 
+var entireSelectionContainsMark = function entireSelectionContainsMark(mark, doc, fromPos, toPos) {
+  var onlyContainsMark = true;
+  doc.nodesBetween(fromPos, toPos, function (node) {
+    // Skip recursion once we've found text which doesn't include the mark
+    if (!onlyContainsMark) {
+      return false;
+    }
+
+    if (node.isText) {
+      onlyContainsMark && (onlyContainsMark = mark.isInSet(node.marks));
+    }
+  });
+  return onlyContainsMark;
+};
+
 var toggleMarkInRange = function toggleMarkInRange(mark) {
   return function (state, dispatch) {
     var tr = state.tr;
 
     if (state.selection instanceof CellSelection) {
-      var markInRange = false;
+      var removeMark = true;
       var cells = [];
       state.selection.forEachCell(function (cell, cellPos) {
         cells.push({
@@ -128,30 +143,27 @@ var toggleMarkInRange = function toggleMarkInRange(mark) {
         });
         var from = cellPos;
         var to = cellPos + cell.nodeSize;
-
-        if (!markInRange) {
-          markInRange = state.doc.rangeHasMark(from, to, mark);
-        }
+        removeMark && (removeMark = entireSelectionContainsMark(mark, state.doc, from, to));
       });
 
       for (var i = cells.length - 1; i >= 0; i--) {
         var cell = cells[i];
         var from = cell.pos;
         var to = from + cell.node.nodeSize;
-        applyMarkOnRange(from, to, markInRange, mark, tr);
+        applyMarkOnRange(from, to, removeMark, mark, tr);
       }
     } else {
       var _state$selection3 = state.selection,
           $from = _state$selection3.$from,
-          $to = _state$selection3.$to; // The type for `rangeHasMark` only accepts a `MarkType` as a third param,
-      // Yet the internals use a method that exists on both MarkType and Mark (one checks attributes the other doesnt)
-      // For example, with our subsup mark: We use the same mark with different attributes to convert
-      // different formatting but when using `MarkType.isInSet(marks)` it returns true for both.
-      // Calling `Mark.isInSet(marks)` compares attributes as well.
+          $to = _state$selection3.$to; // We decide to remove the mark only if the entire selection contains the mark
+      // Examples with *bold* text
+      // Scenario 1: Selection contains both bold and non-bold text -> bold entire selection
+      // Scenario 2: Selection contains only bold text -> un-bold entire selection
+      // Scenario 3: Selection contains no bold text -> bold entire selection
 
-      var _markInRange = state.doc.rangeHasMark($from.pos, $to.pos, mark);
+      var _removeMark = entireSelectionContainsMark(mark, state.doc, $from.pos, $to.pos);
 
-      applyMarkOnRange($from.pos, $to.pos, _markInRange, mark, tr);
+      applyMarkOnRange($from.pos, $to.pos, _removeMark, mark, tr);
     }
 
     if (tr.docChanged) {

package/dist/esm/utils/input-rules.js

@@ -4,12 +4,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { closeHistory } from 'prosemirror-history';
 import { TextSelection } from 'prosemirror-state';
 import { canJoin, findWrapping } from 'prosemirror-transform';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { createInputRulePlugin } from '@atlaskit/prosemirror-input-rules';
 import { addAnalytics } from '../plugins/analytics';
+import { closeHistory } from 'prosemirror-history';
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import { getFeatureFlags } from '../plugins/feature-flags-context';
 export var ruleWithAnalytics = function ruleWithAnalytics(getPayload) {
   return function (originalRule) {
     var onHandlerApply = function onHandlerApply(state, tr, matchResult) {
@@ -128,6 +130,26 @@ export var createWrappingJoinRule = function createWrappingJoinRule(_ref3) {
     }
 
     tr.wrap(range, wrapping);
+    var featureFlags = getFeatureFlags(state);
+
+    if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists && nodeType === state.schema.nodes.orderedList) {
+      // if an orderedList node would be inserted by the input rule match, and
+      // that orderedList node is being added directly before another orderedList
+      // node, then join those nodes
+      var $end = tr.doc.resolve(tr.mapping.map(end));
+
+      var _node = findParentNodeOfTypeClosestToPos($end, nodeType);
+
+      if (_node) {
+        var nodeEnd = _node.pos + _node.node.nodeSize;
+        var after = tr.doc.resolve(nodeEnd).nodeAfter;
+
+        if (after && after.type === nodeType && canJoin(tr.doc, nodeEnd) && (!joinPredicate || joinPredicate(match, after))) {
+          tr.join(nodeEnd);
+        }
+      }
+    }
+
     var before = tr.doc.resolve(fixedStart - 1).nodeBefore;
 
     if (before && before.type === nodeType && canJoin(tr.doc, fixedStart - 1) && (!joinPredicate || joinPredicate(match, before))) {

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "176.0.2";
+export var version = "177.0.0";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "176.0.2",
+	"version": "177.0.0",
 	"sideEffects": false
 }

package/dist/types/create-editor/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const editorMessages: {
+    editorAssistiveLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -1,13 +1,15 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
- * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ * ED-16073:
+ * This was manually updated since the original `@atlaskit/i18n-tools` has been deprecated
  */
 export { default as zh } from './zh';
 export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
 export { default as nl } from './nl';
 export { default as et } from './et';
 export { default as fi } from './fi';
@@ -29,7 +31,5 @@ export { default as th } from './th';
 export { default as tr } from './tr';
 export { default as uk } from './uk';
 export { default as vi } from './vi';
-export { default as en } from './en';
-export { default as en_GB } from './en_GB';
 export { default as is } from './is';
 export { default as ro } from './ro';

package/dist/types/i18n/languages.d.ts

@@ -1,8 +1,9 @@
 declare const _default: {
     zh: string;
+    zh_TW: string;
     cs: string;
-    da: string;
     nl: string;
+    da: string;
     en: string;
     en_GB: string;
     et: string;
@@ -23,11 +24,15 @@ declare const _default: {
     sk: string;
     es: string;
     sv: string;
+    th: string;
+    tr: string;
+    uk: string;
+    vi: string;
 };
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
- * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ * ED-16073:
+ * This was manually updated since the original `@atlaskit/i18n-tools` has been deprecated
  */
 export default _default;

package/dist/types/labs/next/presets/cxhtml.d.ts

@@ -8,5 +8,5 @@ export declare type EditorPresetCXHTMLProps = {
     mentionProvider?: Promise<MentionProvider>;
     mediaProvider?: Promise<MediaProvider>;
 } & EditorPresetProps;
-export declare function useCXHTMLPreset({ mentionProvider, mediaProvider, placeholder, featureFlags, }: EditorPresetCXHTMLProps): import("./preset").Preset<import("@atlaskit/editor-common/types").EditorPlugin>[];
+export declare function useCXHTMLPreset({ mentionProvider, mediaProvider, placeholder, featureFlags, }: EditorPresetCXHTMLProps): import("./preset").Preset<import("@atlaskit/editor-common/types").EditorPlugin, []>[];
 export declare function EditorPresetCXHTML(props: EditorPresetCXHTMLProps): JSX.Element;

package/dist/types/labs/next/presets/default.d.ts

@@ -39,7 +39,7 @@ export declare type DefaultPresetPluginOptions = {
  * Note: The order that presets are added determines
  * their placement in the editor toolbar
  */
-export declare function createDefaultPreset(options: EditorPresetProps & DefaultPresetPluginOptions): Preset<EditorPlugin>;
-export declare function useDefaultPreset(props: EditorPresetProps & DefaultPresetPluginOptions): Preset<EditorPlugin>[];
+export declare function createDefaultPreset(options: EditorPresetProps & DefaultPresetPluginOptions): Preset<EditorPlugin, []>;
+export declare function useDefaultPreset(props: EditorPresetProps & DefaultPresetPluginOptions): Preset<EditorPlugin, []>[];
 export declare function EditorPresetDefault(props: EditorPresetDefaultProps & EditorPresetProps & DefaultPresetPluginOptions): JSX.Element;
 export {};

package/dist/types/labs/next/presets/mobile.d.ts

@@ -11,7 +11,7 @@ declare type EditorPresetMobileProps = {
         allowMediaSingle?: boolean;
     };
 } & EditorPresetProps;
-export declare function useMobilePreset({ media, placeholder, maxContentSize, createAnalyticsEvent, featureFlags, }: EditorPresetMobileProps & EditorPresetProps): import("./preset").Preset<import("@atlaskit/editor-common/types").EditorPlugin>[];
+export declare function useMobilePreset({ media, placeholder, maxContentSize, createAnalyticsEvent, featureFlags, }: EditorPresetMobileProps & EditorPresetProps): import("./preset").Preset<import("@atlaskit/editor-common/types").EditorPlugin, []>[];
 export declare type MobilePresetProps = EditorPresetMobileProps & EditorPresetProps;
 export declare function EditorPresetMobile(props: MobilePresetProps): JSX.Element;
 export {};

package/dist/types/labs/next/presets/preset.d.ts

@@ -1,11 +1,13 @@
+import type { AllBuilderPlugins, AllNextEditorPlugins, SafePresetCheck } from '@atlaskit/editor-common/types';
+import { Builder } from '@atlaskit/editor-common/utils';
 export declare class Preset<T extends {
     name: string;
-}> {
-    private plugins;
-    constructor();
-    add<PluginFactory>(plugin: PluginConfig<PluginFactory, T>): this;
-    has(plugin: () => T): boolean;
-    getEditorPlugins(excludes?: Set<string>): T[];
+}, StackPlugins extends AllBuilderPlugins[] = []> implements Builder<T, StackPlugins> {
+    data: [...StackPlugins];
+    constructor(...more: [...StackPlugins]);
+    add<NewPlugin extends AllBuilderPlugins>(nextOrTuple: SafePresetCheck<NewPlugin, StackPlugins>): Preset<T, [...[NewPlugin], ...StackPlugins]>;
+    has(plugin: AllBuilderPlugins): boolean;
+    getEditorPlugins(excludes?: Set<string>): AllNextEditorPlugins[];
     private processEditorPlugins;
     private removeExcludedPlugins;
 }
@@ -17,6 +19,8 @@ export declare type PluginsPreset = Array<PluginConfig<any, any>>;
  * – () => EditorPlugin
  * – (options: any) => EditorPlugin
  * – (options?: any) => EditorPlugin
+ * (In the future, a preset may contain NextEditorPluginWithDependencies)
+ * – (props.externalPlugins) => (options?: any) => EditorPlugin
  *
  * Usage:
  * – preset.add(plugin)

package/dist/types/plugins/alignment/index.d.ts

@@ -1,5 +1,5 @@
-import { EditorPlugin } from '../../types';
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import { AlignmentPluginState } from './pm-plugins/types';
 export declare const defaultConfig: AlignmentPluginState;
-declare const alignmentPlugin: () => EditorPlugin;
+declare const alignmentPlugin: NextEditorPlugin<'alignment', never>;
 export default alignmentPlugin;