@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/esm/ui/ElementBrowser/ModalElementBrowser.js

@@ -17,12 +17,11 @@ import ElementBrowser from './components/ElementBrowserLoader';
 import { getCategories } from './categories';
 import { MODAL_WRAPPER_PADDING } from './constants';
 import { messages } from './messages';
-import { token } from '@atlaskit/tokens';
 var actions = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  margin: 0 -4px;\n"])));
 var actionItem = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n  margin: 0 4px;\n"])));
 var wrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", "px ", "px 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), MODAL_WRAPPER_PADDING, MODAL_WRAPPER_PADDING, themed({
-  light: token('elevation.surface.overlay', N0),
-  dark: token('elevation.surface.overlay', DN50)
+  light: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
 })(), borderRadius());
 var modalFooter = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", "px;\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), MODAL_WRAPPER_PADDING);
 

package/dist/esm/ui/ElementBrowser/components/CategoryList.js

@@ -22,7 +22,6 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE } from '../constants';
 import useFocus from '../hooks/use-focus';
 import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION_SUBJECT_ID, ACTION } from '../../../plugins/analytics';
-import { token } from '@atlaskit/tokens';
 
 function CategoryList(_ref) {
   var _ref$categories = _ref.categories,
@@ -91,9 +90,9 @@ function CategoryListItem(_ref2) {
         marginLeft: '2px',
         height: '100%',
         width: '100%',
-        color: category.name !== selectedCategory ? token('color.text', N800) : token('color.text.selected', B400)
+        color: category.name !== selectedCategory ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-text-selected, ".concat(B400, ")")
       }, category.name === selectedCategory && {
-        background: token('color.background.selected', B50)
+        background: "var(--ds-background-selected, ".concat(B50, ")")
       })
     }, rest);
   }, [category.name, selectedCategory]);

package/dist/esm/ui/ElementBrowser/components/ElementList/ElementList.js

@@ -16,7 +16,6 @@ import { ButtonItem } from '@atlaskit/menu';
 import { B100, N200 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../../../plugins/analytics';
 import IconFallback from '../../../../plugins/quick-insert/assets/fallback';
@@ -237,7 +236,7 @@ var ItemContent = /*#__PURE__*/memo(function (_ref6) {
     css: itemDescription
   }, description)));
 });
-var elementItemsWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: 4px;\n    }\n  }\n"])), ELEMENT_LIST_PADDING, ELEMENT_LIST_PADDING, token('color.border.focused', B100));
+var elementItemsWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: 4px;\n    }\n  }\n"])), ELEMENT_LIST_PADDING, ELEMENT_LIST_PADDING, "var(--ds-border-focused, ".concat(B100, ")"));
 var elementItemWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  div {\n    button {\n      height: 75px;\n      align-items: flex-start;\n      padding: 12px 12px 11px;\n    }\n  }\n"])));
 var itemBody = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  width: 100%;\n\n  margin-top: -2px; // Fixes the Item Icon and text's alignment issue\n"])));
 /*
@@ -246,7 +245,7 @@ var itemBody = css(_templateObject3 || (_templateObject3 = _taggedTemplateLitera
  */
 
 var multilineStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"])));
-var itemDescription = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n\n  overflow: hidden;\n  font-size: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), multilineStyle, relativeFontSizeToBase16(11.67), token('color.text.subtle', N200));
+var itemDescription = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n\n  overflow: hidden;\n  font-size: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), multilineStyle, relativeFontSizeToBase16(11.67), "var(--ds-text-subtle, ".concat(N200, ")"));
 var itemText = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: inherit;\n  white-space: initial;\n"])));
 var itemTitleWrapper = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between; // Title and keyboardshortcut are rendered in the same block\n"])));
 var itemTitle = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 100%;\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));

package/dist/esm/ui/ElementBrowser/components/ElementList/EmptyState.js

@@ -7,7 +7,6 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import NotFoundIllustration from './NotFoundIllustration';
-import { token } from '@atlaskit/tokens';
 export default function EmptyState(_ref) {
   var onExternalLinkClick = _ref.onExternalLinkClick;
   return jsx("div", {
@@ -37,7 +36,7 @@ export default function EmptyState(_ref) {
     description: "Empty state sub-heading external link"
   })))));
 }
