@atlaskit/editor-core 152.0.1 → 153.0.0

package/dist/es2019/labs/next/internal/components/EditorInternal.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { intlShape } from 'react-intl';
 import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl-next';
 import { WidthProvider } from '@atlaskit/editor-common';
 import { useProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import EditorContext from '../../../../ui/EditorContext';
@@ -8,7 +8,8 @@ import EditorActions from '../../../../actions';
 import { EditorSharedConfigProvider } from '../context/shared-config';
 import { useEditor } from '../hooks/use-editor';
 import { EditorContentProvider } from './EditorContent';
-export function EditorInternal({
+
+function BaseEditorInternal({
   onAnalyticsEvent,
   disabled,
   transformer,
@@ -21,7 +22,8 @@ export function EditorInternal({
   onChange,
   onDestroy,
   onMount,
-  children
+  children,
+  intl
 }, context) {
   // Need to memoize editor actions otherwise in case when editor is not
   // wrapped with EditorContext every prop change triggers all hooks
@@ -30,6 +32,9 @@ export function EditorInternal({
   const editorActions = React.useMemo(() => maybeEditorActions || new EditorActions(), [maybeEditorActions]); // Get the provider factory from context
 
   const providerFactory = useProviderFactory();
+
+  const getIntl = () => intl;
+
   const [editorSharedConfig, mountEditor] = useEditor({
     context,
     editorActions,
@@ -46,7 +51,8 @@ export function EditorInternal({
     onDestroy,
     onMount,
     providerFactory,
-    featureFlags: {}
+    featureFlags: {},
+    getIntl
   });
   return /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement(EditorContext, {
     editorActions: editorActions
@@ -56,7 +62,8 @@ export function EditorInternal({
     value: mountEditor
   }, children))));
 }
-EditorInternal.contextTypes = {
-  editorActions: PropTypes.object,
-  intl: intlShape
-};
+
+BaseEditorInternal.contextTypes = {
+  editorActions: PropTypes.object
+};
+export const EditorInternal = injectIntl(BaseEditorInternal);

package/dist/es2019/labs/next/internal/hooks/use-editor/create-editor.js

@@ -21,7 +21,8 @@ export function createEditor({
   onChange,
   onDestroy,
   onMount,
-  featureFlags
+  featureFlags,
+  getIntl
 }) {
   if (!ref) {
     return null;
@@ -45,7 +46,8 @@ export function createEditor({
     // TODO: ED-8133 Need to make types more generic otherwise it's not extensible.
     dispatchAnalyticsEvent: onAnalyticsEvent,
     performanceTracking: {},
-    featureFlags
+    featureFlags,
+    getIntl
   });
   const state = EditorState.create({
     schema,

package/dist/es2019/messages.js

@@ -1,5 +1,5 @@
 // Common Translations will live here
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 import { linkMessages } from '@atlaskit/editor-common/messages';
 import { messages as statusMessages } from './plugins/status/nodeviews/messages';
 import { messages as dateMessages } from './plugins/date/nodeviews/messages';

package/dist/es2019/nodeviews/ReactNodeView.js

@@ -13,7 +13,7 @@ const DEFAULT_SAMPLING_RATE = 100;
 const DEFAULT_SLOW_THRESHOLD = 7;
 let nodeViewEventsCounter = 0;
 export default class ReactNodeView {
-  constructor(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasContext = false, viewShouldUpdate) {
+  constructor(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasAnalyticsContext = false, viewShouldUpdate, hasIntlContext = false) {
     _defineProperty(this, "handleRef", node => this._handleRef(node));
 
     _defineProperty(this, "dispatchAnalyticsEvent", payload => {
@@ -31,9 +31,10 @@ export default class ReactNodeView {
     this.portalProviderAPI = portalProviderAPI;
     this.reactComponentProps = reactComponentProps || {};
     this.reactComponent = reactComponent;
-    this.hasContext = hasContext;
+    this.hasAnalyticsContext = hasAnalyticsContext;
     this._viewShouldUpdate = viewShouldUpdate;
     this.eventDispatcher = eventDispatcher;
+    this.hasIntlContext = hasIntlContext;
   }
   /**
    * This method exists to move initialization logic out of the constructor,
@@ -107,7 +108,7 @@ export default class ReactNodeView {
       }, component());
     };
 
-    this.portalProviderAPI.render(componentWithErrorBoundary, this.domRef, this.hasContext);
+    this.portalProviderAPI.render(componentWithErrorBoundary, this.domRef, this.hasAnalyticsContext, this.hasIntlContext);
   }
 
   createDomRef(options) {
@@ -217,8 +218,8 @@ export default class ReactNodeView {
     };
   }
 
-  static fromComponent(component, portalProviderAPI, eventDispatcher, props, viewShouldUpdate) {
-    return (node, view, getPos) => new ReactNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, props, component, false, viewShouldUpdate).init();
+  static fromComponent(component, portalProviderAPI, eventDispatcher, props, viewShouldUpdate, hasIntlContext = false) {
+    return (node, view, getPos) => new ReactNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, props, component, false, viewShouldUpdate, hasIntlContext).init();
   }
 
 }

package/dist/es2019/nodeviews/SelectionBasedNodeView.js

@@ -27,8 +27,8 @@ import ReactNodeView from './ReactNodeView';
  */
 
 export class SelectionBasedNodeView extends ReactNodeView {
-  constructor(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasContext = false, viewShouldUpdate) {
-    super(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasContext, viewShouldUpdate);
+  constructor(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasContext = false, viewShouldUpdate, hasIntlContext = false) {
+    super(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasContext, viewShouldUpdate, hasIntlContext);
 
     _defineProperty(this, "isNodeInsideSelection", (from, to, pos, posEnd) => {
       ({
@@ -64,7 +64,8 @@ export class SelectionBasedNodeView extends ReactNodeView {
             to
           }
         } = this.view.state;
-        return selection.node === this.node || this.pos === from && this.posEnd === to && selection.node.eq(this.node);
+        return selection.node === this.node || // If nodes are not the same object, we check if they are referring to the same document node
+        this.pos === from && this.posEnd === to && selection.node.eq(this.node);
       }
 
       return false;

package/dist/es2019/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 import Dropdown from '../../../../ui/Dropdown';
@@ -8,8 +8,7 @@ import Alignment from '../../../../ui/Alignment';
 import { ExpandIconWrapper, Separator, TriggerWrapper, Wrapper } from './styles';
 import { iconMap } from './icon-map';
 import { messages } from './messages';
-
-class AlignmentToolbar extends React.Component {
+export class AlignmentToolbar extends React.Component {
   constructor(...args) {
     super(...args);
 

package/dist/es2019/plugins/alignment/ui/ToolbarAlignment/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   alignment: {
     id: 'fabric.editor.alignment',

package/dist/es2019/plugins/annotation/toolbar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 import CommentIcon from '@atlaskit/icon/glyph/comment'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 

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

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   normal: {
     id: 'fabric.editor.normal',

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/blocktype-button.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage, defineMessages } from 'react-intl';
+import { FormattedMessage, defineMessages } from 'react-intl-next';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import TextStyleIcon from '@atlaskit/icon/glyph/editor/text-style';
 import ToolbarButton from '../../../../ui/ToolbarButton';

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import DropdownMenu from '../../../../ui/DropdownMenu';
 import { Separator, Wrapper, MenuWrapper } from '../../../../ui/styles';

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/toolbar-messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const toolbarMessages = defineMessages({
   textStyles: {
     id: 'fabric.editor.textStyles',

package/dist/es2019/plugins/breakout/ui/LayoutButton.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import * as colors from '@atlaskit/theme/colors';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { findParentDomRefOfType, findDomRefAtPos } from 'prosemirror-utils';
 import { Popup } from '@atlaskit/editor-common';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';

package/dist/es2019/plugins/caption/nodeviews/index.js

@@ -44,5 +44,8 @@ export class CaptionNodeView extends SelectionBasedNodeView {
 
 }
 export default function captionNodeView(portalProviderAPI, eventDispatcher) {
-  return (node, view, getPos) => new CaptionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {}).init();
+  return (node, view, getPos) => {
+    const hasIntlContext = true;
+    return new CaptionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {}, undefined, undefined, undefined, hasIntlContext).init();
+  };
 }

package/dist/es2019/plugins/caption/pm-plugins/main.js

@@ -13,36 +13,38 @@ const fireAnalytic = (state, tr, action) => {
   });
 };
 
-export default ((portalProviderAPI, eventDispatcher, providerFactory, dispatch) => new Plugin({
-  appendTransaction(transactions, oldState, newState) {
-    // only run for transactions that change selection
-    if (!transactions.find(tr => tr.selectionSet)) {
-      return;
-    }
+export default ((portalProviderAPI, eventDispatcher, providerFactory, dispatch) => {
+  return new Plugin({
+    appendTransaction(transactions, oldState, newState) {
+      // only run for transactions that change selection
+      if (!transactions.find(tr => tr.selectionSet)) {
+        return;
+      }
 
-    const newSelection = !newState.selection.eq(oldState.selection);
-    const findCaption = findParentNodeOfType(oldState.schema.nodes.caption);
-    const oldSelectionCaption = findCaption(oldState.selection);
-    const {
-      tr
-    } = newState; // if selecting away from caption, or selecting a different caption
+      const newSelection = !newState.selection.eq(oldState.selection);
+      const findCaption = findParentNodeOfType(oldState.schema.nodes.caption);
+      const oldSelectionCaption = findCaption(oldState.selection);
+      const {
+        tr
+      } = newState; // if selecting away from caption, or selecting a different caption
 
-    if (newSelection && oldSelectionCaption) {
-      if (oldSelectionCaption.node.childCount === 0) {
-        tr.delete(oldSelectionCaption.start - 1, oldSelectionCaption.start);
-        tr.setMeta('scrollIntoView', false);
-        fireAnalytic(newState, tr, ACTION.DELETED);
-        return tr;
-      } else {
-        fireAnalytic(newState, tr, ACTION.EDITED);
+      if (newSelection && oldSelectionCaption) {
+        if (oldSelectionCaption.node.childCount === 0) {
+          tr.delete(oldSelectionCaption.start - 1, oldSelectionCaption.start);
+          tr.setMeta('scrollIntoView', false);
+          fireAnalytic(newState, tr, ACTION.DELETED);
+          return tr;
+        } else {
+          fireAnalytic(newState, tr, ACTION.EDITED);
+        }
       }
-    }
-  },
+    },
 
-  key: pluginKey,
-  props: {
-    nodeViews: {
-      caption: captionNodeView(portalProviderAPI, eventDispatcher)
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        caption: captionNodeView(portalProviderAPI, eventDispatcher)
+      }
     }
-  }
-}));
+  });
+});

package/dist/es2019/plugins/card/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   url: {
     id: 'fabric.editor.url',

package/dist/es2019/plugins/card/nodeviews/embedCard.js

@@ -205,7 +205,9 @@ export class EmbedCardComponent extends React.PureComponent {
     // since `heightAlone` is defined only when just height is available.
 
     let heightAlone = liveHeight !== null && liveHeight !== void 0 ? liveHeight : !originalWidth && originalHeight || undefined;
-    const aspectRatio = !heightAlone && (initialAspectRatio || originalHeight && originalWidth && originalWidth / originalHeight) || // If ADF contains both width and height we get ratio from that
+    const aspectRatio = !heightAlone && ( // No need getting aspectRatio if heightAlone defined already
+    initialAspectRatio || // If we have initialAspectRatio (coming from iframely) we should go with that
+    originalHeight && originalWidth && originalWidth / originalHeight) || // If ADF contains both width and height we get ratio from that
     undefined;
     const cardProps = {
       layout,

package/dist/es2019/plugins/card/pm-plugins/main.js

@@ -105,13 +105,15 @@ export const createPlugin = options => ({
             useAlternativePreloader,
             useInlineWrapper: platform === 'mobile'
           };
-          return new InlineCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true).init();
+          const hasIntlContext = true;
+          return new InlineCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
         },
         blockCard: (node, view, getPos) => {
           const reactComponentProps = {
             platform
           };
-          return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true).init();
+          const hasIntlContext = true;
+          return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
         },
         embedCard: (node, view, getPos) => {
           const reactComponentProps = {
@@ -121,7 +123,8 @@ export const createPlugin = options => ({
             fullWidthMode,
             dispatchAnalyticsEvent
           };
-          return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true).init();
+          const hasIntlContext = true;
+          return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
         }
       }
     },

package/dist/es2019/plugins/code-bidi-warning/pm-plugins/main.js

@@ -4,11 +4,11 @@ import { codeBidiWarningPluginKey } from '../plugin-key';
 import { createBidiWarningsDecorationSetFromDoc, createPluginState, getPluginState } from './plugin-factory';
 export const createPlugin = ({
   dispatch,
-  reactContext
+  getIntl
 }, {
   appearance
 }) => {
-  const intl = reactContext().intl;
+  const intl = getIntl();
   const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
   return new Plugin({
     key: codeBidiWarningPluginKey,

package/dist/es2019/plugins/code-block/index.js

@@ -23,10 +23,10 @@ const codeBlockPlugin = options => ({
     return [{
       name: 'codeBlock',
       plugin: ({
-        reactContext
+        getIntl
       }) => createPlugin({
         useLongPressSelection: options.useLongPressSelection,
-        reactContext,
+        getIntl,
         appearance: options.appearance
       })
     }, {

package/dist/es2019/plugins/code-block/pm-plugins/main.js

@@ -10,10 +10,10 @@ import { codeBlockClassNames } from '../ui/class-names';
 import { getFeatureFlags } from '../../feature-flags-context';
 export const createPlugin = ({
   useLongPressSelection = false,
-  reactContext,
+  getIntl,
   appearance
 }) => {
-  const intl = reactContext().intl;
+  const intl = getIntl();
   const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
   return new Plugin({
     state: {

package/dist/es2019/plugins/code-block/toolbar.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { findDomRefAtPos } from 'prosemirror-utils';

package/dist/es2019/plugins/collab-edit/ui/avatars-with-plugin-state.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import WithPluginState from '../../../ui/WithPluginState';
 import { pluginKey as collabEditPluginKey } from '../plugin';
 import messages from '../../../messages';

package/dist/es2019/plugins/date/nodeviews/date.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { timestampToString, timestampToTaskContext, isPastDate, DateSharedCssClassName } from '@atlaskit/editor-common';
 import { Date } from '@atlaskit/date';
 import { setDatePickerAt } from '../actions';

package/dist/es2019/plugins/date/nodeviews/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   editText: {
     id: 'fabric.editor.editDateText',

package/dist/es2019/plugins/date/pm-plugins/main.js

@@ -23,12 +23,13 @@ const createPlugin = ({
     isDateEmpty: false,
     focusDateInput: false
   };
+  const hasIntlContext = true;
   return new Plugin({
     state: createPluginState(dispatch, newPluginState),
     key: pluginKey,
     props: {
       nodeViews: {
-        date: ReactNodeView.fromComponent(DateNodeView, portalProviderAPI, eventDispatcher)
+        date: ReactNodeView.fromComponent(DateNodeView, portalProviderAPI, eventDispatcher, undefined, undefined, hasIntlContext)
       }
     }
   });

package/dist/es2019/plugins/date/ui/DatePicker/date-picker-input.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { findDateSegmentByPosition, adjustDate, isDatePossiblyValid } from '../../utils/internal';
 import { parseDateType, formatDateType } from '../../utils/formatParse';

package/dist/es2019/plugins/date/ui/DatePicker/index.js

@@ -10,7 +10,7 @@ import withOuterListeners from '../../../../ui/with-outer-listeners';
 import styled from 'styled-components';
 const PopupWithListeners = withOuterListeners(Popup);
 import { INPUT_METHOD } from '../../../analytics/types/enums';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import DatePickerInput from './date-picker-input';
 const PopupContentWrapper = styled.div`
   padding: 2px;

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

@@ -26,9 +26,9 @@ const expandPlugin = (options = {}) => ({
       name: 'expand',
       plugin: ({
         dispatch,
-        reactContext
+        getIntl
       }) => {
-        return createPlugin(dispatch, reactContext, options.useLongPressSelection);
+        return createPlugin(dispatch, getIntl, options.useLongPressSelection);
       }
     }, {
       name: 'expandKeymap',

package/dist/es2019/plugins/expand/nodeviews/index.js

@@ -51,7 +51,7 @@ const toDOM = (node, intl) => ['div', {
 }, 0]];
 
 export class ExpandNodeView {
-  constructor(node, view, getPos, reactContext) {
+  constructor(node, view, getPos, getIntl) {
     _defineProperty(this, "allowInteractiveExpand", true);
 
     _defineProperty(this, "focusTitle", () => {
@@ -332,11 +332,11 @@ export class ExpandNodeView {
       }
     });
 
-    this.reactContext = reactContext() || {};
+    this.intl = getIntl();
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(node, this.reactContext.intl));
+    } = DOMSerializer.renderSpec(document, toDOM(node, this.intl));
     this.getPos = getPos;
     this.pos = getPos();
     this.view = view;
@@ -347,7 +347,7 @@ export class ExpandNodeView {
     this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
     this.content = this.dom.querySelector(`.${expandClassNames.content}`);
-    this.renderIcon(this.reactContext.intl);
+    this.renderIcon(this.intl);
     this.initHandlers();
   }
 
@@ -381,6 +381,7 @@ export class ExpandNodeView {
       __expanded
     } = node && node.attrs || this.node.attrs;
     ReactDOM.render( /*#__PURE__*/React.createElement(ExpandIconButton, {
+      intl: intl,
       allowInteractiveExpand: this.isAllowInteractiveExpandEnabled(),
       expanded: __expanded
     }), this.icon);
@@ -406,7 +407,7 @@ export class ExpandNodeView {
         // we toggle a class name to hide the content and animate the chevron.
         if (this.dom) {
           this.dom.classList.toggle(expandClassNames.expanded);
-          this.renderIcon(this.reactContext && this.reactContext.intl, node);
+          this.renderIcon(this && this.intl, node);
         }
 
         if (this.content) {
@@ -458,6 +459,6 @@ export class ExpandNodeView {
   }
 
 }
-export default function (reactContext) {
-  return (node, view, getPos) => new ExpandNodeView(node, view, getPos, reactContext);
+export default function (getIntl) {
+  return (node, view, getPos) => new ExpandNodeView(node, view, getPos, getIntl);
 }

package/dist/es2019/plugins/expand/pm-plugins/main.js

@@ -11,15 +11,15 @@ function containsClass(element, className) {
   return !!element && element.classList.contains(className);
 }
 
-export const createPlugin = (dispatch, reactContext, useLongPressSelection = false) => {
+export const createPlugin = (dispatch, getIntl, useLongPressSelection = false) => {
   const state = createPluginState(dispatch, {});
   return new Plugin({
     state: state,
     key: pluginKey,
     props: {
       nodeViews: {
-        expand: ExpandNodeView(reactContext),
-        nestedExpand: ExpandNodeView(reactContext)
+        expand: ExpandNodeView(getIntl),
+        nestedExpand: ExpandNodeView(getIntl)
       },
 
       handleKeyDown(_view, event) {

package/dist/es2019/plugins/extension/nodeviews/extension.js

@@ -41,10 +41,11 @@ export class ExtensionNode extends ReactNodeView {
 }
 export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions) {
   return (node, view, getPos) => {
+    const hasIntlContext = true;
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory,
       extensionHandlers,
       extensionNodeViewOptions
-    }).init();
+    }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

package/dist/es2019/plugins/extension/toolbar.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 import { hasParentNodeOfType } from 'prosemirror-utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import EditIcon from '@atlaskit/icon/glyph/editor/edit';
@@ -41,7 +41,7 @@ const isLayoutSupported = (state, selectedExtNode) => {
   return !!((selectedExtNode.node.type === bodiedExtension || selectedExtNode.node.type === extension && !hasParentNodeOfType([bodiedExtension, table, expand].filter(Boolean))(selection)) && !hasParentNodeOfType([layoutSection])(selection));
 };
 
-const breakoutOptions = (state, formatMessage, breakoutEnabled) => {
+const breakoutOptions = (state, formatMessage, extensionState, breakoutEnabled) => {
   const nodeWithPos = getSelectedExtension(state, true); // we should only return breakout options when breakouts are enabled and the node supports them
 
   if (nodeWithPos && breakoutEnabled && isLayoutSupported(state, nodeWithPos)) {
@@ -104,7 +104,7 @@ export const getToolbarConfig = (breakoutEnabled = true) => (state, intl) => {
   if (extensionState && !extensionState.showContextPanel && extensionState.element) {
     const nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension];
     const editButtonArray = editButton(formatMessage, extensionState);
-    const breakoutButtonArray = breakoutOptions(state, formatMessage, breakoutEnabled);
+    const breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled);
     return {
       title: 'Extension floating controls',
       getDomRef: () => extensionState.element.parentElement || undefined,

package/dist/es2019/plugins/extension/ui/SaveIndicator/SaveIndicator.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { G300, N0 } from '@atlaskit/theme/colors';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from './messages';
 
 const noop = () => {};

package/dist/es2019/plugins/extension/ui/SaveIndicator/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   saveIndicator: {
     id: 'fabric.editor.extensions.config-panel.save-indicator',

package/dist/es2019/plugins/find-replace/ui/Find.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/core';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';

package/dist/es2019/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import styled from 'styled-components';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { akEditorFloatingPanelZIndex, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../ui/ToolbarButton';