@atlaskit/editor-core 154.0.0 → 155.0.0

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

@@ -1,10 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -13,25 +11,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';
 const EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
 const EXPERIMENT_GROUP_CONTROL = 'control';
-const EXPERIMENT_GROUP_SUBJECT = 'subject';
 export const 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 class ToolbarTextColor extends React.Component {
@@ -39,8 +26,7 @@ export class ToolbarTextColor extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      isOpen: false,
-      isShowingMoreColors: false
+      isOpen: false
     });
 
     _defineProperty(this, "changeColor", color => commands.changeColor(color)(this.props.editorView.state, this.props.editorView.dispatch));
@@ -53,16 +39,12 @@ export class ToolbarTextColor extends React.Component {
             paletteExpanded,
             defaultColor
           }
-        } = this.props;
-        const {
-          isShowingMoreColors
-        } = this.state; // we store color names in analytics
+        } = this.props; // we store color names in analytics
 
         const swatch = (paletteExpanded || palette).find(sw => sw.value === color);
         const isNewColor = color !== defaultColor && !originalTextColors.some(col => col.value === color);
         this.dispatchAnalyticsEvent(this.buildAnalyticsSelectColor({
           color: (swatch ? swatch.label : color).toLowerCase(),
-          isShowingMoreColors,
           isNewColor
         }));
         this.handleOpenChange({
@@ -86,25 +68,12 @@ export class ToolbarTextColor extends React.Component {
       isOpen,
       logCloseEvent
     }) => {
-      const {
-        pluginState: {
-          palette,
-          color
-        }
-      } = this.props;
-      const {
-        isShowingMoreColors
-      } = this.state; // pre-expand if a non-standard colour has been selected
-
-      const isExtendedPaletteSelected = !palette.find(swatch => swatch.value === color);
       this.setState({
-        isOpen,
-        isShowingMoreColors: isExtendedPaletteSelected || isShowingMoreColors
+        isOpen
       });
 
       if (logCloseEvent) {
         this.dispatchAnalyticsEvent(this.buildAnalyticsPalette(isOpen ? ACTION.OPENED : ACTION.CLOSED, {
-          isShowingMoreColors: isExtendedPaletteSelected || isShowingMoreColors,
           noSelect: isOpen === false
         }));
       }
@@ -112,13 +81,11 @@ export class ToolbarTextColor extends React.Component {
 
     _defineProperty(this, "hide", e => {
       const {
-        isOpen,
-        isShowingMoreColors
+        isOpen
       } = this.state;
 
       if (isOpen === true) {
         this.dispatchAnalyticsEvent(this.buildAnalyticsPalette(ACTION.CLOSED, {
-          isShowingMoreColors,
           noSelect: true
         }));
         this.setState({
@@ -126,28 +93,11 @@ export class ToolbarTextColor extends React.Component {
         });
       }
     });
-
-    _defineProperty(this, "handleShowMoreToggle", e => {
-      // Prevent the event from bubbling up and triggering the hide handler.
-      e.preventDefault();
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-      this.setState(state => {
-        this.dispatchAnalyticsEvent(this.buildAnalyticsShowMore(state.isShowingMoreColors ? ACTION.CLOSED : ACTION.OPENED, {
-          showMoreButton: !state.isShowingMoreColors,
-          showLessButton: state.isShowingMoreColors
-        }));
-        return {
-          isShowingMoreColors: !state.isShowingMoreColors
-        };
-      });
-    });
   }
 
   render() {
     const {
-      isOpen,
-      isShowingMoreColors
+      isOpen
     } = this.state;
     const {
       popupsMountPoint,
@@ -161,11 +111,10 @@ export class ToolbarTextColor extends React.Component {
       intl: {
         formatMessage
       },
-      showMoreColorsToggle,
       disabled
     } = this.props;
     const labelTextColor = formatMessage(messages.textColor);
-    const palette = isShowingMoreColors && paletteExpanded ? paletteExpanded : pluginState.palette;
+    const palette = paletteExpanded || pluginState.palette;
     let fitWidth;
 
     if (document.body.clientWidth <= 740) {
@@ -207,24 +156,14 @@ export class ToolbarTextColor extends React.Component {
     }, /*#__PURE__*/React.createElement(ColorPalette, {
       palette: palette,
       onClick: color => this.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));
   }
 
   getCommonAnalyticsAttributes() {
-    const {
-      showMoreColorsToggle
-    } = this.props;
     return {
       experiment: EXPERIMENT_NAME,
-      experimentGroup: showMoreColorsToggle ? EXPERIMENT_GROUP_SUBJECT : EXPERIMENT_GROUP_CONTROL
+      experimentGroup: EXPERIMENT_GROUP_CONTROL
     };
   }
 
@@ -240,18 +179,6 @@ export class ToolbarTextColor extends React.Component {
     };
   }
 
-  buildAnalyticsShowMore(action, data) {
-    return {
-      action,
-      actionSubject: ACTION_SUBJECT.TOOLBAR,
-      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_COLOR,
-      eventType: EVENT_TYPE.TRACK,
-      attributes: { ...this.getCommonAnalyticsAttributes(),
-        ...data
-      }
-    };
-  }
-
   buildAnalyticsSelectColor(data) {
     return {
       action: ACTION.FORMATTED,

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

@@ -1,17 +1,6 @@
 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 const ShowMoreWrapper = styled.div`
-  display: flex;
-  margin-top: ${gridSize() / 2}px;
-  padding: ${gridSize() / 2}px;
-  padding-bottom: 0;
-  border-top: 1px solid #dfe1e6;
-
-  > button {
-    flex-grow: 1;
-  }
-`;
 export const TextColorIconWrapper = styled.div`
   position: relative;
 `;

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

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

package/dist/es2019/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(view, clickPos, event) {
       // Don't apply in Edge as per ED-4546

package/dist/es2019/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 @@ const getTextFormattingState = editorState => {
   return state;
 };
 
-export const plugin = dispatch => new Plugin({
+export const plugin = dispatch => new SafePlugin({
   state: {
     init(_config, state) {
       return getTextFormattingState(state);

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

@@ -1,3 +1,11 @@
+/**
+ *
+ * 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';
@@ -87,6 +95,14 @@ const TypeAheadMenu = /*#__PURE__*/React.memo(({
     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
+ *
+ *
+ */
 
 const typeAheadPlugin = options => {
   const fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);

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

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

package/dist/es2019/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(transactions, _oldState, newState) {
       const insertItemCallback = isInsertionTransaction(transactions, ACTIONS.INSERT_ITEM);
 

package/dist/es2019/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,14 +9,15 @@ import { createReducer } from './reducer';
 import { factoryDecorations } from './decorations';
 import { isInsertionTransaction } from './utils';
 
-const hasTypeAheadStep = tr => {
-  const step = tr.steps.find(step => step instanceof InsertTypeAheadStep);
+const hasValidTypeAheadStep = tr => {
+  const steps = tr.steps.filter(step => 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({
@@ -41,7 +42,7 @@ export function createPlugin({
     typeAheadHandlers,
     popupMountRef
   });
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init() {
@@ -58,7 +59,7 @@ export function createPlugin({
       },
 
       apply(tr, currentPluginState, oldEditorState, state) {
-        const customStep = hasTypeAheadStep(tr);
+        const customStep = hasValidTypeAheadStep(tr);
         const nextPluginState = reducer(tr, currentPluginState, customStep);
 
         if (currentPluginState !== nextPluginState) {

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

@@ -44,7 +44,9 @@ export const InputQuery = /*#__PURE__*/React.memo(({
 }) => {
   const ref = useRef(document.createElement('span'));
   const cleanedInputContent = useCallback(() => {
-    const raw = ref.current.textContent || '';
+    var _ref$current;
+
+    const raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
     return raw.replace(ZERO_WIDTH_SPACE, '');
   }, []);
   const onKeyUp = useCallback(event => {
@@ -52,9 +54,11 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
   const checkKeyEvent = useCallback(event => {
+    var _ref$current2;
+
     const key = keyNameNormalized(event);
     const sel = document.getSelection();
-    const raw = ref.current.textContent || '';
+    const raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
     const text = cleanedInputContent();
     let stopDefault = false;
 
@@ -126,10 +130,12 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     }
   }, [onUndoRedo, onItemSelect, selectNextItem, cancel, selectPreviousItem, cleanedInputContent]);
   const onClick = useCallback(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(() => {
@@ -149,7 +155,9 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       const key = keyNameNormalized(event);
 
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
-        const q = ref.current.textContent || '';
+        var _ref$current4;
+
+        const q = ((_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.textContent) || '';
         const sel = document.getSelection();
         const isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
         const isMovingLeft = sel && 'ArrowLeft' === key && sel.anchorOffset === 0;

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

@@ -9,6 +9,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';
 const ITEM_PADDING = 12;
 const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
 const LIST_MAX_HEIGHT = 380;
@@ -48,11 +50,12 @@ const itemTheme = {
     }
   }
 };
-export const TypeAheadList = /*#__PURE__*/React.memo(({
+const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   items,
   selectedIndex,
   onItemHover,
-  onItemClick
+  onItemClick,
+  intl
 }) => {
   const listRef = useRef();
   const redrawListAtIndex = useCallback(index => {
@@ -139,7 +142,7 @@ export const TypeAheadList = /*#__PURE__*/React.memo(({
   }, /*#__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
@@ -161,4 +164,5 @@ export const TypeAheadList = /*#__PURE__*/React.memo(({
     overscanCount: 3
   }, DynamicHeightListItem)))))));
 });
+export const TypeAheadList = injectIntl(TypeAheadListComponent);
 TypeAheadList.displayName = 'TypeAheadList';

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

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

package/dist/es2019/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';
@@ -10,7 +11,7 @@ const createPlugin = ({
   dispatchAnalyticsEvent
 }) => {
   const hasIntlContext = true;
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     props: {
       nodeViews: {

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

@@ -1,5 +1,6 @@
 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 const trackerStore = new WeakMap();
 
 class Tracker {
@@ -34,7 +35,7 @@ const createViewUpdateSubscriptionPlugin = () => {
   return {
     name: 'viewUpdateSubscription',
     pmPlugins: () => {
-      const createPlugin = () => new Plugin({
+      const createPlugin = () => new SafePlugin({
         key: pluginKey,
 
         view(editorView) {

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

@@ -1,7 +1,8 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 export const pluginKey = new PluginKey('widthPlugin');
 export function createPlugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: () => ({

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

@@ -1,7 +1,7 @@
 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';
@@ -40,7 +40,9 @@ class Alignment extends PureComponent {
       } = alignment;
       const 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/es2019/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 const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
-export const FullPageContentArea = /*#__PURE__*/React.memo(props => {
+const Content = /*#__PURE__*/React.memo(props => {
   return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
     width
   }) => /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
@@ -22,6 +24,8 @@ export const FullPageContentArea = /*#__PURE__*/React.memo(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
@@ -46,4 +50,5 @@ export const FullPageContentArea = /*#__PURE__*/React.memo(props => {
   })), /*#__PURE__*/React.createElement(WidthEmitter, {
     editorView: props.editorView
   }))));
-});
+});
+export const FullPageContentArea = injectIntl(Content);

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

@@ -1,11 +1,13 @@
 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 const FullPageToolbar = /*#__PURE__*/React.memo(props => {
+import messages from './messages';
+export const EditorToolbar = /*#__PURE__*/React.memo(props => {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags4, _props$featureFlags5;
 
   const [shouldSplitToolbar, setShouldSplitToolbar] = useState(false);
@@ -63,10 +65,15 @@ export const FullPageToolbar = /*#__PURE__*/React.memo(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 const FullPageToolbar = injectIntl(EditorToolbar);

package/dist/es2019/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/es2019/ui/ChromeCollapsed/index.js

@@ -2,7 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
 import { Input } from './styles';
-export default class ChromeCollapsed extends PureComponent {
+import { injectIntl } from 'react-intl-next';
+import { messages } from './messages';
+
+class ChromeCollapsed extends PureComponent {
   constructor(...args) {
     super(...args);
 
@@ -28,7 +31,7 @@ export default class ChromeCollapsed extends PureComponent {
   }
 
   render() {
-    const placeholder = this.props.text || 'Type something…';
+    const placeholder = this.props.text || this.props.intl.formatMessage(messages.chromeCollapsedPlaceholder);
     return /*#__PURE__*/React.createElement(Input, {
       innerRef: this.handleInputRef,
       onFocus: this.focusHandler,
@@ -36,4 +39,6 @@ export default class ChromeCollapsed extends PureComponent {
     });
   }
 
-}
+}
+
+export default injectIntl(ChromeCollapsed);

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

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

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

@@ -23,7 +23,6 @@ const ColorPalette = props => {
     onClick,
     selectedColor,
     className,
-    isShowingMoreColors,
     intl: {
       formatMessage
     }
@@ -53,8 +52,7 @@ const ColorPalette = props => {
     label: message ? formatMessage(message) : label,
     onClick: onClick,
     isSelected: value === selectedColor,
-    checkMarkColor: getContrastColor(value, [N0, N500]),
-    autoFocus: isShowingMoreColors && rowIdx === 1 && colorIdx === 0
+    checkMarkColor: getContrastColor(value, [N0, N500])
   })))));
 };