-var emptyStateHeading = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 1.42857em;\n  line-height: 1.2;\n  color: ", ";\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  margin-top: 28px;\n"])), token('color.text', 'rgb(23, 43, 77)'));
+var emptyStateHeading = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 1.42857em;\n  line-height: 1.2;\n  color: ", ";\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  margin-top: 28px;\n"])), "var(--ds-text, rgb(23, 43, 77))");
 var emptyStateSubHeading = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 16px;\n  max-width: 400px;\n  text-align: center;\n"])));
 var emptyStateWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n"])));
 var externalLinkWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-top: 14px;\n"])));

package/dist/esm/ui/ElementBrowser/components/ElementSearch.js

@@ -15,7 +15,6 @@ import { GRID_SIZE, SEARCH_ITEM_HEIGHT_WIDTH } from '../constants';
 import useFocus from '../hooks/use-focus';
 import { Modes } from '../types';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 
 function ElementSearch(_ref) {
   var onSearch = _ref.onSearch,
@@ -76,7 +75,7 @@ var placeHolderMessage = {
 var styledShortcut = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  padding: ", "px ", "px;\n  width: ", "px;\n"])), shortcutStyle, GRID_SIZE / 2, GRID_SIZE, GRID_SIZE * 6);
 var wrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    border-radius: ", "px;\n    flex: 1 1 100%;\n    overflow: visible;\n    & > [data-ds--text-field--input] {\n      margin-bottom: 3px;\n      font-size: ", ";\n      padding: ", "px 6px ", "px 0;\n    }\n  }\n"])), GRID_SIZE * 6, GRID_SIZE, relativeFontSizeToBase16(14), GRID_SIZE, GRID_SIZE);
 var wrapperInline = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    flex: none;\n    overflow: revert;\n  }\n"])), GRID_SIZE * 5);
-var elementBeforeInput = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 1px 6px 0 8px;\n  color: ", ";\n\n  // Custom SearchIcon style\n  span,\n  svg {\n    height: 20px;\n    width: 20px;\n  }\n"])), token('color.icon', N200));
+var elementBeforeInput = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 1px 6px 0 8px;\n  color: ", ";\n\n  // Custom SearchIcon style\n  span,\n  svg {\n    height: 20px;\n    width: 20px;\n  }\n"])), "var(--ds-icon, ".concat(N200, ")"));
 var elementAfterInput = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 8px;\n  height: ", ";\n  text-align: center;\n"])), SEARCH_ITEM_HEIGHT_WIDTH);
 var MemoizedElementSearchWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
   component: 'Searchbar'

package/dist/esm/ui/FloatingToolbar/styles.js

@@ -5,7 +5,6 @@ var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var container = function container(height) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), borderRadius(), token('elevation.shadow.overlay', "0 12px 24px -6px ".concat(N50A, ", 0 0 1px ").concat(N60A)), token('color.background.input', N0), height ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        height: ", "px;\n      "])), height) : '');
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 12px 24px -6px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), "var(--ds-background-input, ".concat(N0, ")"), height ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        height: ", "px;\n      "])), height) : '');
 };

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

@@ -19,17 +19,16 @@ import { css, jsx } from '@emotion/react'; // AFP-2532 TODO: Fix automatic suppr
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { fontSizeSmall } from '@atlaskit/theme';
-import { token } from '@atlaskit/tokens';
 import { N20, N300, N800 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { getCorrectAltByIconUrl } from './listItemAlts';
 import { transformTimeStamp } from './transformTimeStamp';
 import { injectIntl } from 'react-intl-next';
 export var container = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: transparent;\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  margin-top: 0;\n"])));
-export var containerSelected = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.neutral.subtle.hovered', N20));
+export var containerSelected = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"));
 var nameWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
-export var nameStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), token('color.text', N800));
-export var containerName = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), token('color.text.subtlest', N300), relativeFontSizeToBase16(fontSizeSmall()));
+export var nameStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), "var(--ds-text, ".concat(N800, ")"));
+export var containerName = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), "var(--ds-text-subtlest, ".concat(N300, ")"), relativeFontSizeToBase16(fontSizeSmall()));
 var iconStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  min-width: 16px;\n  margin-top: 3px;\n  margin-right: 12px;\n\n  img {\n    max-width: 16px;\n  }\n"])));
 
 var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {

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/PanelTextInput/styles.js

@@ -5,9 +5,8 @@ var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { N400, N100 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens'; // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-
-export var panelTextInput = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  input& {\n    background: transparent;\n    border: 0;\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: 0;\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), token('color.text.subtle', N400), relativeFontSizeToBase16(13), token('color.text.subtlest', N100));
+// Normal .className gets overridden by input[type=text] hence this hack to produce input.className
+export var panelTextInput = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  input& {\n    background: transparent;\n    border: 0;\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: 0;\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), "var(--ds-text-subtle, ".concat(N400, ")"), relativeFontSizeToBase16(13), "var(--ds-text-subtlest, ".concat(N100, ")"));
 export var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
 };

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/ui/ToolbarFeedback/styles.js

