@atlaskit/editor-core 180.1.0 → 181.0.1

package/dist/cjs/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -21,7 +21,7 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _ColorPalette = _interopRequireDefault(require("../../../../ui/ColorPalette"));
+var _ColorPalette = _interopRequireWildcard(require("../../../../ui/ColorPalette"));
 var _Dropdown = _interopRequireDefault(require("../../../../ui/Dropdown"));
 var _styles = require("../../../../ui/styles");
 var _ToolbarButton = _interopRequireWildcard(require("../../../../ui/ToolbarButton"));
@@ -232,14 +232,16 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
       }, (0, _react2.jsx)("div", {
         "data-testid": "text-color-palette"
       }, (0, _react2.jsx)(_ColorPalette.default, {
-        palette: palette,
         onClick: function onClick(color) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
         selectedColor: pluginState.color,
-        textPalette: true,
-        hexToPaletteColor: _editorPalette.hexToEditorTextPaletteColor,
-        useSomewhatSemanticTextColorNames: useSomewhatSemanticTextColorNames
+        paletteOptions: {
+          palette: palette,
+          hexToPaletteColor: _editorPalette.hexToEditorTextPaletteColor,
+          paletteColorTooltipMessages: _ColorPalette.textPaletteTooltipMessages,
+          showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
+        }
       }))), (0, _react2.jsx)("span", {
         css: _styles.separatorStyles
       }));

package/dist/cjs/plugins/text-formatting/pm-plugins/smart-input-rule.js

@@ -23,10 +23,15 @@ function replaceTextUsingCaptureGroup(text) {
     var _match = (0, _slicedToArray2.default)(match, 4),
       prefix = _match[1],
       suffix = _match[3];
-    var replacement = (prefix || '') + text + (suffix || '');
+    var replacement = text + (suffix || '');
     var tr = state.tr,
       $to = state.selection.$to;
-    tr.replaceWith(start, end, state.schema.text(replacement, $to.marks()));
+    var startPos = start + (prefix || '').length;
+    var safePos = Math.min(
+    // I know it is almost impossible to have a negative value at this point.
+    // But, this is JS #trustnoone
+    Math.max(startPos, 0), end);
+    tr.replaceWith(safePos, end, state.schema.text(replacement, $to.marks()));
     tr.setSelection(_prosemirrorState.Selection.near(tr.doc.resolve(tr.selection.to)));
     return tr;
   };
