@atlaskit/editor-core 172.3.2 → 173.0.0

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

@@ -2,22 +2,44 @@
 import React, { useMemo, useRef, useCallback, useLayoutEffect, useState } from 'react';
 import { jsx, css } from '@emotion/react';
 import { MenuGroup } from '@atlaskit/menu';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import { List } from 'react-virtualized/dist/commonjs/List';
 import { ICON_HEIGHT, ITEM_PADDING, TypeAheadListItem } from './TypeAheadListItem';
-import { injectIntl } from 'react-intl-next';
+import { injectIntl, useIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
+import { moveSelectedIndex } from '../utils';
+import { updateSelectedIndex } from '../commands/update-selected-index';
+import { AssistiveText } from './AssistiveText';
+import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
 const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
 const LIST_WIDTH = 320;
+const TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(({
+  numberOfResults
+}) => {
+  const intl = useIntl();
+  return jsx(AssistiveText, {
+    assistiveText: intl.formatMessage(typeAheadListMessages.searchResultsLabel, {
+      itemsLength: numberOfResults
+    }) // when the popup is open its always in focus
+    ,
+    isInFocus: true,
+    id: TYPE_AHEAD_DECORATION_ELEMENT_ID + '__popup'
+  });
+});
 const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   items,
   selectedIndex,
-  onItemHover,
+  editorView,
   onItemClick,
   intl,
-  fitHeight
+  fitHeight,
+  decorationElement
 }) => {
+  var _decorationElement$qu2;
+
   const listRef = useRef();
+  const listContainerRef = useRef(null);
   const lastVisibleIndexes = useRef({
     overscanStartIndex: 0,
     overscanStopIndex: 0,
@@ -34,9 +56,31 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     lastVisibleIndexes.current = props;
   }, []);
   const actions = useMemo(() => ({
-    onItemClick,
-    onItemHover
-  }), [onItemClick, onItemHover]);
+    onItemClick
+  }), [onItemClick]);
+
+  const isNavigationKey = event => {
+    return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter'].includes(event.key);
+  };
+
+  const focusTargetElement = useCallback(() => {
+    var _decorationElement$qu;
+
+    //To reset the selected index
+    updateSelectedIndex(-1)(editorView.state, editorView.dispatch);
+    listRef.current.scrollToRow(0);
+    decorationElement === null || decorationElement === void 0 ? void 0 : (_decorationElement$qu = decorationElement.querySelector(`[role='combobox']`)) === null || _decorationElement$qu === void 0 ? void 0 : _decorationElement$qu.focus();
+  }, [editorView, listRef, decorationElement]);
+  const selectNextItem = useMemo(() => moveSelectedIndex({
+    editorView,
+    direction: 'next'
+  }), [editorView]);
+  const selectPreviousItem = useMemo(() => moveSelectedIndex({
+    editorView,
+    direction: 'previous'
+  }), [editorView]);
+  const lastVisibleStartIndex = lastVisibleIndexes.current.startIndex;
+  const lastVisibleStopIndex = lastVisibleIndexes.current.stopIndex;
   const onScroll = useCallback(({
     scrollUpdateWasRequested
   }) => {
@@ -56,31 +100,29 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
 
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        const {
-          current: indexes
-        } = lastVisibleIndexes;
-        const isSelectedItemVisible = selectedIndex >= indexes.startIndex && selectedIndex <= indexes.stopIndex;
+        const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex; //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
 
-        if (!isSelectedItemVisible) {
+        if (!isSelectedItemVisible && selectedIndex !== -1) {
           listRef.current.scrollToRow(selectedIndex);
+        } else if (selectedIndex === -1) {
+          listRef.current.scrollToRow(0);
         }
       });
     });
