@atlaskit/editor-core 183.1.6 → 184.0.0

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

@@ -13,11 +13,19 @@ import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-comm
 import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
 import { SelectionBasedNodeView } from '../../../../nodeviews';
-import WithPluginState from '../../../../ui/WithPluginState';
-import { pluginKey as widthPluginKey } from '../../../width';
 import MediaNode from './media';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { isMediaBlobUrlFromAttrs } from '../../utils/media-common';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+var MediaNodeWithProviders = function MediaNodeWithProviders(_ref) {
+  var pluginInjectionApi = _ref.pluginInjectionApi,
+    innerComponent = _ref.innerComponent;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  return innerComponent({
+    width: widthState
+  });
+};
 var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   _inherits(MediaNodeView, _SelectionBasedNodeVi);
   var _super = _createSuper(MediaNodeView);
@@ -29,8 +37,8 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "renderMediaNodeWithState", function (mediaProvider, contextIdentifierProvider) {
-      return function (_ref) {
-        var editorWidth = _ref.width;
+      return function (_ref2) {
+        var editorWidth = _ref2.width;
         var getPos = _this.getPos;
         var mediaOptions = _this.reactComponentProps.mediaOptions;
         var selection = _this.view.state.selection;
@@ -74,15 +82,13 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         });
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "renderMediaNodeWithProviders", function (_ref2) {
-      var mediaProvider = _ref2.mediaProvider,
-        contextIdentifierProvider = _ref2.contextIdentifierProvider;
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        editorView: _this.view,
-        plugins: {
-          width: widthPluginKey
-        },
-        render: _this.renderMediaNodeWithState(mediaProvider, contextIdentifierProvider)
+    _defineProperty(_assertThisInitialized(_this), "renderMediaNodeWithProviders", function (_ref3) {
+      var mediaProvider = _ref3.mediaProvider,
+        contextIdentifierProvider = _ref3.contextIdentifierProvider;
+      var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
+      return /*#__PURE__*/React.createElement(MediaNodeWithProviders, {
+        pluginInjectionApi: pluginInjectionApi,
+        innerComponent: _this.renderMediaNodeWithState(mediaProvider, contextIdentifierProvider)
       });
     });
     return _this;
@@ -145,12 +151,14 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
 }(SelectionBasedNodeView);
 export var ReactMediaNode = function ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory) {
   var mediaOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var pluginInjectionApi = arguments.length > 4 ? arguments[4] : undefined;
   return function (node, view, getPos) {
     var hasIntlContext = true;
     return new MediaNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       eventDispatcher: eventDispatcher,
       providerFactory: providerFactory,
-      mediaOptions: mediaOptions
+      mediaOptions: mediaOptions,
+      pluginInjectionApi: pluginInjectionApi
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 };

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

@@ -20,11 +20,9 @@ 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';
 import { setNodeSelection, setTextSelection } from '../../../utils';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
-import { stateKey as mediaPluginKey, MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
+import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -37,6 +35,7 @@ import ReactNodeView from '../../../nodeviews/ReactNodeView';
 import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from 'prosemirror-state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 var MediaSingleNode = /*#__PURE__*/function (_Component) {
   _inherits(MediaSingleNode, _Component);
   var _super = _createSuper(MediaSingleNode);
@@ -224,11 +223,11 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       (_this$captionPlaceHol = _this.captionPlaceHolderRef.current) === null || _this$captionPlaceHol === void 0 ? void 0 : _this$captionPlaceHol.click();
     });
     _defineProperty(_assertThisInitialized(_this), "displayGrid", function (visible, gridType, highlight) {
-      var _pluginInjectionApi$d, _pluginInjectionApi$d2;
+      var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3;
       var _this$props = _this.props,
         pluginInjectionApi = _this$props.pluginInjectionApi,
         view = _this$props.view;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.grid) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions.displayGrid(view)({
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.grid) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.actions) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.displayGrid(view)({
         visible: visible,
         gridType: gridType,
         highlight: highlight
@@ -405,6 +404,40 @@ _defineProperty(MediaSingleNode, "defaultProps", {
 });
 _defineProperty(MediaSingleNode, "displayName", 'MediaSingleNode');
 export { MediaSingleNode as default };
+var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
+  var pluginInjectionApi = _ref5.pluginInjectionApi,
+    mediaProvider = _ref5.mediaProvider,
+    contextIdentifierProvider = _ref5.contextIdentifierProvider,
+    node = _ref5.node,
+    getPos = _ref5.getPos,
+    mediaOptions = _ref5.mediaOptions,
+    view = _ref5.view,
+    fullWidthMode = _ref5.fullWidthMode,
+    selected = _ref5.selected,
+    eventDispatcher = _ref5.eventDispatcher,
+    dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent,
+    forwardRef = _ref5.forwardRef;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media']),
+    widthState = _useSharedPluginState.widthState,
+    mediaState = _useSharedPluginState.mediaState;
+  return jsx(MediaSingleNode, {
+    width: widthState.width,
+    lineLength: widthState.lineLength,
+    node: node,
+    getPos: getPos,
+    mediaProvider: mediaProvider,
+    contextIdentifierProvider: contextIdentifierProvider,
+    mediaOptions: mediaOptions,
+    view: view,
+    fullWidthMode: fullWidthMode,
+    selected: selected,
+    eventDispatcher: eventDispatcher,
+    mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    forwardRef: forwardRef,
+    pluginInjectionApi: pluginInjectionApi
+  });
+};
 var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(MediaSingleNodeView, _ReactNodeView);
   var _super2 = _createSuper(MediaSingleNodeView);
@@ -505,36 +538,22 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return jsx(WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref5) {
-          var mediaProvider = _ref5.mediaProvider,
-            contextIdentifierProvider = _ref5.contextIdentifierProvider;
-          return jsx(WithPluginState, {
-            editorView: _this4.view,
-            plugins: {
-              width: widthPluginKey,
-              mediaPluginState: mediaPluginKey
-            },
-            render: function render(_ref6) {
-              var width = _ref6.width,
-                mediaPluginState = _ref6.mediaPluginState;
-              return jsx(MediaSingleNode, {
-                width: width.width,
-                lineLength: width.lineLength,
-                node: _this4.node,
-                getPos: getPos,
-                mediaProvider: mediaProvider,
-                contextIdentifierProvider: contextIdentifierProvider,
-                mediaOptions: mediaOptions,
-                view: _this4.view,
-                fullWidthMode: fullWidthMode,
-                selected: _this4.isNodeSelected,
-                eventDispatcher: eventDispatcher,
-                mediaPluginState: mediaPluginState,
-                dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-                forwardRef: forwardRef,
-                pluginInjectionApi: pluginInjectionApi
-              });
-            }
+        renderNode: function renderNode(_ref6) {
+          var mediaProvider = _ref6.mediaProvider,
+            contextIdentifierProvider = _ref6.contextIdentifierProvider;
+          return jsx(MediaSingleNodeWrapper, {
+            pluginInjectionApi: pluginInjectionApi,
+            mediaProvider: mediaProvider,
+            contextIdentifierProvider: contextIdentifierProvider,
+            node: _this4.node,
+            getPos: getPos,
+            mediaOptions: mediaOptions,
+            view: _this4.view,
+            fullWidthMode: fullWidthMode,
+            selected: _this4.isNodeSelected,
+            eventDispatcher: eventDispatcher,
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+            forwardRef: forwardRef
           });
         }
       });

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

@@ -4,8 +4,8 @@ import { css } from '@emotion/react';
 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';
-export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, 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\n        ", " !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: ", "; /* 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"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), fileCardImageViewSelectedSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
+import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
+export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, box-shadow 0s;\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\n        ", " !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: ", "; /* 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"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
 
 /* `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

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

@@ -187,7 +187,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
   }];
   return items;
 };
-var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, getEditorFeatureFlags) {
+var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, widthPluginDependencyApi, getEditorFeatureFlags) {
   var mediaSingle = state.schema.nodes.mediaSingle;
   var allowResizing = options.allowResizing,
     allowLinking = options.allowLinking,
@@ -224,7 +224,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     });
   }
   if (allowAdvancedToolBarOptions) {
-    toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables)));
+    toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPluginDependencyApi, allowResizing, allowResizingInTables)));
     if (toolbarButtons.length) {
       toolbarButtons.push({
         type: 'separator'
@@ -304,6 +304,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
 };
 export var floatingToolbar = function floatingToolbar(state, intl) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var pluginInjectionApi = arguments.length > 3 ? arguments[3] : undefined;
   var _state$schema$nodes = state.schema.nodes,
     media = _state$schema$nodes.media,
     mediaInline = _state$schema$nodes.mediaInline,
@@ -369,7 +370,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       var element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(".".concat(MediaSingleNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, getEditorFeatureFlags);
+    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width, getEditorFeatureFlags);
   }
   return _objectSpread(_objectSpread({}, baseToolbar), {}, {
     items: items,

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

@@ -31,6 +31,7 @@ import { handlePaste as handlePasteTable } from '@atlaskit/editor-tables/utils';
 import { extractSliceFromStep } from '../../../utils/step';
 import { pluginKey as stateKey, createPluginState } from './plugin-factory';
 export { pluginKey as stateKey } from './plugin-factory';
+import { hasParentNodeOfType } from 'prosemirror-utils';
 export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFlags, cardOptions, sanitizePrivateContent, providerFactory) {
   var atlassianMarkDownParser = new MarkdownTransformer(schema, md);
   function getMarkdownSlice(text, openStart, openEnd) {
@@ -178,6 +179,11 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFl
           var placeholder = state.schema.nodes.placeholder;
           var isPastingTextInsidePlaceholderText = ((_state$doc$resolve$no = state.doc.resolve(state.selection.$anchor.pos).nodeAfter) === null || _state$doc$resolve$no === void 0 ? void 0 : _state$doc$resolve$no.type) === placeholder;
 
+          // Don't add closeHistory if we're pasting over layout columns, as we will appendTransaction
+          // to cleanup the layout's structure and we want to keep the paste and re-structuring as
+          // one event.
+          var isPastingOverLayoutColumns = hasParentNodeOfType(state.schema.nodes.layoutColumn)(state.selection);
+
           // don't add closeHistory call if we're pasting a table, as some tables may involve additional
           // appendedTransactions to repair them (if they're partial or incomplete) and we don't want
           // to split those repairing transactions in prosemirror-history when they're being added to the
@@ -193,7 +199,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFl
             });
             return tableExists;
           });
-          if (!isPastingTextInsidePlaceholderText && !isPastingTable) {
+          if (!isPastingTextInsidePlaceholderText && !isPastingTable && !isPastingOverLayoutColumns) {
             tr.setMeta(betterTypePluginKey, true);
           }
           addLinkMetadata(view.state.selection, tr, {

package/dist/esm/test-utils.js

@@ -45,6 +45,9 @@ function lightProcessPluginsList(editorPlugins) {
       var _acc$nodes;
       (_acc$nodes = acc.nodes).push.apply(_acc$nodes, _toConsumableArray(editorPlugin.nodes()));
     }
+    if (editorPlugin.contentComponent) {
+      acc.contentComponents.push(editorPlugin.contentComponent);
+    }
     if (editorPlugin.onEditorViewStateUpdated) {
       acc.onEditorViewStateUpdatedCallbacks.push(editorPlugin.onEditorViewStateUpdated);
     }
@@ -53,6 +56,7 @@ function lightProcessPluginsList(editorPlugins) {
     nodes: [],
     marks: [],
     plugins: [],
+    contentComponents: [],
     onEditorViewStateUpdatedCallbacks: []
   });
 }
@@ -77,7 +81,8 @@ export var createPMSchemaAndPlugins = function createPMSchemaAndPlugins() {
     return {
       plugins: plugins,
       schema: schema,
-      onEditorViewStateUpdatedCallbacks: editorConfig.onEditorViewStateUpdatedCallbacks
+      onEditorViewStateUpdatedCallbacks: editorConfig.onEditorViewStateUpdatedCallbacks,
+      editorConfig: editorConfig
     };
   };
 };

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -27,7 +27,7 @@ import WithFlash from '../../WithFlash';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import WidthEmitter from '../../WidthEmitter';
-import { GRID_GUTTER } from '../../../plugins/grid';
+import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 import messages from '../../../messages';

package/dist/esm/ui/Appearance/FullPage/FullPage.js

@@ -13,7 +13,7 @@ import { jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
 import { fullPageEditorWrapper } from './StyledComponents';
-import { ContextPanelWidthProvider } from '../../ContextPanel/context';
+import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
 export var FullPageEditor = /*#__PURE__*/function (_React$Component) {

package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, useTheme } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
-import { ContextPanelConsumer } from '../../ContextPanel/context';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { ClickAreaBlock } from '../../Addon';

package/dist/esm/ui/Appearance/FullPage/FullPageToolbar.js

@@ -8,7 +8,7 @@ import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/Fin
 import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper';
 import Toolbar from '../../Toolbar';
 import { mainToolbarStyle, mainToolbarIconBeforeStyle, mainToolbarFirstChildStyle, mainToolbarSecondChildStyle, nonCustomToolbarWrapperStyle, customToolbarWrapperStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
-import { ContextPanelConsumer } from '../../ContextPanel/context';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import messages from './messages';
 import { ToolbarArrowKeyNavigationProvider } from '../../ToolbarArrowKeyNavigationProvider';
 export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {

package/dist/esm/ui/ContentStyles/index.js

@@ -3,7 +3,7 @@ var _templateObject;
 /** @jsx jsx */
 import React, { useMemo } from 'react';
 import { jsx, css, useTheme } from '@emotion/react';
-import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles, resizerStyles } from '@atlaskit/editor-common/styles';
+import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles, resizerStyles, gridStyles } from '@atlaskit/editor-common/styles';
 import { editorFontSize } from '@atlaskit/editor-shared-styles';
 import { unsupportedStyles } from '../../plugins/unsupported-content/styles';
 import { telepointerStyle } from '../../plugins/collab-edit/styles';
@@ -22,7 +22,6 @@ import { mentionsStyles } from '../../plugins/mentions/styles';
 import { emojiStyles } from '../../plugins/emoji/styles';
 import { textFormattingStyles } from '../../plugins/text-formatting/styles';
 import { placeholderTextStyles } from '../../plugins/placeholder-text/styles';
-import { gridStyles } from '../../plugins/grid/styles';
 import { linkStyles } from '../../plugins/hyperlink/styles';
 import { extensionStyles } from '../../plugins/extension/ui/styles';
 import { expandStyles } from '../../plugins/expand/ui/styles';

package/dist/esm/ui/ContextPanel/index.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -7,6 +8,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["actions"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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; }
@@ -18,10 +20,9 @@ import { css, jsx } from '@emotion/react';
 import Transition from 'react-transition-group/Transition';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorSwoopCubicBezier, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorBreakoutPadding, akEditorContextPanelWidth, ATLASSIAN_NAVIGATION_HEIGHT } from '@atlaskit/editor-shared-styles';
-import { ContextPanelConsumer } from './context';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import WithPluginState from '../WithPluginState';
 import { pluginKey as contextPanelPluginKey } from '../../plugins/context-panel';
-import { pluginKey as widthPluginKey } from '../../plugins/width';
 import WithEditorActions from '../WithEditorActions';
 import { getChildBreakoutModes } from '../../utils/document';
 var ANIM_SPEED_MS = 500;
@@ -57,6 +58,13 @@ export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
       mounted: false,
       currentPluginContent: undefined
     });
