@atlaskit/editor-core 183.1.6 → 184.0.4

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

@@ -14,13 +14,14 @@ import ToolbarMedia from './ui/ToolbarMedia';
 import { ReactMediaGroupNode } from './nodeviews/mediaGroup';
 import { ReactMediaSingleNode } from './nodeviews/mediaSingle';
 import { floatingToolbar as _floatingToolbar } from './toolbar';
-import { addAnalytics, ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '../analytics';
+import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { IconImages } from '../quick-insert/assets';
 import WithPluginState from '../../ui/WithPluginState';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { ReactMediaNode } from './nodeviews/mediaNodeView';
 import { ReactMediaInlineNode } from './nodeviews/mediaInline';
+import { stateKey } from './pm-plugins/plugin-key';
 export { insertMediaSingleNode } from './utils/media-single';
 var mediaPlugin = function mediaPlugin() {
   var _api$dependencies, _api$dependencies$fea;
@@ -29,6 +30,12 @@ var mediaPlugin = function mediaPlugin() {
   var featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
   return {
     name: 'media',
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return stateKey.getState(editorState);
+    },
     nodes: function nodes() {
       var _ref = options || {},
         _ref$allowMediaGroup = _ref.allowMediaGroup,
@@ -82,7 +89,7 @@ var mediaPlugin = function mediaPlugin() {
             nodeViews: {
               mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options),
               mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, options, api),
-              media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options),
+              media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
               mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory)
             },
             errorReporter: errorReporter,
@@ -211,9 +218,11 @@ var mediaPlugin = function mediaPlugin() {
             return /*#__PURE__*/React.createElement(IconImages, null);
           },
           action: function action(insert, state) {
+            var _api$dependencies$ana;
             var pluginState = pluginKey.getState(state);
             pluginState.showMediaPicker();
-            return addAnalytics(state, insert(''), {
+            var tr = insert('');
+            api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions.attachAnalyticsEvent({
               action: ACTION.OPENED,
               actionSubject: ACTION_SUBJECT.PICKER,
               actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
@@ -221,7 +230,8 @@ var mediaPlugin = function mediaPlugin() {
                 inputMethod: INPUT_METHOD.QUICK_INSERT
               },
               eventType: EVENT_TYPE.UI
-            });
+            })(tr);
+            return tr;
           }
         }];
       },
@@ -235,7 +245,7 @@ var mediaPlugin = function mediaPlugin() {
           allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
           allowAltTextOnImages: options && options.allowAltTextOnImages,
           altTextValidator: options && options.altTextValidator
-        });
+        }, api);
       }
     }
   };

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/ColorPickerButton/index.js

@@ -159,8 +159,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
   };
   var title = props.title || '';
   var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  var buttonStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 6px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", "px;\n      height: ", "px;\n      padding: 0;\n    }\n  "])), "var(--ds-background-neutral, transparent)", /* If custom props size height, override the button base height property */
-  !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", DEFAULT_BORDER_COLOR, borderRadius(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || 14, ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || 14);
+  var buttonStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 6px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n    }\n  "])), "var(--ds-background-neutral, transparent)", /* If custom props size height, override the button base height property */
+  !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", DEFAULT_BORDER_COLOR, borderRadius(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px');
   return jsx("div", {
     css: colorPickerButtonWrapper
   }, jsx(Tooltip, {

package/dist/esm/ui/ConfigPanel/Fields/ColorPicker.js

@@ -10,8 +10,6 @@ import { Field } from '@atlaskit/form';
 import { hexToEditorTableChartsPaletteColor } from '@atlaskit/editor-palette';
 import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
 import { validate as _validate } from '../utils';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
 import { requiredIndicator } from './common/RequiredIndicator';
 import { headingSizes } from '@atlaskit/theme/typography';
 import FieldMessages from '../FieldMessages';
@@ -368,13 +366,10 @@ var ColorPicker = function ColorPicker(props) {
     showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames,
     cols: EXPANDED_COLOR_PICKER_COLUMNS,
     alignX: "right",
-    placement: "ConfigPanel"
-    // TODO: Migrate away from gridSize
-    // Recommendation: Update types of size object to accept string width/height and then replace gridSize with tokens
-    ,
+    placement: "ConfigPanel",
     size: {
-      width: 3 * gridSize(),
-      height: 3 * gridSize()
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)"
     }
   }) : jsx(ColorPickerButton, {
     title: title,
@@ -385,8 +380,8 @@ var ColorPicker = function ColorPicker(props) {
     alignX: "right",
     placement: "ConfigPanel",
     size: {
-      width: 3 * gridSize(),
-      height: 3 * gridSize()
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)"
     }
   });
 };

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';