-  }, [selectedIndex, lastVisibleIndexes]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
   useLayoutEffect(() => {
     if (!listRef.current) {
       return;
     }
 
-    const {
-      current: indexes
-    } = lastVisibleIndexes;
-    const isSelectedItemVisible = selectedIndex >= indexes.startIndex && selectedIndex <= indexes.stopIndex;
+    const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex; //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
 
-    if (!isSelectedItemVisible) {
+    if (!isSelectedItemVisible && selectedIndex !== -1) {
       listRef.current.scrollToRow(selectedIndex);
+    } else if (selectedIndex === -1) {
+      listRef.current.scrollToRow(0);
     }
-  }, [selectedIndex, lastVisibleIndexes]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
   useLayoutEffect(() => {
     setCache(new CellMeasurerCache({
       fixedWidth: true,
@@ -95,6 +137,72 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     }, 0), fitHeight);
     setHeight(height);
   }, [items, cache, fitHeight]);
+  useLayoutEffect(() => {
+    if (!listContainerRef.current) {
+      return;
+    }
+
+    const {
+      current: element
+    } = listContainerRef;
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+
+    const handleKeyDown = event => {
+      if (isNavigationKey(event)) {
+        switch (event.key) {
+          case 'ArrowDown':
+            if (selectedIndex === items.length - 1) {
+              event.stopPropagation();
+            } else {
+              selectNextItem();
+            }
+
+            event.preventDefault();
+            break;
+
+          case 'ArrowUp':
+            if (selectedIndex === 0) {
+              //To set focus on target element when up arrow is pressed on first option of list
+              focusTargetElement();
+            } else {
+              selectPreviousItem();
+            }
+
+            event.preventDefault();
+            break;
+
+          case 'Tab':
+            //Tab key quick inserts the selected item.
+            onItemClick(SelectItemMode.TAB, selectedIndex);
+            event.preventDefault();
+            break;
+
+          case 'Enter':
+            //Enter key quick inserts the selected item.
+            if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
+              onItemClick(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER, selectedIndex);
+              event.preventDefault();
+            }
+
+            break;
+
+          default:
+            event.preventDefault();
+        }
+      } else {
+        //All the remaining keys sets focus on the typeahead query(inputQuery.tsx))
+        focusTargetElement();
+      }
+    };
+
+    element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
+    return () => {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [editorView.state, focusTargetElement, selectNextItem, selectPreviousItem, selectedIndex, onItemClick, items.length]);
 
   const renderRow = ({
     index,
@@ -116,10 +224,10 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     }, jsx(TypeAheadListItem, {
       key: items[index].title,
       item: items[index],
+      itemsLength: items.length,
       itemIndex: index,
       selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick,
-      onItemHover: actions.onItemHover
+      onItemClick: actions.onItemClick
     }))));
   };
 
@@ -127,11 +235,13 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     return null;
   }
 
