@atlaskit/editor-core 153.1.5 → 157.0.0

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) {
@@ -239,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
       };
     }
   }, {
@@ -269,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/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/type-ahead/index.js

@@ -1,4 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/**
+ *
+ * Revamped typeahead using decorations instead of the `typeAheadQuery` mark
+ *
+ * https://product-fabric.atlassian.net/wiki/spaces/E/pages/2992177582/Technical+TypeAhead+Data+Flow
+ *
+ *
+ */
 import React from 'react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { createPlugin } from './pm-plugins/main';
@@ -91,6 +100,14 @@ var TypeAheadMenu = /*#__PURE__*/React.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 = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var typeAheadListMessages = defineMessages({
+  typeAheadResultLabel: {
+    id: 'fabric.editor.typeAheadResultLabel',
+    defaultMessage: 'TypeAhead results',
+    description: 'the result of a typehead, similar to autocomplete results+'
+  }
+});

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

@@ -1,8 +1,8 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ACTIONS } from './actions';
 import { isInsertionTransaction } from './utils';
 export function createPlugin() {
-  return new Plugin({
+  return new SafePlugin({
     appendTransaction: function appendTransaction(transactions, _oldState, newState) {
       var insertItemCallback = isInsertionTransaction(transactions, ACTIONS.INSERT_ITEM);
 

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

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from 'prosemirror-view';
 import { InsertTypeAheadStep } from '@atlaskit/adf-schema/steps';
 import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from '../constants';
@@ -9,16 +9,17 @@ import { createReducer } from './reducer';
 import { factoryDecorations } from './decorations';
 import { isInsertionTransaction } from './utils';
 
-var hasTypeAheadStep = function hasTypeAheadStep(tr) {
-  var step = tr.steps.find(function (step) {
+var hasValidTypeAheadStep = function hasValidTypeAheadStep(tr) {
+  var steps = tr.steps.filter(function (step) {
     return step instanceof InsertTypeAheadStep;
-  });
+  }); // There are some cases, like collab rebase, where the steps are re-applied
+  // We should not re open the type-ahead for those cases
 
-  if (!step) {
-    return null;
+  if (steps.length === 1) {
+    return steps[0];
   }
 
-  return step;
+  return null;
 };
 
 export function createPlugin(_ref) {
@@ -43,7 +44,7 @@ export function createPlugin(_ref) {
     typeAheadHandlers: typeAheadHandlers,
     popupMountRef: popupMountRef
   });
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: function init() {
@@ -59,7 +60,7 @@ export function createPlugin(_ref) {
         };
       },
       apply: function apply(tr, currentPluginState, oldEditorState, state) {
-        var customStep = hasTypeAheadStep(tr);
+        var customStep = hasValidTypeAheadStep(tr);
         var nextPluginState = reducer(tr, currentPluginState, customStep);
 
         if (currentPluginState !== nextPluginState) {

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

@@ -45,7 +45,9 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       onUndoRedo = _ref.onUndoRedo;
   var ref = useRef(document.createElement('span'));
   var cleanedInputContent = useCallback(function () {
-    var raw = ref.current.textContent || '';
+    var _ref$current;
+
+    var raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
     return raw.replace(ZERO_WIDTH_SPACE, '');
   }, []);
   var onKeyUp = useCallback(function (event) {
@@ -53,9 +55,11 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
   var checkKeyEvent = useCallback(function (event) {
+    var _ref$current2;
+
     var key = keyNameNormalized(event);
     var sel = document.getSelection();
-    var raw = ref.current.textContent || '';
+    var raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
     var text = cleanedInputContent();
     var stopDefault = false;
 
@@ -127,10 +131,12 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     }
   }, [onUndoRedo, onItemSelect, selectNextItem, cancel, selectPreviousItem, cleanedInputContent]);
   var onClick = useCallback(function (event) {
+    var _ref$current3;
+
     event.stopPropagation();
     event.preventDefault();
     onQueryFocus();
-    ref.current.focus();
+    (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus();
     return false;
   }, [onQueryFocus]);
   useEffect(function () {
@@ -148,7 +154,9 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       var key = keyNameNormalized(event);
 
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
-        var q = ref.current.textContent || '';
+        var _ref$current4;
+
+        var q = ((_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.textContent) || '';
         var sel = document.getSelection();
         var isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
         var isMovingLeft = sel && 'ArrowLeft' === key && sel.anchorOffset === 0;

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

@@ -10,6 +10,8 @@ import { VariableSizeList as List } from 'react-window';
 import { ResizeObserverProvider } from './hooks/use-resize-observer';
 import { useDynamicListHeightCalculation } from './hooks/use-dynamic-list-height-calculation';
 import { DynamicHeightListItem, SelectedIndexContext, ListItemActionsContext, UpdateListItemHeightContext } from './DynamicHeightListItem';
+import { injectIntl } from 'react-intl-next';
+import { typeAheadListMessages } from '../messages';
 var ITEM_PADDING = 12;
 var LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
 var LIST_MAX_HEIGHT = 380;
@@ -53,11 +55,12 @@ var itemTheme = _defineProperty({}, itemThemeNamespace, {
   }
 });
 
-export var TypeAheadList = /*#__PURE__*/React.memo(function (_ref) {
+var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
       selectedIndex = _ref.selectedIndex,
       onItemHover = _ref.onItemHover,
-      onItemClick = _ref.onItemClick;
+      onItemClick = _ref.onItemClick,
+      intl = _ref.intl;
   var listRef = useRef();
   var redrawListAtIndex = useCallback(function (index) {
     listRef.current.resetAfterIndex(index);
@@ -144,7 +147,7 @@ export var TypeAheadList = /*#__PURE__*/React.memo(function (_ref) {
   }, /*#__PURE__*/React.createElement(ItemGroup, {
     role: "listbox",
     "aria-live": "polite",
-    "aria-label": "TypeAhead results",
+    "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
     "aria-relevant": "additions removals"
   }, /*#__PURE__*/React.createElement(ResizeObserverProvider, null, /*#__PURE__*/React.createElement(UpdateListItemHeightContext.Provider, {
     value: setListItemHeight
@@ -166,4 +169,5 @@ export var TypeAheadList = /*#__PURE__*/React.memo(function (_ref) {
     overscanCount: 3
   }, DynamicHeightListItem)))))));
 });
+export var TypeAheadList = injectIntl(TypeAheadListComponent);
 TypeAheadList.displayName = 'TypeAheadList';

package/dist/esm/plugins/undo-redo/pm-plugins/main.js

@@ -1,8 +1,8 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { pluginKey } from './plugin-key';
 export var createPlugin = function createPlugin(_ref) {
   var dispatch = _ref.dispatch;
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey
   });
 };

package/dist/esm/plugins/unsupported-content/index.js

@@ -1,4 +1,5 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { confluenceUnsupportedBlock, confluenceUnsupportedInline, unsupportedBlock, unsupportedInline, unsupportedMark, unsupportedNodeAttribute } from '@atlaskit/adf-schema';
 import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { ReactNodeView } from '../../nodeviews';
@@ -9,7 +10,7 @@ var createPlugin = function createPlugin(_ref) {
       eventDispatcher = _ref.eventDispatcher,
       dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
   var hasIntlContext = true;
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     props: {
       nodeViews: {

package/dist/esm/plugins/view-update-subscription/index.js

@@ -2,7 +2,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 export var trackerStore = new WeakMap();
 
 var Tracker = /*#__PURE__*/_createClass(function Tracker() {
@@ -43,7 +44,7 @@ var createViewUpdateSubscriptionPlugin = function createViewUpdateSubscriptionPl
     name: 'viewUpdateSubscription',
     pmPlugins: function pmPlugins() {
       var createPlugin = function createPlugin() {
-        return new Plugin({
+        return new SafePlugin({
           key: pluginKey,
           view: function view(editorView) {
             tracker = trackerStore.get(editorView);

package/dist/esm/plugins/width/index.js

@@ -4,10 +4,11 @@ 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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 export var pluginKey = new PluginKey('widthPlugin');
 export function createPlugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: function init() {

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

@@ -11,7 +11,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
-import { iconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
+import { IconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
 import AlignmentButton from './AlignmentButton';
 import { alignmentMessages } from './messages';
 import { AlignmentWrapper } from './styles';
@@ -59,7 +59,9 @@ var Alignment = /*#__PURE__*/function (_PureComponent) {
             shortcut = alignment.shortcut;
         var message = intl.formatMessage(title);
         return /*#__PURE__*/React.createElement(AlignmentButton, {
-          content: iconMap[value],
+          content: /*#__PURE__*/React.createElement(IconMap, {
+            alignment: value
+          }),
           key: value,
           value: value,
           label: message,

package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js

@@ -1,13 +1,15 @@
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 import React from 'react';
+import { injectIntl } from 'react-intl-next';
 import { ClickAreaBlock } from '../../Addon';
 import ContextPanel from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
 import WidthEmitter from '../../WidthEmitter';
 import { ContentArea, EditorContentArea, SidebarArea, ScrollContainer, EditorContentGutter } from './StyledComponents';
+import messages from './messages';
 export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
-export var FullPageContentArea = /*#__PURE__*/React.memo(function (props) {
+var Content = /*#__PURE__*/React.memo(function (props) {
   return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref) {
     var width = _ref.width;
     return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref2) {
@@ -22,6 +24,8 @@ export var FullPageContentArea = /*#__PURE__*/React.memo(function (props) {
       }, /*#__PURE__*/React.createElement(ClickAreaBlock, {
         editorView: props.editorView
       }, /*#__PURE__*/React.createElement(EditorContentArea, {
+        role: "region",
+        "aria-label": props.intl.formatMessage(messages.editableContentLabel),
         fullWidthMode: props.appearance === 'full-width',
         innerRef: props.contentAreaRef,
         containerWidth: width
@@ -48,4 +52,5 @@ export var FullPageContentArea = /*#__PURE__*/React.memo(function (props) {
       }));
     });
   });
-});
+});
+export var FullPageContentArea = injectIntl(Content);

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

@@ -1,12 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useEffect } from 'react';
+import { injectIntl } from 'react-intl-next';
 import AvatarsWithPluginState from '../../../plugins/collab-edit/ui';
 import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/FindReplaceToolbarButtonWithState';
 import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper';
 import Toolbar from '../../Toolbar';
 import { MainToolbar, MainToolbarIconBefore, MainToolbarFirstChild, MainToolbarSecondChild, NonCustomToolbarWrapper, CustomToolbarWrapper, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
-export var FullPageToolbar = /*#__PURE__*/React.memo(function (props) {
+import messages from './messages';
+export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags4, _props$featureFlags5;
 
   var _useState = useState(false),
@@ -69,10 +71,15 @@ export var FullPageToolbar = /*#__PURE__*/React.memo(function (props) {
       showKeyline: props.showKeyline || contextPanelWidth > 0,
       twoLineEditorToolbar: !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)
     }, /*#__PURE__*/React.createElement(MainToolbarFirstChild, {
-      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)
+      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar),
+      role: "region",
+      "aria-label": props.intl.formatMessage(messages.toolbarLabel)
     }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/React.createElement(MainToolbarSecondChild, {
       "data-testid": 'avatar-group-outside-plugin',
-      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar)
+      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar),
+      role: "region",
+      "aria-label": props.intl.formatMessage(messages.pageActionsLabel)
     }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));
   });
-});
+});
+export var FullPageToolbar = injectIntl(EditorToolbar);

package/dist/esm/ui/Appearance/FullPage/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+  toolbarLabel: {
+    id: 'fabric.editor.toolbarLabel',
+    defaultMessage: 'Editor toolbar',
+    description: 'Label for the ARIA region landmark'
+  },
+  pageActionsLabel: {
+    id: 'fabric.editor.pageActionsLabel',
+    defaultMessage: 'Page actions',
+    description: 'Label for the ARIA region landmark'
+  },
+  editableContentLabel: {
+    id: 'fabric.editor.editableContentLabel',
+    defaultMessage: 'Editable content',
+    description: 'Label for the ARIA region landmark'
+  }
+});

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

@@ -13,6 +13,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { PureComponent } from 'react';
 import { Input } from './styles';
+import { injectIntl } from 'react-intl-next';
+import { messages } from './messages';
 
 var ChromeCollapsed = /*#__PURE__*/function (_PureComponent) {
   _inherits(ChromeCollapsed, _PureComponent);
@@ -56,7 +58,7 @@ var ChromeCollapsed = /*#__PURE__*/function (_PureComponent) {
   _createClass(ChromeCollapsed, [{
     key: "render",
     value: function render() {
-      var placeholder = this.props.text || 'Type something…';
+      var placeholder = this.props.text || this.props.intl.formatMessage(messages.chromeCollapsedPlaceholder);
       return /*#__PURE__*/React.createElement(Input, {
         innerRef: this.handleInputRef,
         onFocus: this.focusHandler,
@@ -68,4 +70,4 @@ var ChromeCollapsed = /*#__PURE__*/function (_PureComponent) {
   return ChromeCollapsed;
 }(PureComponent);
 
-export { ChromeCollapsed as default };
+export default injectIntl(ChromeCollapsed);

package/dist/esm/ui/ChromeCollapsed/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  chromeCollapsedPlaceholder: {
+    id: 'fabric.editor.chromeCollapsedPlaceholder',
+    defaultMessage: 'Type something…',
+    description: 'placeholder for an input where users insert text'
+  }
+});