@atlaskit/editor-core 176.0.2 → 177.0.0

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

@@ -8,14 +8,54 @@ exports.typeAheadListMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 
 var typeAheadListMessages = (0, _reactIntlNext.defineMessages)({
-  typeAheadResultLabel: {
-    id: 'fabric.editor.typeAheadResultLabel',
-    defaultMessage: 'TypeAhead results',
+  typeAheadPopupLabel: {
+    id: 'fabric.editor.typeAhead.popupLabel',
+    defaultMessage: 'Typeahead results',
     description: 'the result of a typeahead, similar to autocomplete results+'
   },
+  quickInsertPopupLabel: {
+    id: 'fabric.editor.typeAhead.quickInsertPopupLabel',
+    defaultMessage: 'Shortcuts for inserts and formatting',
+    description: 'the result of a quick insert typeahead, similar to autocomplete results+'
+  },
+  quickInsertInputLabel: {
+    id: 'fabric.editor.typeAhead.quickInsertInputLabel',
+    defaultMessage: 'Begin typing to search or filter shortcut options',
+    description: 'assisitve text for typeahed input field'
+  },
+  emojiPopupLabel: {
+    id: 'fabric.editor.typeahead.emojiPopupLabel',
+    defaultMessage: 'Emoji shortcuts',
+    description: 'the result of a emoji typeahead, similar to autocomplete results+'
+  },
+  emojiInputLabel: {
+    id: 'fabric.editor.typeahead.emojiInputLabel',
+    defaultMessage: 'Begin typing to search or filter emoji options',
+    description: 'assisitve text for typeahed input field'
+  },
+  mentionPopupLabel: {
+    id: 'fabric.editor.typeahead.mentionPopupLabel',
+    defaultMessage: 'Users you can tag',
+    description: 'the aria label of a mention typeahead popup'
+  },
+  mentionInputLabel: {
+    id: 'fabric.editor.typeahead.mentionInputLabel',
+    defaultMessage: 'Begin typing to search for users to tag',
+    description: 'assisitve text for typeahed input field'
+  },
+  metionListItemLabel: {
+    id: 'fabric.editor.typeahead.metionListItemLabel',
+    defaultMessage: 'User {name} @{shortName}',
+    description: 'assistive text for user mention items username and nickname'
+  },
+  emojiListItemLabel: {
+    id: 'fabric.editor.typeahead.emojiListItemLabel',
+    defaultMessage: 'Emoji {name} Text Shortcut {shortcut}',
+    description: 'assistive text for emoji name and shortcut'
+  },
   inputQueryAssistiveLabel: {
     id: 'fabric.editor.inputQueryAssistiveTxt',
-    defaultMessage: 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
+    defaultMessage: 'When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.',
     description: 'Assistive text to the user when using typeahead shortcut'
   },
   searchResultsLabel: {

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

@@ -67,7 +67,6 @@ var factoryDecorations = function factoryDecorations(_ref) {
 
       typeaheadComponent.setAttribute('id', decorationId);
       typeaheadComponent.setAttribute('role', 'search');
-      typeaheadComponent.setAttribute('aria-label', "On ".concat(triggerHandler.id));
       typeaheadComponent.dataset.typeAheadQuery = 'true';
       typeaheadComponent.dataset.trigger = triggerHandler.trigger; // This line below seems weird,
       // we need that cuz the clickAreaHelper

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

@@ -69,6 +69,22 @@ var isSelectAllShortcut = function isSelectAllShortcut(event) {
   return (event.ctrlKey || event.metaKey) && key === 'a';
 };
 
+var getAriaLabel = function getAriaLabel(triggerPrefix, intl) {
+  switch (triggerPrefix) {
+    case '@':
+      return _messages.typeAheadListMessages.mentionInputLabel;
+
+    case '/':
+      return _messages.typeAheadListMessages.quickInsertInputLabel;
+
+    case ':':
+      return _messages.typeAheadListMessages.emojiInputLabel;
+
+    default:
+      return _messages.typeAheadListMessages.quickInsertInputLabel;
+  }
+};
+
 var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
   var triggerQueryPrefix = _ref.triggerQueryPrefix,
       cancel = _ref.cancel,
@@ -465,7 +481,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     style: {
       display: 'none'
     }
-  }, intl.formatMessage(_messages.typeAheadListMessages.inputQueryAssistiveLabel)), (0, _react2.jsx)(_AssistiveText.AssistiveText, {
+  }, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(_messages.typeAheadListMessages.inputQueryAssistiveLabel)), (0, _react2.jsx)(_AssistiveText.AssistiveText, {
     assistiveText: items.length === 0 ? intl.formatMessage(_messages.typeAheadListMessages.noSearchResultsLabel, {
       itemsLength: items.length
     }) : '',

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

@@ -70,7 +70,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       onItemClick = _ref2.onItemClick,
       intl = _ref2.intl,
       fitHeight = _ref2.fitHeight,
-      decorationElement = _ref2.decorationElement;
+      decorationElement = _ref2.decorationElement,
+      triggerHandler = _ref2.triggerHandler;
   var listRef = (0, _react.useRef)();
   var listContainerRef = (0, _react.useRef)(null);
   var lastVisibleIndexes = (0, _react.useRef)({
@@ -253,6 +254,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
         key = _ref4.key,
         style = _ref4.style,
         parent = _ref4.parent;
+    var currentItem = items[index];
     return (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
       key: key,
       cache: cache,
@@ -266,21 +268,24 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       "data-testid": "list-item-height-observed-".concat(index)
     }, (0, _react2.jsx)(_TypeAheadListItem.TypeAheadListItem, {
       key: items[index].title,
-      item: items[index],
+      item: currentItem,
       itemsLength: items.length,
       itemIndex: index,
       selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick
+      onItemClick: actions.onItemClick,
+      ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel
     }))));
   };
 
+  var popupAriaLabel = (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;
+
   if (!Array.isArray(items)) {
     return null;
   }
 
   var menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector("[role='combobox']")) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID;
   return (0, _react2.jsx)(_menu.MenuGroup, {
-    "aria-label": intl.formatMessage(_messages.typeAheadListMessages.typeAheadResultLabel),
+    "aria-label": popupAriaLabel,
     "aria-relevant": "additions removals"
   }, (0, _react2.jsx)("div", {
     id: menuGroupId,

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

@@ -103,7 +103,8 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
       itemsLength = _ref3.itemsLength,
       selectedIndex = _ref3.selectedIndex,
       onItemClick = _ref3.onItemClick,
-      itemIndex = _ref3.itemIndex;
+      itemIndex = _ref3.itemIndex,
+      ariaLabel = _ref3.ariaLabel;
 
   /**
    * To select and highlight the first Item when no item is selected
@@ -152,21 +153,23 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
     var listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
     return (0, _react2.jsx)("div", {
       "aria-selected": isSelected,
-      "aria-label": title,
       role: "option",
+      "aria-label": ariaLabel,
       "aria-setsize": itemsLength,
       tabIndex: 0,
       css: listItemClasses,
       className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '') //CSS classes added for test cases purpose
       ,
       ref: customItemRef
+    }, (0, _react2.jsx)("div", {
+      "aria-hidden": true
     }, (0, _react2.jsx)(Comp, {
       onClick: insertSelectedItem,
       isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
       ,
       onHover: noop
-    }));
-  }, [customRenderItem, insertSelectedItem, isSelected, title, customItemRef, itemsLength]);
+    })));
+  }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem]);
 
   if (customItem) {
     return customItem;
@@ -179,7 +182,7 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
     iconBefore: elementIcon,
     isSelected: isSelected,
     "aria-selected": isSelected,
-    "aria-label": item.title,
+    "aria-label": title,
     "aria-setsize": itemsLength,
     role: "option",
     ref: buttonItemRef

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

@@ -236,7 +236,8 @@ var TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
     onItemClick: onItemInsert,
     fitHeight: fitHeight,
     editorView: editorView,
-    decorationElement: anchorElement
+    decorationElement: anchorElement,
+    triggerHandler: triggerHandler
   })));
 });
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadHandler = exports.getPluginState = exports.findTypeAheadDecorations = exports.findHandlerByTrigger = exports.findHandler = void 0;
+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");
 
@@ -17,6 +17,8 @@ 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;
 
@@ -144,4 +146,44 @@ var moveSelectedIndex = function moveSelectedIndex(_ref2) {
   };
 };
 
-exports.moveSelectedIndex = moveSelectedIndex;
+exports.moveSelectedIndex = moveSelectedIndex;
+
+var getTypeAheadListAriaLabels = function getTypeAheadListAriaLabels(trigger, intl, item) {
+  var _item$mention, _item$mention2, _item$emoji, _item$emoji2, _item$emoji3;
+
+  switch (trigger) {
+    case '@':
+      return {
+        popupAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.mentionPopupLabel),
+        listItemAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.metionListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : (_item$mention = item.mention) === null || _item$mention === void 0 ? void 0 : _item$mention.name) || '',
+          shortName: (item === null || item === void 0 ? void 0 : (_item$mention2 = item.mention) === null || _item$mention2 === void 0 ? void 0 : _item$mention2.mentionName) || ''
+        })
+      };
+
+    case '/':
+      return {
+        popupAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.quickInsertPopupLabel),
+        listItemAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.emojiListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : item.title) || '',
+          shortcut: (item === null || item === void 0 ? void 0 : (_item$emoji = item.emoji) === null || _item$emoji === void 0 ? void 0 : _item$emoji.shortName) || ''
+        })
+      };
+
+    case ':':
+      return {
+        popupAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.emojiPopupLabel),
+        listItemAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.emojiListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : (_item$emoji2 = item.emoji) === null || _item$emoji2 === void 0 ? void 0 : _item$emoji2.name) || '',
+          shortcut: (item === null || item === void 0 ? void 0 : (_item$emoji3 = item.emoji) === null || _item$emoji3 === void 0 ? void 0 : _item$emoji3.shortName) || ''
+        })
+      };
+
+    default:
+      return {
+        popupAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.typeAheadPopupLabel)
+      };
+  }
+};
+
+exports.getTypeAheadListAriaLabels = getTypeAheadListAriaLabels;

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

@@ -41,6 +41,8 @@ var _api = require("../../../type-ahead/api");
 
 var _commands = require("../../commands");
 
+var _keymaps2 = require("@atlaskit/editor-common/keymaps");
+
 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; }
@@ -117,7 +119,8 @@ var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: handleUndo,
         disabled: !canUndo || disabled,
-        "aria-label": labelUndo,
+        "aria-label": (0, _keymaps.tooltip)(_keymaps.undo, labelUndo),
+        "aria-keyshortcuts": (0, _keymaps2.getAriaKeyshortcuts)(_keymaps.undo),
         title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
           description: labelUndo,
           keymap: _keymaps.undo
@@ -139,7 +142,8 @@ var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
           label: ""
         }),
         testId: "ak-editor-toolbar-button-redo",
-        "aria-label": labelRedo
+        "aria-label": (0, _keymaps.tooltip)(_keymaps.redo, labelRedo),
+        "aria-keyshortcuts": (0, _keymaps2.getAriaKeyshortcuts)(_keymaps.redo)
       }), (0, _react2.jsx)("span", {
         css: _styles.separatorStyles
       }));

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

@@ -29,6 +29,8 @@ var _ToolbarButton = _interopRequireDefault(require("../../ToolbarButton"));
 
 var _keymaps = require("../../../keymaps");
 
+var _keymaps2 = require("@atlaskit/editor-common/keymaps");
+
 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; }
@@ -77,8 +79,9 @@ var AlignmentButton = /*#__PURE__*/function (_PureComponent) {
           description: label,
           keymap: shortcut
         }),
-        "aria-label": label,
+        "aria-label": shortcut ? (0, _keymaps.tooltip)(shortcut, label) : label,
         "aria-pressed": isSelected,
+        "aria-keyshortcuts": (0, _keymaps2.getAriaKeyshortcuts)(shortcut),
         onClick: this.onClick,
         iconBefore: content
       });

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

@@ -34,7 +34,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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)(), (0, _tokens.token)('elevation.surface', 'white'), TableControlsPadding);
-var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.gridSize)(), _editorSharedStyles.akEditorGridLineZIndex + _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, (0, _tokens.token)('color.border', _colors.N30));
+var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.gridSize)(), _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, (0, _tokens.token)('color.border', _colors.N30));
 
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = (0, _react.useState)(0),

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