+  const menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector(`[role='combobox']`)) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || TYPE_AHEAD_DECORATION_ELEMENT_ID;
   return jsx(MenuGroup, {
-    role: "listbox",
-    "aria-live": "polite",
     "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
     "aria-relevant": "additions removals"
+  }, jsx("div", {
+    id: menuGroupId,
+    ref: listContainerRef
   }, jsx(List, {
     rowRenderer: renderRow,
     ref: listRef,
@@ -142,15 +252,19 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     onScroll: onScroll,
     height: height,
     overscanRowCount: 3,
+    containerRole: "presentation",
+    role: "listbox",
     css: css`
-            button {
-              padding: 12px 12px 11px;
-              span:last-child span:last-child {
-                white-space: normal;
+              button {
+                padding: 12px 12px 11px;
+                span:last-child span:last-child {
+                  white-space: normal;
+                }
               }
-            }
-          `
-  }));
+            `
+  }), jsx(TypeaheadAssistiveTextPureComponent, {
+    numberOfResults: items.length.toString()
+  })));
 });
 export const TypeAheadList = injectIntl(TypeAheadListComponent);
 TypeAheadList.displayName = 'TypeAheadList';

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
+import React, { useCallback, useMemo, useLayoutEffect } from 'react';
 import { css, jsx } from '@emotion/react';
-import { DN600, N200, N800 } from '@atlaskit/theme/colors';
+import { DN600, N200, N800, N30, B100 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { ButtonItem } from '@atlaskit/menu';
@@ -54,9 +54,34 @@ const itemText = theme => css`
 const itemAfter = css`
   flex: 0 0 auto;
 `;
-const hidden = {
-  overflow: 'hidden'
+const customRenderItemDivStyle = css`
+  overflow: hidden;
+  &:hover {
+    background-color: ${token('color.background.selected', N30)};
+  }
+  &:focus {
+    box-shadow: inset 0px 0px 0px 2px ${token('color.border.focused', B100)};
+    outline: none;
+  }
+`;
+/**
+ * This CSS emulates the desired behaviour with :focus-visible for firefox.
+ * Firefox unfortunately does not register keyboard focus if user mouseDown and drag a typeahead item
+ * resulting in focus-visible style not drawn.
+ */
+
+const selectionFrame = {
+  '& > button:focus': {
+    boxShadow: `inset 0px 0px 0px 2px ${token('color.border.focused', B100)}`,
+    outline: 'none',
+    '&:active': {
+      boxShadow: 'none'
+    }
+  }
 };
+const selectedStyle = css`
+  background-color: ${token('color.background.selected', N30)};
+`;
 const FallbackIcon = /*#__PURE__*/React.memo(({
   label
 }) => {
@@ -67,32 +92,16 @@ const noop = () => {};
 
 export const TypeAheadListItem = ({
   item,
+  itemsLength,
   selectedIndex,
-  onItemHover,
   onItemClick,
   itemIndex
 }) => {
-  const isSelected = itemIndex === selectedIndex; // It's possible for onMouseMove to be called multiple times in quick
-  // succession because the mousemove event can fire very rapidly. This
-  // provides an additional safety net to prevent that.
-
-  const mouseMoveCalled = useRef(false);
-  const onMouseMove = useCallback(() => {
-    if (isSelected || mouseMoveCalled.current) {
-      return;
-    }
-
-    mouseMoveCalled.current = true;
-    onItemHover({
-      item,
-      index: itemIndex
-    });
-  }, [item, itemIndex, onItemHover, isSelected]);
-  useLayoutEffect(() => {
-    if (!isSelected) {
-      mouseMoveCalled.current = false;
-    }
-  }, [isSelected]);
+  /**
+   * To select and highlight the first Item when no item is selected
+   * However selectedIndex remains -1, So that user does not skip the first item when down arrow key is used from typeahead query(inputQuery.tsx)
+   */
+  const isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
   const {
     icon,
     title,
@@ -108,39 +117,63 @@ export const TypeAheadListItem = ({
   const insertSelectedItem = useCallback(() => {
     onItemClick(SelectItemMode.SELECTED, itemIndex);
   }, [onItemClick, itemIndex]);
+  const customItemRef = /*#__PURE__*/React.createRef();
+  const buttonItemRef = /*#__PURE__*/React.createRef();
+  const shouldUpdateFocus = selectedIndex === itemIndex;
+  useLayoutEffect(() => {
+    if (shouldUpdateFocus) {
+      var _customItemRef$curren;
+
+      customItemRef === null || customItemRef === void 0 ? void 0 : (_customItemRef$curren = customItemRef.current) === null || _customItemRef$curren === void 0 ? void 0 : _customItemRef$curren.focus();
+    }
+  }, [customItemRef, shouldUpdateFocus]);
+  useLayoutEffect(() => {
+    if (shouldUpdateFocus) {
+      var _buttonItemRef$curren;
+
+      buttonItemRef === null || buttonItemRef === void 0 ? void 0 : (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 ? void 0 : _buttonItemRef$curren.focus();
+    }
+  }, [buttonItemRef, shouldUpdateFocus]);
   const customItem = useMemo(() => {
     if (!customRenderItem) {
       return null;
     }
 
     const Comp = customRenderItem;
+    const listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
     return jsx("div", {
       "aria-selected": isSelected,
       "aria-label": title,
       role: "option",
+      "aria-setsize": itemsLength,
       tabIndex: 0,
-      style: hidden,
-      onMouseMove: onMouseMove
+      css: listItemClasses,
+      className: `ak-typeahead-item ${isSelected ? 'typeahead-selected-item' : ''}` //CSS classes added for test cases purpose
+      ,
+      ref: customItemRef
     }, jsx(Comp, {
       onClick: insertSelectedItem,
-      isSelected: isSelected,
+      isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
+      ,
       onHover: noop
     }));
-  }, [customRenderItem, insertSelectedItem, onMouseMove, isSelected, title]);
+  }, [customRenderItem, insertSelectedItem, isSelected, title, customItemRef, itemsLength]);
 
   if (customItem) {
     return customItem;
   }
 
   return jsx("span", {
-    onMouseMove: onMouseMove
+    css: selectionFrame
   }, jsx(ButtonItem, {
     onClick: insertSelectedItem,
     iconBefore: elementIcon,
     isSelected: isSelected,
     "aria-selected": isSelected,
     "aria-label": item.title,
+    "aria-setsize": itemsLength,
     role: "option",
+    ref: buttonItemRef,
     description: item.description
   }, jsx("div", {
     css: itemBody

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

@@ -47,7 +47,6 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     popupsScrollableElement,
     items,
     selectedIndex,
-    setSelectedItem,
     onItemInsert,
     fireAnalyticsCallback,
     isEmptyQuery
@@ -173,9 +172,10 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   }), jsx(TypeAheadList, {
     items: items,
     selectedIndex: selectedIndex,
-    onItemHover: setSelectedItem,
     onItemClick: onItemInsert,
-    fitHeight: fitHeight
+    fitHeight: fitHeight,
+    editorView: editorView,
+    decorationElement: anchorElement
   })));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

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

@@ -105,6 +105,9 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
     cancel: cancel,
     forceFocus: shouldFocusCursorInsideQuery,
     onUndoRedo: onUndoRedo,
-    reopenQuery: reopenQuery
+    reopenQuery: reopenQuery,
+    editorView: editorView,
+    items: items
   });
-});
+});
+WrapperTypeAhead.displayName = 'WrapperTypeAhead';

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

@@ -94,7 +94,7 @@ export const moveSelectedIndex = ({
     items
   } = typeAheadState;
   const stats = typeAheadState.stats instanceof StatsModifier ? typeAheadState.stats : new StatsModifier();
-  let nextIndex = 0;
+  let nextIndex;
 
   if (direction === 'next') {
     stats.increaseArrowDown();

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

@@ -14,6 +14,7 @@ import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { addAnalytics } from '../../plugins/analytics/utils';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, ACTION } from '../../plugins/analytics';
 import { toolbarMessages } from './toolbar-messages';
+import { insideTable, isInLayoutColumn } from '../../utils';
 const alignmentIcons = [{
   id: 'editor.media.alignLeft',
   value: 'align-start',
@@ -94,6 +95,22 @@ const makeAlign = (layout, nodeType) => {
     // setNodeMarkup is called
 
     tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
+    const {
+      doc: {
+        type: {
+          schema: {
+            nodes: {
+              paragraph
+            }
+          }
+        }
+      }
+    } = tr; // see https://product-fabric.atlassian.net/browse/ED-15518 insert a new paragraph when an embedded card is wrapped left or right
+
+    if (layout.startsWith('wrap') && paragraph && !tr.doc.nodeAt(state.selection.to) && (insideTable(state) || isInLayoutColumn(state))) {
+      tr.insert(state.selection.to, paragraph.createAndFill());
+    }
+
     dispatch(addAnalytics(state, tr, {
       eventType: EVENT_TYPE.TRACK,
       action: ACTION.SELECTED,

package/dist/es2019/ui/PortalProvider/PortalProviderThemesProvider.js

@@ -2,7 +2,6 @@ import React from 'react';
 import AtlaskitTheme from '@atlaskit/theme/components';
 import { CHANNEL } from '@atlaskit/theme/constants';
 import { ThemeProvider } from '@emotion/react';
-import { ThemeProvider as DeprectateStyledComponentsProvider } from 'styled-components';
 export function PortalProviderThemeProviders(props) {
   const {
     children,
@@ -29,11 +28,9 @@ export function PortalProviderThemeProviders(props) {
   const atlaskitTheme = React.useCallback(() => ({
     mode
   }), [mode]);
-  return /*#__PURE__*/React.createElement(DeprectateStyledComponentsProvider, {
-    theme: styledComponentsAndEmotionTheme
-  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: styledComponentsAndEmotionTheme
   }, /*#__PURE__*/React.createElement(AtlaskitTheme.Provider, {
     value: atlaskitTheme
-  }, children)));
+  }, children));
 }

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

@@ -33,12 +33,10 @@ export class PortalProviderAPI extends EventDispatcher {
       hasAnalyticsContext,
       hasIntlContext
     });
-
-    const childrenWithThemeProviders = () => /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
+    const childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
       mode: this.themeMode
     }, children());
-
-    let wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders()) : childrenWithThemeProviders();
+    let wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders) : childrenWithThemeProviders;
 
     if (hasIntlContext) {
       wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
@@ -64,19 +62,18 @@ export class PortalProviderAPI extends EventDispatcher {
       }
 
       let wrappedChildren = portal.children();
-
-      const childrenWithThemeProviders = () => /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
+      const childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
         mode: themeMode
       }, wrappedChildren);
 
       if (portal.hasAnalyticsContext && this.useAnalyticsContext) {
-        wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders());
+        wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders);
       }
 
       if (portal.hasIntlContext) {
         wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
           value: this.intl
-        }, childrenWithThemeProviders());
+        }, childrenWithThemeProviders);
       }
 
       unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container);

