@atlaskit/editor-core 153.1.4 → 154.0.0

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

@@ -27,7 +27,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _mediaCard = require("@atlaskit/media-card");
 
@@ -35,7 +35,7 @@ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _utils = require("../../../../utils");
+var _utils2 = require("../../../../utils");
 
 var _pluginKey = require("../../pm-plugins/plugin-key");
 
@@ -113,10 +113,10 @@ var MediaNode = /*#__PURE__*/function (_Component) {
           return;
         }
 
-        (0, _utils.setTextSelection)(_this.props.view, state.selection.from < propPos ? state.selection.from : propPos - 1, // + 3 needed for offset of the media inside mediaSingle and cursor to make whole mediaSingle selected
+        (0, _utils2.setTextSelection)(_this.props.view, state.selection.from < propPos ? state.selection.from : propPos - 1, // + 3 needed for offset of the media inside mediaSingle and cursor to make whole mediaSingle selected
         state.selection.to > propPos ? state.selection.to : propPos + 2);
       } else {
-        (0, _utils.setNodeSelection)(_this.props.view, propPos - 1);
+        (0, _utils2.setNodeSelection)(_this.props.view, propPos - 1);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleNewNode", function (props) {
@@ -270,6 +270,6 @@ var MediaNode = /*#__PURE__*/function (_Component) {
 
 exports.MediaNode = MediaNode;
 
-var _default = (0, _editorCommon.withImageLoader)(MediaNode);
+var _default = (0, _utils.withImageLoader)(MediaNode);
 
 exports.default = _default;

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

@@ -33,7 +33,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+
+var _ui = require("@atlaskit/editor-common/ui");
+
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _nodes = require("../../../utils/nodes");
 
@@ -41,7 +45,7 @@ var _WithPluginState = _interopRequireDefault(require("../../../ui/WithPluginSta
 
 var _width = require("../../width");
 
-var _utils = require("../../../utils");
+var _utils2 = require("../../../utils");
 
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 
@@ -264,10 +268,10 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           return;
         }
 
-        (0, _utils.setTextSelection)(_this.props.view, state.selection.from < propPos ? state.selection.from : propPos, // + 3 needed for offset of the media inside mediaSingle and cursor to make whole mediaSingle selected
+        (0, _utils2.setTextSelection)(_this.props.view, state.selection.from < propPos ? state.selection.from : propPos, // + 3 needed for offset of the media inside mediaSingle and cursor to make whole mediaSingle selected
         state.selection.to > propPos ? state.selection.to : propPos + 3);
       } else {
-        (0, _utils.setNodeSelection)(_this.props.view, propPos);
+        (0, _utils2.setNodeSelection)(_this.props.view, propPos);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateSize", function (width, layout) {
@@ -411,17 +415,17 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
             stateHeight = _this$state.height;
 
         if (width === null) {
-          width = stateWidth || _editorCommon.DEFAULT_IMAGE_WIDTH;
+          width = stateWidth || _ui.DEFAULT_IMAGE_WIDTH;
         }
 
         if (height === null) {
-          height = stateHeight || _editorCommon.DEFAULT_IMAGE_HEIGHT;
+          height = stateHeight || _ui.DEFAULT_IMAGE_HEIGHT;
         }
       }
 
       if (!width || !height) {
-        width = _editorCommon.DEFAULT_IMAGE_WIDTH;
-        height = _editorCommon.DEFAULT_IMAGE_HEIGHT;
+        width = _ui.DEFAULT_IMAGE_WIDTH;
+        height = _ui.DEFAULT_IMAGE_HEIGHT;
       }
 
       var mediaSingleProps = {
@@ -472,7 +476,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
         selected: isSelected,
         dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent
-      }), MediaChildren) : /*#__PURE__*/_react.default.createElement(_editorCommon.MediaSingle, mediaSingleProps, MediaChildren);
+      }), MediaChildren) : /*#__PURE__*/_react.default.createElement(_ui.MediaSingle, mediaSingleProps, MediaChildren);
     }
   }]);
   return MediaSingleNode;