@@ -5,11 +5,10 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A, N400, P400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export var buttonContent = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 24px;\n  line-height: 24px;\n  min-width: 70px;\n"])));
 export var wrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 0;\n"])));
-export var confirmationPopup = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow: auto;\n  max-height: none;\n  height: 410px;\n  width: 280px;\n"])), token('elevation.surface.overlay', '#fff'), borderRadius(), token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A)));
-export var confirmationText = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  word-spacing: 4px;\n  line-height: 22px;\n  color: ", ";\n  margin-top: 30px;\n  padding: 20px;\n  & > div {\n    width: 240px;\n  }\n  & > div:first-of-type {\n    margin-bottom: 12px;\n  }\n  & > div:nth-of-type(2) {\n    margin-bottom: 20px;\n  }\n"])), relativeFontSizeToBase16(14), token('color.text.subtle', N400));
-export var confirmationHeader = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), token('color.background.discovery.bold', P400));
+export var confirmationPopup = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow: auto;\n  max-height: none;\n  height: 410px;\n  width: 280px;\n"])), "var(--ds-surface-overlay, #fff)", borderRadius(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"));
+export var confirmationText = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  word-spacing: 4px;\n  line-height: 22px;\n  color: ", ";\n  margin-top: 30px;\n  padding: 20px;\n  & > div {\n    width: 240px;\n  }\n  & > div:first-of-type {\n    margin-bottom: 12px;\n  }\n  & > div:nth-of-type(2) {\n    margin-bottom: 20px;\n  }\n"])), relativeFontSizeToBase16(14), "var(--ds-text-subtle, ".concat(N400, ")"));
+export var confirmationHeader = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), "var(--ds-background-discovery-bold, ".concat(P400, ")"));
 export var confirmationImg = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100px;\n  display: block;\n  margin: 25px auto 0 auto;\n"])));

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

@@ -17,9 +17,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/react';
 import { R100 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-var pulseBackground = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  50% {\n    background-color: ", ";\n  }\n"])), token('color.blanket.danger', R100));
-var pulseBackgroundReverse = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    background-color: ", ";\n  }\n  50% {\n    background-color: auto;\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), token('color.blanket.danger', R100), token('color.blanket.danger', R100));
+var pulseBackground = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  50% {\n    background-color: ", ";\n  }\n"])), "var(--ds-blanket-danger, ".concat(R100, ")"));
+var pulseBackgroundReverse = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    background-color: ", ";\n  }\n  50% {\n    background-color: auto;\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), "var(--ds-blanket-danger, ".concat(R100, ")"), "var(--ds-blanket-danger, ".concat(R100, ")"));
 var flashWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &.-flash > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n\n  & > div {\n    animation: 'none';\n  }\n"])), pulseBackgroundReverse);
 var flashWrapperAnimated = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n\n  & > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n"])), flashWrapper, pulseBackground);
 

package/dist/esm/ui/styles.js

@@ -4,11 +4,10 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 export { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 export var buttonGroupStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
-export var separatorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), token('color.border', N30));
+export var separatorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), "var(--ds-border, ".concat(N30, ")"));
 export var wrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n\n  margin-left: 0;\n  min-width: auto;\n"])));
 export var wrapperSmallStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: 4px;\n  min-width: 40px;\n"])));
 export var expandIconWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: -8px;\n"])));
@@ -16,5 +15,5 @@ export var triggerWrapperStyles = css(_templateObject6 || (_templateObject6 = _t
 export var buttonContentStyle = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  flex-direction: column;\n  padding: 6px;\n"])));
 export var buttonContentReducedSpacingStyle = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 8px;\n"]))); // Taken from the style of inline dialog components
 
-export var dropShadow = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  box-shadow: ", ";\n"])), token('elevation.shadow.overlay', "0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25)"));
+export var dropShadow = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  box-shadow: ", ";\n"])), "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"));
 export var clickSelectWrapperStyle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  user-select: all;\n"])));

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.3";
+export var version = "177.0.1";
 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.3",
+	"version": "177.0.1",
 	"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 {};