@atlaskit/editor-core 153.1.4 → 156.0.0

package/dist/esm/plugins/tasks-and-decisions/pm-plugins/helpers.js

@@ -1,5 +1,5 @@
 import { liftTarget } from 'prosemirror-transform';
-import { hasParentNodeOfType } from 'prosemirror-utils';
+import { findParentNodeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
 import { findFarthestParentNode } from '../../../utils';
 export var isInsideTaskOrDecisionItem = function isInsideTaskOrDecisionItem(state) {
   var _state$schema$nodes = state.schema.nodes,
@@ -23,6 +23,10 @@ export var isInsideTask = function isInsideTask(state) {
   var taskItem = state.schema.nodes.taskItem;
   return hasParentNodeOfType([taskItem])(state.selection);
 };
+export var isInsideDecision = function isInsideDecision(state) {
+  var decisionItem = state.schema.nodes.decisionItem;
+  return hasParentNodeOfType([decisionItem])(state.selection);
+};
 export var isTable = function isTable(node) {
   if (!node) {
     return false;
@@ -71,6 +75,20 @@ export var getCurrentIndentLevel = function getCurrentIndentLevel(selection) {
 
   return $from.depth - furthestParent.depth;
 };
+/**
+ * Finds the index of the current task item in relation to the closest taskList
+ */
+
+export var getTaskItemIndex = function getTaskItemIndex(state) {
+  var $pos = state.selection.$from;
+
+  var isTaskList = function isTaskList(node) {
+    return (node === null || node === void 0 ? void 0 : node.type.name) === 'taskList';
+  };
+
+  var itemAtPos = findParentNodeClosestToPos($pos, isTaskList);
+  return $pos.index(itemAtPos ? itemAtPos.depth : undefined);
+};
 /**
  * Walk outwards from a position until we encounter the (inside) start of
  * the next node, or reach the end of the document.

package/dist/esm/plugins/tasks-and-decisions/pm-plugins/keymaps.js

@@ -8,13 +8,13 @@ import { autoJoin, chainCommands } from 'prosemirror-commands';
 import { keymap } from 'prosemirror-keymap';
 import { Fragment, Slice } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import { findParentNodeOfType, findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { uuid } from '@atlaskit/adf-schema';
 import { filter, isEmptySelectionAtEnd, isEmptySelectionAtStart } from '../../../utils/commands';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, withAnalytics } from '../../analytics';
 import { insertTaskDecisionWithAnalytics } from '../commands';
 import { joinAtCut, liftSelection, wrapSelectionInTaskList } from './commands';
-import { getBlockRange, getCurrentIndentLevel, isActionOrDecisionItem, isActionOrDecisionList, isEmptyTaskDecision, isInsideTask, isInsideTaskOrDecisionItem, liftBlock, subtreeHeight, walkOut, isTable } from './helpers';
+import { getBlockRange, getCurrentIndentLevel, isActionOrDecisionItem, isActionOrDecisionList, isEmptyTaskDecision, isInsideTask, isInsideTaskOrDecisionItem, liftBlock, subtreeHeight, walkOut, isTable, getTaskItemIndex, isInsideDecision } from './helpers';
 
 var indentationAnalytics = function indentationAnalytics(curIndentLevel, direction) {
   return {
@@ -100,7 +100,24 @@ var unindent = filter(isInsideTask, function (state, dispatch) {
   }
 
   return withAnalytics(indentationAnalytics(curIndentLevel, INDENT_DIRECTION.OUTDENT))(autoJoin(liftSelection, ['taskList']))(state, dispatch);
-});
+}); // if selection is decision item or first action item in table cell
+// then dont consume the Tab, as table-keymap should tab to the next cell
+
+var shouldLetTabThroughInTable = function shouldLetTabThroughInTable(state) {
+  var curIndentLevel = getCurrentIndentLevel(state.selection);
+  var curIndex = getTaskItemIndex(state);
+  var _state$schema$nodes2 = state.schema.nodes,
+      tableCell = _state$schema$nodes2.tableCell,
+      tableHeader = _state$schema$nodes2.tableHeader;
+  var cell = findParentNodeOfType([tableCell, tableHeader])(state.selection);
+
+  if ((curIndentLevel === 1 && curIndex === 0 || isInsideDecision(state)) && cell) {
+    return true;
+  }
+
+  return false;
+};
+
 var indent = filter(isInsideTask, function (state, dispatch) {
   // limit ui indentation to 6 levels
   var curIndentLevel = getCurrentIndentLevel(state.selection);
@@ -109,9 +126,9 @@ var indent = filter(isInsideTask, function (state, dispatch) {
     return true;
   }
 
-  var _state$schema$nodes2 = state.schema.nodes,
-      taskList = _state$schema$nodes2.taskList,
-      taskItem = _state$schema$nodes2.taskItem;
+  var _state$schema$nodes3 = state.schema.nodes,
+      taskList = _state$schema$nodes3.taskList,
+      taskItem = _state$schema$nodes3.taskItem;
   var _state$selection = state.selection,
       $from = _state$selection.$from,
       $to = _state$selection.$to;
@@ -134,9 +151,9 @@ var backspaceFrom = function backspaceFrom($from) {
     } // if nested, just unindent
 
 
-    var _state$schema$nodes3 = state.schema.nodes,
-        taskList = _state$schema$nodes3.taskList,
-        paragraph = _state$schema$nodes3.paragraph;
+    var _state$schema$nodes4 = state.schema.nodes,
+        taskList = _state$schema$nodes4.taskList,
+        paragraph = _state$schema$nodes4.paragraph;
 
     if ($from.node($from.depth - 2).type === taskList) {
       return unindent(state, dispatch);
@@ -167,10 +184,10 @@ var backspace = filter(isEmptySelectionAtStart, autoJoin(chainCommands(function
 var deleteHandler = filter([isInsideTaskOrDecisionItem, isEmptySelectionAtEnd], chainCommands(joinTaskDecisionFollowing, function (state, dispatch) {
   // look for the node after this current one
   var $next = walkOut(state.selection.$from);
-  var _state$schema$nodes4 = state.schema.nodes,
-      taskList = _state$schema$nodes4.taskList,
-      paragraph = _state$schema$nodes4.paragraph,
-      doc = _state$schema$nodes4.doc; // this is a top-level node it wont have $next.before()
+  var _state$schema$nodes5 = state.schema.nodes,
+      taskList = _state$schema$nodes5.taskList,
+      paragraph = _state$schema$nodes5.paragraph,
+      doc = _state$schema$nodes5.doc; // this is a top-level node it wont have $next.before()
 
   if (!$next.parent || $next.parent.type === doc) {
     return false;
@@ -333,8 +350,16 @@ var enter = filter(isInsideTaskOrDecisionItem, chainCommands(filter(isEmptyTaskD
 }));
 export function keymapPlugin(schema, allowNestedTasks, consumeTabs) {
   var indentHandlers = {
-    'Shift-Tab': consumeTabs ? chainCommands(unindent, isInsideTaskOrDecisionItem) : unindent,
-    Tab: consumeTabs ? chainCommands(indent, isInsideTaskOrDecisionItem) : indent
+    'Shift-Tab': filter([isInsideTaskOrDecisionItem, function (state) {
+      return !shouldLetTabThroughInTable(state);
+    }], function (state, dispatch) {
+      return unindent(state, dispatch) || !!consumeTabs;
+    }),
+    Tab: filter([isInsideTaskOrDecisionItem, function (state) {
+      return !shouldLetTabThroughInTable(state);
+    }], function (state, dispatch) {
+      return indent(state, dispatch) || !!consumeTabs;
+    })
   };
   var defaultHandlers = consumeTabs ? {
     'Shift-Tab': isInsideTaskOrDecisionItem,

package/dist/esm/plugins/tasks-and-decisions/pm-plugins/main.js

@@ -6,7 +6,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { NodeSelection, Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection } from 'prosemirror-state';
 import { uuid } from '@atlaskit/adf-schema';
 import { nodesBetweenChanged, SetAttrsStep } from '../../../utils';
 import { createSelectionClickHandler } from '../../selection/utils';
@@ -34,7 +35,7 @@ var setContextIdentifierProvider = function setContextIdentifierProvider(provide
 
 export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch) {
   var useLongPressSelection = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  return new Plugin({
+  return new SafePlugin({
     props: {
       nodeViews: {
         taskItem: taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory),

package/dist/esm/plugins/tasks-and-decisions/styles.js

@@ -3,6 +3,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from 'styled-components';
-import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common';
+import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export var taskDecisionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-decision-wrapper] {\n    cursor: pointer;\n  }\n\n  .", " > [data-decision-wrapper],\n  ol[data-node-type='decisionList'].", " {\n    border-radius: 4px;\n    ", "\n  }\n\n  .danger {\n    .", ".", "\n      > div {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n      &::after {\n        content: none; /* reset the Blanket selection style */\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity);

package/dist/esm/plugins/tasks-and-decisions/ui/Task/index.js

@@ -15,7 +15,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React, { PureComponent } from 'react';
 import { defineMessages, injectIntl } from 'react-intl-next';
-import { ProviderFactory, WithProviders } from '@atlaskit/editor-common';
+import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
 import TaskItemWithProviders from './task-item-with-providers';
 var messages = defineMessages({
   placeholder: {

package/dist/esm/plugins/text-color/index.js

@@ -38,8 +38,6 @@ var textColorPlugin = function textColorPlugin(textColorConfig) {
           isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
           dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
           disabled = _ref2.disabled;
-      var config = pluginConfig(textColorConfig);
-      var showMoreColorsToggle = config === null || config === void 0 ? void 0 : config.allowMoreTextColors;
       return /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
           textColor: textColorPluginKey
@@ -53,7 +51,6 @@ var textColorPlugin = function textColorPlugin(textColorConfig) {
             popupsMountPoint: popupsMountPoint,
             popupsBoundariesElement: popupsBoundariesElement,
             popupsScrollableElement: popupsScrollableElement,
-            showMoreColorsToggle: showMoreColorsToggle,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             disabled: disabled
           });

package/dist/esm/plugins/text-color/pm-plugins/main.js

@@ -5,44 +5,26 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { Plugin, PluginKey } from 'prosemirror-state';
-import { textColorPalette, textColorPaletteExtended } from '../../../ui/ColorPalette/Palettes/textColorPalette';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { textColorPaletteExtended } from '../../../ui/ColorPalette/Palettes/textColorPalette';
 import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
 import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
 import { getDisabledState } from '../utils/disabled';
 export { DEFAULT_COLOR } from '../utils/color';
 export function createInitialPluginState(editorState, pluginConfig) {
   var defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
-  var showMoreColorsToggle = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowMoreTextColors) || false;
   var palette = [{
     value: defaultColor.color,
     label: defaultColor.label,
     border: DEFAULT_BORDER_COLOR
-  }].concat(_toConsumableArray(showMoreColorsToggle ? textColorPaletteExtended : textColorPalette));
+  }].concat(_toConsumableArray(textColorPaletteExtended));
   var state = {
     color: getActiveColor(editorState),
     disabled: getDisabledState(editorState),
     palette: palette,
     defaultColor: defaultColor.color
-  }; // break up the palette for extended colors
-
-  if (showMoreColorsToggle) {
-    // defined palette order: [normal, dark, light] (but normal[0] is default/dark)
-    // expanded palette: [dark, normal, light] with normal[0] on the dark row
-    var normalRow = palette.slice(0, 7);
-    var darkRow = palette.slice(7, 14);
-    var lightRow = palette.slice(14);
-    var paletteExpanded = darkRow.concat(normalRow).concat(lightRow); // swap default back and slot 7
-
-    var defaultSwatch = paletteExpanded[0];
-    paletteExpanded[0] = paletteExpanded[7];
-    paletteExpanded[7] = defaultSwatch;
-    return _objectSpread(_objectSpread({}, state), {}, {
-      palette: normalRow,
-      paletteExpanded: paletteExpanded
-    });
-  }
-
+  };
   return state;
 }
 export var ACTIONS;
@@ -55,7 +37,7 @@ export var ACTIONS;
 
 export var pluginKey = new PluginKey('textColorPlugin');
 export function createPlugin(dispatch, pluginConfig) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: function init(_config, editorState) {

package/dist/esm/plugins/text-color/ui/ToolbarTextColor/icon.js

@@ -18,6 +18,6 @@ var textColorGlyph = function textColorGlyph(props) {
 export var EditorTextColorIcon = function EditorTextColorIcon() {
   return /*#__PURE__*/React.createElement(Icon, {
     glyph: textColorGlyph,
-    label: "Text color icon"
+    label: ""
   });
 };

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

@@ -16,10 +16,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/custom-theme-button';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
 import ColorPalette from '../../../../ui/ColorPalette';
 import { textColorPalette as originalTextColors } from '../../../../ui/ColorPalette/Palettes/textColorPalette';
 import Dropdown from '../../../../ui/Dropdown';
@@ -28,25 +26,14 @@ import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../analytics';
 import * as commands from '../../commands/change-color';
 import { EditorTextColorIcon } from './icon';
-import { disabledRainbow, rainbow, ShowMoreWrapper, TextColorIconBar, TextColorIconWrapper } from './styles';
+import { disabledRainbow, rainbow, TextColorIconBar, TextColorIconWrapper } from './styles';
 var EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
 var EXPERIMENT_GROUP_CONTROL = 'control';
-var EXPERIMENT_GROUP_SUBJECT = 'subject';
 export var messages = 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'
   }
 });
 export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
@@ -66,8 +53,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isOpen: false,
-      isShowingMoreColors: false
+      isOpen: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "changeColor", function (color) {
@@ -79,8 +65,7 @@ export 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;
@@ -91,7 +76,6 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
 
         _this.dispatchAnalyticsEvent(_this.buildAnalyticsSelectColor({
           color: (swatch ? swatch.label : color).toLowerCase(),
-          isShowingMoreColors: isShowingMoreColors,
           isNewColor: isNewColor
         }));
 
@@ -116,36 +100,23 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_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 ? ACTION.OPENED : ACTION.CLOSED, {
-          isShowingMoreColors: isExtendedPaletteSelected || isShowingMoreColors,
           noSelect: isOpen === false
         }));
       }
     });
 
     _defineProperty(_assertThisInitialized(_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(ACTION.CLOSED, {
-          isShowingMoreColors: isShowingMoreColors,
           noSelect: true
         }));
 
@@ -155,24 +126,6 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_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 ? ACTION.CLOSED : ACTION.OPENED, {
-          showMoreButton: !state.isShowingMoreColors,
-          showLessButton: state.isShowingMoreColors
-        }));
-
-        return {
-          isShowingMoreColors: !state.isShowingMoreColors
-        };
-      });
-    });
-
     return _this;
   }
 