@@ -522,7 +526,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     value: function createDomRef() {
       var domRef = document.createElement('div');
 
-      if (_editorCommon.browser.chrome && this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
+      if (_utils.browser.chrome && this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
         // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
         domRef.contentEditable = 'true';
@@ -596,7 +600,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
           dispatchAnalyticsEvent = _this$reactComponentP.dispatchAnalyticsEvent; // getPos is a boolean for marks, since this is a node we know it must be a function
 
       var getPos = this.getPos;
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
         renderNode: function renderNode(_ref5) {

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

@@ -55,7 +55,7 @@ var _ToolbarComponents = require("../../../../../ui/LinkSearch/ToolbarComponents
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
@@ -194,7 +194,7 @@ var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
       });
 
       var errorsList = (this.state.validationErrors || []).map(function (error, index) {
-        return /*#__PURE__*/_react.default.createElement(_editorCommon.ErrorMessage, {
+        return /*#__PURE__*/_react.default.createElement(_ui.ErrorMessage, {
           key: index
         }, error);
       });

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

@@ -35,7 +35,7 @@ var _prosemirrorTransform = require("prosemirror-transform");
 
 var _prosemirrorView = require("prosemirror-view");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _assert = _interopRequireDefault(require("assert"));
 
@@ -63,7 +63,7 @@ var _document = require("../../../utils/document");
 
 var _mediaCommon2 = require("@atlaskit/media-common");
 
-var _utils = require("../../../utils");
+var _utils2 = require("../../../utils");
 
 var _CaptionPlaceholder = require("../ui/CaptionPlaceholder");
 
@@ -314,7 +314,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
 
       if ((0, _mediaSingle.isMediaSingle)(state.schema, mediaStateWithContext.fileMimeType)) {
         (0, _mediaSingle.insertMediaSingleNode)(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert);
-      } else if ((0, _mediaCommon2.getMediaFeatureFlag)('mediaInline', (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !(0, _document.isInEmptyLine)(state) && (!(0, _mediaCommon.isInsidePotentialEmptyParagraph)(state) || (0, _utils.isInListItem)(state)) && (0, _mediaFiles.canInsertMediaInline)(state)) {
+      } else if ((0, _mediaCommon2.getMediaFeatureFlag)('mediaInline', (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !(0, _document.isInEmptyLine)(state) && (!(0, _mediaCommon.isInsidePotentialEmptyParagraph)(state) || (0, _utils2.isInListItem)(state)) && (0, _mediaFiles.canInsertMediaInline)(state)) {
         (0, _mediaFiles.insertMediaInlineNode)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
       } else {
         (0, _mediaFiles.insertMediaGroupNode)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
@@ -579,7 +579,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
       return _this.setMediaProvider(provider);
     });
     options.providerFactory.subscribe('contextIdentifierProvider', this.onContextIdentifierProvider);
-    this.errorReporter = options.errorReporter || new _editorCommon.ErrorReporter();
+    this.errorReporter = options.errorReporter || new _utils.ErrorReporter();
   }
 
   (0, _createClass2.default)(MediaPluginStateImplementation, [{
@@ -903,7 +903,7 @@ var createPlugin = function createPlugin(_schema, options, reactContext, dispatc
         // Returning true prevents that updateSelection() is getting called in the commit below:
         // @see https://github.com/ProseMirror/prosemirror-view/compare/1.18.5...1.18.6
 
-        return Boolean((_editorCommon.browser.chrome || _editorCommon.browser.safari) && clickedInsideCaptionPlaceholder);
+        return Boolean((_utils.browser.chrome || _utils.browser.safari) && clickedInsideCaptionPlaceholder);
       }
     }
   });

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = require("styled-components");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -21,7 +21,7 @@ var _mediaCard = require("@atlaskit/media-card");
 
 var _templateObject;
 
-var mediaStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s;\n    transition: box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: rgb(255, 189, 173, 0.5); /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), _editorCommon.mediaSingleSharedStyle, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _colors.N60, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _colors.B200, _editorSharedStyles.akEditorDeleteBackground, _editorSharedStyles.akEditorSelectedBorderBoldSize, _editorSharedStyles.akEditorDeleteBorder, _mediaCard.fileCardImageViewSelectedSelector, _editorSharedStyles.akEditorDeleteIconColor, _editorCommon.richMediaClassName, _mediaCard.fileCardImageViewSelector, _editorSharedStyles.akEditorDeleteIconColor, _editorCommon.richMediaClassName, _mediaCard.inlinePlayerClassName, _editorSharedStyles.akEditorDeleteIconColor, _editorCommon.richMediaClassName, _mediaCard.newFileExperienceClassName, _editorSharedStyles.akEditorDeleteIconColor, _editorSharedStyles.akEditorDeleteIconColor);
+var mediaStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s;\n    transition: box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: rgb(255, 189, 173, 0.5); /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, _colors.N60, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _colors.B200, _editorSharedStyles.akEditorDeleteBackground, _editorSharedStyles.akEditorSelectedBorderBoldSize, _editorSharedStyles.akEditorDeleteBorder, _mediaCard.fileCardImageViewSelectedSelector, _editorSharedStyles.akEditorDeleteIconColor, _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, _editorSharedStyles.akEditorDeleteIconColor, _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, _editorSharedStyles.akEditorDeleteIconColor, _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, _editorSharedStyles.akEditorDeleteIconColor, _editorSharedStyles.akEditorDeleteIconColor);
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on
  * the page, without a border, that are inside a flexbox, to no longer align to

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

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

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

@@ -25,7 +25,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
 
@@ -138,7 +138,7 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
       var formatUnlinkText = formatMessage(_messages.linkToolbarMessages.unlink);
 
       var errorsList = _this.state.validationErrors.map(function (error, index) {
-        return /*#__PURE__*/_react.default.createElement(_editorCommon.ErrorMessage, {
+        return /*#__PURE__*/_react.default.createElement(_ui.ErrorMessage, {
           key: index
         }, error);
       });

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

@@ -15,7 +15,7 @@ var _mediaPicker = require("@atlaskit/media-picker");
 
 var _PickerFacadeProvider = _interopRequireDefault(require("./PickerFacadeProvider"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 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; }
 
@@ -37,7 +37,7 @@ var DropzoneWrapper = function DropzoneWrapper(_ref) {
     var customDropzoneContainer = mediaState.options.customDropzoneContainer,
         handleDrag = mediaState.handleDrag;
     var editorHtmlElement = editorDomElement;
-    var scrollParent = appearance === 'full-page' && (0, _editorCommon.findOverflowScrollParent)(editorHtmlElement);
+    var scrollParent = appearance === 'full-page' && (0, _ui.findOverflowScrollParent)(editorHtmlElement);
     var container = customDropzoneContainer || (scrollParent ? scrollParent : editorHtmlElement);
 
     var dropzoneConfig = _objectSpread(_objectSpread({}, config), {}, {

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

@@ -29,7 +29,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _mediaPicker = require("@atlaskit/media-picker");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _pickerFacade = _interopRequireDefault(require("../../picker-facade"));
 
@@ -114,7 +114,7 @@ var PickerFacadeProvider = /*#__PURE__*/function (_React$Component) {
               case 16:
                 pickerFacadeConfig = {
                   mediaClientConfig: resolvedMediaClientConfig,
-                  errorReporter: mediaState.options.errorReporter || new _editorCommon.ErrorReporter(),
+                  errorReporter: mediaState.options.errorReporter || new _utils.ErrorReporter(),
                   featureFlags: mediaState.mediaOptions && mediaState.mediaOptions.featureFlags
                 };
                 /**

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/index.js

@@ -34,7 +34,7 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _mediaClient = require("@atlaskit/media-client");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -78,7 +78,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
       var _this$props = _this.props,
           layout = _this$props.layout,
           state = _this$props.view.state;
-      var newPct = (0, _editorCommon.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
+      var newPct = (0, _ui.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
 
       _this.setState({
         resizedPctWidth: newPct
@@ -115,7 +115,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcColumnLeftOffset", function () {
       var offsetLeft = _this.state.offsetLeft;
-      return _this.insideInlineLike ? (0, _editorCommon.calcColumnsFromPx)(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
+      return _this.insideInlineLike ? (0, _ui.calcColumnsFromPx)(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcPxWidth", function (useLayout) {
       var _this$props2 = _this.props,
@@ -164,7 +164,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
           layout = _this$props3.layout,
           lineLength = _this$props3.lineLength,
           gridSize = _this$props3.gridSize;
-      var columns = (0, _editorCommon.calcColumnsFromPx)(snapWidth, lineLength, gridSize);
+      var columns = (0, _ui.calcColumnsFromPx)(snapWidth, lineLength, gridSize);
       var columnWidth = Math.round(columns);
       var highlight = [];
 
@@ -202,7 +202,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "wrappedLayout",
     get: function get() {
-      return _editorCommon.wrappedLayouts.indexOf(this.props.layout) > -1;
+      return _ui.wrappedLayouts.indexOf(this.props.layout) > -1;
     }
   }, {
     key: "componentDidMount",
@@ -327,7 +327,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
     value: function checkLayout(oldLayout, newLayout) {
       var resizedPctWidth = this.state.resizedPctWidth;
 
-      if (_editorCommon.wrappedLayouts.indexOf(oldLayout) > -1 && newLayout === 'center' && resizedPctWidth) {
+      if (_ui.wrappedLayouts.indexOf(oldLayout) > -1 && newLayout === 'center' && resizedPctWidth) {
         var layout = this.calcUnwrappedLayout(resizedPctWidth, this.calcPxWidth(newLayout));
         this.props.updateSize(resizedPctWidth, layout);
       }

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/styled.js

@@ -9,13 +9,13 @@ exports.Wrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n  }\n"])), _editorCommon.MediaSingleDimensionHelper);
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n  }\n"])), _ui.MediaSingleDimensionHelper);
 
 exports.Wrapper = Wrapper;
 Wrapper.displayName = 'ResizerWrapper';

package/dist/cjs/plugins/media/utils/media-single.js

@@ -14,7 +14,7 @@ var _prosemirrorModel = require("prosemirror-model");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -253,7 +253,7 @@ var calcMediaPxWidth = function calcMediaPxWidth(opts) {
   } else if (layout === 'full-width') {
     return width - _editorSharedStyles.akEditorBreakoutPadding;
   } else if (calculatedPctWidth) {
-    if (_editorCommon.wrappedLayouts.indexOf(layout) > -1) {
+    if (_ui.wrappedLayouts.indexOf(layout) > -1) {
       if (calculatedResizedPctWidth) {
         if (resizedPctWidth < 50) {
           return calculatedResizedPctWidth;
@@ -276,7 +276,7 @@ var calcMediaPxWidth = function calcMediaPxWidth(opts) {
     }
 
     return Math.min(origWidth, lineLength || width);
-  } else if (layout && _editorCommon.wrappedLayouts.indexOf(layout) !== -1) {
+  } else if (layout && _ui.wrappedLayouts.indexOf(layout) !== -1) {
     var halfLineLength = Math.ceil((lineLength || width) / 2);
     return origWidth <= halfLineLength ? origWidth : halfLineLength;
   }
@@ -287,5 +287,5 @@ var calcMediaPxWidth = function calcMediaPxWidth(opts) {
 exports.calcMediaPxWidth = calcMediaPxWidth;
 
 var calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
-  return pctWidth && origWidth && origHeight && Math.ceil((0, _editorCommon.calcPxFromPct)(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
+  return pctWidth && origWidth && origHeight && Math.ceil((0, _ui.calcPxFromPct)(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
 };

package/dist/cjs/plugins/mentions/nodeviews/mention.js

@@ -24,7 +24,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _Mention = _interopRequireDefault(require("../ui/Mention"));
 
@@ -75,7 +75,7 @@ var MentionNodeView = /*#__PURE__*/function (_ReactNodeView) {
         text: text,
         accessLevel: accessLevel,
         providers: providerFactory
-      }), options && options.allowZeroWidthSpaceAfter && _editorCommon.ZERO_WIDTH_SPACE);
+      }), options && options.allowZeroWidthSpaceAfter && _utils.ZERO_WIDTH_SPACE);
     }
   }]);
   return MentionNodeView;

package/dist/cjs/plugins/mentions/styles.js

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = require("styled-components");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _mention = require("@atlaskit/editor-common/mention");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -19,5 +19,5 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var mentionsStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _editorCommon.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), _colors.N500, _editorCommon.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _editorCommon.MentionSharedCssClassName.MENTION_CONTAINER, _colors.N30A, _colors.N500);
+var mentionsStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), _colors.N500, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _colors.N30A, _colors.N500);
 exports.mentionsStyles = mentionsStyles;