@@ -104,7 +104,8 @@ var EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
 
     var contextPanelWidth = _ref.width;
     return (0, _react2.jsx)(_ToolbarArrowKeyNavigationProvider.ToolbarArrowKeyNavigationProvider, {
-      editorView: props.editorView
+      editorView: props.editorView,
+      childComponentSelector: "[data-testid='ak-editor-main-toolbar']"
     }, (0, _react2.jsx)("div", {
       css: (0, _MainToolbar.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/cjs/ui/CollapsedEditor/index.js

@@ -21,6 +21,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _ui = require("@atlaskit/editor-common/ui");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _editor = _interopRequireDefault(require("../../editor"));
@@ -88,10 +90,10 @@ var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
       }
 
       if (!this.props.isExpanded) {
-        return /*#__PURE__*/_react.default.createElement(_ChromeCollapsed.default, {
+        return /*#__PURE__*/_react.default.createElement(_ui.IntlProviderIfMissingWrapper, null, /*#__PURE__*/_react.default.createElement(_ChromeCollapsed.default, {
           onFocus: this.props.onFocus,
           text: this.props.placeholder
-        });
+        }));
       }
 
       return /*#__PURE__*/_react.default.cloneElement(child, {

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

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

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

@@ -45,8 +45,6 @@ var _addCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/add-circle
 
 var _messages = require("../messages");
 
-var _FormContent = _interopRequireDefault(require("../FormContent"));
-
 var _utils = require("../utils");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -291,7 +289,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,
@@ -301,7 +300,7 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
       var children = this.renderActions();
       return (0, _react2.jsx)(_react.Fragment, null, error && (0, _react2.jsx)(FieldsetError, {
         message: error
-      }), (0, _react2.jsx)("div", null, options.showTitle && (0, _react2.jsx)("h5", null, label), (0, _react2.jsx)(_FormContent.default, {
+      }), (0, _react2.jsx)("div", null, options.showTitle && (0, _react2.jsx)("h5", null, label), (0, _react2.jsx)(FormComponent, {
         fields: selectedFields,
         parentName: name,
         extensionManifest: extensionManifest,

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

@@ -152,7 +152,8 @@ function FieldComponent(_ref) {
         onFieldChange: onFieldChange,
         extensionManifest: extensionManifest,
         parameters: defaultValue || {},
-        error: error
+        error: error,
+        formComponent: FormContent
       });
 
     case 'user':

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

@@ -88,7 +88,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 var contentStyles = function contentStyles(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
   }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _tokens.token)('color.border.focused', '#8cf'), _styles17.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, _styles11.layoutStyles, _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.inputWrapper = exports.containerWithProvider = exports.container = exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = exports.RECENT_SEARCH_WIDTH_IN_PX = exports.RECENT_SEARCH_HEIGHT_IN_PX = void 0;
+exports.inputWrapper = exports.containerWithProvider = exports.container = exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = exports.RECENT_SEARCH_WIDTH_IN_PX = exports.RECENT_SEARCH_HEIGHT_IN_PX = exports.LINKPICKER_HEIGHT_IN_PX = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,6 +19,8 @@ var RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
 exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX;
 var RECENT_SEARCH_HEIGHT_IN_PX = 360;
 exports.RECENT_SEARCH_HEIGHT_IN_PX = RECENT_SEARCH_HEIGHT_IN_PX;
+var LINKPICKER_HEIGHT_IN_PX = 570;
+exports.LINKPICKER_HEIGHT_IN_PX = LINKPICKER_HEIGHT_IN_PX;
 var inputWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
 exports.inputWrapper = inputWrapper;
 var container = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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);

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

@@ -37,32 +37,33 @@ exports.KeyDownHandlerContext = KeyDownHandlerContext;
 
 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 = (0, _react.useRef)(null);
-  var currentSelectedItemIndex = (0, _react.useRef)(0);
-
-  var incrementIndex = function incrementIndex(list) {
-    if (currentSelectedItemIndex.current === list.length - 1) {
-      currentSelectedItemIndex.current = 0;
+  var selectedItemIndex = (0, _react.useRef)(0);
+  var incrementIndex = (0, _react.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 = (0, _react.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() {
@@ -70,14 +71,23 @@ var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigationProvid
 
     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 = {
@@ -86,7 +96,7 @@ var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigationProvid
     handleTab: handleTab
   };
   (0, _react.useLayoutEffect)(function () {
-    if (!wrapperRef.current) {
+    if (!wrapperRef.current || disableArrowKeyNavigation) {
       return;
     }
 
@@ -97,17 +107,17 @@ var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigationProvid
      */
 
     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;
       }
 
@@ -120,25 +130,37 @@ var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigationProvid
 
 
       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.default.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef
@@ -161,6 +183,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');
   });
 }