@atlaskit/editor-core 153.1.4 → 153.1.5

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

@@ -19,8 +19,11 @@ export var DropDownButton = /*#__PURE__*/React.memo(function (props) {
     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/esm/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -19,7 +19,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';
@@ -521,6 +521,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           iconBefore: btn.elemBefore,
           selected: btn.isActive,
           title: btn.title,
+          "aria-label": btn['aria-label'],
+          "aria-haspopup": btn['aria-haspopup'],
           onItemClick: _this2.insertToolbarMenuItem
         });
       }), /*#__PURE__*/React.createElement(Wrapper, null, this.renderPopup(), /*#__PURE__*/React.createElement(BlockInsertMenu, {

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

@@ -32,6 +32,8 @@ var from = function 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
   };
@@ -58,7 +60,8 @@ export var link = mem(function (init) {
     disabled: init.disabled,
     name: 'link',
     shortcut: tooltip(addLink),
-    Icon: LinkIcon
+    Icon: LinkIcon,
+    'aria-haspopup': init['aria-haspopup']
   });
 });
 export var media = mem(function (init) {
@@ -86,7 +89,8 @@ export var mention = mem(function (init) {
     disabled: init.disabled,
     name: 'mention',
     Icon: MentionIcon,
-    shortcut: '@'
+    shortcut: '@',
+    'aria-haspopup': init['aria-haspopup']
   });
 });
 export var emoji = mem(function (init) {
@@ -96,7 +100,8 @@ export var emoji = mem(function (init) {
     disabled: init.disabled,
     name: 'emoji',
     Icon: EmojiIcon,
-    shortcut: ':'
+    shortcut: ':',
+    'aria-haspopup': init['aria-haspopup']
   });
 });
 export var table = mem(function (init) {

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

@@ -5,7 +5,7 @@ var _templateObject;
 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/esm/plugins/list/commands/indent-list.js

@@ -4,6 +4,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+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';
@@ -23,18 +24,21 @@ export function indentList() {
       return false;
     }
 
+    var _state$schema$nodes = state.schema.nodes,
+        tableCell = _state$schema$nodes.tableCell,
+        tableHeader = _state$schema$nodes.tableHeader;
+    var cell = findParentNodeOfType([tableCell, tableHeader])(state.selection);
     var 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;
-    }
-
     var 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;
+      }
     }
 
     var currentListNode = parentListNode.node;

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

@@ -8,7 +8,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/esm/plugins/list/ui/ToolbarLists/index.js