package/dist/cjs/plugins/mentions/ui/Mention/index.js

@@ -29,7 +29,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _element = require("@atlaskit/mention/element");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -68,7 +68,7 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
         mentionProvider: mentionProvider
       }, actionHandlers));
     });
-    _this.providerFactory = props.providers || new _editorCommon.ProviderFactory();
+    _this.providerFactory = props.providers || new _providerFactory.ProviderFactory();
     return _this;
   }
 
@@ -84,7 +84,7 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['mentionProvider', 'profilecardProvider'],
         providerFactory: this.providerFactory,
         renderNode: this.renderWithProvider

package/dist/cjs/plugins/mobile-dimensions/actions.js

@@ -11,4 +11,5 @@ exports.MobileDimensionsActionTypes = MobileDimensionsActionTypes;
   MobileDimensionsActionTypes["SET_KEYBOARD_HEIGHT"] = "SET_KEYBOARD_HEIGHT";
   MobileDimensionsActionTypes["SET_WINDOW_HEIGHT"] = "SET_WINDOW_HEIGHT";
   MobileDimensionsActionTypes["SET_MOBILE_PADDING_TOP"] = "SET_MOBILE_PADDING_TOP";
+  MobileDimensionsActionTypes["SET_IS_EXPANDED"] = "SET_IS_EXPANDED";
 })(MobileDimensionsActionTypes || (exports.MobileDimensionsActionTypes = MobileDimensionsActionTypes = {}));