@@ -181,9 +134,7 @@ export 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,
@@ -192,10 +143,9 @@ export 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) {
@@ -221,6 +171,8 @@ export 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.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(TextColorIconWrapper, null, /*#__PURE__*/React.createElement(EditorTextColorIcon, null), /*#__PURE__*/React.createElement(TextColorIconBar, {
@@ -237,23 +189,15 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick(color) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
-        selectedColor: pluginState.color,
-        isShowingMoreColors: isShowingMoreColors
-      })), showMoreColorsToggle && /*#__PURE__*/React.createElement(ShowMoreWrapper, null, /*#__PURE__*/React.createElement(Button, {
-        appearance: "subtle",
-        onClick: this.handleShowMoreToggle,
-        iconBefore: /*#__PURE__*/React.createElement(EditorBackgroundColorIcon, {
-          label: ""
-        })
-      }, formatMessage(isShowingMoreColors ? messages.lessColors : messages.moreColors)))), /*#__PURE__*/React.createElement(Separator, null));
+        selectedColor: pluginState.color
+      }))), /*#__PURE__*/React.createElement(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
       };
     }
   }, {
@@ -267,17 +211,6 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         attributes: _objectSpread(_objectSpread({}, this.getCommonAnalyticsAttributes()), data)
       };
     }