@@ -157,26 +157,30 @@ var ToolbarLists = /*#__PURE__*/function (_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 {
@@ -195,10 +199,14 @@ var ToolbarLists = /*#__PURE__*/function (_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/esm/plugins/macro/actions.js

@@ -9,7 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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/esm/plugins/media/commands/helpers.js

@@ -23,6 +23,24 @@ export var findMediaSingleNode = function findMediaSingleNode(mediaPluginState,
     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 var findMediaInlineNode = function findMediaInlineNode(mediaPluginState, id, isMediaSingle) {
+  if (!isMediaSingle) {
+    return findMediaSingleNode(mediaPluginState, id);
+  }
+
+  return null;
+};
 export var findAllMediaSingleNodes = function findAllMediaSingleNodes(mediaPluginState, id) {
   var mediaNodes = mediaPluginState.mediaNodes;
   return mediaNodes.filter(function (nodeWithHandler) {
@@ -30,7 +48,12 @@ export var findAllMediaSingleNodes = function findAllMediaSingleNodes(mediaPlugi
   });
 };
 export var findMediaNode = function findMediaNode(mediaPluginState, id, isMediaSingle) {
-  var mediaNodeWithPos = isMediaSingle ? findMediaSingleNode(mediaPluginState, id) : mediaPluginState.mediaGroupNodes[id];
+  var 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 var isMobileUploadCompleted = function isMobileUploadCompleted(mediaPluginState, mediaId) {

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

@@ -16,7 +16,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-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/esm/plugins/media/nodeviews/mediaInline.js

@@ -4,19 +4,118 @@ import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 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 var createMediaNodeUpdater = function createMediaNodeUpdater(props) {
+  var node = props.node.firstChild;
+  return new MediaNodeUpdater(_objectSpread(_objectSpread({}, 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 var updateMediaNodeAttributes = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(props) {
+    var mediaNodeUpdater, addPendingTask, node, contextId, hasDifferentContextId, copyNode;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            mediaNodeUpdater = createMediaNodeUpdater(props);
+            addPendingTask = props.mediaPluginState.addPendingTask;
+            node = props.node;
+
+            if (node) {
+              _context.next = 5;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 5:
+            contextId = mediaNodeUpdater.getNodeContextId();
+
+            if (contextId) {
+              _context.next = 9;
+              break;
+            }
+
+            _context.next = 9;
+            return mediaNodeUpdater.updateContextId();
+
+          case 9:
+            _context.next = 11;
+            return mediaNodeUpdater.hasDifferentContextId();
+
+          case 11:
+            hasDifferentContextId = _context.sent;
+
+            if (!hasDifferentContextId) {
+              _context.next = 23;
+              break;
+            }
+
+            _context.prev = 13;
+            copyNode = mediaNodeUpdater.copyNode();
+            addPendingTask(copyNode);
+            _context.next = 18;
+            return copyNode;
+
+          case 18:
+            _context.next = 23;
+            break;
+
+          case 20:
+            _context.prev = 20;
+            _context.t0 = _context["catch"](13);
+            return _context.abrupt("return");
+
+          case 23:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[13, 20]]);
+  }));
+
+  return function updateMediaNodeAttributes(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+export var handleNewNode = function handleNewNode(props) {
+  var node = props.node,
+      mediaPluginState = props.mediaPluginState,
+      getPos = props.getPos;
+  mediaPluginState.handleMediaNodeMount(node, function () {
+    return getPos();
+  });
+};
 export var MediaInline = function MediaInline(props) {
   var _useState = useState({}),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24,22 +123,28 @@ export var MediaInline = function MediaInline(props) {
       setViewMediaClientConfig = _useState2[1];
 
   useEffect(function () {
+    handleNewNode(props);
+    updateMediaNodeAttributes(props);
     updateViewMediaClientConfig(props);
+    return function () {
+      var mediaPluginState = props.mediaPluginState;
+      mediaPluginState.handleMediaNodeUnmount(props.node);
+    };
   }, [props]);
 
   var updateViewMediaClientConfig = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(props) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(props) {
       var mediaProvider, _viewMediaClientConfig;
 
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
-              _context.next = 2;
+              _context2.next = 2;
               return props.mediaProvider;
 
             case 2:
-              mediaProvider = _context.sent;
+              mediaProvider = _context2.sent;
 
               if (mediaProvider) {
                 _viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
@@ -48,14 +153,14 @@ export var MediaInline = function MediaInline(props) {
 
             case 4:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee);
+      }, _callee2);
     }));
 
-    return function updateViewMediaClientConfig(_x) {
-      return _ref.apply(this, arguments);
+    return function updateViewMediaClientConfig(_x2) {
+      return _ref2.apply(this, arguments);
     };
   }();
 
@@ -120,21 +225,41 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
       var _this = this;
 
       var providerFactory = props.providerFactory;
+      var getPos = this.getPos;
       return /*#__PURE__*/React.createElement(WithProviders, {
-        providers: ['mediaProvider'],
+        providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref2) {
-          var mediaProvider = _ref2.mediaProvider;
+        renderNode: function renderNode(_ref3) {
+          var mediaProvider = _ref3.mediaProvider,
+              contextIdentifierProvider = _ref3.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: function render(_ref4) {
+              var mediaPluginState = _ref4.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
+              });
+            }
           });
         }
       });
@@ -143,10 +268,11 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
 
   return MediaInlineNodeView;
 }(SelectionBasedNodeView);
-export var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory) {
+export var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent) {
   return function (node, view, getPos) {
     return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-      providerFactory: providerFactory
+      providerFactory: providerFactory,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent
     }).init();
   };
 };

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