package/dist/cjs/plugins/mobile-dimensions/commands.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setWindowHeight = exports.setMobilePaddingTop = exports.setKeyboardHeight = void 0;
+exports.setWindowHeight = exports.setMobilePaddingTop = exports.setKeyboardHeight = exports.setIsExpanded = void 0;
 
 var _actions = require("./actions");
 
@@ -34,4 +34,13 @@ var setMobilePaddingTop = function setMobilePaddingTop(paddingTop) {
   });
 };
 
-exports.setMobilePaddingTop = setMobilePaddingTop;
+exports.setMobilePaddingTop = setMobilePaddingTop;
+
+var setIsExpanded = function setIsExpanded(isExpanded) {
+  return (0, _pluginFactory.createCommand)({
+    type: _actions.MobileDimensionsActionTypes.SET_IS_EXPANDED,
+    isExpanded: isExpanded
+  });
+};
+
+exports.setIsExpanded = setIsExpanded;

package/dist/cjs/plugins/mobile-dimensions/index.js

@@ -19,7 +19,8 @@ var getInitialState = function getInitialState() {
   return {
     keyboardHeight: -1,
     mobilePaddingTop: 0,
-    windowHeight: window.innerHeight
+    windowHeight: window.innerHeight,
+    isExpanded: false
   };
 };
 /**
@@ -34,6 +35,10 @@ var createPlugin = function createPlugin(dispatch) {
     key: _pluginFactory.mobileDimensionsPluginKey,
     view: function view(editorView) {
       var handleResize = function handleResize() {
+        if (rafId) {
+          window.cancelAnimationFrame(rafId);
+        }
+
         var windowInnerHeight = window.innerHeight;
         var count = 0;
 
@@ -49,7 +54,11 @@ var createPlugin = function createPlugin(dispatch) {
             } else {
               rafId = requestAnimationFrame(checkWindowHeight);
             }
+          } else {
+            rafId = requestAnimationFrame(checkWindowHeight);
           }
+
+          windowInnerHeight = window.innerHeight;
         };
 
         rafId = requestAnimationFrame(checkWindowHeight);

package/dist/cjs/plugins/mobile-dimensions/reducer.js

@@ -31,6 +31,11 @@ function _default(state, action) {
       return _objectSpread(_objectSpread({}, state), {}, {
         mobilePaddingTop: action.paddingTop
       });
+
+    case _actions.MobileDimensionsActionTypes.SET_IS_EXPANDED:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isExpanded: action.isExpanded
+      });
   }
 
   return state;

package/dist/cjs/plugins/panel/actions.js

@@ -17,7 +17,7 @@ var _analytics = require("../analytics");
 
 var _utils = require("./utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 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; }
 
@@ -74,16 +74,22 @@ var changePanelType = function changePanelType(panelType) {
     var newTr;
 
     if (allowCustomPanel) {
-      var previousColor = panelNode.node.attrs.panelColor || (0, _editorCommon.getPanelTypeBackground)(previousType);
+      var previousColor = panelNode.node.attrs.panelColor || (0, _styles.getPanelTypeBackground)(previousType);
       var previousIcon = panelNode.node.attrs.panelIcon;
+      var previousIconId = panelNode.node.attrs.panelIconId;
+      var previousIconText = panelNode.node.attrs.panelIconText;
 
       var newPanelOptions = _objectSpread({
         color: previousColor,
-        emoji: previousIcon
+        emoji: previousIcon,
+        emojiId: previousIconId,
+        emojiText: previousIconText
       }, panelOptions);
 
       newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
         panelIcon: newPanelOptions.emoji,
+        panelIconId: newPanelOptions.emojiId,
+        panelIconText: newPanelOptions.emojiText,
         panelColor: newPanelOptions.color,
         panelType: panelType
       });

package/dist/cjs/plugins/panel/index.js

@@ -161,6 +161,8 @@ var panelPlugin = function panelPlugin() {
               return insertPanelTypeWithAnalytics({
                 panelType: _adfSchema.PanelType.CUSTOM,
                 panelIcon: ':rainbow:',
+                panelIconId: '1f308',
+                panelIconText: '🌈',
                 panelColor: _colors.T50
               }, state, insert);
             }