@atlaskit/editor-core 153.1.3 → 155.0.0

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

@@ -27,14 +27,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 
-var _backgroundColor = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/background-color"));
-
 var _ColorPalette = _interopRequireDefault(require("../../../../ui/ColorPalette"));
 
 var _textColorPalette = require("../../../../ui/ColorPalette/Palettes/textColorPalette");
@@ -57,9 +53,9 @@ 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { (0, _defineProperty2.default)(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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -67,22 +63,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
 var EXPERIMENT_GROUP_CONTROL = 'control';
-var EXPERIMENT_GROUP_SUBJECT = 'subject';
 var messages = (0, _reactIntlNext.defineMessages)({
   textColor: {
     id: 'fabric.editor.textColor',
     defaultMessage: 'Text color',
     description: ''
-  },
-  moreColors: {
-    id: 'fabric.editor.textColor.moreColors',
-    defaultMessage: 'More colors',
-    description: 'More colors'
-  },
-  lessColors: {
-    id: 'fabric.editor.textColor.lessColors',
-    defaultMessage: 'Fewer colors',
-    description: 'Fewer colors'
   }
 });
 exports.messages = messages;
@@ -103,8 +88,7 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isOpen: false,
-      isShowingMoreColors: false
+      isOpen: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeColor", function (color) {
       return commands.changeColor(color)(_this.props.editorView.state, _this.props.editorView.dispatch);
@@ -114,8 +98,7 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         var _this$props$pluginSta = _this.props.pluginState,
             palette = _this$props$pluginSta.palette,
             paletteExpanded = _this$props$pluginSta.paletteExpanded,
-            defaultColor = _this$props$pluginSta.defaultColor;
-        var isShowingMoreColors = _this.state.isShowingMoreColors; // we store color names in analytics
+            defaultColor = _this$props$pluginSta.defaultColor; // we store color names in analytics
 
         var swatch = (paletteExpanded || palette).find(function (sw) {
           return sw.value === color;
@@ -126,7 +109,6 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
 
         _this.dispatchAnalyticsEvent(_this.buildAnalyticsSelectColor({
           color: (swatch ? swatch.label : color).toLowerCase(),
-          isShowingMoreColors: isShowingMoreColors,
           isNewColor: isNewColor
         }));
 
@@ -149,35 +131,22 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenChange", function (_ref) {
       var isOpen = _ref.isOpen,
           logCloseEvent = _ref.logCloseEvent;
-      var _this$props$pluginSta2 = _this.props.pluginState,
-          palette = _this$props$pluginSta2.palette,
-          color = _this$props$pluginSta2.color;
-      var isShowingMoreColors = _this.state.isShowingMoreColors; // pre-expand if a non-standard colour has been selected
-
-      var isExtendedPaletteSelected = !palette.find(function (swatch) {
-        return swatch.value === color;
-      });
 
       _this.setState({
-        isOpen: isOpen,
-        isShowingMoreColors: isExtendedPaletteSelected || isShowingMoreColors
+        isOpen: isOpen
       });
 
       if (logCloseEvent) {
         _this.dispatchAnalyticsEvent(_this.buildAnalyticsPalette(isOpen ? _analytics.ACTION.OPENED : _analytics.ACTION.CLOSED, {
-          isShowingMoreColors: isExtendedPaletteSelected || isShowingMoreColors,
           noSelect: isOpen === false
         }));
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hide", function (e) {
-      var _this$state = _this.state,
-          isOpen = _this$state.isOpen,
-          isShowingMoreColors = _this$state.isShowingMoreColors;
+      var isOpen = _this.state.isOpen;
 
       if (isOpen === true) {
         _this.dispatchAnalyticsEvent(_this.buildAnalyticsPalette(_analytics.ACTION.CLOSED, {
-          isShowingMoreColors: isShowingMoreColors,
           noSelect: true
         }));
 
@@ -186,23 +155,6 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleShowMoreToggle", function (e) {
-      // Prevent the event from bubbling up and triggering the hide handler.
-      e.preventDefault();
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-
-      _this.setState(function (state) {
-        _this.dispatchAnalyticsEvent(_this.buildAnalyticsShowMore(state.isShowingMoreColors ? _analytics.ACTION.CLOSED : _analytics.ACTION.OPENED, {
-          showMoreButton: !state.isShowingMoreColors,
-          showLessButton: state.isShowingMoreColors
-        }));
-
-        return {
-          isShowingMoreColors: !state.isShowingMoreColors
-        };
-      });
-    });
     return _this;
   }
 
@@ -211,9 +163,7 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$state2 = this.state,
-          isOpen = _this$state2.isOpen,
-          isShowingMoreColors = _this$state2.isShowingMoreColors;
+      var isOpen = this.state.isOpen;
       var _this$props = this.props,
           popupsMountPoint = _this$props.popupsMountPoint,
           popupsBoundariesElement = _this$props.popupsBoundariesElement,
@@ -222,10 +172,9 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           pluginState = _this$props.pluginState,
           paletteExpanded = _this$props.pluginState.paletteExpanded,
           formatMessage = _this$props.intl.formatMessage,
-          showMoreColorsToggle = _this$props.showMoreColorsToggle,
           disabled = _this$props.disabled;
       var labelTextColor = formatMessage(messages.textColor);
-      var palette = isShowingMoreColors && paletteExpanded ? paletteExpanded : pluginState.palette;
+      var palette = paletteExpanded || pluginState.palette;
       var fitWidth;
 
       if (document.body.clientWidth <= 740) {
@@ -251,6 +200,8 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           disabled: disabled || pluginState.disabled,
           selected: isOpen,
           "aria-label": labelTextColor,
+          "aria-expanded": isOpen,
+          "aria-haspopup": true,
           title: labelTextColor,
           onClick: this.toggleOpen,
           iconBefore: /*#__PURE__*/_react.default.createElement(_styles.TriggerWrapper, null, /*#__PURE__*/_react.default.createElement(_styles2.TextColorIconWrapper, null, /*#__PURE__*/_react.default.createElement(_icon.EditorTextColorIcon, null), /*#__PURE__*/_react.default.createElement(_styles2.TextColorIconBar, {
@@ -267,23 +218,15 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick(color) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
-        selectedColor: pluginState.color,
-        isShowingMoreColors: isShowingMoreColors
-      })), showMoreColorsToggle && /*#__PURE__*/_react.default.createElement(_styles2.ShowMoreWrapper, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
-        appearance: "subtle",
-        onClick: this.handleShowMoreToggle,
-        iconBefore: /*#__PURE__*/_react.default.createElement(_backgroundColor.default, {
-          label: ""
-        })
-      }, formatMessage(isShowingMoreColors ? messages.lessColors : messages.moreColors)))), /*#__PURE__*/_react.default.createElement(_styles.Separator, null));
+        selectedColor: pluginState.color
+      }))), /*#__PURE__*/_react.default.createElement(_styles.Separator, null));
     }
   }, {
     key: "getCommonAnalyticsAttributes",
     value: function getCommonAnalyticsAttributes() {
-      var showMoreColorsToggle = this.props.showMoreColorsToggle;
       return {
         experiment: EXPERIMENT_NAME,
-        experimentGroup: showMoreColorsToggle ? EXPERIMENT_GROUP_SUBJECT : EXPERIMENT_GROUP_CONTROL
+        experimentGroup: EXPERIMENT_GROUP_CONTROL
       };
     }
   }, {
@@ -297,17 +240,6 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         attributes: _objectSpread(_objectSpread({}, this.getCommonAnalyticsAttributes()), data)
       };
     }