@@ -4,7 +4,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 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 as _isMediaBlobUrl, getAttrsFromUrl, isImageRepresentationReady } from '@atlaskit/media-client';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
 import { replaceExternalMedia, updateAllMediaNodesAttrs, updateMediaNodeAttrs } from '../commands/helpers';
@@ -178,7 +178,7 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
 
             case 2:
               contextIdentifierProvider = _context3.sent;
-              return _context3.abrupt("return", contextIdentifierProvider && contextIdentifierProvider.objectId);
+              return _context3.abrupt("return", (contextIdentifierProvider === null || contextIdentifierProvider === void 0 ? void 0 : contextIdentifierProvider.objectId) || null);
 
             case 4:
             case "end":
@@ -266,10 +266,10 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
       var attrs = _this.getAttrs();
 
       if (!attrs || attrs.type !== 'file') {
-        return undefined;
+        return null;
       }
 
-      return attrs.__contextId;
+      return attrs.__contextId || null;
     });
 
     _defineProperty(this, "updateDimensions", function (dimensions) {

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

@@ -11,7 +11,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-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/esm/plugins/media/nodeviews/mediaNodeView/media.js

@@ -12,7 +12,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-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/esm/plugins/media/nodeviews/mediaSingle.js

@@ -20,7 +20,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 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/esm/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -29,7 +29,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 var CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 

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

@@ -19,7 +19,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';

package/dist/esm/plugins/media/styles.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from 'styled-components';
-import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common';
+import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, fileCardImageViewSelectedSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';

package/dist/esm/plugins/media/toolbar/index.js

@@ -85,13 +85,17 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     type: 'dropdown',
     title: intl.formatMessage(messages.displayThumbnail),
     options: [{
+      id: 'editor.media.view.switcher.inline',
       title: intl.formatMessage(cardMessages.inline),
       selected: false,
+      disabled: false,
       onClick: changeMediaCardToInline,
       testId: 'inline-appearance'
     }, {
+      id: 'editor.media.view.switcher.thumbnail',
       title: intl.formatMessage(messages.displayThumbnail),
       selected: true,
+      disabled: false,
       onClick: function onClick() {
         return true;
       },
@@ -145,15 +149,19 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
     type: 'dropdown',
     title: intl.formatMessage(cardMessages.inline),
     options: [{
+      id: 'editor.media.view.switcher.inline',
       title: intl.formatMessage(cardMessages.inline),
       selected: true,
+      disabled: false,
       onClick: function onClick() {
         return true;
       },
       testId: 'inline-appearance'
     }, {
+      id: 'editor.media.view.switcher.thumbnail',
       title: intl.formatMessage(messages.displayThumbnail),
       selected: false,
+      disabled: false,
       onClick: changeInlineToMediaCard,
       testId: 'thumbnail-appearance'
     }]

package/dist/esm/plugins/media/ui/MediaLinkingToolbar.js

@@ -14,7 +14,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import { ErrorMessage } from '@atlaskit/editor-common';
+import { ErrorMessage } from '@atlaskit/editor-common/ui';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import EditorUnlinkIcon from '@atlaskit/icon/glyph/editor/unlink'; // Common Translations will live here
 

package/dist/esm/plugins/media/ui/MediaPicker/DropzoneWrapper.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import { Dropzone } from '@atlaskit/media-picker';
 import PickerFacadeProvider from './PickerFacadeProvider';
-import { findOverflowScrollParent } from '@atlaskit/editor-common';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 export var DropzoneWrapper = function DropzoneWrapper(_ref) {
   var mediaState = _ref.mediaState,
       isActive = _ref.isActive,

package/dist/esm/plugins/media/ui/MediaPicker/PickerFacadeProvider.js

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { MediaPicker } from '@atlaskit/media-picker';
-import { ErrorReporter } from '@atlaskit/editor-common';
+import { ErrorReporter } from '@atlaskit/editor-common/utils';
 import PickerFacade from '../../picker-facade';
 var dummyMediaPickerObject = {
   on: function on() {},