@@ -76,6 +81,7 @@ function createSingleQuotesRules() {
   // apostrophe
   createReplacementRule('’', /(\w+)(')(\w+)$/)];
 }
+
 /**
  * Get replacement rules related to product
  */

package/dist/cjs/plugins/text-formatting/utils.js

@@ -3,34 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.nodeLen = exports.markActive = exports.isIgnorable = exports.isBlockNode = exports.isArrayContainsContent = exports.hasCode = exports.domIndex = exports.compareItemsArrays = exports.checkFormattingIsPresent = exports.anyMarkActive = void 0;
+exports.markActive = exports.isArrayContainsContent = exports.hasCode = exports.compareItemsArrays = exports.checkFormattingIsPresent = exports.anyMarkActive = void 0;
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _clearFormatting = require("./commands/clear-formatting");
-var nodeLen = function nodeLen(node) {
-  return node.nodeType === 3 && node.nodeValue ? node.nodeValue.length : node.childNodes.length;
-};
-exports.nodeLen = nodeLen;
-var isIgnorable = function isIgnorable(dom) {
-  return dom.pmViewDesc && dom.pmViewDesc.size === 0;
-};
-exports.isIgnorable = isIgnorable;
-var isBlockNode = function isBlockNode(dom) {
-  var desc = dom.pmViewDesc;
-  return desc && desc.node && desc.node.isBlock;
-};
-exports.isBlockNode = isBlockNode;
-var domIndex = function domIndex(node) {
-  if (node) {
-    for (var index = 0;; index++) {
-      node = node.previousSibling;
-      if (!node) {
-        return index;
-      }
-    }
-  }
-  return;
-};
-exports.domIndex = domIndex;
 var hasCode = function hasCode(state, pos) {
   var code = state.schema.marks.code;
   var node = pos >= 0 && state.doc.nodeAt(pos);

package/dist/cjs/plugins/type-ahead/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TYPE_AHEAD_POPUP_CONTENT_CLASS = exports.TYPE_AHEAD_DECORATION_KEY = exports.TYPE_AHEAD_DECORATION_ELEMENT_ID = exports.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = exports.NavigationDirection = exports.CloseSelectionOptions = void 0;
+exports.TYPE_AHEAD_POPUP_CONTENT_CLASS = exports.TYPE_AHEAD_DECORATION_KEY = exports.TYPE_AHEAD_DECORATION_ELEMENT_ID = exports.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = exports.CloseSelectionOptions = void 0;
 var TYPE_AHEAD_DECORATION_KEY = 'typeahead_decoration_key';
 exports.TYPE_AHEAD_DECORATION_KEY = TYPE_AHEAD_DECORATION_KEY;
 var TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = 'typeaheadDecoration';
@@ -12,12 +12,6 @@ var TYPE_AHEAD_POPUP_CONTENT_CLASS = 'fabric-editor-typeahead';
 exports.TYPE_AHEAD_POPUP_CONTENT_CLASS = TYPE_AHEAD_POPUP_CONTENT_CLASS;
 var TYPE_AHEAD_DECORATION_ELEMENT_ID = 'typeahaed_decoration_element_id';
 exports.TYPE_AHEAD_DECORATION_ELEMENT_ID = TYPE_AHEAD_DECORATION_ELEMENT_ID;
-var NavigationDirection;
-exports.NavigationDirection = NavigationDirection;
-(function (NavigationDirection) {
-  NavigationDirection[NavigationDirection["LEFT"] = -1] = "LEFT";
-  NavigationDirection[NavigationDirection["RIGHT"] = 1] = "RIGHT";
-})(NavigationDirection || (exports.NavigationDirection = NavigationDirection = {}));
 var CloseSelectionOptions;
 exports.CloseSelectionOptions = CloseSelectionOptions;
 (function (CloseSelectionOptions) {

package/dist/cjs/plugins/type-ahead/index.js

@@ -127,6 +127,8 @@ var TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
  *
  */
 var typeAheadPlugin = function typeAheadPlugin(options) {
+  var _options$useBetterTyp;
+  var useBetterTypeaheadNavigation = (_options$useBetterTyp = options === null || options === void 0 ? void 0 : options.useBetterTypeaheadNavigation) !== null && _options$useBetterTyp !== void 0 ? _options$useBetterTyp : true;
   var fireAnalyticsCallback = (0, _analytics.fireAnalyticsEvent)(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);
   var popupMountRef = {
     current: null
@@ -153,7 +155,8 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
             popupMountRef: popupMountRef,
             reactDispatch: dispatch,
             typeAheadHandlers: typeAhead,
-            createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent
+            createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent,
+            useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
           });
         }
       }, {

package/dist/cjs/plugins/type-ahead/pm-plugins/decorations.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSelectionInsideTypeAhead = exports.findDecorationElement = exports.factoryDecorations = void 0;
+exports.factoryDecorations = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
@@ -22,7 +22,8 @@ var _closeTypeAhead = require("../transforms/close-type-ahead");
 var factoryDecorations = function factoryDecorations(_ref) {
   var intl = _ref.intl,
     popupMountRef = _ref.popupMountRef,
-    createAnalyticsEvent = _ref.createAnalyticsEvent;
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    useBetterTypeaheadNavigation = _ref.useBetterTypeaheadNavigation;
   var createDecorations = function createDecorations(tr, _ref2) {
     var triggerHandler = _ref2.triggerHandler,
       inputMethod = _ref2.inputMethod,
@@ -94,7 +95,8 @@ var factoryDecorations = function factoryDecorations(_ref) {
         popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
         popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
         onUndoRedo: onUndoRedo,
-        reopenQuery: reopenQuery
+        reopenQuery: reopenQuery,
+        useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
       })), typeaheadComponent);
       shouldFocusCursorInsideQuery = false;
       return typeaheadComponent;
@@ -146,37 +148,4 @@ var factoryDecorations = function factoryDecorations(_ref) {
     removeDecorations: removeDecorations
   };
 };
-exports.factoryDecorations = factoryDecorations;
-var isSelectionInsideTypeAhead = function isSelectionInsideTypeAhead(_ref4) {
-  var decorationSet = _ref4.decorationSet,
-    selection = _ref4.selection;
-  if (!decorationSet || decorationSet === _prosemirrorView.DecorationSet.empty) {
-    return false;
-  }
-  var typeAheadDecorations = decorationSet.find(undefined, undefined, function (spec) {
-    return spec.isTypeAheadDecoration;
-  });
-  if (!typeAheadDecorations || typeAheadDecorations.length === 0) {
-    return false;
-  }
-  return typeAheadDecorations.some(function (dec) {
-    return dec.from === selection.from && dec.to === selection.to;
-  });
-};
-exports.isSelectionInsideTypeAhead = isSelectionInsideTypeAhead;
-var findDecorationElement = function findDecorationElement(_ref5) {
-  var selection = _ref5.selection,
-    decorationSet = _ref5.decorationSet;
-  if (!decorationSet || decorationSet === _prosemirrorView.DecorationSet.empty || !(selection instanceof _prosemirrorState.TextSelection) || !selection.$cursor) {
-    return null;
-  }
-  var pos = selection.$cursor.pos;
-  var decoration = decorationSet.find(pos, pos, function (spec) {
-    return spec === null || spec === void 0 ? void 0 : spec.isTypeAheadDecoration;
-  });
-  if (!decoration || decoration.length !== 1) {
-    return null;
-  }
-  return document.querySelector("#".concat(decoration[0].spec.key));
-};
-exports.findDecorationElement = findDecorationElement;
+exports.factoryDecorations = factoryDecorations;

package/dist/cjs/plugins/type-ahead/pm-plugins/main.js

@@ -31,12 +31,14 @@ function createPlugin(_ref) {
     popupMountRef = _ref.popupMountRef,
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     typeAheadHandlers = _ref.typeAheadHandlers,
-    getIntl = _ref.getIntl;
+    getIntl = _ref.getIntl,
+    useBetterTypeaheadNavigation = _ref.useBetterTypeaheadNavigation;
   var intl = getIntl();
   var _factoryDecorations = (0, _decorations.factoryDecorations)({
       intl: intl,
       popupMountRef: popupMountRef,
-      createAnalyticsEvent: createAnalyticsEvent
+      createAnalyticsEvent: createAnalyticsEvent,
+      useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
     }),
     createDecorations = _factoryDecorations.createDecorations,
     removeDecorations = _factoryDecorations.removeDecorations;

package/dist/cjs/plugins/type-ahead/ui/InputQuery.js

@@ -76,7 +76,8 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     onQueryFocus = _ref.onQueryFocus,
     onUndoRedo = _ref.onUndoRedo,
     editorView = _ref.editorView,
-    items = _ref.items;
+    items = _ref.items,
+    useBetterTypeaheadNavigation = _ref.useBetterTypeaheadNavigation;
   var ref = (0, _react.useRef)(document.createElement('span'));
   var inputRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
@@ -149,6 +150,19 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         // Some suggested the other workaround maybe listen on`keypress` instead of `keydown`
         if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
           if (selectedIndex === -1) {
+            if (useBetterTypeaheadNavigation) {
+              /**
+               * TODO DTR-1401: (also see ED-17200) There are two options
+               * here, either
+               * - set the index directly to 1 in WrapperTypeAhead.tsx's
+               *   `insertSelectedItem` at the cost of breaking some of the a11y
+               *   focus changes,
+               * - or do this jank at the cost of some small analytics noise.
+               *
+               * The focus behaviour still needs cleanup
+               */
+              selectPreviousItem();
+            }
             selectNextItem();
           }
           onItemSelect(event.shiftKey ? _typeAhead.SelectItemMode.SHIFT_ENTER : _typeAhead.SelectItemMode.ENTER);
@@ -156,18 +170,41 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         break;
       case 'Tab':
         if (selectedIndex === -1) {
+          if (useBetterTypeaheadNavigation) {
+            /**
+             * TODO DTR-1401: (also see ED-17200) There are two options
+             * here, either
+             * - set the index directly to 1 in WrapperTypeAhead.tsx's
+             *   `insertSelectedItem` at the cost of breaking some of the a11y
+             *   focus changes,
+             * - or do this jank at the cost of some small analytics noise.
+             *
+             */
+            selectPreviousItem();
+          }
           selectNextItem();
         }
+        // TODO DTR-1401: why is this calling select item when hitting tab? fix this in DTR-1401
         onItemSelect(_typeAhead.SelectItemMode.TAB);
         break;
       case 'ArrowDown':
-        if (selectedIndex === -1) {
+        if (useBetterTypeaheadNavigation) {
           selectNextItem();
+        } else {
+          // TODO DTR-1401: why were we preventing selection?
+          if (selectedIndex === -1) {
+            selectNextItem();
+          }
         }
         break;
       case 'ArrowUp':
-        if (selectedIndex === -1) {
+        if (useBetterTypeaheadNavigation) {
           selectPreviousItem();
+        } else {
+          // TODO DTR-1401: why were we preventing selection?
+          if (selectedIndex === -1) {
+            selectPreviousItem();
+          }
         }
         break;
     }
@@ -180,7 +217,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
+  }, [useBetterTypeaheadNavigation, onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
   var onClick = (0, _react.useCallback)(function (event) {
     var _inputRef$current;
     event.stopPropagation();

package/dist/cjs/plugins/type-ahead/ui/TypeAheadList.js

@@ -185,6 +185,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
             selectPreviousItem();
             event.preventDefault();
             break;
+
+          // TODO DTR-1401: why is this calling item click when hitting tab? fix this in DTR-1401
           case 'Tab':
             //Tab key quick inserts the selected item.
             onItemClick(_typeAhead.SelectItemMode.TAB, selectedIndex);

package/dist/cjs/plugins/type-ahead/ui/WrapperTypeAhead.js

@@ -29,7 +29,8 @@ var WrapperTypeAhead = /*#__PURE__*/_react.default.memo(function (_ref) {
     inputMethod = _ref.inputMethod,
     getDecorationPosition = _ref.getDecorationPosition,
     reopenQuery = _ref.reopenQuery,
-    onUndoRedo = _ref.onUndoRedo;
+    onUndoRedo = _ref.onUndoRedo,
+    useBetterTypeaheadNavigation = _ref.useBetterTypeaheadNavigation;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     closed = _useState2[0],
@@ -51,15 +52,17 @@ var WrapperTypeAhead = /*#__PURE__*/_react.default.memo(function (_ref) {
   var selectNextItem = (0, _react.useMemo)(function () {
     return (0, _utils.moveSelectedIndex)({
       editorView: editorView,
-      direction: 'next'
+      direction: 'next',
+      useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
     });
-  }, [editorView]);
+  }, [editorView, useBetterTypeaheadNavigation]);
   var selectPreviousItem = (0, _react.useMemo)(function () {
     return (0, _utils.moveSelectedIndex)({
       editorView: editorView,
-      direction: 'previous'
+      direction: 'previous',
+      useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
     });
-  }, [editorView]);
+  }, [editorView, useBetterTypeaheadNavigation]);
   var cancel = (0, _react.useCallback)(function (_ref2) {
     var setSelectionAt = _ref2.setSelectionAt,
       addPrefixTrigger = _ref2.addPrefixTrigger,
@@ -110,6 +113,7 @@ var WrapperTypeAhead = /*#__PURE__*/_react.default.memo(function (_ref) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_InputQuery.InputQuery, {
+    useBetterTypeaheadNavigation: useBetterTypeaheadNavigation,
     triggerQueryPrefix: triggerHandler.trigger,
     onQueryChange: setQuery,
     onItemSelect: insertSelectedItem,

package/dist/cjs/plugins/type-ahead/utils.js

@@ -3,31 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadListAriaLabels = exports.getTypeAheadHandler = exports.getPluginState = exports.findTypeAheadDecorations = exports.findHandlerByTrigger = exports.findHandler = void 0;
-var _prosemirrorState = require("prosemirror-state");
-var _prosemirrorView = require("prosemirror-view");
+exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadListAriaLabels = exports.getTypeAheadHandler = exports.getPluginState = exports.findHandlerByTrigger = exports.findHandler = void 0;
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _key = require("./pm-plugins/key");
 var _updateSelectedIndex = require("./commands/update-selected-index");
 var _statsModifier = require("./stats-modifier");
 var _messages = require("./messages");
-var findTypeAheadDecorations = function findTypeAheadDecorations(state) {
-  var selection = state.selection;
-  var _typeAheadPluginKey$g = _key.pluginKey.getState(state),
-    decorationSet = _typeAheadPluginKey$g.decorationSet;
-  if (!decorationSet || decorationSet === _prosemirrorView.DecorationSet.empty || !(selection instanceof _prosemirrorState.TextSelection) || !selection.$cursor) {
-    return null;
-  }
-  var pos = selection.$cursor.pos;
-  var decoration = decorationSet.find(pos, pos, function (spec) {
-    return spec === null || spec === void 0 ? void 0 : spec.isTypeAheadDecoration;
-  });
-  if (!decoration || decoration.length !== 1) {
-    return null;
-  }
-  return decoration[0];
-};
-exports.findTypeAheadDecorations = findTypeAheadDecorations;
 var isTypeAheadHandler = function isTypeAheadHandler(handler) {
   return handler && Object.values(_typeAhead.TypeAheadAvailableNodes).includes(handler.id) && typeof handler.trigger === 'string' && typeof handler.selectItem === 'function' && typeof handler.getItems === 'function';
 };
@@ -35,8 +16,8 @@ var isTypeAheadHandler = function isTypeAheadHandler(handler) {
 /** Is a typeahead plugin open? */
 exports.isTypeAheadHandler = isTypeAheadHandler;
 var isTypeAheadOpen = function isTypeAheadOpen(editorState) {
-  var _typeAheadPluginKey$g2, _typeAheadPluginKey$g3;
-  return (_key.pluginKey === null || _key.pluginKey === void 0 ? void 0 : (_typeAheadPluginKey$g2 = _key.pluginKey.getState(editorState)) === null || _typeAheadPluginKey$g2 === void 0 ? void 0 : (_typeAheadPluginKey$g3 = _typeAheadPluginKey$g2.decorationSet) === null || _typeAheadPluginKey$g3 === void 0 ? void 0 : _typeAheadPluginKey$g3.find().length) > 0;
+  var _typeAheadPluginKey$g, _typeAheadPluginKey$g2;
+  return (_key.pluginKey === null || _key.pluginKey === void 0 ? void 0 : (_typeAheadPluginKey$g = _key.pluginKey.getState(editorState)) === null || _typeAheadPluginKey$g === void 0 ? void 0 : (_typeAheadPluginKey$g2 = _typeAheadPluginKey$g.decorationSet) === null || _typeAheadPluginKey$g2 === void 0 ? void 0 : _typeAheadPluginKey$g2.find().length) > 0;
 };
 exports.isTypeAheadOpen = isTypeAheadOpen;
 var getPluginState = function getPluginState(editorState) {
@@ -84,7 +65,8 @@ var findHandlerByTrigger = function findHandlerByTrigger(_ref) {
 exports.findHandlerByTrigger = findHandlerByTrigger;
 var moveSelectedIndex = function moveSelectedIndex(_ref2) {
   var editorView = _ref2.editorView,
-    direction = _ref2.direction;
+    direction = _ref2.direction,
+    useBetterTypeaheadNavigation = _ref2.useBetterTypeaheadNavigation;
   return function () {
     var typeAheadState = getPluginState(editorView.state);
     if (!typeAheadState) {
@@ -96,7 +78,26 @@ var moveSelectedIndex = function moveSelectedIndex(_ref2) {
     var nextIndex;
     if (direction === 'next') {
       stats.increaseArrowDown();
-      nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
+      if (useBetterTypeaheadNavigation) {
+        /**
+         * See: https://product-fabric.atlassian.net/browse/ED-17200
+         * `selectedIndex` is forced to -1 now to not immediately focus the typeahead
+         * and only do so when there is explicit logic to focus into the typeahead
+         * options.
+         *
+         * This check for "set index to 1 when -1"
+         * - is a temporary workaround to get back the previous behaviour without
+         *    entirely reverting the a11y improvements
+         *
+         */
+        if (selectedIndex === -1 && items.length > 1) {
+          nextIndex = 1;
+        } else {
+          nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
+        }
+      } else {
+        nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
+      }
     } else {
       stats.increaseArrowUp();
       nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;

package/dist/cjs/test-utils.js

@@ -28,12 +28,6 @@ Object.defineProperty(exports, "PortalProviderAPI", {
     return _PortalProvider.PortalProviderAPI;
   }
 });
-Object.defineProperty(exports, "Preset", {
-  enumerable: true,
-  get: function get() {
-    return _preset.Preset;
-  }
-});
 exports.createPMSchemaAndPlugins = void 0;
 Object.defineProperty(exports, "createTypeAheadTools", {
   enumerable: true,
@@ -48,11 +42,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _prosemirrorState = require("prosemirror-state");
 var _sortByOrder = require("./create-editor/sort-by-order");
-var _preset = require("./labs/next/presets/preset");
 var _createSchema = require("./create-editor/create-schema");
 var _base = _interopRequireDefault(require("./plugins/base"));
 var _pluginKey = require("./plugins/analytics/plugin-key");
 var _api = require("./plugins/type-ahead/api");
+var _preset = require("@atlaskit/editor-common/preset");
 var _PortalProvider = require("./ui/PortalProvider");
 var _eventDispatcher = require("./event-dispatcher");
 var _selection = require("./plugins/selection/gap-cursor/selection");
@@ -106,13 +100,11 @@ function lightProcessPluginsList(editorPlugins) {
   });
 }
 var createPMSchemaAndPlugins = function createPMSchemaAndPlugins() {
-  var preset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new _preset.Preset();
+  var inputPreset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new _preset.EditorPresetBuilder();
   return function (pluginFactoryParams) {
     var editorPlugins = [];
-    if (!preset.has(_base.default)) {
-      preset.add(_base.default);
-    }
-    editorPlugins = preset.getEditorPlugins();
+    var preset = inputPreset.has(_base.default) ? inputPreset : inputPreset.add(_base.default);
+    editorPlugins = preset.build();
     var editorConfig = lightProcessPluginsList(editorPlugins);
     var schema = (0, _createSchema.createSchema)(editorConfig);
     var plugins = editorConfig.plugins.sort((0, _sortByOrder.sortByOrder)('plugins')).map(function (_ref) {

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

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mainToolbarCustomComponentsSlotStyle = exports.TableControlsPadding = exports.MainToolbar = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
@@ -15,7 +16,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 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); }
-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; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
 var TableControlsPadding = 20;
 exports.TableControlsPadding = TableControlsPadding;
 var mainToolbarWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), "var(--ds-surface, white)", TableControlsPadding);
@@ -25,10 +26,18 @@ var StickyToolbar = function StickyToolbar(props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     top = _useState2[0],
     setTop = _useState2[1];
+
+  // ED-15802: if externalToolbarRef is passed in, set top to externalToolbarRef?.current?.clientHeight
+  // else if offsetTop is a number set top to offsetTop
+  // otherwise top is 0 as initial state
   (0, _react.useEffect)(function () {
     var _props$externalToolba, _props$externalToolba2;
-    setTop(((_props$externalToolba = props.externalToolbarRef) === null || _props$externalToolba === void 0 ? void 0 : (_props$externalToolba2 = _props$externalToolba.current) === null || _props$externalToolba2 === void 0 ? void 0 : _props$externalToolba2.clientHeight) || 0);
-  }, [setTop, props.externalToolbarRef]);
+    if ((_props$externalToolba = props.externalToolbarRef) !== null && _props$externalToolba !== void 0 && (_props$externalToolba2 = _props$externalToolba.current) !== null && _props$externalToolba2 !== void 0 && _props$externalToolba2.clientHeight) {
+      setTop(props.externalToolbarRef.current.clientHeight);
+    } else {
+      setTop(props.offsetTop || 0);
+    }
+  }, [props.externalToolbarRef, props.offsetTop]);
   return (0, _react2.jsx)("div", {
     css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          top: ", "px;\n        "])), top)],
     "data-testid": "ak-editor-main-toolbar",
@@ -41,13 +50,39 @@ var FixedToolbar = function FixedToolbar(props) {
     "data-testid": "ak-editor-main-toolbar"
   }, props.children);
 };
+
+/**
+ * ED-15802: Scenarios when a sticky bar is used:
+ * 1. useStickyToolbar is true
+ * 2. useStickyToolbar is a DOM element
+ * 3. useStickyToolbar is an object and has offsetTop key;
+ */
+var getStickyParameters = function getStickyParameters(configuration) {
+  // const isUsingStickyOffset, isHTMLElement is used so TS can properly infer types.
+  var isHTMLElement = (0, _typeof2.default)(configuration) === 'object' && !('offsetTop' in configuration);
+  var isUsingStickyOffset = (0, _typeof2.default)(configuration) === 'object' && 'offsetTop' in configuration;
+  if ((0, _typeof2.default)(configuration) !== 'object') {
+    return {
+      externalToolbarRef: undefined,
+      offsetTop: undefined
+    };
+  }
+  if (isUsingStickyOffset) {
+    return {
+      offsetTop: configuration.offsetTop
+    };
+  }
+  if (isHTMLElement) {
+    return {
+      externalToolbarRef: configuration
+    };
+  }
+};
 var MainToolbar = function MainToolbar(_ref) {
   var useStickyToolbar = _ref.useStickyToolbar,
     children = _ref.children;
-  if (!!useStickyToolbar) {
-    return (0, _react2.jsx)(StickyToolbar, {
-      externalToolbarRef: typeof useStickyToolbar === 'boolean' ? undefined : useStickyToolbar
-    }, children);
+  if (useStickyToolbar) {
+    return (0, _react2.jsx)(StickyToolbar, getStickyParameters(useStickyToolbar), children);
   }
   return (0, _react2.jsx)(FixedToolbar, null, children);
 };

package/dist/cjs/ui/ColorPalette/index.js

@@ -3,7 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ColorPalette", {
+  enumerable: true,
+  get: function get() {
+    return _uiColor.ColorPalette;
+  }
+});
+Object.defineProperty(exports, "backgroundPaletteTooltipMessages", {
+  enumerable: true,
+  get: function get() {
+    return _uiColor.backgroundPaletteTooltipMessages;
+  }
+});
 exports.default = void 0;
+Object.defineProperty(exports, "textPaletteTooltipMessages", {
+  enumerable: true,
+  get: function get() {
+    return _uiColor.textPaletteTooltipMessages;
+  }
+});
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _default = _uiColor.ColorPalette;
 exports.default = _default;

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

@@ -143,13 +143,17 @@ var ColorPickerButton = function ColorPickerButton(props) {
       isOpenedByKeyboard: isOpenedByKeyboard,
       isPopupPositioned: isPopupPositioned
     }, (0, _react2.jsx)(ColorPaletteWithListeners, {
-      palette: props.colorPalette,
       cols: props.cols,
       selectedColor: selectedColor,
       onClick: onColorSelected,
       handleClickOutside: togglePopup,
       handleEscapeKeydown: handleEsc,
-      hexToPaletteColor: props.hexToPaletteColor
+      paletteOptions: {
+        palette: props.colorPalette,
+        hexToPaletteColor: props.hexToPaletteColor,
+        showSomewhatSemanticTooltips: props.showSomewhatSemanticTooltips,
+        paletteColorTooltipMessages: props.paletteColorTooltipMessages
+      }
     }))));
   };
   var title = props.title || '';

package/dist/cjs/ui/ConfigPanel/Fields/Expand.js

@@ -40,6 +40,7 @@ function Expand(_ref) {
     expanded = _useState2[0],
     setExpanded = _useState2[1];
   return (0, _react2.jsx)("div", {
+    "data-testid": "expand-config-field",
     css: expandContainer
   }, (0, _react2.jsx)("div", {
     css: expandControl