package/dist/es2019/utils/index.js

@@ -526,6 +526,12 @@ export const isInListItem = state => {
 export const hasOpenEnd = slice => {
   return slice.openStart > 0 || slice.openEnd > 0;
 };
+export const isInsideBlockQuote = state => {
+  const {
+    blockquote
+  } = state.schema.nodes;
+  return hasParentNodeOfType(blockquote)(state.selection);
+};
 export function filterChildrenBetween(doc, from, to, predicate) {
   const results = [];
   doc.nodesBetween(from, to, (node, pos, parent) => {

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "172.3.2";
+export const version = "173.0.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "172.3.2",
+	"version": "173.0.0",
 	"sideEffects": false
 }

package/dist/esm/index.js

@@ -29,7 +29,7 @@ export { subscribeToToolbarAndPickerUpdates } from './plugins/view-update-subscr
 export { subscribeTypeAheadUpdates } from './plugins/view-update-subscription/subscribe/type-ahead-updates';
 export { insertBlockType, insertBlockTypesWithAnalytics, setBlockType, setBlockTypeWithAnalytics } from './plugins/block-type/commands';
 export { createTable } from './plugins/table/commands';
-export { insertTaskDecision, insertTaskDecisionCommand } from './plugins/tasks-and-decisions/commands';
+export { insertTaskDecisionCommand } from './plugins/tasks-and-decisions/commands';
 export { EventDispatcher } from './event-dispatcher';
 export { pluginKey as statusPluginKey } from './plugins/status/plugin';
 export { insertDate, openDatePicker, deleteDate } from './plugins/date/actions';

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

@@ -21,6 +21,7 @@ import decorationPlugin from './pm-plugins/decoration';
 import scrollGutter from './pm-plugins/scroll-gutter';
 import { keymap } from '../../utils/keymap';
 import frozenEditor from './pm-plugins/frozen-editor';
+import compositionPlugin from './pm-plugins/composition';
 // Chrome >= 88
 export var isChromeWithSelectionBug = browser.chrome && browser.chrome_version >= 88;
 
@@ -134,6 +135,12 @@ var basePlugin = function basePlugin(options) {
           return disableSpellcheckingPlugin();
         }
       });
+      plugins.push({
+        name: 'compositionPlugin',
+        plugin: function plugin() {
+          return compositionPlugin();
+        }
+      });
       return plugins;
     },
     nodes: function nodes() {

package/dist/esm/plugins/base/pm-plugins/composition.js

@@ -0,0 +1,45 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+var compositionPluginKey = new PluginKey('compositionPlugin');
+export var isComposing = function isComposing(state) {
+  return compositionPluginKey.getState(state).isComposing;
+};
+export default (function () {
+  return new SafePlugin({
+    key: compositionPluginKey,
+    state: {
+      init: function init() {
+        return {
+          isComposing: false
+        };
+      },
+      apply: function apply(tr, value) {
+        var isComposing = tr.getMeta(compositionPluginKey);
+
+        if (typeof isComposing === 'undefined') {
+          return value;
+        }
+
+        return {
+          isComposing: isComposing
+        };
+      }
+    },
+    props: {
+      handleDOMEvents: {
+        compositionstart: function compositionstart(view, event) {
+          var tr = view.state.tr;
+          tr.setMeta(compositionPluginKey, true);
+          view.dispatch(tr);
+          return false;
+        },
+        compositionend: function compositionend(view, event) {
+          var tr = view.state.tr;
+          tr.setMeta(compositionPluginKey, false);
+          view.dispatch(tr);
+          return false;
+        }
+      }
+    }
+  });
+});

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

@@ -167,18 +167,19 @@ var breakoutPlugin = function breakoutPlugin(options) {
 
       return /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
-          pluginState: pluginKey
+          breakoutPluginState: pluginKey,
+          widthPluginState: widthPluginKey
         },
         render: function render(_ref3) {
-          var _pluginState$breakout;
+          var _breakoutPluginState$;
 
-          var pluginState = _ref3.pluginState;
+          var breakoutPluginState = _ref3.breakoutPluginState;
           return /*#__PURE__*/React.createElement(LayoutButton, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
             scrollableElement: popupsScrollableElement,
-            node: (_pluginState$breakout = pluginState === null || pluginState === void 0 ? void 0 : pluginState.breakoutNode) !== null && _pluginState$breakout !== void 0 ? _pluginState$breakout : null
+            node: (_breakoutPluginState$ = breakoutPluginState === null || breakoutPluginState === void 0 ? void 0 : breakoutPluginState.breakoutNode) !== null && _breakoutPluginState$ !== void 0 ? _breakoutPluginState$ : null
           });
         }
       });