@atlaskit/editor-core 153.1.1 → 154.0.0

package/dist/es2019/plugins/hyperlink/styles.js

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

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -23,11 +23,17 @@ import { mapContentTypeToIcon, sha1, wordCount } from './utils';
 import { hideLinkToolbar } from '../../commands';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
 import { ScreenReaderText } from '../../styles';
+import { browser } from '@atlaskit/editor-common/utils';
+import { transformTimeStamp } from '../../../../ui/LinkSearch/transformTimeStamp';
+import Announcer from '../../../../utils/announcer/announcer';
 export const RECENT_SEARCH_LIST_SIZE = 5;
-const ClearText = styled.span`
+const ClearText = styled.button`
   cursor: pointer;
-  padding-right: 8px;
+  padding: 0;
+  margin-right: 8px;
   color: ${N90};
+  background: transparent;
+  border: none;
 `;
 const TextInputWrapper = styled.div`
   ${InputWrapper};
@@ -301,6 +307,27 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       }
     });
 
+    _defineProperty(this, "getScreenReaderText", () => {
+      const {
+        intl
+      } = this.props;
+      const {
+        items,
+        selectedIndex
+      } = this.state;
+
+      if (items.length && selectedIndex > -1) {
+        const {
+          name,
+          container,
+          lastUpdatedDate,
+          lastViewedDate
+        } = items[selectedIndex];
+        const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
+        return `${name}, ${container}, ${date === null || date === void 0 ? void 0 : date.pageAction} ${date === null || date === void 0 ? void 0 : date.dateString} ${(date === null || date === void 0 ? void 0 : date.timeSince) || ''}`;
+      }
+    });
+
     _defineProperty(this, "isUrlPopulatedWithSelectedItem", () => {
       /**
        * When we use ArrowKey to navigate through result items,
@@ -414,7 +441,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       }
     });
 
-    _defineProperty(this, "handleTextKeyDown", event => {
+    _defineProperty(this, "handleClearTextKeyDown", event => {
       const KEY_CODE_TAB = 9;
       const {
         keyCode
@@ -433,8 +460,6 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
         event.preventDefault();
         return;
       }
-
-      this.handleKeyDown(event);
     });
 
     _defineProperty(this, "handleKeyDown", event => {
@@ -689,6 +714,12 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     const formatClearLinkText = formatMessage(messages.clearLink);
     const formatDisplayText = formatMessage(messages.displayText);
     const screenReaderDescriptionId = 'search-recent-links-field-description';
+    const linkSearchListId = 'hyperlink-search-list';
+    const ariaActiveDescendant = selectedIndex > -1 ? `link-search-list-item-${selectedIndex}` : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
+    // as the Aria design pattern for combobox does not work in this case
+    // for details: https://a11y-internal.atlassian.net/browse/AK-740
+
+    const screenReaderText = browser.safari && this.getScreenReaderText();
     return /*#__PURE__*/React.createElement("div", {
       className: "recent-list"
     }, /*#__PURE__*/React.createElement(Container, {
@@ -698,10 +729,20 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       content: formatLinkAddressText
     }, /*#__PURE__*/React.createElement(LinkIcon, {
       label: formatLinkAddressText
-    }))), /*#__PURE__*/React.createElement(ScreenReaderText, {
+    }))), screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
+      ariaLive: "assertive",
+      text: screenReaderText,
+      ariaRelevant: "additions",
+      delay: 250
+    }), /*#__PURE__*/React.createElement(ScreenReaderText, {
       "aria-hidden": "true",
       id: screenReaderDescriptionId
     }, formatMessage(messages.searchLinkAriaDescription)), /*#__PURE__*/React.createElement(PanelTextInput, {
+      role: "combobox",
+      ariaExpanded: true,
+      ariaActiveDescendant: ariaActiveDescendant,
+      ariaControls: linkSearchListId,
+      ariaAutoComplete: true,
       describedById: screenReaderDescriptionId,
       ref: ele => this.urlInputContainer = ele,
       placeholder: placeholder,
@@ -733,20 +774,24 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       onCancel: this.handleCancel,
       defaultValue: displayText,
       onSubmit: this.handleSubmit,
-      onKeyDown: this.handleTextKeyDown
+      onKeyDown: this.handleKeyDown
     }), displayText && /*#__PURE__*/React.createElement(Tooltip, {
       content: formatMessage(messages.clearText)
     }, /*#__PURE__*/React.createElement(ClearText, {
-      onClick: this.handleClearDisplayText
+      onClick: this.handleClearDisplayText,
+      onKeyDown: this.handleClearTextKeyDown
     }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
       label: formatMessage(messages.clearText)
     })))), /*#__PURE__*/React.createElement(ScreenReaderText, {
-      "aria-live": "assertive",
+      "aria-live": "polite",
+      "aria-atomic": "true",
       id: "fabric.editor.hyperlink.suggested.results"
     }, displayUrl && formatMessage(messages.searchLinkResults, {
       count: items.length
     })), /*#__PURE__*/React.createElement(LinkSearchList, {
       ariaControls: "fabric.editor.hyperlink.suggested.results",
+      id: linkSearchListId,
+      role: "listbox",
       items: items,
       isLoading: isLoading,
       selectedIndex: selectedIndex,

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import HyperlinkAddToolbarComp from './HyperlinkAddToolbar';
 import { stateKey as pluginKey } from '../../pm-plugins/main';
 import WithPluginState from '../../../../ui/WithPluginState';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { pluginKey as blockTypeStateKey } from '../block-type/pm-plugins/main';
 import { stateKey as mediaStateKey } from '../media/pm-plugins/plugin-key';
 import { stateKey as hyperlinkPluginKey } from '../hyperlink/pm-plugins/main';

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import InsertMenu from '../../../../ui/ElementBrowser/InsertMenu';
 import { DropDownButton } from './dropdown-button';
 export const BlockInsertElementBrowser = props => {
@@ -17,6 +17,8 @@ export const BlockInsertElementBrowser = props => {
     onInsert: props.onInsert,
     toggleVisiblity: props.togglePlusMenuVisibility
   })), /*#__PURE__*/React.createElement(DropDownButton, {
+    "aria-expanded": props.open,
+    "aria-haspopup": true,
     handleRef: props.onRef,
     selected: props.open,
     disabled: props.disabled,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-menu-legacy.js

@@ -21,6 +21,8 @@ export const BlockInsertMenuLegacy = props => {
     fitWidth: 175,
     zIndex: akEditorMenuZIndex
   }, /*#__PURE__*/React.createElement(DropDownButton, {
+    "aria-expanded": props.open,
+    "aria-haspopup": true,
     handleRef: props.onRef,
     selected: props.open,
     disabled: props.disabled,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -9,6 +9,8 @@ export const BlockInsertMenu = props => {
 
   if (props.disabled) {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropDownButton, {
+      "aria-expanded": props.open,
+      "aria-haspopup": true,
       handleRef: props.onRef,
       selected: props.open,
       disabled: props.disabled,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/create-items.js

@@ -63,7 +63,8 @@ const createInsertBlockItems = config => {
     items.push(link({
       content: formatMessage(messages.link),
       tooltipDescription: formatMessage(messages.linkDescription),
-      disabled: !!linkDisabled
+      disabled: !!linkDisabled,
+      'aria-haspopup': 'dialog'
     }));
   }
 
@@ -86,7 +87,8 @@ const createInsertBlockItems = config => {
     items.push(mention({
       content: formatMessage(messages.mention),
       tooltipDescription: formatMessage(messages.mentionDescription),
-      disabled: !isTypeAheadAllowed
+      disabled: !isTypeAheadAllowed,
+      'aria-haspopup': 'listbox'
     }));
   }
 
@@ -94,7 +96,8 @@ const createInsertBlockItems = config => {
     items.push(emoji({
       content: formatMessage(messages.emoji),
       tooltipDescription: formatMessage(messages.emojiDescription),
-      disabled: emojiDisabled || !isTypeAheadAllowed
+      disabled: emojiDisabled || !isTypeAheadAllowed,
+      'aria-haspopup': 'dialog'
     }));
   }
 

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/dropdown-button.js

@@ -16,8 +16,11 @@ export const DropDownButton = /*#__PURE__*/React.memo(props => /*#__PURE__*/Reac
   disabled: props.disabled,
   onClick: props.onClick,
   spacing: props.spacing,
+  "aria-expanded": props['aria-expanded'],
+  "aria-haspopup": props['aria-haspopup'],
+  "aria-label": props.label,
   iconBefore: /*#__PURE__*/React.createElement(DropDownButtonIcon, {
-    label: props.label
+    label: ""
   }),
   title: /*#__PURE__*/React.createElement(ToolTipContent, {
     description: props.label,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 import { Separator, ButtonGroup, Wrapper } from '../../../../ui/styles';
 import { createTable } from '../../../table/commands';
@@ -531,6 +531,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
       iconBefore: btn.elemBefore,
       selected: btn.isActive,
       title: btn.title,
+      "aria-label": btn['aria-label'],
+      "aria-haspopup": btn['aria-haspopup'],
       onItemClick: this.insertToolbarMenuItem
     })), /*#__PURE__*/React.createElement(Wrapper, null, this.renderPopup(), /*#__PURE__*/React.createElement(BlockInsertMenu, {
       popupsMountPoint: this.props.popupsMountPoint,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/item.js

@@ -31,6 +31,8 @@ const from = init => ({
     label: init.content
   }),
   elemAfter: init.shortcut ? /*#__PURE__*/React.createElement(Shortcut, null, init.shortcut) : undefined,
+  'aria-label': init.content,
+  'aria-haspopup': init['aria-haspopup'],
   shortcut: init.shortcut,
   isDisabled: init.disabled
 });
@@ -53,7 +55,8 @@ export const link = mem(init => from({
   disabled: init.disabled,
   name: 'link',
   shortcut: tooltip(addLink),
-  Icon: LinkIcon
+  Icon: LinkIcon,
+  'aria-haspopup': init['aria-haspopup']
 }));
 export const media = mem(init => from({
   content: init.content,
@@ -75,7 +78,8 @@ export const mention = mem(init => from({
   disabled: init.disabled,
   name: 'mention',
   Icon: MentionIcon,
-  shortcut: '@'
+  shortcut: '@',
+  'aria-haspopup': init['aria-haspopup']
 }));
 export const emoji = mem(init => from({
   content: init.content,
@@ -83,7 +87,8 @@ export const emoji = mem(init => from({
   disabled: init.disabled,
   name: 'emoji',
   Icon: EmojiIcon,
-  shortcut: ':'
+  shortcut: ':',
+  'aria-haspopup': init['aria-haspopup']
 }));
 export const table = mem(init => from({
   content: init.content,

package/dist/es2019/plugins/layout/styles.js

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A, N50A } from '@atlaskit/theme/colors';
-import { columnLayoutSharedStyle } from '@atlaskit/editor-common';
+import { columnLayoutSharedStyle } from '@atlaskit/editor-common/styles';
 import { gridMediumMaxWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akLayoutGutterOffset, akEditorSwoopCubicBezier, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { TableCssClassName } from '../table/types';
 import { tableMarginFullWidthMode } from '../table/ui/consts';

package/dist/es2019/plugins/list/commands/indent-list.js

@@ -1,3 +1,4 @@
+import { findParentNodeOfType } from 'prosemirror-utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, addAnalytics } from '../../analytics';
 import { hasValidListIndentationLevel } from '../utils/indentation';
 import { indentListItemsSelected as indentListAction } from '../actions/indent-list-items-selected';
@@ -20,18 +21,22 @@ export function indentList(inputMethod = INPUT_METHOD.KEYBOARD) {
       return false;
     }
 
+    const {
+      tableCell,
+      tableHeader
+    } = state.schema.nodes;
+    const cell = findParentNodeOfType([tableCell, tableHeader])(state.selection);
     const firstListItemSelectedAttributes = getListItemAttributes($from);
-
-    if (firstListItemSelectedAttributes && firstListItemSelectedAttributes.indentLevel === 0 && firstListItemSelectedAttributes.itemIndex === 0) {
-      // Even though this is a non-operation, we don't want to send this event to the browser. Because if we return false, the browser will move the focus to another place
-      return true;
-    }
-
     const parentListNode = findFirstParentListNode($from);
 
-    if (!parentListNode) {
-      // Even though this is a non-operation, we don't want to send this event to the browser. Because if we return false, the browser will move the focus to another place
-      return true;
+    if (!parentListNode || firstListItemSelectedAttributes && firstListItemSelectedAttributes.indentLevel === 0 && firstListItemSelectedAttributes.itemIndex === 0) {
+      if (cell) {
+        // dont consume tab, as table-keymap should move cursor to next cell
+        return false;
+      } else {
+        // Even though this is a non-operation, we don't want to send this event to the browser. Because if we return false, the browser will move the focus to another place
+        return true;
+      }
     }
 
     const currentListNode = parentListNode.node;

package/dist/es2019/plugins/list/pm-plugins/input-rules/index.js

@@ -11,7 +11,10 @@ export default function inputRulePlugin(schema, featureFlags) {
 
   if (bulletList) {
     rules.push(createRuleForListType({
-      expression: /^\s*([\*\-\•]) $/,
+      // Using UTF instead of • character
+      // because of issue where product converted the
+      // character into an escaped version.
+      expression: /^\s*([\*\-\u2022]) $/,
       listType: bulletList
     }));
   }

package/dist/es2019/plugins/list/ui/ToolbarLists/index.js

@@ -136,26 +136,30 @@ class ToolbarLists extends PureComponent {
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: this.handleBulletListClick,
         selected: bulletListActive,
+        "aria-pressed": bulletListActive,
+        "aria-label": labelUnorderedList,
         disabled: bulletListDisabled || disabled,
         title: /*#__PURE__*/React.createElement(ToolTipContent, {
           description: labelUnorderedList,
           keymap: toggleBulletListKeymap
         }),
         iconBefore: /*#__PURE__*/React.createElement(BulletListIcon, {
-          label: labelUnorderedList
+          label: ""
         })
       }), /*#__PURE__*/React.createElement(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: this.handleOrderedListClick,
         selected: orderedListActive,
+        "aria-pressed": orderedListActive,
+        "aria-label": labelOrderedList,
         disabled: orderedListDisabled || disabled,
         title: /*#__PURE__*/React.createElement(ToolTipContent, {
           description: labelOrderedList,
           keymap: toggleOrderedListKeymap
         }),
         iconBefore: /*#__PURE__*/React.createElement(NumberListIcon, {
-          label: labelOrderedList
+          label: ""
         })
       }), isSeparator && /*#__PURE__*/React.createElement(Separator, null));
     } else {
@@ -175,10 +179,14 @@ class ToolbarLists extends PureComponent {
         isOpen: isDropdownOpen,
         onOpenChange: this.onOpenChange,
         fitHeight: 188,
-        fitWidth: 175
+        fitWidth: 175,
+        shouldUseDefaultRole: true
       }, /*#__PURE__*/React.createElement(ToolbarButton, {
         spacing: isReducedSpacing ? 'none' : 'default',
         selected: bulletListActive || orderedListActive,
+        "aria-expanded": isDropdownOpen,
+        "aria-haspopup": true,
+        "aria-label": labelLists,
         disabled: disabled,
         onClick: this.handleTriggerClick,
         title: labelLists,

package/dist/es2019/plugins/macro/actions.js

@@ -1,7 +1,7 @@
 import assert from 'assert';
 import { Selection, NodeSelection, TextSelection } from 'prosemirror-state';
 import { safeInsert, replaceSelectedNode, findSelectedNodeOfType, replaceParentNodeOfType } from 'prosemirror-utils';
-import { getValidNode } from '@atlaskit/editor-common';
+import { getValidNode } from '@atlaskit/editor-common/validator';
 import { normaliseNestedLayout } from '../../utils';
 import { getPluginState as getExtensionPluginState } from '../extension/plugin-factory';
 import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, addAnalytics } from '../analytics';

package/dist/es2019/plugins/media/commands/helpers.js

@@ -21,6 +21,24 @@ export const findMediaSingleNode = (mediaPluginState, id) => {
     return memo;
   }, null);
 };
+/**
+ * Finds the media inline node with the given id.
+ * Media Inline is inserted like a media single node into the media plugin state.
+ * However it is not of type mediaSingle.
+ *
+ * @param mediaPluginState
+ * @param id
+ * @param isMediaSingle
+ * @returns {MediaNodeWithPosHandler | null}
+ */
+
+export const findMediaInlineNode = (mediaPluginState, id, isMediaSingle) => {
+  if (!isMediaSingle) {
+    return findMediaSingleNode(mediaPluginState, id);
+  }
+
+  return null;
+};
 export const findAllMediaSingleNodes = (mediaPluginState, id) => {
   const {
     mediaNodes
@@ -28,7 +46,12 @@ export const findAllMediaSingleNodes = (mediaPluginState, id) => {
   return mediaNodes.filter(nodeWithHandler => nodeWithHandler.node.attrs.id === id);
 };
 export const findMediaNode = (mediaPluginState, id, isMediaSingle) => {
-  const mediaNodeWithPos = isMediaSingle ? findMediaSingleNode(mediaPluginState, id) : mediaPluginState.mediaGroupNodes[id];
+  const mediaNodeWithPos = isMediaSingle ? findMediaSingleNode(mediaPluginState, id) : mediaPluginState.mediaGroupNodes[id]; // Should attempt to find media inline node if media single node or media group node is not found
+
+  if (!mediaNodeWithPos) {
+    return findMediaInlineNode(mediaPluginState, id, isMediaSingle);
+  }
+
   return mediaNodeWithPos;
 };
 export const isMobileUploadCompleted = (mediaPluginState, mediaId) => !!mediaPluginState.mediaOptions && // This flag tells us that it's a 'mobile' env.

package/dist/es2019/plugins/media/nodeviews/mediaGroup.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { Filmstrip } from '@atlaskit/media-filmstrip';
 import React from 'react';

package/dist/es2019/plugins/media/nodeviews/mediaInline.js

@@ -1,12 +1,75 @@
 import React, { useEffect, useState } from 'react';
 import { SelectionBasedNodeView } from '../../../nodeviews/';
+import WithPluginState from '../../../ui/WithPluginState';
 import { MediaInlineCard } from '@atlaskit/media-card';
-import { WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaInlineNodeSelector } from './styles';
+import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
+import { MediaNodeUpdater } from './mediaNodeUpdater';
+export const createMediaNodeUpdater = props => {
+  const node = props.node.firstChild;
+  return new MediaNodeUpdater({ ...props,
+    isMediaSingle: true,
+    node: node ? node : props.node,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
+  });
+};
+/**
+ * Handles updating the media inline node attributes
+ * but also handling copy-paste for cross-editor of the same instance
+ * using the contextid
+ *
+ */
+
+export const updateMediaNodeAttributes = async props => {
+  const mediaNodeUpdater = createMediaNodeUpdater(props);
+  const {
+    addPendingTask
+  } = props.mediaPluginState;
+  const node = props.node;
+
+  if (!node) {
+    return;
+  }
+
+  const contextId = mediaNodeUpdater.getNodeContextId();
+
+  if (!contextId) {
+    await mediaNodeUpdater.updateContextId();
+  }
+
+  const hasDifferentContextId = await mediaNodeUpdater.hasDifferentContextId();
+
+  if (hasDifferentContextId) {
+    try {
+      const copyNode = mediaNodeUpdater.copyNode();
+      addPendingTask(copyNode);
+      await copyNode;
+    } catch {
+      return;
+    }
+  }
+};
+export const handleNewNode = props => {
+  const {
+    node,
+    mediaPluginState,
+    getPos
+  } = props;
+  mediaPluginState.handleMediaNodeMount(node, () => getPos());
+};
 export const MediaInline = props => {
   const [viewMediaClientConfig, setViewMediaClientConfig] = useState({});
   useEffect(() => {
+    handleNewNode(props);
+    updateMediaNodeAttributes(props);
     updateViewMediaClientConfig(props);
+    return () => {
+      const {
+        mediaPluginState
+      } = props;
+      mediaPluginState.handleMediaNodeUnmount(props.node);
+    };
   }, [props]);
 
   const updateViewMediaClientConfig = async props => {
@@ -64,29 +127,50 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
     const {
       providerFactory
     } = props;
+    const getPos = this.getPos;
     return /*#__PURE__*/React.createElement(WithProviders, {
-      providers: ['mediaProvider'],
+      providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providerFactory,
       renderNode: ({
-        mediaProvider
+        mediaProvider,
+        contextIdentifierProvider
       }) => {
         if (!mediaProvider) {
           return null;
         }
 
-        return /*#__PURE__*/React.createElement(MediaInline, {
-          identifier: this.node.attrs.id,
-          mediaProvider: mediaProvider,
-          node: this.node,
-          isSelected: this.nodeInsideSelection()
+        return /*#__PURE__*/React.createElement(WithPluginState, {
+          editorView: this.view,
+          plugins: {
+            mediaPluginState: mediaStateKey
+          },
+          render: ({
+            mediaPluginState
+          }) => {
+            if (!mediaPluginState) {
+              return null;
+            }
+
+            return /*#__PURE__*/React.createElement(MediaInline, {
+              identifier: this.node.attrs.id,
+              mediaProvider: mediaProvider,
+              mediaPluginState: mediaPluginState,
+              node: this.node,
+              isSelected: this.nodeInsideSelection(),
+              view: this.view,
+              getPos: getPos,
+              contextIdentifierProvider: contextIdentifierProvider
+            });
+          }
         });
       }
     });
   }
 
 }
-export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory) => (node, view, getPos) => {
+export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent) => (node, view, getPos) => {
   return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-    providerFactory
+    providerFactory,
+    dispatchAnalyticsEvent
   }).init();
 };

package/dist/es2019/plugins/media/nodeviews/mediaNodeUpdater.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import uuidV4 from 'uuid/v4';
-import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
 import { getMediaClient, isMediaBlobUrl, getAttrsFromUrl, isImageRepresentationReady } from '@atlaskit/media-client';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
 import { replaceExternalMedia, updateAllMediaNodesAttrs, updateMediaNodeAttrs } from '../commands/helpers';

package/dist/es2019/plugins/media/nodeviews/mediaNodeView/index.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, browser, WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
 import { SelectionBasedNodeView } from '../../../../nodeviews';

package/dist/es2019/plugins/media/nodeviews/mediaNodeView/media.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { withImageLoader } from '@atlaskit/editor-common';
+import { withImageLoader } from '@atlaskit/editor-common/utils';
 import { Card, CardLoading } from '@atlaskit/media-card';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import React, { Component } from 'react';

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
-import { MediaSingle, WithProviders, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, browser } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import WithPluginState from '../../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../../width';

package/dist/es2019/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -15,7 +15,7 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, ACTION } from '../../../../analytics';
 import { RECENT_SEARCH_WIDTH_IN_PX } from '../../../../../ui/LinkSearch/ToolbarComponents';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { ErrorMessage } from '@atlaskit/editor-common';
+import { ErrorMessage } from '@atlaskit/editor-common/ui';
 export const CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 

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

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import { NodeSelection, Plugin } from 'prosemirror-state';
 import { insertPoint } from 'prosemirror-transform';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-import { ErrorReporter, browser } from '@atlaskit/editor-common';
+import { ErrorReporter, browser } from '@atlaskit/editor-common/utils';
 import assert from 'assert';
 import { findDomRefAtPos, isNodeSelection } from 'prosemirror-utils';
 import { insertMediaSingleNode, isMediaSingle } from '../utils/media-single';