-  }, {
-    key: "buildAnalyticsShowMore",
-    value: function buildAnalyticsShowMore(action, data) {
-      return {
-        action: action,
-        actionSubject: ACTION_SUBJECT.TOOLBAR,
-        actionSubjectId: ACTION_SUBJECT_ID.FORMAT_COLOR,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: _objectSpread(_objectSpread({}, this.getCommonAnalyticsAttributes()), data)
-      };
-    }
   }, {
     key: "buildAnalyticsSelectColor",
     value: function buildAnalyticsSelectColor(data) {

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

@@ -1,13 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 
 import styled from 'styled-components';
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-export var ShowMoreWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), gridSize() / 2, gridSize() / 2);
-export var TextColorIconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-export var TextColorIconBar = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), borderRadius() + 'px', function (_ref) {
+export var TextColorIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+export var TextColorIconBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), borderRadius() + 'px', function (_ref) {
   var gradientColors = _ref.gradientColors,
       selectedColor = _ref.selectedColor;
 

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

@@ -1,8 +1,9 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { checkFormattingIsPresent } from '../utils';
 export var pluginKey = new PluginKey('clearFormattingPlugin');
 export var plugin = function plugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     state: {
       init: function init(_config, state) {
         return {

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

@@ -1,5 +1,6 @@
-import { Plugin, TextSelection } from 'prosemirror-state';
-export default new Plugin({
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { TextSelection } from 'prosemirror-state';
+export default new SafePlugin({
   props: {
     handleClick: function handleClick(view, clickPos, event) {
       // Don't apply in Edge as per ED-4546

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

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

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

@@ -1,5 +1,5 @@
 import { toggleMark } from 'prosemirror-commands';
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import * as keymaps from '../../../keymaps';
 import { shallowEqual } from '../../../utils';
 import { createInlineCodeFromTextInputWithAnalytics } from '../commands/text-formatting'; // eslint-disable-next-line no-duplicate-imports
@@ -65,7 +65,7 @@ var getTextFormattingState = function getTextFormattingState(editorState) {
 };
 
 export var plugin = function plugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     state: {
       init: function init(_config, state) {
         return getTextFormattingState(state);

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

@@ -3,5 +3,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from 'styled-components';
-import { codeMarkSharedStyles } from '@atlaskit/editor-common';
+import { codeMarkSharedStyles } from '@atlaskit/editor-common/styles';
 export var textFormattingStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), codeMarkSharedStyles);

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

@@ -40,12 +40,14 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
     items: group,
     zIndex: akEditorMenuZIndex,
     fitHeight: 188,
-    fitWidth: 136
+    fitWidth: 136,
+    shouldUseDefaultRole: true
   }, /*#__PURE__*/React.createElement(MoreButton, {
     isSelected: isMenuOpen || hasFormattingActive,
     label: moreButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: false,
-    onClick: toggleMenu
+    onClick: toggleMenu,
+    "aria-expanded": isMenuOpen
   }));
 });