@atlaskit/editor-core 153.1.4 → 156.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) {
@@ -191,6 +140,8 @@ export class ToolbarTextColor extends 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, {
@@ -205,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
     };
   }
 
@@ -238,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/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/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/text-formatting/styles.js

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { codeMarkSharedStyles } from '@atlaskit/editor-common';
+import { codeMarkSharedStyles } from '@atlaskit/editor-common/styles';
 export const textFormattingStyles = css`
   ${codeMarkSharedStyles}
 `;

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

@@ -33,12 +33,14 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
     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
   }));
 });

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

@@ -6,7 +6,7 @@ import { toolbarMessages } from '../toolbar-messages';
 import * as commands from '../../../commands/text-formatting';
 import { TOOLBAR_ACTION_SUBJECT_ID } from '../../../../../plugins/analytics/types/toolbar-button';
 import { pluginKey as textFormattingPluginKey } from '../../../pm-plugins/plugin-key';
-import { toggleCode, toggleStrikethrough, toggleUnderline, tooltip, toggleBold, toggleItalic, ToolTipContent } from '../../../../../keymaps';
+import { toggleCode, toggleStrikethrough, toggleUnderline, tooltip, toggleBold, toggleItalic, toggleSubscript, toggleSuperscript, ToolTipContent } from '../../../../../keymaps';
 import { INPUT_METHOD } from '../../../../analytics/types/enums';
 import { IconTypes } from '../types';
 
@@ -20,10 +20,8 @@ const IconButtons = {
     command: withToolbarInputMethod(commands.toggleStrongWithAnalytics),
     message: toolbarMessages.bold,
     tooltipKeymap: toggleBold,
-    component: ({
-      label
-    }) => /*#__PURE__*/React.createElement(BoldIcon, {
-      label: label
+    component: () => /*#__PURE__*/React.createElement(BoldIcon, {
+      label: ""
     })
   },
   em: {
@@ -31,10 +29,8 @@ const IconButtons = {
     command: withToolbarInputMethod(commands.toggleEmWithAnalytics),
     message: toolbarMessages.italic,
     tooltipKeymap: toggleItalic,
-    component: ({
-      label
-    }) => /*#__PURE__*/React.createElement(ItalicIcon, {
-      label: label
+    component: () => /*#__PURE__*/React.createElement(ItalicIcon, {
+      label: ""
     })
   },
   underline: {
@@ -54,11 +50,13 @@ const IconButtons = {
   },
   subscript: {
     command: withToolbarInputMethod(commands.toggleSubscriptWithAnalytics),
-    message: toolbarMessages.subscript
+    message: toolbarMessages.subscript,
+    tooltipKeymap: toggleSubscript
   },
   superscript: {
     command: withToolbarInputMethod(commands.toggleSuperscriptWithAnalytics),
-    message: toolbarMessages.superscript
+    message: toolbarMessages.superscript,
+    tooltipKeymap: toggleSuperscript
   }
 };
 
@@ -79,9 +77,7 @@ const getIcon = ({
     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.createElement(ToolTipContent, {
       description: content,
       keymap: tooltipKeymap

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

@@ -64,7 +64,9 @@ const ToolbarFormatting = ({
     label: moreFormattingButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: true,
-    isSelected: false
+    isSelected: false,
+    "aria-expanded": undefined,
+    "aria-pressed": undefined
   })) : /*#__PURE__*/React.createElement(FormattingTextDropdownMenu, {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,

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

@@ -1,23 +1,26 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import MoreIcon from '@atlaskit/icon/glyph/editor/more';
 import { TriggerWrapper } from '../../../../ui/styles';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 export const MoreButton = /*#__PURE__*/React.memo(({
   label,
+  'aria-expanded': ariaExpanded,
   isReducedSpacing,
   isSelected,
   isDisabled,
   onClick
 }) => {
-  const more = useMemo(() => /*#__PURE__*/React.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(MoreIcon, {
-    label: label
-  })), [label]);
   return /*#__PURE__*/React.createElement(ToolbarButton, {
     disabled: isDisabled,
     selected: isSelected,
     onClick: onClick,
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
-    iconBefore: more
+    iconBefore: /*#__PURE__*/React.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(MoreIcon, {
+      label: ""
+    })),
+    "aria-expanded": ariaExpanded,
+    "aria-label": label,
+    "aria-haspopup": true
   });
 });

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

@@ -22,6 +22,8 @@ export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
     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/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

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
-import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { CloseSelectionOptions } from '../constants';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 const QuerySpan = styled.span`
@@ -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/type-ahead/ui/TypeAheadPopup.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N0, N60A, N50A } from '@atlaskit/theme/colors';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';

package/dist/es2019/plugins/type-ahead/ui/hooks/use-resize-observer.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useEffect, useContext, useLayoutEffect, createContext } from 'react';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 const Context = /*#__PURE__*/createContext(null);
 export const ResizeObserverContext = Context;
 export const ResizeObserverProvider = /*#__PURE__*/React.memo(({

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
   });
 };