+    _defineProperty(_assertThisInitialized(_this), "focusEditor", function () {
+      var editorView = _this.props.editorView;
+      if (editorView && !editorView.hasFocus()) {
+        var _editorView$focus;
+        (_editorView$focus = editorView.focus) === null || _editorView$focus === void 0 ? void 0 : _editorView$focus.call(editorView);
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "showPluginContent", function () {
       var pluginContent = _this.props.pluginContent;
       var currentPluginContent = _this.state.currentPluginContent;
@@ -82,7 +90,8 @@ export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
         timeout: _this.state.mounted ? ANIM_SPEED_MS : 0,
         in: isVisible,
         mountOnEnter: true,
-        unmountOnExit: true
+        unmountOnExit: true,
+        onExiting: _this.focusEditor
       }, children);
     });
     return _this;
@@ -114,8 +123,9 @@ export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
         var broadcastWidth = _ref.broadcastWidth,
           broadcastPosition = _ref.broadcastPosition,
           positionedOverEditor = _ref.positionedOverEditor;
+        var contextPanelWidth = visible ? width : 0;
         var newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width) : false;
-        broadcastWidth(visible ? width : 0);
+        broadcastWidth(contextPanelWidth);
         (newPosition && visible) !== positionedOverEditor && broadcastPosition(newPosition && visible);
         return jsx("div", {
           css: [panel, !visible && panelHidden,
@@ -146,55 +156,56 @@ export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return SwappableContentArea;
 }(React.PureComponent);
-var ContextPanel = /*#__PURE__*/function (_React$Component) {
-  _inherits(ContextPanel, _React$Component);
-  var _super2 = _createSuper(ContextPanel);
-  function ContextPanel() {
-    _classCallCheck(this, ContextPanel);
-    return _super2.apply(this, arguments);
+
+// TODO: ED-17837 We have this workaround because we do
+// not have access to the pluginInjectionApi at this location.
+// It might be that we need to inject the pluginInjectionApi
+// via context so that we can use it in this file (similar to
+// WithEditorActions). To be investigated further.
+// @ts-ignore
+var widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: function getState(state) {
+    return state['widthPlugin$'];
   }
-  _createClass(ContextPanel, [{
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-      return jsx(WithEditorActions, {
-        render: function render(actions) {
-          var eventDispatcher = actions._privateGetEventDispatcher();
-          var editorView = actions._privateGetEditorView();
-          if (!eventDispatcher) {
-            return jsx(SwappableContentArea, _extends({
-              editorView: editorView
-            }, _this3.props));
-          }
-          return jsx(WithPluginState, {
-            eventDispatcher: eventDispatcher,
-            plugins: {
-              contextPanel: contextPanelPluginKey,
-              widthState: widthPluginKey
-            },
-            render: function render(_ref2) {
-              var contextPanel = _ref2.contextPanel,
-                _ref2$widthState = _ref2.widthState,
-                widthState = _ref2$widthState === void 0 ? {
-                  width: 0,
-                  containerWidth: 0,
-                  lineLength: akEditorDefaultLayoutWidth
-                } : _ref2$widthState;
-              var firstContent = contextPanel && contextPanel.contents.find(Boolean);
-              var editorWidth = _objectSpread(_objectSpread({}, widthState), {}, {
-                contentBreakoutModes: editorView ? getChildBreakoutModes(editorView.state.doc, editorView.state.schema) : []
-              });
-              return jsx(SwappableContentArea, _extends({}, _this3.props, {
-                editorView: editorView,
-                pluginContent: firstContent,
-                editorWidth: editorWidth
-              }));
-            }
-          });
-        }
+};
+function ContextPanelWithActions(_ref2) {
+  var actions = _ref2.actions,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var eventDispatcher = actions._privateGetEventDispatcher();
+  var editorView = actions._privateGetEditorView();
+  if (!eventDispatcher) {
+    return jsx(SwappableContentArea, _extends({
+      editorView: editorView
+    }, props));
+  }
+  return jsx(WithPluginState, {
+    eventDispatcher: eventDispatcher,
+    plugins: {
+      contextPanel: contextPanelPluginKey,
+      widthState: widthPluginKey
+    },
+    render: function render(_ref3) {
+      var contextPanel = _ref3.contextPanel,
+        widthState = _ref3.widthState;
+      var firstContent = contextPanel && contextPanel.contents.find(Boolean);
+      var editorWidth = _objectSpread(_objectSpread({}, widthState), {}, {
+        contentBreakoutModes: editorView ? getChildBreakoutModes(editorView.state.doc, editorView.state.schema) : []
       });
+      return jsx(SwappableContentArea, _extends({}, props, {
+        editorView: editorView,
+        pluginContent: firstContent,
+        editorWidth: editorWidth
+      }));
     }
-  }]);
-  return ContextPanel;
-}(React.Component);
-export { ContextPanel as default };
+  });
+}
+export default function ContextPanel(props) {
+  return jsx(WithEditorActions, {
+    render: function render(actions) {
+      return jsx(ContextPanelWithActions, _extends({
+        actions: actions
+      }, props));
+    }
+  });
+}

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

@@ -10,7 +10,6 @@ import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
 import EditorAlignImageRight from '@atlaskit/icon/glyph/editor/align-image-right';
 import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
 import { alignAttributes } from '../../utils/rich-media-utils';
-import { pluginKey as widthPluginKey } from '../../plugins/width';
 import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { addAnalytics } from '../../plugins/analytics/utils';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, ACTION } from '../../plugins/analytics';
@@ -61,7 +60,7 @@ var getNodeWidth = function getNodeWidth(node, schema) {
   }
   return node.firstChild && node.firstChild.attrs.width || node.attrs.width;
 };
-var makeAlign = function makeAlign(layout, nodeType) {
+var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi) {
   return function (state, dispatch) {
     var _ref = state.selection,
       node = _ref.node;
@@ -70,7 +69,7 @@ var makeAlign = function makeAlign(layout, nodeType) {
     if (!dispatch) {
       return false;
     }
-    var widthPluginState = widthPluginKey.getState(state);
+    var widthPluginState = widthPluginDependencyApi === null || widthPluginDependencyApi === void 0 ? void 0 : widthPluginDependencyApi.sharedState.currentState();
     if (!node || node.type !== nodeType || !widthPluginState) {
       return false;
     }
@@ -100,7 +99,7 @@ var makeAlign = function makeAlign(layout, nodeType) {
     return true;
   };
 };
-var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType) {
+var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi) {
   return icons.map(function (toolbarItem) {
     var id = toolbarItem.id,
       value = toolbarItem.value;
@@ -110,7 +109,7 @@ var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl,
       icon: toolbarItem.icon,
       title: intl.formatMessage(layoutToMessages[value]),
       selected: layout === value,
-      onClick: makeAlign(value, nodeType)
+      onClick: makeAlign(value, nodeType, widthPluginDependencyApi)
     };
   });
 };
@@ -118,17 +117,17 @@ var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2,
   var nodes = _ref2.nodes;
   return hasParentNodeOfType([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand].concat(_toConsumableArray(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
 };
-var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, allowResizing, allowResizingInTables) {
-  var allowWrapping = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
-  var allowAlignment = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
+var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, allowResizing, allowResizingInTables) {
+  var allowWrapping = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
+  var allowAlignment = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
   var selection = state.selection;
   if (!(selection instanceof NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
     return [];
   }
   var layout = selection.node.attrs.layout;
-  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType) : [];
-  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType) : [];
-  var breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType) : [];
+  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi) : [];
+  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi) : [];
+  var breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi) : [];
   var items = [].concat(_toConsumableArray(alignmentToolbarItems), _toConsumableArray(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), _toConsumableArray(wrappingToolbarItems), _toConsumableArray(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), _toConsumableArray(breakOutToolbarItems));
   return items;
 };

package/dist/esm/ui/Resizer/index.js

@@ -10,7 +10,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
-import { gridTypeForLayout } from '../../plugins/grid';
+import { gridTypeForLayout } from '@atlaskit/editor-common/utils';
 import { snapTo, handleSides } from './utils';
 import { richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';