-  }, {
-    key: "buildAnalyticsShowMore",
-    value: function buildAnalyticsShowMore(action, data) {
-      return {
-        action: action,
-        actionSubject: _analytics.ACTION_SUBJECT.TOOLBAR,
-        actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_COLOR,
-        eventType: _analytics.EVENT_TYPE.TRACK,
-        attributes: _objectSpread(_objectSpread({}, this.getCommonAnalyticsAttributes()), data)
-      };
-    }
   }, {
     key: "buildAnalyticsSelectColor",
     value: function buildAnalyticsSelectColor(data) {

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rainbow = exports.disabledRainbow = exports.TextColorIconWrapper = exports.TextColorIconBar = exports.ShowMoreWrapper = void 0;
+exports.rainbow = exports.disabledRainbow = exports.TextColorIconWrapper = exports.TextColorIconBar = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,21 +17,17 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 
 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; }
 
-var ShowMoreWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-top: ", "px;\n  padding: ", "px;\n  padding-bottom: 0;\n  border-top: 1px solid #dfe1e6;\n\n  > button {\n    flex-grow: 1;\n  }\n"])), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
-
-exports.ShowMoreWrapper = ShowMoreWrapper;
-
-var TextColorIconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+var TextColorIconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
 
 exports.TextColorIconWrapper = TextColorIconWrapper;
 
-var TextColorIconBar = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 16px;\n  margin: auto;\n  width: 12px;\n  height: 3px;\n  border-radius: ", ";\n\n  ", ";\n"])), (0, _constants.borderRadius)() + 'px', function (_ref) {
+var TextColorIconBar = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 16px;\n  margin: auto;\n  width: 12px;\n  height: 3px;\n  border-radius: ", ";\n\n  ", ";\n"])), (0, _constants.borderRadius)() + 'px', function (_ref) {
   var gradientColors = _ref.gradientColors,
       selectedColor = _ref.selectedColor;
 

package/dist/cjs/plugins/text-formatting/pm-plugins/clear-formatting.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.pluginKey = exports.plugin = void 0;
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _utils = require("../utils");
@@ -13,7 +15,7 @@ var pluginKey = new _prosemirrorState.PluginKey('clearFormattingPlugin');
 exports.pluginKey = pluginKey;
 
 var plugin = function plugin(dispatch) {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: {
       init: function init(_config, state) {
         return {

package/dist/cjs/plugins/text-formatting/pm-plugins/cursor.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
-var _default = new _prosemirrorState.Plugin({
+var _default = new _safePlugin.SafePlugin({
   props: {
     handleClick: function handleClick(view, clickPos, event) {
       // Don't apply in Edge as per ED-4546

package/dist/cjs/plugins/text-formatting/pm-plugins/keymap.js

@@ -46,6 +46,18 @@ function keymapPlugin(schema) {
     }), list);
   }
 
+  if (schema.marks.subsup) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleSubscript.common, commands.toggleSubscriptWithAnalytics({
+      inputMethod: _analytics.INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+
+  if (schema.marks.subsup) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleSuperscript.common, commands.toggleSuperscriptWithAnalytics({
+      inputMethod: _analytics.INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+
   if (schema.marks.underline) {
     keymaps.bindKeymapWithCommand(keymaps.toggleUnderline.common, commands.toggleUnderlineWithAnalytics({
       inputMethod: _analytics.INPUT_METHOD.SHORTCUT

package/dist/cjs/plugins/text-formatting/pm-plugins/main.js

@@ -15,7 +15,7 @@ Object.defineProperty(exports, "pluginKey", {
 
 var _prosemirrorCommands = require("prosemirror-commands");
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var keymaps = _interopRequireWildcard(require("../../../keymaps"));
 
@@ -88,7 +88,7 @@ var getTextFormattingState = function getTextFormattingState(editorState) {
 };
 
 var plugin = function plugin(dispatch) {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: {
       init: function init(_config, state) {
         return getTextFormattingState(state);

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

@@ -11,9 +11,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = require("styled-components");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _templateObject;
 
-var textFormattingStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), _editorCommon.codeMarkSharedStyles);
+var textFormattingStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), _styles.codeMarkSharedStyles);
 exports.textFormattingStyles = textFormattingStyles;

package/dist/cjs/plugins/text-formatting/ui/Toolbar/dropdown-menu.js

@@ -61,13 +61,15 @@ var FormattingTextDropdownMenu = /*#__PURE__*/_react.default.memo(function (_ref
     items: group,
     zIndex: _editorSharedStyles.akEditorMenuZIndex,
     fitHeight: 188,
-    fitWidth: 136
+    fitWidth: 136,
+    shouldUseDefaultRole: true
   }, /*#__PURE__*/_react.default.createElement(_moreButton.MoreButton, {
     isSelected: isMenuOpen || hasFormattingActive,
     label: moreButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: false,
-    onClick: toggleMenu
+    onClick: toggleMenu,
+    "aria-expanded": isMenuOpen
   }));
 });
 

package/dist/cjs/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js

@@ -51,10 +51,9 @@ var IconButtons = {
     command: withToolbarInputMethod(commands.toggleStrongWithAnalytics),
     message: _toolbarMessages.toolbarMessages.bold,
     tooltipKeymap: _keymaps.toggleBold,
-    component: function component(_ref) {
-      var label = _ref.label;
+    component: function component() {
       return /*#__PURE__*/_react.default.createElement(_bold.default, {
-        label: label
+        label: ""
       });
     }
   },
@@ -63,10 +62,9 @@ var IconButtons = {
     command: withToolbarInputMethod(commands.toggleEmWithAnalytics),
     message: _toolbarMessages.toolbarMessages.italic,
     tooltipKeymap: _keymaps.toggleItalic,
-    component: function component(_ref2) {
-      var label = _ref2.label;
+    component: function component() {
       return /*#__PURE__*/_react.default.createElement(_italic.default, {
-        label: label
+        label: ""
       });
     }
   },
@@ -87,19 +85,21 @@ var IconButtons = {
   },
   subscript: {
     command: withToolbarInputMethod(commands.toggleSubscriptWithAnalytics),
-    message: _toolbarMessages.toolbarMessages.subscript
+    message: _toolbarMessages.toolbarMessages.subscript,
+    tooltipKeymap: _keymaps.toggleSubscript
   },
   superscript: {
     command: withToolbarInputMethod(commands.toggleSuperscriptWithAnalytics),
-    message: _toolbarMessages.toolbarMessages.superscript
+    message: _toolbarMessages.toolbarMessages.superscript,
+    tooltipKeymap: _keymaps.toggleSuperscript
   }
 };
 
-var getIcon = function getIcon(_ref3) {
-  var iconType = _ref3.iconType,
-      isDisabled = _ref3.isDisabled,
-      isActive = _ref3.isActive,
-      intl = _ref3.intl;
+var getIcon = function getIcon(_ref) {
+  var iconType = _ref.iconType,
+      isDisabled = _ref.isDisabled,
+      isActive = _ref.isActive,
+      intl = _ref.intl;
   var icon = IconButtons[iconType];
   var content = intl.formatMessage(icon.message);
   var tooltipKeymap = icon.tooltipKeymap;
@@ -109,9 +109,7 @@ var getIcon = function getIcon(_ref3) {
     iconMark: iconType,
     key: iconType,
     command: icon.command,
-    iconElement: icon.component ? icon.component({
-      label: content
-    }) : undefined,
+    iconElement: icon.component ? icon.component() : undefined,
     tooltipElement: tooltipKeymap ? /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
       description: content,
       keymap: tooltipKeymap
@@ -128,9 +126,9 @@ var getIcon = function getIcon(_ref3) {
 var IconsMarkSchema = (_IconsMarkSchema = {}, (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.strong, 'strong'), (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.em, 'em'), (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.strike, 'strike'), (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.code, 'code'), (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.underline, 'underline'), (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.superscript, 'subsup'), (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.subscript, 'subsup'), _IconsMarkSchema);
 
 var buildMenuIconState = function buildMenuIconState(iconMark) {
-  return function (_ref4) {
-    var schema = _ref4.schema,
-        textFormattingPluginState = _ref4.textFormattingPluginState;
+  return function (_ref2) {
+    var schema = _ref2.schema,
+        textFormattingPluginState = _ref2.textFormattingPluginState;
     var hasPluginState = Boolean(textFormattingPluginState);
     var markSchema = IconsMarkSchema[iconMark];
     var hasSchemaMark = Boolean(schema.marks[markSchema]);
@@ -158,11 +156,11 @@ var buildMenuIconState = function buildMenuIconState(iconMark) {
 
 var buildIcon = function buildIcon(iconMark) {
   var getState = buildMenuIconState(iconMark);
-  return function (_ref5) {
-    var schema = _ref5.schema,
-        textFormattingPluginState = _ref5.textFormattingPluginState,
-        intl = _ref5.intl,
-        isToolbarDisabled = _ref5.isToolbarDisabled;
+  return function (_ref3) {
+    var schema = _ref3.schema,
+        textFormattingPluginState = _ref3.textFormattingPluginState,
+        intl = _ref3.intl,
+        isToolbarDisabled = _ref3.isToolbarDisabled;
     var iconState = getState({
       schema: schema,
       textFormattingPluginState: textFormattingPluginState
@@ -200,10 +198,10 @@ var useTextFormattingPluginState = function useTextFormattingPluginState(editorS
   }, [editorState]);
 };
 
-var useFormattingIcons = function useFormattingIcons(_ref6) {
-  var isToolbarDisabled = _ref6.isToolbarDisabled,
-      editorState = _ref6.editorState,
-      intl = _ref6.intl;
+var useFormattingIcons = function useFormattingIcons(_ref4) {
+  var isToolbarDisabled = _ref4.isToolbarDisabled,
+      editorState = _ref4.editorState,
+      intl = _ref4.intl;
   var textFormattingPluginState = useTextFormattingPluginState(editorState);
   var schema = editorState.schema;
   var props = {
@@ -227,9 +225,9 @@ var useFormattingIcons = function useFormattingIcons(_ref6) {
 
 exports.useFormattingIcons = useFormattingIcons;
 
-var useHasFormattingActived = function useHasFormattingActived(_ref7) {
-  var editorState = _ref7.editorState,
-      iconTypeList = _ref7.iconTypeList;
+var useHasFormattingActived = function useHasFormattingActived(_ref5) {
+  var editorState = _ref5.editorState,
+      iconTypeList = _ref5.iconTypeList;
   var textFormattingPluginState = useTextFormattingPluginState(editorState);
   var hasActiveFormatting = (0, _react.useMemo)(function () {
     if (!textFormattingPluginState) {

package/dist/cjs/plugins/text-formatting/ui/Toolbar/index.js

@@ -106,7 +106,9 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     label: moreFormattingButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: true,
-    isSelected: false
+    isSelected: false,
+    "aria-expanded": undefined,
+    "aria-pressed": undefined
   })) : /*#__PURE__*/_react.default.createElement(_dropdownMenu.FormattingTextDropdownMenu, {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,

package/dist/cjs/plugins/text-formatting/ui/Toolbar/more-button.js

@@ -2,14 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MoreButton = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/more"));
 
@@ -17,28 +15,25 @@ var _styles = require("../../../../ui/styles");
 
 var _ToolbarButton = _interopRequireDefault(require("../../../../ui/ToolbarButton"));
 
-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; }
-
 var MoreButton = /*#__PURE__*/_react.default.memo(function (_ref) {
   var label = _ref.label,
+      ariaExpanded = _ref['aria-expanded'],
       isReducedSpacing = _ref.isReducedSpacing,
       isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled,
       onClick = _ref.onClick;
-  var more = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/_react.default.createElement(_styles.TriggerWrapper, null, /*#__PURE__*/_react.default.createElement(_more.default, {
-      label: label
-    }));
-  }, [label]);
   return /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
     disabled: isDisabled,
     selected: isSelected,
     onClick: onClick,
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
-    iconBefore: more
+    iconBefore: /*#__PURE__*/_react.default.createElement(_styles.TriggerWrapper, null, /*#__PURE__*/_react.default.createElement(_more.default, {
+      label: ""
+    })),
+    "aria-expanded": ariaExpanded,
+    "aria-label": label,
+    "aria-haspopup": true
   });
 });
 

package/dist/cjs/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js

@@ -40,7 +40,9 @@ var SingleToolbarButtons = /*#__PURE__*/_react.default.memo(function (_ref) {
       selected: item.isActive,
       disabled: item.isDisabled,
       title: item.tooltipElement,
-      iconBefore: item.iconElement
+      iconBefore: item.iconElement,
+      "aria-pressed": item.isActive,
+      "aria-label": String(item.content)
     });
   }));
 });

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

@@ -43,6 +43,14 @@ var _statsModifier = require("./stats-modifier");
 
 var _analytics = require("../analytics");
 
+/**
+ *
+ * Revamped typeahead using decorations instead of the `typeAheadQuery` mark
+ *
+ * https://product-fabric.atlassian.net/wiki/spaces/E/pages/2992177582/Technical+TypeAhead+Data+Flow
+ *
+ *
+ */
 var TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
   var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
 
@@ -123,6 +131,15 @@ var TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
     isEmptyQuery: !query
   });
 });
+/**
+ *
+ * Revamped typeahead using decorations instead of the `typeAheadQuery` mark
+ *
+ * https://product-fabric.atlassian.net/wiki/spaces/E/pages/2992177582/Technical+TypeAhead+Data+Flow
+ *
+ *
+ */
+
 
 var typeAheadPlugin = function typeAheadPlugin(options) {
   var fireAnalyticsCallback = (0, _analytics.fireAnalyticsEvent)(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.typeAheadListMessages = void 0;
+
+var _reactIntlNext = require("react-intl-next");
+
+var typeAheadListMessages = (0, _reactIntlNext.defineMessages)({
+  typeAheadResultLabel: {
+    id: 'fabric.editor.typeAheadResultLabel',
+    defaultMessage: 'TypeAhead results',
+    description: 'the result of a typehead, similar to autocomplete results+'
+  }
+});
+exports.typeAheadListMessages = typeAheadListMessages;

package/dist/cjs/plugins/type-ahead/pm-plugins/insert-item-plugin.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createPlugin = createPlugin;
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _actions = require("./actions");
 
 var _utils = require("./utils");
 
 function createPlugin() {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     appendTransaction: function appendTransaction(transactions, _oldState, newState) {
       var insertItemCallback = (0, _utils.isInsertionTransaction)(transactions, _actions.ACTIONS.INSERT_ITEM);